Doormile Express - Operator Dispatch Console & Deliveries Portal

A high-fidelity, real-time dispatcher command center and order-delivery console built using React, React-Leaflet, TanStack Query, and Material UI.

This platform enables real-time visual tracking of delivery partners, responsive slot scheduling adjustments, route matching analysis, and direct order status management from a cohesive operational interface.

---

🚀 Key Features

📍 1. Real-Time Rider Live GPS Mapping

• Interactive Leaflet Maps: Displays live geolocated pins for every active and idle rider across Coimbatore.
• Polished Glassmorphism Popovers: High-fidelity Map Popups loaded with crucial metrics (Active Orders, Contact number, monospaced coordinates, and last-seen timestamps).
• Dynamic Pulsing Live Indicator: Double-ring animated indicator reflecting current partner connectivity state (pulsing green #16a34a for active, red #dc2626 for idle).
• Rider Routes & Planned Path Overlay: Parallel Indigo/Emerald rails representing planned paths vs actual tracks side-by-side using perpendicular polyline offsets.

🕒 2. Five-Wave Dispatch Slot Bucketing

• Flexible Scheduling Boundaries: Segmented timing filters supporting precise fractional-hour offsets (e.g., Slot 1 ends at 12:30 PM, Slot 2 starts at 12:20 PM).
• Default Operational Waves:
  • Slot 1 (Morning Rush): 8:00 AM → 12:30 PM
  • Slot 2 (Lunch Wave): 12:20 PM → 3:00 PM
  • Slot 3 (Afternoon Wave): 3:00 PM → 7:00 PM
  • Slot 4 (Evening Wave): 7:00 PM → 8:00 PM
  • Slot 5 (Night Wave): 8:00 PM → Midnight
• State Validation & Caching: Employs an array-length-validated state cache (Key version v6 in LocalStorage) that auto-invalidates older 3-slot schema outputs during reload or hot-deployments to eliminate UI sync race conditions.

📦 3. Live Deliveries Portal & Update Status Modal

• Dynamic Filter Tabs: Filter deliveries based on active operational states (pending, accepted, on road, completed).
• Interactive Status Dialog: Positioned directly underneath the Amount inputs, allowing dispatchers to dynamically select and execute delivery state changes rather than submitting hardcoded records.

---

🛠️ Technology Stack

• Framework: React 18
• State Management: Redux Toolkit & React Context
• Server Cache/Queries: @tanstack/react-query
• Mapping Libraries: leaflet, react-leaflet, Custom Polyline Offset modules
• Component Styling: MUI v5 (Material UI) & custom vanilla CSS design systems
• Date/Time Parsers: dayjs

---

⚙️ Environment Variables Config (.env)

Configure the following variables in your root .env or .env.development file to supply runtime secrets and API targets:

REACT_APP_VERSION=v2.1.0
GENERATE_SOURCEMAP=false

# Backend Services Endpoint URLs
REACT_APP_DOORMILE_URL=https://api.doormile.com/api/v1

No Maps API key is required — maps and address search run on free Leaflet/OpenStreetMap (Nominatim + OSRM), not Google Maps.

---

🏃 Getting Started & Local Development

1. Prerequisite Installations

Ensure that Node.js (v16+ recommended) is installed on your computer.

2. Install Project Dependencies

Use either npm or yarn to fetch the required modules defined in the lockfiles:

# If using npm
npm install

# If using yarn
yarn install

3. Run Development Server

Launches the console locally with real-time hot-reloading:

# Start standard environment
npm start

# Start dev configuration (loads .env.development)
npm run start:dev

Open http://localhost:3000 in your web browser to view the console.

---

📦 Production Builds & Verification

To compile the application down to highly optimized, static production files, perform the following commands:

1. Compile the Bundle

npm run build

(Or yarn build). This compiles all files and outputs them to the build/ directory.

2. Verify static pages locally

To test the production compilation locally before deploying:

npx serve -s build

Click on the output Network addresses (e.g. http://localhost:3000 or the local IP address) to view the compiled pages.

Note

If you run the static build server locally and see a blank white page, ensure you have added "homepage": "." to your package.json to properly configure relative Webpack asset paths.