Doormile Console — Admin

A modern, corporate logistics console for Doormile, a last-mile / courier delivery operation. Built with React 18 + Vite + Material-UI v5, themed around the Doormile brand red #C01227.

Quick start

npm install
npm run dev      # http://localhost:3000
npm run build    # production build → dist/
npm run preview  # preview the production build

What's inside

A clean, data-dense but breathable corporate shell — fixed red top header (search, notifications, messages, profile) + collapsible red sidebar (260px ↔ 78px icon rail) + light #FAFAFB content area — wrapping 27 screens:

Area	Screens
Overview	Dashboard
Orders	Orders list · Order Details (tracking + timeline) · Create Order · Create Multiple Orders · Assign Orders
Deliveries	Deliveries (expandable products, status tabs)
Network	Tenants · Create Client · Customers · Create Customer · Pricing · Riders · Create Rider · Edit Rider
Reports	Order Summary · Order Details · Riders Summary · Riders Logs (live map)
Finance	Invoices · Invoice Preview (printable A4) · Requests
Account	User Profile
Auth & states	Login · 404 · 500 · Under Construction · Coming Soon

Design system

• Brand red #C01227 (lighter #F8E0E3 → darker #7E0B17), white-on-red header/sidebar.
• Status palette — success #00A854, warning #FFBF00, info #00A2AE, error #F04134.
• Public Sans type scale, 6–10px radii, soft 0 1px 4px card shadows, and a signature red glow on primary CTAs.
• All tuning lives in src/theme/ (palette.js, typography.js, shadows.js, componentsOverride.js).

Project structure

src/
  theme/          Doormile red theme + MUI component overrides
  layout/         MainLayout (red header + collapsible sidebar) · MinimalLayout
  menu/           sidebar nav config
  components/     PageHeader, StatCard, StatusChip, MainCard, EmptyState,
                  UserAvatar, MapPlaceholder, Logo, charts/ (Area, Donut)
  data/mock.js    static demo data powering every screen
  pages/          all 27 screens (lazy-loaded)
  App.jsx         router · main.jsx  app entry

Charts and maps are dependency-free SVG placeholders (components/charts, MapPlaceholder) — swap in Recharts / Leaflet / Google Maps when wiring real data. All data is mocked in src/data/mock.js; there is no backend.