# Doormile CRM

A modern, corporate customer relationship management system for **Doormile**, a last-mile logistics and courier delivery operation. Built with **React 18 + Vite + Material-UI v5**, themed around the Doormile brand red `#C01227`.

## Quick Start

```bash
# Install dependencies
npm install

# Run the development server (default port: 5173 or similar)
npm run dev

# Build the project for production
npm run build

# Preview the production build locally
npm run preview
```

## Application Structure & Pages

Doormile CRM features a clean, responsive layout consisting of a **collapsible sidebar** and a **header panel**, wrapping the following key modules:

| Route Path | Page Component | Description |
| --- | --- | --- |
| `/dashboard` | `Dashboard.jsx` | Overview of registered clients, active contracts, total parcel volume, status donuts, and quick-view charts. |
| `/tenants` | `Tenants.jsx` | Management view for clients, including expandable details (parcel volume, logistics segments, transit routes, and coordinates map link). |
| `/survey` | `Survey.jsx` | Provider survey records mapping competitors, branch locations, and rate-per-kg answers in an aligned grid layout. |
| `/pricing` | `Pricing.jsx` | Pricing matrix slabs and logistics carrier rates management with search and active-provider selectors. |
| `/bookings` | `Bookings.jsx` | Courier bookings creation and management dialogs, along with pricing checks. |
| `/app-users` | `TeamUsers.jsx` | Team member list, user roles configuration, and initial permission setup. |
| `/settings` | `Settings.jsx` | Preferences dashboard covering organization profiles, system notification switches, and security/password updates. |

## Design System

- **Brand red** `#C01227` (`lighter #F8E0E3` and `darker #7E0B17`) representing the primary action theme color.
- **Status palette** — success `#00A854`, warning `#FFBF00`, info `#00A2AE`, error `#F04134`.
- **Public Sans** typography scale, clean border-radii (`8px` to `16px`), soft shadows, and subtle responsive layouts (flex-based grid column alignment).
- Theme configuration resides in `src/theme/`.

## Project Folders

```
src/
  components/     Reusable UI widgets (PageHeader, StatCard, StatusChip, EmptyState)
  layout/         MainLayout (header + collapsible sidebar) & MinimalLayout
  menu/           Sidebar navigation mappings (`navItems.jsx`)
  pages/          CRM modules and page components (dashboard, tenants, survey, pricing, bookings, team, settings)
  theme/          Doormile custom theme configurations and component style overrides
  utils/          API fetching wrapper client
  App.jsx         App router and route definitions
  main.jsx        Application entry point
```