55 lines
2.7 KiB
Markdown
55 lines
2.7 KiB
Markdown
# 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
|
|
```
|