Doormile/doormile_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the ui changes and readme file updates

Browse Source
This commit is contained in:
dharaneesh-r
2026-07-14 13:29:03 +05:30
parent b66f5cf085
commit 808d4a2fdb
7 changed files with 351 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
README.md
View File

@@ -1,50 +1,54 @@
# Doormile Console — Admin
# Doormile CRM
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`.
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
## Quick Start
```bash
# Install dependencies
npm install
npm run dev # http://localhost:3000
npm run build # production build → dist/
npm run preview # preview the production build
# 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
```
## What's inside
## Application Structure & Pages
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**:
Doormile CRM features a clean, responsive layout consisting of a **collapsible sidebar** and a **header panel**, wrapping the following key modules:
| 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 |
| 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
## Design System
- **Brand red** `#C01227` (`lighter #F8E0E3 → darker #7E0B17`), white-on-red header/sidebar.
- **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** 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`).
- **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 structure
## Project Folders
```
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
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
```
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.