# 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

```bash
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.