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

# 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