51 lines
2.4 KiB
Markdown
51 lines
2.4 KiB
Markdown
# 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.
|