dharaneesh-r
5165e9d697
Renames the operator assistant to "Doormile AI / Operations Copilot" and
moves it from a header Popover to a portalled slide-over panel.
- DoormileAI/ — trigger, panel, welcome, message, composer and shared
primitives. Assistant turns are deliberately NOT bubbles; that is what
keeps this reading as part of the dashboard rather than a bolted-on
chatbot.
- pageContext.js — route-aware suggested questions. Every suggestion is a
phrasing the matcher actually resolves; a chip that returns "I can't
answer that" is worse than no chip.
- DoormileAI.css — panel styling, animation, responsive and reduced-motion.
Selectors that style an Astryx Stack are written `.dai-root .x` because
`padding={0}` emits a StyleX atomic at the same specificity as a bare
class, so a single class can lose on stylesheet order.
- Messages are JSON round-tripped through localStorage, so icons are
referenced by key rather than stored as React elements — an element does
not survive the trip and the rehydrated value crashes the next render.
- Errors now render a polished state and log the real error to the console,
instead of surfacing raw API messages in a toast.
The route, sidebar entry and i18n key for the old standalone Assistant page
are removed with it — this is a header surface, not a page.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
#16a34afor active, red#dc2626for 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
v6in 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 yourpackage.jsonto properly configure relative Webpack asset paths.