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

Compare commits

base: Doormile:33b2c96a5bec1861cd1b3b7ebdaf39d417a19b7b
Branches Tags
Doormile:main
...
compare: Doormile:main
Branches Tags
Doormile:main

5 Commits
33b2c96a5b ... main

Author SHA1 Message Date
dharaneesh-r
428e336553 changes regarding the mui to astryx tempalate based design 2026-07-23 18:35:49 +05:30
Thiru-tenext
ef0b14d254 feat: Implement date range picker and enhance order assignment functionality 
- Added DateRangePicker component for selecting date ranges in OrderAssignment.
- Updated OrderAssignment to fetch bookings based on selected date range.
- Enhanced status handling in OrderAssignment with new status chip display logic.
- Refactored KPI card implementation in RiderRoutes and Riders to use shared StatCard component.
- Improved ProfileDrawer to retain rider data during close transition.
- Fixed minor text formatting in Routing component.
 2026-07-09 16:28:45 +05:30
Thiru-tenext
f53578c520 update Riders UI layout, refine status chip styling, and remove API documentation file 2026-07-08 18:39:57 +05:30
Thiru-tenext
e650ecf88b Merge branch 'main' of https://gitapp.workolik.com/Doormile/doormile_hub_console 2026-07-08 16:45:06 +05:30
Thiru-tenext
13ef766ca6 Enhance dashboard API to support date range filtering and update KPI definitions for improved clarity 2026-07-08 16:45:02 +05:30
35 changed files with 4944 additions and 6652 deletions
Expand all files Collapse all files

889
docs/Doormile-Hub-Console-API-Reference.md
View File

@@ -1,889 +0,0 @@
# Doormile Hub Console — Frontend Integration Guide
**Base URL:** `https://api.doormile.com`
**Auth:** Bearer token in `Authorization` header on every authenticated request
**Content-Type:** `application/json` on all POST / PATCH calls
## How the flow works
1. Staff opens the console → Login page
2. `POST /api/v1/hub/login` → receives JWT + hub context
3. Store token + hub context in localStorage
4. Every page reads hub name/city from stored context (no extra call)
5. Every API call sends `Authorization: Bearer <token>`
6. On 401 → clear localStorage → redirect to `/login`
---
## 1. Authentication
### POST /api/v1/hub/login
No auth header needed.
Request body:
```json
{
"email": "hub.coimbatore@doormile.in",
"password": "password123"
}
```
Response:
```json
{
"success": true,
"token": "eyJhbGci...",
"hub": {
"hubid": 1,
"hubname": "Coimbatore Jupiter Hub",
"hubtype": "sorting_center",
"city": "Coimbatore",
"capacity": 50
},
"staff": {
"displayname": "Coimbatore Hub Staff",
"email": "hub.coimbatore@doormile.in",
"role": 6
},
"is_doormile_staff": true
}
```
What to store in localStorage after login:
```js
localStorage.setItem('hub_token', data.token)
localStorage.setItem('hub_context', JSON.stringify(data.hub))
localStorage.setItem('hub_staff', JSON.stringify(data.staff))
localStorage.setItem('hub_is_doormile', String(data.is_doormile_staff))
```
Test accounts:
| Email | Password | Hub | Access |
|---|---|---|---|
| hub.coimbatore@doormile.in | password123 | Coimbatore Jupiter Hub | Full (Doormile staff) |
| hub.hyderabad@doormile.in | password123 | Hyderabad hub | Full (Doormile staff) |
| hub.bangalore@doormile.in | password123 | Bangalore hub | Full (Doormile staff) |
| hub.chennai@doormile.in | password123 | Chennai hub | Full (Doormile staff) |
| hub@kpmtravels.in | password123 | Hub 1 | Restricted (partner — no hub management) |
---
## 2. Dashboard
### GET /api/v1/hub/dashboard
Returns live KPI stats for the logged-in staff's hub.
Response:
```json
{
"success": true,
"data": {
"parcels_received_today": 142,
"milers_available": 6,
"milers_on_duty": 12,
"pending_pickups": 8,
"batches_sent_today": 3,
"exceptions": 2
}
}
```
Which UI element uses which field:
| Dashboard card | Field |
|---|---|
| Total Parcels Received | `parcels_received_today` |
| Available Milers | `milers_available` |
| Milers on Duty | `milers_on_duty` |
| Pending Pickups | `pending_pickups` |
| Batches Sent Today | `batches_sent_today` |
| Needs Checking | `exceptions` |
**Note:** Hub name shown in the header/title comes from localStorage (`hub_context.hubname`) — not from this endpoint. No extra call needed.
---
## 3. Inbound — Receive Parcels
### GET /api/v1/hub/inbound/today
Returns all parcels inbounded at this hub today. Now returns `sendername`, `originname`, `destinationname`, `temperature` (readable names instead of raw IDs and pincodes).
Response:
```json
{
"success": true,
"data": [
{
"bookingid": 15,
"trackingnumber": "DM-882201",
"sendername": "Acme Corp",
"originname": "Mumbai Hub",
"destinationname": "Dwarka Sec 12, Coimbatore",
"weight": "2.4 kg",
"condition": "Good",
"temperature": "N/A",
"shelf": "Zone A (Shelf 1)",
"inboundedat": "2026-07-04T09:15:00Z"
}
],
"total": 1
}
```
### POST /api/v1/hub/bookings/:id/inbound
Scan a parcel in. `:id` is the booking/consignment ID.
Request body:
```json
{
"tracking_id": "DM-882201",
"condition": "Good",
"temperature": "N/A",
"shelf": "Zone A (Shelf 1)",
"weight": "2.4 kg"
}
```
Condition values: `Good` · `Damaged Box` · `Wet / Crushed` · `Missing Label`
Temperature: Free text — "4.1°C" for cold chain items, "N/A" for dry goods
Response:
```json
{
"success": true,
"data": {
"bookingid": 15,
"trackingnumber": "DM-882201",
"recommended_shelf": "Zone A (Shelf 1)",
"status": "At_Hub"
}
}
```
Shelf recommendation logic (backend handles this automatically):
- Condition contains Damaged / Wet / Missing → Exception Area
- Temperature is not N/A → Zone C (Cold Room)
- Otherwise → Zone A or Zone B based on destination
Error — tracking ID not found:
```json
{
"success": false,
"message": "booking not found"
}
```
HTTP 404.
---
## 4. Order Assignment — Pickup Requests
### GET /api/v1/hub/bookings/unassigned
Returns all pending pickup requests for this hub's city.
Response:
```json
{
"success": true,
"data": [
{
"bookingid": 21,
"customerName": "Ramesh K.",
"pickupaddress": "Gandhipuram, Coimbatore",
"deliveryaddress": "Hitech City, Hyderabad",
"packagedescription": "Small Box, 2kg",
"createdat": "2026-07-04T08:45:00Z",
"status": "Pending_Pickup"
}
],
"total": 3
}
```
For assigning a miler to these bookings, see **Section 14 — Hub Assignment Override**.
---
## 5. Dispatch & Batches
### GET /api/v1/hub/batches
Returns all outgoing batches for this hub.
Response:
```json
{
"success": true,
"data": [
{
"tripsheetid": 1,
"batchlabel": "BATCH-9281",
"batchkind": "transfer",
"destinationlabel": "Mumbai Hub (BOM-02)",
"vehicle": "Truck DL-01-BZ-8055",
"itemcount": 154,
"status": "Draft",
"createdat": "2026-07-04T08:00:00Z",
"dispatchtime": null
}
],
"total": 1
}
```
Status values: `Draft` → `Ready` → `Dispatched`
Batchkind values: `local` · `transfer`
### POST /api/v1/hub/batches
Create a new outgoing batch.
Request body:
```json
{
"route": "Transfer to Mumbai Hub",
"destination": "Mumbai Hub (BOM-02)",
"vehicle": "Truck DL-01-BZ-8055",
"parcels_count": 154,
"kind": "transfer"
}
```
Response:
```json
{
"success": true,
"data": {
"tripsheetid": 2,
"batchlabel": "BATCH-9282",
"status": "Draft"
}
}
```
### PATCH /api/v1/hub/batches/:id/status
Move a batch through its status flow.
Request body — mark as ready:
```json
{ "status": "Ready" }
```
Request body — dispatch (send out):
```json
{ "status": "Dispatched" }
```
Response:
```json
{
"success": true,
"data": {
"tripsheetid": 1,
"status": "Ready",
"dispatchtime": null
}
}
```
Invalid status transition → 400:
```json
{
"success": false,
"message": "invalid status"
}
```
---
## 6. Milers
### GET /api/v1/hub/milers
Returns all milers assigned to this hub, now with operational stats per miler.
Response:
```json
{
"success": true,
"data": [
{
"userid": 4,
"displayname": "Rajesh Kumar",
"phone": "+91 98765 43210",
"vehicleid": 1,
"hubid": 1,
"availabilitystatus": "Available",
"rating": 4.8,
"completedorders": 45,
"cancelledorders": 2,
"currentlat": 11.0168,
"currentlon": 76.9558,
"device_token": "fcm_token_here",
"zones": ["641001", "641012"],
"assignedload": 2,
"capacity": 30,
"pickupspending": 1,
"codcollected": 4500.00,
"codpending": 1200.00,
"checkinat": "2026-07-04T08:12:00Z",
"hoursactive": 6.4,
"isverified": true
}
],
"total": 6
}
```
Availability status values: `Available` · `Assigned` · `On_Break` · `Offline`
The `zones`, `assignedload`, `capacity`, `pickupspending`, `codcollected`, `codpending`, `checkinat`, `hoursactive`, `isverified` fields were the empty fields the Milers page was trying to show. Now populated from real data.
### POST /api/v1/admin/milers
Create (onboard) a new miler. Hub JWT is accepted here.
Request body:
```json
{
"displayname": "Muthu Kumar",
"phone": "+91 90011 22334",
"hubid": 1,
"vehicleid": 2,
"availabilitystatus": "Available"
}
```
Response:
```json
{
"success": true,
"data": {
"userid": 10,
"displayname": "Muthu Kumar"
}
}
```
### PATCH /api/v1/admin/milers/:id
Update a miler's details or status.
Request body (any subset of fields):
```json
{
"availabilitystatus": "On_Break",
"hubid": 2
}
```
### DELETE /api/v1/admin/milers/:id
Remove a miler from the roster.
Response:
```json
{
"success": true,
"message": "miler removed"
}
```
---
## 7. Routing — Where Does It Go?
### GET /api/v1/hub/routing/:trackingno
Scan a parcel and get its sort destination. `:trackingno` is the tracking number scanned at the sort station.
Response:
```json
{
"success": true,
"data": {
"trackingno": "DM-TRK-0015",
"destination": "Peelamedu, 641004",
"recommendedshelf": "Zone B",
"nexthop": "Local delivery",
"condition": "Good",
"iscoldchain": false,
"weight": "2.4 kg",
"customername": "Ramesh K.",
"bookingid": 15
}
}
```
`nexthop` values: `Local delivery` · `Transfer to Mumbai Hub` (or whichever destination hub).
Use `recommendedshelf` to show the big shelf indicator UI.
Error — tracking number not found → 404. Show a "Parcel not found" error state.
```json
{
"success": false,
"message": "parcel not found"
}
```
---
## 8. Rider Routes
### GET /api/v1/hub/rider-routes
Returns all milers at this hub with their planned stops today.
### GET /api/v1/hub/milers/:id/route
Returns the planned stops for a single miler. `:id` is the miler user ID.
Response (same `data[]` shape for both; the single-miler endpoint returns one entry):
```json
{
"success": true,
"data": [
{
"mileruserid": 4,
"milername": "Rajesh Kumar",
"mode": "pickup",
"totalstops": 5,
"completedstops": 2,
"totaldistance_km": 12.4,
"stops": [
{ "seq": 1, "address": "Gandhipuram, Coimbatore", "lat": 11.0168, "lon": 76.9558, "items": 1, "bookingid": 20, "status": "completed", "eta_minutes": 0 },
{ "seq": 2, "address": "RS Puram, Coimbatore", "lat": 11.001, "lon": 76.951, "items": 2, "bookingid": 21, "status": "pending", "eta_minutes": 12 }
]
}
]
}
```
`mode` values: `pickup` · `delivery`
Stop status values: `pending` · `in_progress` · `completed`
Pass `stops[].lat/lon` to OSRM to draw the route line — the OSRM call stays client-side.
---
## 9. Live Trucks
### GET /api/v1/hub/tripsheets/in-transit
Returns transfer trucks currently in transit, with interpolated live positions.
Poll this every 5 seconds alongside miler locations.
Response:
```json
{
"success": true,
"data": [
{
"tripsheetid": 3,
"tripsheetno": "DM-TS-0003",
"label": "Chennai Jupiter Hub → Coimbatore Jupiter Hub",
"originlat": 13.0827, "originlon": 80.2707,
"destlat": 11.0168, "destlon": 76.9558,
"currentlat": 12.1, "currentlon": 78.9,
"status": "In_Transit",
"progresspct": 40,
"vehicleno": "TN-04-AX-8822",
"itemcount": 154,
"eta_minutes": 180
}
]
}
```
`currentlat/lon` gives the truck's position on the map. Replace the fake animated truck with these real coordinates.
---
## 10. Arriving Vehicles
### GET /api/v1/hub/inbound/vehicles
Returns trucks arriving at this hub (Dashboard → "Trucks Arriving" table).
Response:
```json
{
"success": true,
"data": [
{
"vehicleno": "TN-04-AX-8822",
"origin": "Chennai Jupiter Hub",
"tripsheetid": 3,
"status": "On the way",
"eta": "2 hrs 30 min",
"unloadedpct": 0,
"itemcount": 154
}
]
}
```
Status values: `On the way` · `Unloading`
(Dispatched maps to `On the way`, Arrived maps to `Unloading`.)
---
## 11. Activity Feed
### GET /api/v1/hub/activity?limit=10
Returns a real event feed for this hub (UNION across 4 sources: inbound, dispatch, exceptions, sorting).
Response:
```json
{
"success": true,
"data": [
{ "time": "2026-07-04T11:24:00Z", "type": "exception", "text": "Exception raised: Damaged on DM-TRK-999999" },
{ "time": "2026-07-04T11:22:00Z", "type": "inbound", "text": "Received parcel DM-TRK-999999 from Coimbatore Jupiter Hub" },
{ "time": "2026-07-04T11:20:00Z", "type": "dispatch", "text": "Dispatched batch DM-TS-0003 to Mumbai Hub" }
],
"total": 3
}
```
Type values: `inbound` · `dispatch` · `exception` · `sorting`
Use `type` to pick the icon color — same color scheme as the existing mock.
---
## 12. Zones
### GET /api/v1/hub/zones
Returns the delivery zone breakdown for this hub (Dashboard → "Delivery Areas").
Response:
```json
{
"success": true,
"data": [
{ "zone": "641001", "zonename": "Gandhipuram", "parcels": 12, "milers": 2, "status": "Active" },
{ "zone": "641004", "zonename": "Peelamedu", "parcels": 8, "milers": 1, "status": "Active" },
{ "zone": "641012", "zonename": "Jupiter Nagar","parcels": 3, "milers": 0, "status": "Need Milers" }
]
}
```
Status values: `Active` · `Need Milers` — use this to color the status chip.
---
## 13. Notifications
### GET /api/v1/hub/notifications
Returns notifications for the header bell icon, generated from real events.
Response:
```json
{
"success": true,
"data": [
{ "id": 1, "title": "Exception: Damaged", "type": "exception", "time": "3 min ago", "read": false },
{ "id": 2, "title": "Truck arriving from Chennai Hub", "type": "inbound", "time": "5 min ago", "read": false },
{ "id": 3, "title": "Pickup waiting 30+ min", "type": "alert", "time": "12 min ago", "read": false }
],
"total": 3
}
```
Type values: `exception` · `inbound` · `warning` · `alert`
### PATCH /api/v1/hub/notifications/:id/read
Mark a notification as read.
Response:
```json
{ "success": true }
```
On bell click → `GET /hub/notifications`. On item click → `PATCH /hub/notifications/:id/read`, then mark it read in local state.
---
## 14. Hub Assignment Override
The old admin assign endpoint (`POST /admin/bookings/:id/assign-miler`) returned **403** for hub staff. Two new hub-scoped endpoints replace it.
### POST /api/v1/hub/bookings/:id/assign-miler
Manual assign — hub staff picks the miler.
Request body:
```json
{ "mileruserid": 4 }
```
Response:
```json
{
"success": true,
"data": {
"bookingid": 21,
"mileruserid": 4,
"milername": "Rajesh Kumar",
"status": "Miler_Assigned"
}
}
```
Use this on the **Pickup Requests** page when staff manually selects a miler from the dialog.
### POST /api/v1/hub/bookings/:id/auto-assign
Auto-assign — AI engine picks the miler.
Request body:
```json
{}
```
Response (success):
```json
{
"success": true,
"data": {
"mileruserid": 4,
"milername": "Rajesh Kumar",
"distance_km": 0.4
}
}
```
Response (no miler) — HTTP 422:
```json
{
"success": false,
"message": "No eligible miler found in range"
}
```
Response (timeout) — HTTP 202:
```json
{
"success": true,
"message": "assignment in progress"
}
```
Use this for the **Auto-Assign** bulk button. Loop over selected booking IDs and call this for each one.
**Backend implementation notes:** shared `AssignMilerToBooking()` service (`booking_assignment_service.go`), `TryAssignOnce()` single-attempt wrapper on `crm_assignment`, `assignedbyuserid` is nullable for hub-initiated assignments, and `AdminAssignMiler` now sends FCM to the miler.
---
## 15. Hub Management (Doormile staff only)
These endpoints return 403 for partner accounts (`is_doormile_staff = false`).
Use the `is_doormile_staff` flag from localStorage to show/hide the UI for these.
### GET /api/v1/hub/hubs
List all hubs in the logged-in staff's city. Now includes `lat`/`lon` for map pins.
Response:
```json
{
"success": true,
"data": [
{
"hubid": 1,
"hubname": "Coimbatore Jupiter Hub",
"hubtype": "sorting_center",
"capacity": 50,
"status": "active",
"has_staff": true,
"lat": 11.0168,
"lon": 76.9558
},
{
"hubid": 2,
"hubname": "Coimbatore Spoke 1",
"hubtype": "spoke",
"capacity": 50,
"status": "active",
"has_staff": false,
"lat": 11.0210,
"lon": 76.9610
}
]
}
```
Use `lat/lon` to place hub pins on the Live Map.
### POST /api/v1/hub/hubs
Create a new hub in the staff's city.
Request body:
```json
{
"hubname": "Coimbatore RS Puram Hub",
"hubtype": "spoke",
"capacity": 30,
"contact": "+91 98765 00000",
"address": "RS Puram, Coimbatore",
"pincode": "641002"
}
```
**Note:** `applocationid` (city) is set automatically from the logged-in staff's hub — cannot be overridden.
### POST /api/v1/hub/staff
Create a hub staff login for any hub in the city.
Request body:
```json
{
"hubid": 2,
"email": "hub.rspuram@doormile.in",
"password": "securepassword",
"displayname": "RS Puram Hub Staff",
"tenantid": null
}
```
Set `tenantid` to the partner's tenant ID for partner accounts, `null` for Doormile staff.
Response:
```json
{
"success": true,
"data": {
"staffid": 6,
"email": "hub.rspuram@doormile.in",
"hubid": 2
}
}
```
---
## Error response shape
All errors follow the same shape:
```json
{
"success": false,
"message": "human readable error description"
}
```
| HTTP code | Meaning |
|---|---|
| 400 | Bad request — invalid body or status transition |
| 401 | Token expired or missing → redirect to /login |
| 202 | Accepted — async assignment in progress |
| 403 | Forbidden — partner account trying Doormile-only endpoint |
| 404 | Resource not found (booking ID, miler ID, tracking no etc.) |
| 422 | Unprocessable — no eligible miler found in range |
| 500 | Server error — show generic "something went wrong" toast |
---
## Page-to-endpoint map (quick reference)
| Page | Endpoints called |
|---|---|
| Login | POST /hub/login |
| Dashboard | GET /hub/dashboard · GET /hub/inbound/vehicles · GET /hub/activity · GET /hub/zones |
| Receive Parcels | GET /hub/inbound/today · POST /hub/bookings/:id/inbound |
| Pickup Requests | GET /hub/bookings/unassigned · GET /hub/milers · POST /hub/bookings/:id/assign-miler · POST /hub/bookings/:id/auto-assign |
| Where Does It Go? (Routing) | GET /hub/routing/:trackingno |
| Dispatch | GET /hub/batches · POST /hub/batches · PATCH /hub/batches/:id/status |
| Milers | GET /hub/milers · POST /admin/milers · PATCH /admin/milers/:id · DELETE /admin/milers/:id |
| Rider Routes | GET /hub/rider-routes · GET /hub/milers/:id/route |
| Live Map | GET /admin/milers/locations (poll 5s) · GET /hub/tripsheets/in-transit (poll 5s) · GET /hub/hubs |
| Header — Notifications | GET /hub/notifications · PATCH /hub/notifications/:id/read |
| Hub Settings | GET /hub/hubs · POST /hub/hubs · POST /hub/staff |
---
## Frontend implementation notes
**Token storage:**
```js
// On login success:
localStorage.setItem('hub_token', response.token)
localStorage.setItem('hub_context', JSON.stringify(response.hub))
localStorage.setItem('hub_staff', JSON.stringify(response.staff))
localStorage.setItem('hub_is_doormile', String(response.is_doormile_staff))
// On every API call:
headers: { 'Authorization': `Bearer ${localStorage.getItem('hub_token')}` }
// On logout or 401:
localStorage.clear()
navigate('/login')
```
**Show hub name dynamically (not hardcoded):**
```js
const hub = JSON.parse(localStorage.getItem('hub_context'))
// hub.hubname → "Coimbatore Jupiter Hub"
// hub.city → "Coimbatore"
// hub.hubid → 1
```
**Hide hub management UI for partners:**
```js
const isDoormile = localStorage.getItem('hub_is_doormile') === 'true'
// Show "Add New Hub" / "Add Staff" buttons only if isDoormile === true
// KPM partner account gets false → those buttons hidden
```
**On 401 — token expired, force re-login:**
```js
if (response.status === 401) {
localStorage.clear()
window.location.href = '/login'
}
```
**Polling intervals:**
- Miler locations → every 5 seconds
- Truck positions → every 5 seconds (same call cycle)
- Dashboard stats → every 30 seconds
- Notifications → every 60 seconds
---
*All endpoints live at `https://api.doormile.com` · Hub Console Backend v1.0 complete*

1508
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@@ -10,14 +10,15 @@
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^9.1.1",
"@mui/material": "^9.1.1",
"@astryxdesign/cli": "^0.1.8",
"@astryxdesign/core": "^0.1.8",
"@astryxdesign/theme-neutral": "^0.1.8",
"@stylexjs/stylex": "^0.19.0",
"dayjs": "^1.11.21",
"leaflet": "^1.9.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"lucide-react": "^1.25.0",
"react": "^19.2.8",
"react-dom": "^19.2.8",
"react-leaflet": "^4.2.1",
"react-router-dom": "^6.30.4",
"xlsx": "^0.18.5"

BIN
public/navbarLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

11
src/App.jsx
View File

@@ -1,7 +1,5 @@
import { Suspense, lazy } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { Box, CircularProgress } from '@mui/material';
import MainLayout from '@/layout/MainLayout';
import MinimalLayout from '@/layout/MinimalLayout';
import ProtectedRoute from '@/auth/ProtectedRoute';
@@ -11,9 +9,10 @@ const load = (factory) => {
return (
<Suspense
fallback={
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }}>
<CircularProgress color="primary" />
</Box>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }}>
<div className="spinner" style={{ width: '32px', height: '32px', border: '3px solid #f1f5f9', borderTop: '3px solid #0A1317', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
<style>{`@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`}</style>
</div>
}
>
<C />
@@ -34,6 +33,8 @@ export default function App() {
>
<Route path="/dashboard" element={load(() => import('@/pages/Dashboard'))} />
<Route path="/inbound" element={load(() => import('@/pages/operations/Inbound'))} />
{/* TEMPORARILY DISABLED: These pages still contain MUI imports which crashes Vite.
They will be re-enabled once they are migrated to Astryx. */}
<Route path="/routing" element={load(() => import('@/pages/operations/Routing'))} />
<Route path="/dispatch" element={load(() => import('@/pages/operations/Dispatch'))} />
<Route path="/tracking" element={load(() => import('@/pages/operations/TrackingMap'))} />

65
src/api/hub.js
View File

@@ -16,8 +16,18 @@ export function login(email, password) {
}
// ── 2. Dashboard ─────────────────────────────────────────────────────────────
export function getDashboard() {
return http.get(`${V1}/hub/dashboard`);
/**
* Live KPI stats for the logged-in staff's hub.
* @param {string} [from] Inclusive range start, YYYY-MM-DD. Range-scoped fields
* (parcels received, batches sent, exceptions) aggregate
* over [from, to]; live fields (milers available/on-duty,
* pending pickups) always reflect "now".
* @param {string} [to] Inclusive range end, YYYY-MM-DD.
* When omitted the backend defaults to today.
*/
export function getDashboard(from, to) {
const qs = from && to ? `?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}` : '';
return http.get(`${V1}/hub/dashboard${qs}`);
}
/**
@@ -34,6 +44,23 @@ export function getInboundToday() {
return http.get(`${V1}/hub/inbound/today`);
}
/**
* Parcels received in a date range (inclusive), for the "Receive Parcels" history view.
* @param {string} from YYYY-MM-DD (inclusive)
* @param {string} to YYYY-MM-DD (inclusive of the whole day)
* Backend contract: GET /hub/inbound?from=&to= → same row shape as /hub/inbound/today.
* Until that route ships, we transparently fall back to /hub/inbound/today so the page
* keeps working (it just shows today regardless of the picked range).
*/
export async function getInboundRange(from, to) {
try {
return await http.get(`${V1}/hub/inbound?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`);
} catch (err) {
if (err?.status === 404) return http.get(`${V1}/hub/inbound/today`);
throw err;
}
}
/**
* Scan a parcel in.
* @param {number|string} bookingId Booking / consignment ID (the path :id).
@@ -48,6 +75,24 @@ export function getUnassignedBookings() {
return http.get(`${V1}/hub/bookings/unassigned`);
}
/**
* All pickup requests (bookings) created in a date range (inclusive), each with its
* current assignment status — powers the "Pickup Requests" history view.
* @param {string} from YYYY-MM-DD (inclusive)
* @param {string} to YYYY-MM-DD (inclusive of the whole day)
* Backend contract: GET /hub/bookings?from=&to= → array of bookings with a `status`
* field (e.g. "pending" | "assigned" | ...) plus the same fields /bookings/unassigned
* returns. Until it ships, we fall back to /bookings/unassigned so the page keeps working.
*/
export async function getBookingsRange(from, to) {
try {
return await http.get(`${V1}/hub/bookings?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`);
} catch (err) {
if (err?.status === 404) return http.get(`${V1}/hub/bookings/unassigned`);
throw err;
}
}
/** Manual assign — hub staff picks the miler (hub-scoped, accepts the hub JWT). */
export function assignMiler(bookingId, mileruserid) {
return http.post(`${V1}/hub/bookings/${bookingId}/assign-miler`, { mileruserid });
@@ -63,6 +108,22 @@ export function getBatches() {
return http.get(`${V1}/hub/batches`);
}
/**
* Outgoing batches created in a date range (inclusive) — powers the Dispatch history view.
* @param {string} from YYYY-MM-DD (inclusive)
* @param {string} to YYYY-MM-DD (inclusive of the whole day)
* Backend contract: GET /hub/batches?from=&to= → same row shape as GET /hub/batches,
* filtered by createdat in the range. Falls back to /hub/batches until that ships.
*/
export async function getBatchesRange(from, to) {
try {
return await http.get(`${V1}/hub/batches?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`);
} catch (err) {
if (err?.status === 404) return http.get(`${V1}/hub/batches`);
throw err;
}
}
/**
* Create an outgoing batch.
* @param {object} payload { route, destination, vehicle, parcels_count, kind }

16
src/components/Button.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { Button as AstryxButton } from '@astryxdesign/core/Button';
// Wraps Astryx's Button so `variant="primary"` (the default) renders in the
// Doormile brand red instead of the theme's neutral accent — primary CTAs
// stand out as "the one thing to click" while every other accent-driven
// control (focus rings, selected nav, ghost/outline buttons) keeps the
// theme's neutral dark. Scoped via a CSS custom property on this element only,
// not a global token flip, so nothing else on the page is affected.
export default function Button({ variant = 'primary', style, ...props }) {
const brandStyle =
variant === 'primary'
? { '--color-accent': 'var(--color-brand)', '--color-on-accent': 'var(--color-on-brand)' }
: null;
return <AstryxButton variant={variant} style={brandStyle ? { ...brandStyle, ...style } : style} {...props} />;
}

208
src/components/DateRangePicker.jsx Normal file
View File

@@ -0,0 +1,208 @@
import { useState } from 'react';
import dayjs from 'dayjs';
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
import Button from '@/components/Button';
export const DATE_FMT = 'YYYY-MM-DD';
const BRAND = 'var(--color-brand)';
const DAY_LABELS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
function MonthGrid({ view, start, end, max, onDay }) {
const gridStart = view.startOf('month').subtract(view.startOf('month').day(), 'day');
const cells = Array.from({ length: 42 }, (_, i) => gridStart.add(i, 'day'));
return (
<div style={{ width: 224 }}>
<div style={{ textAlign: 'center', fontWeight: 700, fontSize: '0.82rem', color: '#212529', marginBottom: '6px' }}>
{view.format('MMMM YYYY')}
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: '2px' }}>
{DAY_LABELS.map((d, i) => (
<div key={i} style={{ textAlign: 'center', fontSize: '0.62rem', fontWeight: 600, color: '#B0B5BA', padding: '2px 0' }}>
{d}
</div>
))}
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
{cells.map((d) => {
const inMonth = d.month() === view.month();
const isStart = start && d.isSame(start, 'day');
const isEnd = end && d.isSame(end, 'day');
const isEndpoint = isStart || isEnd;
const inRange = start && end && d.isAfter(start, 'day') && d.isBefore(end, 'day');
const isToday = d.isSame(dayjs(), 'day');
const disabled = max && d.isAfter(max, 'day');
return (
<div key={d.format(DATE_FMT)} style={{
display: 'flex', justifyContent: 'center',
backgroundColor: inRange ? 'var(--color-brand-muted)' : 'transparent',
borderTopLeftRadius: isStart ? 6 : 0, borderBottomLeftRadius: isStart ? 6 : 0,
borderTopRightRadius: isEnd ? 6 : 0, borderBottomRightRadius: isEnd ? 6 : 0
}}>
<button
type="button"
disabled={disabled}
onClick={() => onDay(d)}
style={{
width: 28, height: 28, margin: '1px', border: 'none', cursor: disabled ? 'default' : 'pointer',
borderRadius: 6, fontSize: '0.72rem', fontFamily: 'inherit',
fontWeight: isEndpoint ? 700 : 500,
color: disabled ? '#D5D9DD' : isEndpoint ? '#fff' : inMonth ? '#3C4043' : '#C4C9CE',
backgroundColor: isEndpoint ? BRAND : 'transparent',
boxShadow: isToday && !isEndpoint ? `inset 0 0 0 1.5px ${BRAND}` : 'none',
transition: 'background-color .12s',
}}
onMouseOver={(e) => { if(!disabled && !isEndpoint) e.target.style.backgroundColor = 'var(--color-brand-muted)'; }}
onMouseOut={(e) => { if(!disabled && !isEndpoint) e.target.style.backgroundColor = 'transparent'; }}
>
{d.date()}
</button>
</div>
);
})}
</div>
</div>
);
}
function RangeCalendar({ from, to, maxDate, onSelect }) {
const [view, setView] = useState(dayjs(to || from || undefined).startOf('month'));
const [anchorDate, setAnchorDate] = useState(null);
const start = from ? dayjs(from) : null;
const end = to ? dayjs(to) : null;
const max = maxDate ? dayjs(maxDate) : null;
const handleDay = (d) => {
if (!anchorDate) {
setAnchorDate(d);
onSelect(d.format(DATE_FMT), d.format(DATE_FMT));
} else {
const a = anchorDate;
const lo = d.isBefore(a) ? d : a;
const hi = d.isBefore(a) ? a : d;
onSelect(lo.format(DATE_FMT), hi.format(DATE_FMT));
setAnchorDate(null);
}
};
return (
<div style={{ padding: '12px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<button onClick={() => setView((v) => v.subtract(1, 'month'))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#9AA0A6' }}>
<ChevronLeft size={16} />
</button>
<button onClick={() => setView((v) => v.add(1, 'month'))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#9AA0A6' }}>
<ChevronRight size={16} />
</button>
</div>
<div style={{ display: 'flex', gap: '16px' }}>
<MonthGrid view={view} start={start} end={end} max={max} onDay={handleDay} />
<div className="hide-on-mobile">
<MonthGrid view={view.add(1, 'month')} start={start} end={end} max={max} onDay={handleDay} />
</div>
</div>
<style>{`
@media (max-width: 600px) {
.hide-on-mobile { display: none; }
}
`}</style>
</div>
);
}
const PRESETS = [
{ label: 'Today', days: 1 },
{ label: 'Last 7 days', days: 7 },
{ label: 'Last 30 days', days: 30 }
];
export default function DateRangePicker({ value, onChange, maxDate }) {
const today = dayjs().format(DATE_FMT);
const max = maxDate ?? today;
const [open, setOpen] = useState(false);
const from = value?.from || today;
const to = value?.to || today;
const invalid = dayjs(to).isBefore(dayjs(from));
const dayCount = (() => {
const f = dayjs(from);
const t = dayjs(to);
if (!f.isValid() || !t.isValid() || t.isBefore(f)) return 1;
return t.diff(f, 'day') + 1;
})();
const applyPreset = (days) => onChange({ from: dayjs().subtract(days - 1, 'day').format(DATE_FMT), to: today });
const isPreset = (days) => to === today && from === dayjs().subtract(days - 1, 'day').format(DATE_FMT);
return (
<div style={{ position: 'relative' }}>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
{PRESETS.map((p) => {
const active = isPreset(p.days);
return (
<button
key={p.label}
onClick={() => applyPreset(p.days)}
style={{
height: 36, fontSize: '0.825rem', fontWeight: 600, borderRadius: 8, padding: '0 12px',
backgroundColor: active ? BRAND : '#F1F5F9', color: active ? '#fff' : '#475569',
border: 'none', cursor: 'pointer',
boxShadow: active ? '0 4px 10px rgba(192,18,39,0.15)' : 'none',
}}
>
{p.label}
</button>
);
})}
<Button
onClick={() => setOpen(!open)}
variant="outline"
style={{
height: 36, padding: '0 12px', borderRadius: 8, fontWeight: 600, fontSize: '0.825rem',
color: '#334155', borderColor: invalid ? '#EF4444' : '#E2E8F0', backgroundColor: '#fff',
justifyContent: 'flex-start'
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#334155' }}>
<CalendarIcon size={16} />
<span>{dayjs(from).format('DD MMM YYYY')}</span>
<ArrowRight size={16} color="#94A3B8" />
<span>{dayjs(to).format('DD MMM YYYY')}</span>
</div>
</Button>
</div>
{open && (
<>
<div style={{ position: 'fixed', inset: 0, zIndex: 999 }} onClick={() => setOpen(false)} />
<div style={{
position: 'absolute', top: '100%', right: 0, marginTop: '8px', zIndex: 1000,
backgroundColor: '#fff', borderRadius: '12px', border: '1px solid #EEF0F2',
boxShadow: '0 8px 28px rgba(0,0,0,0.10)', overflow: 'hidden'
}}>
<div style={{ padding: '16px 16px 4px 16px' }}>
<div style={{ fontWeight: 700, fontSize: '0.9rem', color: '#212529' }}>Select date range</div>
<div style={{ fontSize: '0.75rem', color: '#8A9099' }}>
{dayjs(from).format('DD MMM')} – {dayjs(to).format('DD MMM YYYY')} · {dayCount} {dayCount === 1 ? 'day' : 'days'}
</div>
</div>
<RangeCalendar from={from} to={to} maxDate={max} onSelect={(f, t) => onChange({ from: f, to: t })} />
<div style={{ borderTop: '1px solid #EEF0F2', padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<button onClick={() => applyPreset(1)} style={{ background: 'none', border: 'none', color: '#5F6368', fontWeight: 700, cursor: 'pointer', fontSize: '0.875rem' }}>
Reset to today
</button>
<Button variant="primary" onClick={() => setOpen(false)}>
Done
</Button>
</div>
</div>
</>
)}
</div>
);
}

73
src/components/Logo.jsx
View File

@@ -1,44 +1,67 @@
import { Box, Typography } from '@mui/material';
// ==============================|| DOORMILE WORDMARK LOGO ||============================== //
// Uses the brand wordmark asset (white PNG). `onDark` shows it as-is on dark/red
// surfaces; on light surfaces it is recoloured to near-black. `compact` (e.g. the
// collapsed sidebar) renders just the square "D" badge, since the wordmark won't fit.
// collapsed navbar rail) pairs the round navbar mark with a "Doormile" text
// wordmark instead, since the full wordmark image is too wide to fit there.
const LOGO_SRC = '/Doormile-logo.png';
const NAVBAR_MARK_SRC = '/navbarLogo.png';
export default function Logo({ onDark = false, compact = false, height = 26, sx }) {
export default function Logo({ onDark = false, compact = false, height = 26, size = 64, style = {} }) {
if (compact) {
const mark = onDark ? '#FFFFFF' : '#C01227';
const markText = onDark ? '#C01227' : '#FFFFFF';
return (
<Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>
<Box
sx={{
width: 34,
height: 34,
borderRadius: 2,
bgcolor: mark,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 9,
// Nudges the mark so its optical centre lines up with the collapsed
// sidebar's icon column directly beneath it (measured ~2px apart —
// the two live in separate layout trees with their own padding, so
// this small correction keeps them reading as one straight column).
marginInlineStart: 2,
...style
}}
>
<img
src={NAVBAR_MARK_SRC}
// Adjacent text already announces the brand name, so the mark stays
// decorative here rather than making screen readers say it twice.
alt=""
style={{
width: size,
height: size,
display: 'block',
objectFit: 'cover',
flexShrink: 0,
boxShadow: onDark ? 'none' : '0 4px 10px rgba(192, 18, 39, 0.30)'
// Matches the mark's original standalone (pre-wordmark) visual
// size exactly — scaling only the icon, not the row, keeps the
// new "Doormile" text at its own natural size beside it.
transform: 'scale(1.4)'
}}
/>
<span
style={{
fontSize: 20,
fontWeight: 700,
letterSpacing: '-0.01em',
lineHeight: 1,
whiteSpace: 'nowrap',
color: onDark ? '#ffffff' : '#0A1317'
}}
>
<Typography sx={{ color: markText, fontWeight: 800, fontSize: '1.25rem', lineHeight: 1 }}>D</Typography>
</Box>
</Box>
Doormile
</span>
</div>
);
}
return (
<Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>
<Box
component="img"
<div style={{ display: 'flex', alignItems: 'center', ...style }}>
<img
src={LOGO_SRC}
alt="Doormile"
sx={{
style={{
height,
width: 'auto',
display: 'block',
@@ -46,6 +69,6 @@ export default function Logo({ onDark = false, compact = false, height = 26, sx
filter: 'brightness(0) saturate(100%) invert(15%) sepia(88%) saturate(5900%) hue-rotate(352deg) brightness(86%) contrast(92%)'
}}
/>
</Box>
</div>
);
}

100
src/components/PageHeader.jsx
View File

@@ -1,81 +1,51 @@
import { Box, Stack, Typography, Avatar } from '@mui/material';
// ==============================|| SHARED PAGE HEADER ||============================== //
import { Heading, Text } from '@astryxdesign/core/Text';
export default function PageHeader({ icon: Icon, title, subtitle, action }) {
return (
<Stack
direction={{ xs: 'column', sm: 'row' }}
alignItems={{ xs: 'flex-start', sm: 'center' }}
justifyContent="space-between"
gap={3}
sx={{ mb: { xs: 4, md: 4.5 } }}
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: '20px',
marginBottom: '24px',
flexWrap: 'wrap'
}}
>
<Stack
direction="row"
alignItems="center"
spacing={2.5} // Space between icon and title
sx={{ minWidth: 0 }}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', minWidth: 0 }}>
{Icon && (
<Avatar
variant="rounded"
sx={{
bgcolor: 'primary.lighter',
color: 'primary.main',
width: 52,
height: 52,
borderRadius: 2.5,
flexShrink: 0
<div
style={{
backgroundColor: 'var(--color-brand-muted)',
color: 'var(--color-brand)',
width: 44,
height: 44,
borderRadius: 'var(--radius-element)',
flexShrink: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Icon sx={{ fontSize: 28 }} />
</Avatar>
<Icon size={22} />
</div>
)}
<Box sx={{ minWidth: 0 }}>
<Typography
variant="h4"
sx={{
fontWeight: 800,
color: 'text.primary',
letterSpacing: '-0.5px',
lineHeight: 1.15,
fontSize: {
xs: '1.5rem',
sm: '1.8rem',
md: '2.1rem'
}
}}
>
<div style={{ minWidth: 0 }}>
<Heading level={1} type="display-3">
{title}
</Typography>
</Heading>
{subtitle && (
<Typography
variant="body2"
color="text.secondary"
sx={{
mt: 1,
maxWidth: 700,
lineHeight: 1.6,
fontSize: {
xs: '0.9rem',
sm: '0.95rem'
}
}}
>
<Text type="body" color="secondary" style={{ display: 'block', marginTop: '4px', maxWidth: 700 }}>
{subtitle}
</Typography>
</Text>
)}
</Box>
</Stack>
</div>
</div>
{action && (
<Box sx={{ flexShrink: 0 }}>
{action}
</Box>
)}
</Stack>
{action && <div style={{ flexShrink: 0 }}>{action}</div>}
</div>
);
}
}

33
src/components/Panel.jsx Normal file
View File

@@ -0,0 +1,33 @@
import { Card } from '@astryxdesign/core/Card';
import { Heading } from '@astryxdesign/core/Text';
// Shared "section card": an optional titled header strip over a body slot.
// Every page that shows a titled block of content (tables, forms, feeds)
// renders it through this so cards share one radius/border/shadow/header
// treatment instead of each page re-declaring its own — that drift (16px vs
// 12px radius, different border colors) was the main source of visual
// inconsistency between screens.
export default function Panel({ title, action, children, bodyPadding = 0, style }) {
return (
<Card padding={0} style={{ height: '100%', display: 'flex', flexDirection: 'column', ...style }}>
{title && (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: '12px',
padding: '14px 20px',
borderBottom: '1px solid var(--color-border)',
background: 'var(--color-background-muted)',
flexShrink: 0
}}
>
<Heading level={5}>{title}</Heading>
{action}
</div>
)}
<div style={{ padding: bodyPadding, flexGrow: 1, boxSizing: 'border-box', minWidth: 0 }}>{children}</div>
</Card>
);
}

147
src/components/StatCard.jsx Normal file
View File

@@ -0,0 +1,147 @@
import { Card } from '@astryxdesign/core/Card';
// ==============================|| STAT / KPI CARD ||============================== //
// `tone` maps to Astryx's own categorical tokens (same palette Badge/StatusDot
// use), so KPI cards read as part of the same status language as the rest of
// the app instead of a one-off set of hand-picked hex values.
const TONE_VARS = {
blue: { icon: 'var(--color-icon-blue)', bg: 'var(--color-background-blue)' },
green: { icon: 'var(--color-icon-green)', bg: 'var(--color-background-green)' },
orange: { icon: 'var(--color-icon-orange)', bg: 'var(--color-background-orange)' },
purple: { icon: 'var(--color-icon-purple)', bg: 'var(--color-background-purple)' },
red: { icon: 'var(--color-icon-red)', bg: 'var(--color-background-red)' },
teal: { icon: 'var(--color-icon-teal)', bg: 'var(--color-background-teal)' },
cyan: { icon: 'var(--color-icon-cyan)', bg: 'var(--color-background-cyan)' },
gray: { icon: 'var(--color-icon-gray)', bg: 'var(--color-background-gray)' }
};
export default function StatCard({
label,
value,
icon: Icon,
tone = 'blue',
sub,
size = 'md',
loading = false,
hover = true
}) {
const isCompact = size === 'sm';
const { icon: iconColor, bg: tintBg } = TONE_VARS[tone] || TONE_VARS.blue;
return (
<Card
padding={0}
className={hover ? 'stat-card' : undefined}
style={{
height: '100%',
position: 'relative',
overflow: 'hidden',
padding: isCompact ? '16px' : '20px',
boxSizing: 'border-box',
cursor: hover ? 'pointer' : 'default'
}}
>
{Icon && (
<div
style={{
position: 'absolute',
right: '-12px',
bottom: '-12px',
opacity: 0.05,
transform: 'rotate(-15deg)',
pointerEvents: 'none',
color: iconColor
}}
>
<Icon size={isCompact ? 60 : 88} />
</div>
)}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginBottom: isCompact ? '10px' : '14px',
position: 'relative',
zIndex: 2
}}
>
<span
style={{
fontWeight: 700,
fontSize: '0.72rem',
color: 'var(--color-text-secondary)',
textTransform: 'uppercase',
letterSpacing: '0.05em'
}}
>
{label}
</span>
{Icon && (
<div
style={{
width: isCompact ? '26px' : '34px',
height: isCompact ? '26px' : '34px',
borderRadius: 'var(--radius-inner)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: tintBg,
color: iconColor,
flexShrink: 0
}}
>
<Icon size={isCompact ? 14 : 17} />
</div>
)}
</div>
<div style={{ position: 'relative', zIndex: 2, marginBottom: sub ? (isCompact ? '8px' : '12px') : 0 }}>
{loading ? (
<div
style={{
width: '60px',
height: isCompact ? '22px' : '30px',
backgroundColor: 'var(--color-skeleton)',
borderRadius: 4,
animation: 'pulse 1.5s infinite'
}}
/>
) : (
<span
style={{
fontWeight: 800,
fontSize: isCompact ? '1.4rem' : '1.85rem',
color: 'var(--color-text-primary)',
lineHeight: 1,
display: 'block'
}}
>
{value}
</span>
)}
</div>
{sub && (
<div
style={{
paddingTop: isCompact ? '8px' : '10px',
borderTop: '1px dashed var(--color-border)',
position: 'relative',
zIndex: 2
}}
>
<span style={{ fontSize: '0.72rem', color: 'var(--color-text-secondary)', fontWeight: 600 }}>{sub}</span>
</div>
)}
<style>{`
.stat-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-med); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
`}</style>
</Card>
);
}

112
src/index.css Normal file
View File

@@ -0,0 +1,112 @@
/* ─── Force light mode + brand color: override every Astryx light-dark() token ─── */
:root,
[data-astryx-theme] {
color-scheme: light;
/* Surface / background tokens */
--color-background-surface: #ffffff;
--color-background-body: #f1f4f7;
--color-background-card: #ffffff;
--color-background-popover: #ffffff;
--color-background-muted: rgba(5, 54, 89, 0.047);
--color-background-inverted: #0A1317;
--color-background-error-inverted: #AA071E;
/* Text tokens */
--color-text-primary: #0A1317;
--color-text-secondary: #4E606F;
--color-text-disabled: #A4B0BC;
--color-text-accent: #0A1317;
/* Icon tokens */
--color-icon-primary: #0A1317;
--color-icon-secondary: #4E606F;
--color-icon-disabled: #A4B0BC;
--color-icon-accent: #0A1317;
/* Border tokens */
--color-border: rgba(5, 54, 89, 0.1);
--color-border-emphasized: #CCD3DB;
/* Interactive overlay tokens */
--color-neutral: rgba(5, 54, 89, 0.1);
--color-overlay: rgba(1, 18, 40, 0.4);
--color-overlay-hover: rgba(5, 54, 89, 0.047);
--color-overlay-pressed: rgba(5, 54, 89, 0.098);
/* Misc */
--color-skeleton: #CCD3DB;
--color-track: #CCD3DB;
--color-shadow: rgba(5, 54, 89, 0.1);
/* Structural accent (nav selection, focus rings, secondary controls) — stays neutral/dark */
--color-accent: #0A1317;
--color-accent-muted: rgba(10, 19, 23, 0.12);
--color-on-accent: #ffffff;
/* Doormile brand red — reserved for primary CTAs only. Do not use for
structural chrome (nav, focus rings, secondary buttons); use
src/components/Button.jsx (variant="primary") to apply it consistently. */
--color-brand: #C01227;
--color-brand-hover: #A20F20;
--color-brand-muted: rgba(192, 18, 39, 0.1);
--color-on-brand: #ffffff;
/* "red" Badge variant */
--color-background-red: rgba(5, 54, 89, 0.1);
--color-text-red: #0A1317;
/* App-level overrides */
background-color: #f8fafc;
color: #0f172a;
}
*, *::before, *::after {
font-family: var(--font-family-body, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #f8fafc;
color: #334155;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: #0f172a;
letter-spacing: -0.02em;
}
input, textarea {
font-family: inherit !important;
background-color: #ffffff !important;
color: #0f172a !important;
}
input::placeholder, textarea::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
input:not(.search-bar-input):not([class]), select:not([class]), textarea:not([class]) {
background-color: #ffffff !important;
color: #0f172a !important;
border: 1px solid rgba(5, 54, 89, 0.12) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
font-size: 0.875rem !important;
outline: none !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
box-sizing: border-box !important;
width: 100% !important;
}
input:not(.search-bar-input):not([class]), select:not([class]) {
height: 38px !important;
}
input:not(.search-bar-input):not([class]):focus, select:not([class]):focus, textarea:not([class]):focus {
border-color: #0A1317 !important;
box-shadow: 0 0 0 3px rgba(10, 19, 23, 0.12) !important;
}

539
src/layout/MainLayout/Header.jsx
View File

@@ -1,43 +1,12 @@
import { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import {
AppBar,
Toolbar,
IconButton,
Box,
InputBase,
Badge,
Avatar,
Typography,
Menu,
MenuItem,
Divider,
ListItemIcon,
ListItemText,
Tooltip,
Button,
Stack,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
TextField,
Grid,
alpha,
InputAdornment
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
import ChatIcon from '@mui/icons-material/Chat';
import LogoutIcon from '@mui/icons-material/Logout';
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import SendIcon from '@mui/icons-material/Send';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
import { Settings, LogOut, Bell, MessageSquare, Search, Truck, AlertTriangle, ArrowRight, Send, CheckCircle2 } from 'lucide-react';
import { TopNav, TopNavHeading } from '@astryxdesign/core/TopNav';
import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
import { TextInput } from '@astryxdesign/core/TextInput';
import { Avatar } from '@astryxdesign/core/Avatar';
import Button from '@/components/Button';
import Logo from '@/components/Logo';
import { getStaff, getHubContext, clearSession } from '@/auth/session';
import {
@@ -49,18 +18,16 @@ import {
markConversationRead
} from '@/api/hub';
const RED = '#C01227';
const RED = 'var(--color-brand)';
// Map a notification `type` to an icon component (real API sends type, not an icon).
const NOTIF_ICON = {
exception: WarningAmberIcon,
inbound: LocalShippingOutlinedIcon,
dispatch: LocalShippingOutlinedIcon,
warning: WarningAmberIcon,
alert: NotificationsActiveIcon
exception: AlertTriangle,
inbound: Truck,
dispatch: Truck,
warning: AlertTriangle,
alert: Bell
};
// Build initials from a display name — falls back to a sensible default.
const toInitials = (name) =>
(name || '')
.split(' ')
@@ -70,8 +37,6 @@ const toInitials = (name) =>
.join('')
.toUpperCase() || 'HB';
// Normalise a conversation summary from GET /hub/messages. Be tolerant of a few
// backend field-name variants so the list still renders if a key is named differently.
const toConversation = (c) => {
const name = c.name || c.milername || c.displayname || `Miler ${c.mileruserid ?? c.id}`;
return {
@@ -84,14 +49,13 @@ const toConversation = (c) => {
};
};
// Normalise one message in a thread from GET /hub/messages/:id.
const toMessage = (m) => ({
sender: m.sender === 'me' ? 'me' : 'them',
text: m.text ?? m.body ?? m.message ?? '',
time: m.time ?? m.createdat ?? m.sentat ?? ''
});
export default function Header({ onToggle }) {
export default function Header({ isSidebarCollapsed }) {
const navigate = useNavigate();
const staff = getStaff();
const hub = getHubContext();
@@ -103,14 +67,9 @@ export default function Header({ onToggle }) {
navigate('/login');
};
const [account, setAccount] = useState(null);
const [notifAnchor, setNotifAnchor] = useState(null);
const [msgAnchor, setMsgAnchor] = useState(null);
// Dialog State
const [selectedNotif, setSelectedNotif] = useState(null);
const [conversations, setConversations] = useState([]);
const [activeChat, setActiveChat] = useState(null); // { id, name, initials, messages: [] }
const [activeChat, setActiveChat] = useState(null);
const [chatLoading, setChatLoading] = useState(false);
const [sending, setSending] = useState(false);
const [typedMessage, setTypedMessage] = useState('');
@@ -122,7 +81,6 @@ export default function Header({ onToggle }) {
const unread = notifications.filter((n) => !n.read).length;
// Load real notifications from the API (map `type` → an icon component).
const loadNotifications = useCallback(async () => {
try {
const res = await getNotifications();
@@ -133,43 +91,39 @@ export default function Header({ onToggle }) {
time: n.time,
read: Boolean(n.read),
type: n.type,
icon: NOTIF_ICON[n.type] || NotificationsNoneIcon
icon: NOTIF_ICON[n.type] || Bell,
desc: n.desc,
stats: n.stats || [],
to: n.to,
actionText: n.actionText
}))
);
} catch {
// Non-fatal: leave the bell empty if it can't load.
setNotifications([]);
}
}, []);
useEffect(() => {
loadNotifications();
const t = setInterval(loadNotifications, 60000); // refresh every 60s
const t = setInterval(loadNotifications, 60000);
return () => clearInterval(t);
}, [loadNotifications]);
// Load conversations (one per miler at the hub) for the messages dropdown.
const loadConversations = useCallback(async () => {
try {
const res = await getConversations();
setConversations((res?.data || []).map(toConversation));
} catch {
// Non-fatal: leave the messages list empty if it can't load.
setConversations([]);
}
}, []);
useEffect(() => {
loadConversations();
const t = setInterval(loadConversations, 60000); // refresh every 60s
const t = setInterval(loadConversations, 60000);
return () => clearInterval(t);
}, [loadConversations]);
const openNotif = (e) => { setNotifAnchor(e.currentTarget); loadNotifications(); };
const closeNotif = () => setNotifAnchor(null);
const openMessages = (e) => { setMsgAnchor(e.currentTarget); loadConversations(); };
const markAllRead = async () => {
const unreadIds = notifications.filter((n) => !n.read).map((n) => n.id);
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
@@ -178,18 +132,14 @@ export default function Header({ onToggle }) {
const onNotifClick = async (n) => {
setNotifications((prev) => prev.map((x) => (x.id === n.id ? { ...x, read: true } : x)));
closeNotif();
if (n.desc || n.stats) setSelectedNotif(n);
else if (n.to) navigate(n.to);
try {
await markNotificationRead(n.id);
} catch {
/* best effort */
}
} catch {}
};
// Open a conversation: show the header immediately, then load the thread and
// mark the other party's messages as read (which clears the unread badge).
const onMessageClick = async (conv) => {
setMsgAnchor(null);
setTypedMessage('');
setActiveChat({ id: conv.id, name: conv.name, initials: conv.initials, messages: [] });
setChatLoading(true);
@@ -207,35 +157,30 @@ export default function Header({ onToggle }) {
setConversations((prev) => prev.map((c) => (c.id === conv.id ? { ...c, unread: 0 } : c)));
}
} catch {
// Leave the (empty) thread open; the header still shows who it's with.
} finally {
setChatLoading(false);
}
};
const closeChat = () => { setActiveChat(null); setTypedMessage(''); };
const closeChat = () => { setActiveChat(null); setTypedMessage(''); };
const handleSendMessage = async () => {
const text = typedMessage.trim();
if (!text || !activeChat || sending) return;
setSending(true);
// Optimistically append; reconcile with the server's stored copy on success.
const now = new Date();
const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
setActiveChat((c) => ({ ...c, messages: [...c.messages, { sender: 'me', text, time: timeStr }] }));
setTypedMessage('');
try {
await sendMessage(activeChat.id, text);
// Refresh the thread so the persisted message (and its real timestamp) shows.
const res = await getConversation(activeChat.id);
const thread = res?.data || {};
setActiveChat((c) => c && { ...c, messages: (thread.messages || thread.chat || []).map(toMessage) });
// Keep the dropdown preview in sync.
setConversations((prev) =>
prev.map((c) => (c.id === activeChat.id ? { ...c, lastMessage: text, time: timeStr } : c))
);
} catch {
// On failure, drop the optimistic bubble and restore the draft to retry.
setActiveChat((c) => c && { ...c, messages: c.messages.filter((m) => !(m.sender === 'me' && m.text === text && m.time === timeStr)) });
setTypedMessage(text);
} finally {
@@ -250,336 +195,118 @@ export default function Header({ onToggle }) {
};
return (
<AppBar
position="fixed"
elevation={0}
sx={{
bgcolor: '#FFFFFF',
color: 'text.primary',
zIndex: (t) => t.zIndex.drawer + 1,
borderBottom: '1px solid',
borderColor: 'grey.200'
}}
>
<Toolbar sx={{ minHeight: 64, px: { xs: 1.5, sm: 2.5 }, gap: 1 }}>
<IconButton color="inherit" edge="start" onClick={onToggle} sx={{ mr: 0.5 }}>
<MenuIcon />
</IconButton>
{/* Brand wordmark — left side */}
<Box
onClick={() => navigate('/dashboard')}
sx={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
>
<Logo height={22} />
</Box>
<Box sx={{ flexGrow: 1 }} />
{/* Search */}
<Box
component="form"
onSubmit={submitSearch}
sx={{
display: { xs: 'none', sm: 'flex' },
alignItems: 'center',
bgcolor: 'grey.100',
borderRadius: 2,
px: 1.5,
py: 0.5,
width: { sm: 240, md: 320 },
border: '1px solid',
borderColor: 'grey.200',
'&:hover': { bgcolor: 'grey.200' }
}}
>
<SearchIcon sx={{ fontSize: 20, mr: 1, color: 'text.secondary' }} />
<InputBase
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Scan package, check destination…"
sx={{ fontSize: '0.875rem', flex: 1 }}
inputProps={{ 'aria-label': 'search' }}
<>
<TopNav
label="Main navigation"
style={{
backgroundColor: '#ffffff',
borderBottom: '1px solid rgba(5, 54, 89, 0.08)',
boxShadow: '0 1px 3px rgba(15, 23, 42, 0.04)'
}}
heading={
<TopNavHeading
logo={<Logo compact={isSidebarCollapsed} size={isSidebarCollapsed ? 36 : 32} height={28} />}
headingHref="/dashboard"
/>
</Box>
}
endContent={
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', flex: 1, justifyContent: 'flex-end' }}>
<DropdownMenu
button={{ variant: 'ghost', icon: <div style={{ position: 'relative' }}><MessageSquare size={20} />{unreadMessages > 0 && <span style={{ position: 'absolute', top: -4, right: -4, background: RED, color: '#fff', fontSize: '10px', borderRadius: '10px', padding: '0 4px' }}>{unreadMessages}</span>}</div> }}
items={[
{ label: 'Messages', type: 'label' },
...conversations.map(m => ({
label: m.name,
description: m.lastMessage,
onClick: () => onMessageClick(m)
}))
]}
/>
<DropdownMenu
button={{ variant: 'ghost', icon: <div style={{ position: 'relative' }}><Bell size={20} />{unread > 0 && <span style={{ position: 'absolute', top: -4, right: -4, background: RED, color: '#fff', fontSize: '10px', borderRadius: '10px', padding: '0 4px' }}>{unread}</span>}</div> }}
items={[
{ label: 'Notifications', type: 'label' },
{ label: 'Mark all read', icon: <CheckCircle2 size={16} />, onClick: markAllRead, disabled: unread === 0 },
{ type: 'divider' },
...(notifications.length === 0 ? [{ label: 'No notifications', disabled: true }] : notifications.map((n, i) => ({
label: n.title + '\u200B'.repeat(i),
description: n.time,
icon: n.icon ? (() => { const Icon = n.icon; return <Icon size={16} />; })() : undefined,
onClick: () => onNotifClick(n)
})))
]}
/>
<Tooltip title="Messages">
<IconButton color="inherit" onClick={openMessages}>
<Badge badgeContent={unreadMessages} color="error">
<ChatIcon />
</Badge>
</IconButton>
</Tooltip>
<Tooltip title="Notifications">
<IconButton color="inherit" onClick={openNotif}>
<Badge badgeContent={unread} color="error">
<NotificationsNoneIcon />
</Badge>
</IconButton>
</Tooltip>
<DropdownMenu
button={{
variant: 'ghost',
size: 'lg',
icon: <Avatar name={staffName} fallback={toInitials(staffName)} size="sm" />,
label: staffName
}}
items={[
{ label: 'Settings', icon: <Settings size={16} />, onClick: () => navigate('/hub-settings') },
{ type: 'divider' },
{ label: 'Logout', icon: <LogOut size={16} />, onClick: handleLogout }
]}
/>
</div>
}
/>
<Box
onClick={(e) => setAccount(e.currentTarget)}
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
ml: 0.5,
cursor: 'pointer',
py: 0.5,
px: 1,
borderRadius: 2,
'&:hover': { bgcolor: 'grey.100' }
}}
>
<Avatar sx={{ width: 34, height: 34, bgcolor: RED, color: '#fff', fontWeight: 700 }}>{toInitials(staffName)}</Avatar>
<Box sx={{ display: { xs: 'none', md: 'block' }, lineHeight: 1.1 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
{staffName}
</Typography>
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
{hubName}
</Typography>
</Box>
</Box>
{/* Notifications dropdown */}
<Menu
anchorEl={notifAnchor}
open={Boolean(notifAnchor)}
onClose={closeNotif}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
PaperProps={{ sx: { mt: 1, width: 360, maxWidth: '90vw' } }}
>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 1.25 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
Notifications
</Typography>
<Button size="small" startIcon={<DoneAllIcon fontSize="small" />} onClick={markAllRead} disabled={unread === 0}>
Mark all read
</Button>
</Stack>
<Divider />
{notifications.length === 0 && (
<MenuItem disabled>
<ListItemText primary="No notifications" />
</MenuItem>
)}
{notifications.map((n) => {
const Icon = n.icon;
return (
<MenuItem key={n.id} onClick={() => onNotifClick(n)} sx={{ py: 1.25, whiteSpace: 'normal', alignItems: 'flex-start' }}>
<ListItemIcon sx={{ mt: 0.25 }}>
<Avatar sx={{ width: 34, height: 34, bgcolor: n.read ? 'grey.200' : alpha(RED, 0.12), color: RED }}>
<Icon fontSize="small" />
</Avatar>
</ListItemIcon>
<ListItemText
primary={n.title}
secondary={n.time}
primaryTypographyProps={{ fontSize: '0.875rem', fontWeight: n.read ? 500 : 700 }}
secondaryTypographyProps={{ fontSize: '0.75rem' }}
/>
{!n.read && <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: RED, mt: 1, ml: 0.5 }} />}
</MenuItem>
);
})}
</Menu>
{/* Messages dropdown */}
<Menu
anchorEl={msgAnchor}
open={Boolean(msgAnchor)}
onClose={() => setMsgAnchor(null)}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
PaperProps={{ sx: { mt: 1, width: 340, maxWidth: '90vw' } }}
>
<Typography variant="subtitle1" sx={{ fontWeight: 700, px: 2, py: 1.25 }}>
Messages
</Typography>
<Divider />
{conversations.length === 0 && (
<MenuItem disabled>
<ListItemText primary="No messages" />
</MenuItem>
)}
{conversations.map((m) => (
<MenuItem key={m.id} onClick={() => onMessageClick(m)} sx={{ py: 1.25, whiteSpace: 'normal', alignItems: 'flex-start' }}>
<ListItemIcon sx={{ mt: 0.25 }}>
<Avatar sx={{ width: 34, height: 34, bgcolor: alpha(RED, 0.12), color: RED, fontWeight: 700, fontSize: '0.8rem' }}>
{m.initials}
</Avatar>
</ListItemIcon>
<ListItemText
primary={m.name}
secondary={m.lastMessage || 'No messages yet'}
primaryTypographyProps={{ fontSize: '0.875rem', fontWeight: m.unread > 0 ? 700 : 600 }}
secondaryTypographyProps={{ fontSize: '0.8rem', noWrap: true }}
/>
<Stack alignItems="flex-end" sx={{ ml: 1, flexShrink: 0 }}>
<Typography variant="caption" color="text.secondary" sx={{ mt: 0.5 }}>
{m.time}
</Typography>
{m.unread > 0 && (
<Badge badgeContent={m.unread} color="error" sx={{ mt: 1, mr: 0.75 }} />
)}
</Stack>
</MenuItem>
))}
</Menu>
{/* Account dropdown */}
<Menu
anchorEl={account}
open={Boolean(account)}
onClose={() => setAccount(null)}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
PaperProps={{ sx: { mt: 1, minWidth: 200 } }}
>
<MenuItem onClick={() => { setAccount(null); handleLogout(); }} sx={{ color: 'error.main' }}>
<ListItemIcon><LogoutIcon fontSize="small" color="error" /></ListItemIcon>
Logout
</MenuItem>
</Menu>
</Toolbar>
{/* High Fidelity Notification Detail Dialog */}
<Dialog open={Boolean(selectedNotif)} onClose={() => setSelectedNotif(null)} fullWidth maxWidth="sm">
{selectedNotif && (
<>
<DialogTitle sx={{ fontWeight: 700, bgcolor: 'grey.50', py: 2 }}>
{selectedNotif.title}
</DialogTitle>
<Divider />
<DialogContent sx={{ py: 3 }}>
<Typography variant="body1" sx={{ mb: 3 }}>
{selectedNotif.desc}
</Typography>
<Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.5, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'text.secondary' }}>
Operational Details
</Typography>
<Grid container spacing={2}>
{selectedNotif.stats.map((stat, index) => (
<Grid size={{ xs: 6 }} key={index}>
<Box sx={{ p: 2, bgcolor: 'grey.50', borderRadius: 2, border: '1px solid', borderColor: 'grey.200' }}>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontWeight: 600 }}>
{stat.label}
</Typography>
<Typography variant="subtitle2" sx={{ fontWeight: 700, mt: 0.5 }}>
{stat.value}
</Typography>
</Box>
</Grid>
))}
</Grid>
</DialogContent>
<Divider />
<DialogActions sx={{ p: 2 }}>
<Button onClick={() => setSelectedNotif(null)}>Dismiss</Button>
<Button
variant="contained"
endIcon={<ArrowForwardIcon fontSize="small" />}
onClick={() => {
setSelectedNotif(null);
navigate(selectedNotif.to);
}}
>
{selectedNotif.actionText}
{selectedNotif && (
<dialog open style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', zIndex: 1000, background: '#fff', padding: '24px', borderRadius: '8px', border: '1px solid #e2e8f0', boxShadow: '0 10px 25px rgba(0,0,0,0.1)', maxWidth: '500px', width: '100%' }}>
<h2 style={{ margin: '0 0 16px 0', fontSize: '1.25rem' }}>{selectedNotif.title}</h2>
<p style={{ margin: '0 0 16px 0', color: '#475569' }}>{selectedNotif.desc}</p>
<div style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
{selectedNotif.stats.map((s, i) => (
<div key={i} style={{ background: '#f8fafc', padding: '12px', borderRadius: '8px', flex: 1 }}>
<div style={{ fontSize: '0.75rem', color: '#64748b', fontWeight: 'bold' }}>{s.label}</div>
<div style={{ fontSize: '1.125rem', fontWeight: 'bold', marginTop: '4px' }}>{s.value}</div>
</div>
))}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
<Button variant="ghost" onClick={() => setSelectedNotif(null)}>Dismiss</Button>
{selectedNotif.actionText && (
<Button onClick={() => { setSelectedNotif(null); navigate(selectedNotif.to); }}>
{selectedNotif.actionText} <ArrowRight size={16} />
</Button>
</DialogActions>
</>
)}
</Dialog>
)}
</div>
</dialog>
)}
{/* High Fidelity Chat Message Dialog */}
<Dialog open={Boolean(activeChat)} onClose={closeChat} fullWidth maxWidth="xs">
{activeChat && (
<>
<DialogTitle sx={{ fontWeight: 700, py: 2, display: 'flex', alignItems: 'center', gap: 1.5 }}>
<Avatar sx={{ bgcolor: alpha(RED, 0.12), color: RED, fontWeight: 700, width: 34, height: 34 }}>
{activeChat.initials}
</Avatar>
<Typography variant="h5" sx={{ fontWeight: 700 }}>
{activeChat.name}
</Typography>
</DialogTitle>
<Divider />
<DialogContent sx={{ p: 2, bgcolor: 'grey.50', height: 280, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
<Stack spacing={2} sx={{ overflowY: 'auto', pr: 0.5, flexGrow: 1, mb: 2 }}>
{chatLoading && activeChat.messages.length === 0 && (
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', mt: 2 }}>
Loading…
</Typography>
)}
{!chatLoading && activeChat.messages.length === 0 && (
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', mt: 2 }}>
No messages yet. Say hello.
</Typography>
)}
{activeChat.messages.map((msg, idx) => (
<Box
key={idx}
sx={{
alignSelf: msg.sender === 'me' ? 'flex-end' : 'flex-start',
maxWidth: '80%'
}}
>
<Box
sx={{
p: 1.5,
borderRadius: 2,
bgcolor: msg.sender === 'me' ? RED : '#FFFFFF',
color: msg.sender === 'me' ? '#FFFFFF' : 'text.primary',
boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
border: msg.sender === 'me' ? 'none' : '1px solid',
borderColor: 'grey.200'
}}
>
<Typography variant="body1">
{msg.text}
</Typography>
</Box>
<Typography
variant="caption"
color="text.secondary"
sx={{
display: 'block',
mt: 0.5,
textAlign: msg.sender === 'me' ? 'right' : 'left'
}}
>
{msg.time}
</Typography>
</Box>
))}
</Stack>
</DialogContent>
<Divider />
<DialogActions sx={{ p: 1.5 }}>
<TextField
fullWidth
size="small"
placeholder="Type your message..."
value={typedMessage}
onChange={(e) => setTypedMessage(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleSendMessage} size="small" color="primary" disabled={sending || !typedMessage.trim()}>
<SendIcon fontSize="small" />
</IconButton>
</InputAdornment>
)
}}
/>
</DialogActions>
</>
)}
</Dialog>
</AppBar>
{activeChat && (
<dialog open style={{ position: 'fixed', bottom: '24px', right: '24px', zIndex: 1000, background: '#fff', borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 10px 25px rgba(0,0,0,0.1)', width: '360px', padding: 0, overflow: 'hidden' }}>
<div style={{ padding: '16px', borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', gap: '12px', background: '#f8fafc' }}>
<div style={{ width: 32, height: 32, borderRadius: '50%', background: RED, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold' }}>{activeChat.initials}</div>
<h3 style={{ margin: 0, flex: 1 }}>{activeChat.name}</h3>
<Button variant="ghost" size="icon" onClick={closeChat}>×</Button>
</div>
<div style={{ height: '300px', overflowY: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', gap: '8px', background: '#fff' }}>
{chatLoading ? (
<div style={{ textAlign: 'center', color: '#94a3b8', margin: 'auto' }}>Loading...</div>
) : activeChat.messages.length === 0 ? (
<div style={{ textAlign: 'center', color: '#94a3b8', margin: 'auto' }}>No messages yet.</div>
) : (
activeChat.messages.map((m, i) => (
<div key={i} style={{ alignSelf: m.sender === 'me' ? 'flex-end' : 'flex-start', maxWidth: '80%' }}>
<div style={{ background: m.sender === 'me' ? RED : '#f1f5f9', color: m.sender === 'me' ? '#fff' : '#0f172a', padding: '8px 12px', borderRadius: '12px', borderBottomRightRadius: m.sender === 'me' ? 0 : '12px', borderBottomLeftRadius: m.sender === 'them' ? 0 : '12px' }}>
{m.text}
</div>
<div style={{ fontSize: '0.65rem', color: '#94a3b8', textAlign: m.sender === 'me' ? 'right' : 'left', marginTop: '4px' }}>{m.time}</div>
</div>
))
)}
</div>
<div style={{ padding: '12px', borderTop: '1px solid #e2e8f0', background: '#fff', display: 'flex', gap: '8px' }}>
<TextInput style={{ flex: 1 }} value={typedMessage} onChange={(e) => setTypedMessage(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()} placeholder="Type a message..." />
<Button size="icon" onClick={handleSendMessage} disabled={!typedMessage.trim() || sending}><Send size={16} /></Button>
</div>
</dialog>
)}
</>
);
}

412
src/layout/MainLayout/Sidebar.jsx
View File

@@ -1,106 +1,16 @@
import { useState, useMemo } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import {
Drawer,
Box,
List,
ListItemButton,
ListItemIcon,
ListItemText,
Typography,
Collapse,
Tooltip,
Toolbar
} from '@mui/material';
import { alpha } from '@mui/material/styles';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import { SideNav, SideNavSection, SideNavItem } from '@astryxdesign/core/SideNav';
import { Text } from '@astryxdesign/core/Text';
import navItems from '@/menu/navItems';
import Logo from '@/components/Logo';
import { isDoormileStaff } from '@/auth/session';
export const DRAWER_WIDTH = 240;
export const MINI_WIDTH = 72;
const BRAND_RED = '#C01227';
function NavLeaf({ item, open, active, depth = 0, onClick }) {
const Icon = item.icon;
const button = (
<ListItemButton
selected={active}
onClick={onClick}
sx={{
minHeight: 44,
my: 0.25,
mx: 1.25,
px: open ? 1.5 : 0,
justifyContent: open ? 'flex-start' : 'center',
borderRadius: '8px',
color: active ? BRAND_RED : 'text.primary',
transition: (theme) => theme.transitions.create(['background-color', 'color', 'padding'], {
duration: theme.transitions.duration.shorter,
}),
'& .MuiListItemIcon-root': {
color: active ? BRAND_RED : 'text.secondary',
minWidth: open ? 32 : 0,
justifyContent: 'center'
},
'&:hover': {
bgcolor: 'action.hover',
color: 'text.primary',
'& .MuiListItemIcon-root': { color: 'text.primary' }
},
'&.Mui-selected': {
bgcolor: alpha(BRAND_RED, 0.08),
color: BRAND_RED,
'& .MuiListItemIcon-root': { color: BRAND_RED },
'&:hover': { bgcolor: alpha(BRAND_RED, 0.12) }
}
}}
>
<ListItemIcon>
{depth > 0 && !Icon ? (
<FiberManualRecordIcon sx={{ fontSize: 6 }} />
) : Icon ? (
<Icon fontSize="small" />
) : null}
</ListItemIcon>
{open && (
<ListItemText
primary={item.title}
primaryTypographyProps={{
fontSize: '0.875rem',
fontWeight: active ? 600 : 500,
noWrap: true
}}
/>
)}
</ListItemButton>
);
if (!open) {
return (
<Tooltip title={item.title} placement="right" arrow disableInteractive>
{button}
</Tooltip>
);
}
return button;
}
export default function Sidebar({ open, mobileOpen, onMobileClose, isMobile }) {
export default function Sidebar({ isCollapsed, onCollapsedChange }) {
const location = useLocation();
const navigate = useNavigate();
const expanded = open || isMobile;
const isActive = (url) => !!url && location.pathname.startsWith(url);
const doormile = isDoormileStaff();
// Partner accounts don't see Doormile-only groups/items (e.g. Hub Settings).
const groups = useMemo(
() =>
navItems
@@ -110,213 +20,121 @@ export default function Sidebar({ open, mobileOpen, onMobileClose, isMobile }) {
[doormile]
);
const isActive = (url) => !!(url && location.pathname.startsWith(url));
// Memoize initial open state to prevent recalculation on every drawer toggle
const initialOpen = useMemo(() => {
return navItems
.flatMap((g) => g.items)
.filter((i) => i.children && i.children.some((c) => isActive(c.url)))
.map((i) => i.id);
}, [location.pathname]);
const [collapse, setCollapse] = useState(initialOpen);
const handleToggleCollapse = (id) => {
setCollapse((prev) =>
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
);
};
const go = (url) => {
navigate(url);
if (isMobile) onMobileClose();
};
const sidebarContent = (
<Box
sx={{
bgcolor: 'background.paper',
height: '100%',
display: 'flex',
flexDirection: 'column',
borderRight: '1px solid',
borderColor: 'divider'
}}
>
{/* Top Branding Section */}
<Toolbar sx={{ px: expanded ? 2.5 : 0, justifyContent: expanded ? 'flex-start' : 'center', minHeight: 64 }}>
<Logo compact={!expanded} />
</Toolbar>
{/* Navigation Scroll Area */}
<Box
sx={{
overflowY: 'auto',
overflowX: 'hidden',
flexGrow: 1,
pb: 2,
scrollbarWidth: 'thin',
'&::-webkit-scrollbar': { width: 5 },
'&::-webkit-scrollbar-track': { background: 'transparent' },
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'action.hover',
borderRadius: 4,
},
'&:hover::-webkit-scrollbar-thumb': {
backgroundColor: 'action.focus',
}
return (
<>
<SideNav
className="doormile-side-nav"
collapsible={{ isCollapsed, onCollapsedChange, buttonLabel: 'Collapse navigation' }}
style={{
backgroundColor: '#ffffff',
borderRight: '1px solid rgba(5, 54, 89, 0.08)',
boxShadow: '1px 0 3px rgba(15, 23, 42, 0.03)',
paddingBlock: '12px',
paddingInline: '8px',
boxSizing: 'border-box',
'--spacing-12': '72px'
}}
>
{groups.map((grp) => (
<Box key={grp.group} sx={{ mt: 2.5 }}>
{expanded && (
<Typography
variant="overline"
sx={{
px: 2.5,
color: 'text.secondary',
fontWeight: 800,
fontSize: '0.6875rem',
letterSpacing: '0.08em',
display: 'block'
}}
>
{grp.group}
</Typography>
)}
<List disablePadding sx={{ mt: 0.5 }}>
{grp.items.map((item) => {
if (item.children) {
const opened = collapse.includes(item.id);
const childActive = item.children.some((c) => isActive(c.url));
const Icon = item.icon;
const headerButton = (
<ListItemButton
onClick={() => expanded ? handleToggleCollapse(item.id) : go(item.children[0].url)}
sx={{
minHeight: 44,
my: 0.25,
mx: 1.25,
px: expanded ? 1.5 : 0,
justifyContent: expanded ? 'flex-start' : 'center',
borderRadius: '8px',
color: 'text.primary',
bgcolor: childActive && !opened ? alpha(BRAND_RED, 0.04) : 'transparent',
'& .MuiListItemIcon-root': {
color: childActive ? BRAND_RED : 'text.secondary',
minWidth: expanded ? 32 : 0,
justifyContent: 'center'
},
'&:hover': {
bgcolor: 'action.hover',
'& .MuiListItemIcon-root': { color: 'text.primary' }
}
}}
>
<ListItemIcon>
<Icon fontSize="small" />
</ListItemIcon>
{expanded && (
<>
<ListItemText
primary={item.title}
primaryTypographyProps={{ fontSize: '0.875rem', fontWeight: childActive ? 600 : 500 }}
/>
{opened ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
</>
)}
</ListItemButton>
);
return (
<Box key={item.id}>
{expanded ? headerButton : <Tooltip title={item.title} placement="right" arrow>{headerButton}</Tooltip>}
{expanded && (
<Collapse in={opened} timeout="auto" unmountOnExit>
<Box sx={{ mt: 0.25 }}>
{item.children.map((c) => (
<NavLeaf
key={c.id}
item={c}
open
depth={1}
active={isActive(c.url)}
onClick={() => go(c.url)}
/>
))}
</Box>
</Collapse>
)}
</Box>
);
}
return (
<NavLeaf
key={item.id}
item={item}
open={expanded}
active={isActive(item.url)}
onClick={() => go(item.url)}
/>
);
})}
</List>
</Box>
<SideNavSection key={grp.group} title={grp.group}>
{grp.items.map((item) => (
<SideNavItem
key={item.id}
label={item.title}
// If you migrate icons to Lucide or similar, you pass it here.
// Currently keeping the existing MUI icon or whatever item.icon provides.
icon={item.icon}
href={item.url}
isSelected={isActive(item.url)}
/>
))}
</SideNavSection>
))}
</Box>
</SideNav>
<style>{`
.doormile-side-nav .astryx-side-nav-section > div:last-child {
gap: 6px !important;
}
{/* Bottom Footer Branding */}
{expanded && (
<Box sx={{ p: 2, borderTop: '1px solid', borderColor: 'divider', bgcolor: 'background.default' }}>
<Typography variant="caption" sx={{ color: 'text.primary', fontWeight: 600, display: 'block', lineHeight: 1.3 }}>
Hub Control Panel
</Typography>
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
Doormile Logistics · v1.0
</Typography>
</Box>
)}
</Box>
);
.doormile-side-nav .astryx-side-nav-item[aria-label] {
width: 40px;
height: 40px;
margin-inline: auto;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
}
.doormile-side-nav .astryx-side-nav-item[aria-label] .astryx-icon {
width: 18px !important;
height: 18px !important;
}
.doormile-side-nav .astryx-side-nav-item[aria-label]:hover {
background-color: rgba(10, 19, 23, 0.08) !important;
}
.doormile-side-nav .astryx-side-nav-item[aria-label]:focus-visible {
outline: 2px solid rgba(10, 19, 23, 0.4);
outline-offset: 2px;
}
.doormile-side-nav .astryx-side-nav-item[aria-label][data-selected='selected'] {
background-color: rgba(10, 19, 23, 0.12) !important;
}
.doormile-side-nav .astryx-side-nav-item[aria-label][data-selected='selected'] .astryx-icon {
color: #0A1317 !important;
}
if (isMobile) {
return (
<Drawer
variant="temporary"
open={mobileOpen}
onClose={onMobileClose}
ModalProps={{ keepMounted: true }}
sx={{ '& .MuiDrawer-paper': { width: DRAWER_WIDTH, border: 'none' } }}
>
{sidebarContent}
</Drawer>
);
}
.doormile-side-nav .astryx-side-nav-item:not([aria-label]) {
position: relative;
margin-inline: 2px;
height: auto;
padding-block: 12px !important;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.doormile-side-nav .astryx-side-nav-item:not([aria-label])::before {
content: '';
position: absolute;
left: -2px;
top: 12px;
bottom: 12px;
width: 3px;
border-radius: 3px;
background-color: #0A1317;
opacity: 0;
transition: opacity 0.15s ease;
}
.doormile-side-nav .astryx-side-nav-item:not([aria-label]):hover {
background-color: rgba(10, 19, 23, 0.05) !important;
transform: translateX(2px);
}
.doormile-side-nav .astryx-side-nav-item:not([aria-label]):focus-visible {
outline: 2px solid rgba(10, 19, 23, 0.4);
outline-offset: 2px;
}
.doormile-side-nav .astryx-side-nav-item:not([aria-label])[data-selected='selected'] {
background-color: rgba(10, 19, 23, 0.08) !important;
}
.doormile-side-nav .astryx-side-nav-item:not([aria-label])[data-selected='selected']::before {
opacity: 1;
}
.doormile-side-nav .astryx-side-nav-item:not([aria-label])[data-selected='selected'] .astryx-icon {
color: #0A1317 !important;
}
return (
<Drawer
variant="permanent"
sx={{
width: open ? DRAWER_WIDTH : MINI_WIDTH,
flexShrink: 0,
whiteSpace: 'nowrap',
'& .MuiDrawer-paper': {
width: open ? DRAWER_WIDTH : MINI_WIDTH,
border: 'none',
overflowX: 'hidden',
transition: (theme) => theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.standard,
}),
},
}}
open={open}
>
{sidebarContent}
</Drawer>
.doormile-side-nav > div:last-child {
padding-block: 8px !important;
}
.doormile-side-nav button[aria-label*="sidebar"],
.doormile-side-nav button[aria-label*="navigation"] {
border-radius: 50% !important;
transition: background-color 0.15s ease !important;
}
.doormile-side-nav button[aria-label*="sidebar"]:hover,
.doormile-side-nav button[aria-label*="navigation"]:hover {
background-color: rgba(10, 19, 23, 0.08) !important;
}
`}</style>
</>
);
}

69
src/layout/MainLayout/index.jsx
View File

@@ -1,56 +1,35 @@
import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Box, useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { AppShell } from '@astryxdesign/core/AppShell';
import Header from './Header';
import Sidebar from './Sidebar';
export default function MainLayout() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
const [open, setOpen] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const toggle = () => {
if (isMobile) setMobileOpen((p) => !p);
else setOpen((p) => !p);
};
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);
return (
<Box sx={{ display: 'flex', bgcolor: 'background.default', minHeight: '100vh' }}>
<Header onToggle={toggle} />
<Sidebar
open={open}
isMobile={isMobile}
mobileOpen={mobileOpen}
onMobileClose={() => setMobileOpen(false)}
/>
<Box
component="main"
sx={{
flexGrow: 1,
minWidth: 0,
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
transition: theme.transitions.create('width', { duration: theme.transitions.duration.standard })
}}
>
<Box sx={{ height: 64, flexShrink: 0 }} />
<Box
sx={{
flexGrow: 1,
width: '100%',
maxWidth: '100%',
overflowX: 'hidden',
px: { xs: 1.5, sm: 2.5, md: 3.5 },
py: { xs: 2, sm: 2.5, md: 3 }
}}
>
<Outlet />
</Box>
</Box>
</Box>
<AppShell
variant="section"
height="fill"
contentPadding={0}
topNav={<Header isSidebarCollapsed={isSidebarCollapsed} />}
sideNav={<Sidebar isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
mobileNav={{ breakpoint: 'lg' }}
>
<div className="main-content-area" style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
<Outlet />
</div>
<style>{`
.main-content-area {
padding: 24px;
}
@media (max-width: 768px) {
.main-content-area {
padding: 16px;
}
}
`}</style>
</AppShell>
);
}

5
src/layout/MinimalLayout.jsx
View File

@@ -1,11 +1,10 @@
import { Outlet } from 'react-router-dom';
import { Box } from '@mui/material';
// Used by auth + maintenance pages — full-bleed, no shell.
export default function MinimalLayout() {
return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
<div style={{ minHeight: '100vh', backgroundColor: 'var(--color-background-body)' }}>
<Outlet />
</Box>
</div>
);
}

28
src/main.jsx
View File

@@ -1,18 +1,26 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { BrowserRouter, Link } from 'react-router-dom';
import theme from '@/theme';
// Astryx UI CSS
import '@astryxdesign/core/reset.css';
import '@astryxdesign/core/astryx.css';
import '@astryxdesign/theme-neutral/theme.css';
import './index.css';
import { Theme } from '@astryxdesign/core';
import { LinkProvider } from '@astryxdesign/core/Link';
import { ToastViewport } from '@astryxdesign/core/Toast';
import { neutralTheme } from '@astryxdesign/theme-neutral/built';
import App from '@/App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<Theme theme={neutralTheme}>
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<LinkProvider component={Link}>
<App />
</BrowserRouter>
</ThemeProvider>
</React.StrictMode>
<ToastViewport />
</LinkProvider>
</BrowserRouter>
</Theme>
);

27
src/menu/navItems.jsx
View File

@@ -1,11 +1,4 @@
import SpaceDashboardRoundedIcon from '@mui/icons-material/SpaceDashboardRounded';
import MapRoundedIcon from '@mui/icons-material/MapRounded';
import HailRoundedIcon from '@mui/icons-material/HailRounded';
import MoveToInboxRoundedIcon from '@mui/icons-material/MoveToInboxRounded';
import AltRouteRoundedIcon from '@mui/icons-material/AltRouteRounded';
import LocalShippingRoundedIcon from '@mui/icons-material/LocalShippingRounded';
import DeliveryDiningRoundedIcon from '@mui/icons-material/DeliveryDiningRounded';
import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
import { LayoutDashboard, Map, HandHeart, Inbox, Route, Truck, Bike, Settings } from 'lucide-react';
// ==============================|| DOORMILE HUB NAVIGATION ITEMS ||============================== //
// Menu follows the parcel's real journey in plain language so any hub staff member
@@ -15,39 +8,39 @@ const navItems = [
{
group: 'Overview',
items: [
{ id: 'dashboard', title: 'Dashboard', url: '/dashboard', icon: SpaceDashboardRoundedIcon },
{ id: 'tracking', title: 'Live Map', url: '/tracking', icon: MapRoundedIcon }
{ id: 'dashboard', title: 'Dashboard', url: '/dashboard', icon: LayoutDashboard },
{ id: 'tracking', title: 'Live Map', url: '/tracking', icon: Map }
]
},
{
group: '1. Pick Up',
items: [
{ id: 'assignments', title: 'Pickup Requests', url: '/assignments', icon: HailRoundedIcon }
{ id: 'assignments', title: 'Pickup Requests', url: '/assignments', icon: HandHeart }
]
},
{
group: '2. Receive at Hub',
items: [
{ id: 'inbound', title: 'Receive Parcels', url: '/inbound', icon: MoveToInboxRoundedIcon }
{ id: 'inbound', title: 'Receive Parcels', url: '/inbound', icon: Inbox }
]
},
{
group: '3. Sort & Store',
items: [
{ id: 'routing', title: 'Where Does It Go?', url: '/routing', icon: AltRouteRoundedIcon }
{ id: 'routing', title: 'Where Does It Go?', url: '/routing', icon: Route }
]
},
{
group: '4. Send Out',
items: [
{ id: 'dispatch', title: 'Dispatch & Transfer', url: '/dispatch', icon: LocalShippingRoundedIcon }
{ id: 'dispatch', title: 'Dispatch & Transfer', url: '/dispatch', icon: Truck }
]
},
{
group: 'Team',
items: [
{ id: 'riders', title: 'Milers', url: '/riders', icon: DeliveryDiningRoundedIcon },
{ id: 'rider-routes', title: 'Rider Routes', url: '/rider-routes', icon: AltRouteRoundedIcon }
{ id: 'riders', title: 'Milers', url: '/riders', icon: Bike },
{ id: 'rider-routes', title: 'Rider Routes', url: '/rider-routes', icon: Route }
]
},
{
@@ -55,7 +48,7 @@ const navItems = [
// Doormile staff only — hidden for partner (restricted) accounts.
doormileOnly: true,
items: [
{ id: 'hub-settings', title: 'Hub Settings', url: '/hub-settings', icon: SettingsRoundedIcon, doormileOnly: true }
{ id: 'hub-settings', title: 'Hub Settings', url: '/hub-settings', icon: Settings, doormileOnly: true }
]
}
];

934
src/pages/Dashboard.jsx
View File

File diff suppressed because it is too large Load Diff

263
src/pages/auth/Login.jsx
View File

@@ -1,26 +1,10 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Box,
Card,
Stack,
Typography,
TextField,
InputAdornment,
IconButton,
Button,
Checkbox,
FormControlLabel,
Link,
Alert,
CircularProgress
} from '@mui/material';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import BoltIcon from '@mui/icons-material/Bolt';
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
import { Zap, Truck, ShieldCheck, Eye, EyeOff, Loader2 } from 'lucide-react';
import { TextInput } from '@astryxdesign/core/TextInput';
import { CheckboxInput } from '@astryxdesign/core/CheckboxInput';
import Button from '@/components/Button';
import Logo from '@/components/Logo';
import { login as loginRequest } from '@/api/hub';
import { setSession } from '@/auth/session';
@@ -28,8 +12,8 @@ import { setSession } from '@/auth/session';
export default function Login() {
const navigate = useNavigate();
const [show, setShow] = useState(false);
const [auth, setAuth] = useState('hub.coimbatore@doormile.in');
const [pwd, setPwd] = useState('password123');
const [auth, setAuth] = useState('');
const [pwd, setPwd] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
@@ -56,17 +40,18 @@ export default function Login() {
};
return (
<Box sx={{ display: 'flex', minHeight: '100vh', width: '100vw', bgcolor: '#ffffff', overflow: 'hidden' }}>
<div style={{ display: 'flex', minHeight: '100vh', width: '100vw', backgroundColor: '#ffffff', overflow: 'hidden' }}>
{/* Brand Side Panel */}
<Box
sx={{
display: { xs: 'none', md: 'flex' },
<div
className="hide-on-mobile"
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
width: { md: '28%', lg: '27%', xl: '25%' },
width: '28%',
minWidth: '360px',
p: 5,
padding: '40px',
color: '#fff',
background: 'linear-gradient(150deg, #C01227 0%, #9E0E20 55%, #7E0B17 100%)',
position: 'relative',
@@ -75,172 +60,160 @@ export default function Login() {
}}
>
{/* Background Decorative Circles */}
<Box sx={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', top: -120, right: -120 }} />
<Box sx={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', bottom: -80, left: -60 }} />
<div style={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.06)', top: -120, right: -120 }} />
<div style={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.06)', bottom: -80, left: -60 }} />
{/* BLACK LOGO REPLACEMENT (Sidebar) */}
<Box sx={{ filter: 'brightness(0) invert(0)', display: 'inline-flex' }}>
<div style={{ filter: 'brightness(0) invert(1)', display: 'inline-flex' }}>
<Logo height={24} />
</Box>
</div>
<Box sx={{ position: 'relative', my: 'auto' }}>
<Typography variant="overline" sx={{ color: 'rgba(255,255,255,0.65)', letterSpacing: '0.12em', fontWeight: 600 }}>
<div style={{ position: 'relative', margin: 'auto 0' }}>
<div style={{ color: 'rgba(255,255,255,0.65)', letterSpacing: '0.12em', fontWeight: 600, textTransform: 'uppercase', fontSize: '0.75rem', marginBottom: '8px' }}>
Doormile Hub Console
</Typography>
<Typography variant="h4" sx={{ color: '#fff', fontWeight: 800, lineHeight: 1.2, mt: 1, mb: 2, fontSize: { md: '1.8rem', lg: '2.2rem' } }}>
Every parcel,
<br /> handled with ease.
</Typography>
<Typography sx={{ color: 'rgba(255,255,255,0.8)', mb: 4, fontSize: '0.9rem', lineHeight: 1.5 }}>
</div>
<h1 style={{ color: '#fff', fontWeight: 800, lineHeight: 1.2, margin: '8px 0 16px', fontSize: '2rem' }}>
Every parcel,<br /> handled with ease.
</h1>
<p style={{ color: 'rgba(255,255,255,0.8)', marginBottom: '32px', fontSize: '0.9rem', lineHeight: 1.5 }}>
Receive parcels, sort them, and send them out for delivery or transfer to another city all from one simple screen.
</Typography>
</p>
<Stack spacing={2.5}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
{[
{ icon: BoltIcon, t: 'We tell you which shelf each parcel goes on' },
{ icon: LocalShippingOutlinedIcon, t: 'Scan parcels in as trucks arrive' },
{ icon: VerifiedOutlinedIcon, t: 'Keep an eye on cold-storage parcels' }
{ icon: Zap, t: 'We tell you which shelf each parcel goes on' },
{ icon: Truck, t: 'Scan parcels in as trucks arrive' },
{ icon: ShieldCheck, t: 'Keep an eye on cold-storage parcels' }
].map((f) => (
<Stack key={f.t} direction="row" spacing={1.5} alignItems="center">
<Box sx={{ width: 34, height: 34, borderRadius: 2, bgcolor: 'rgba(255,255,255,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<f.icon fontSize="small" />
</Box>
<Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontWeight: 500, fontSize: '0.85rem' }}>{f.t}</Typography>
</Stack>
<div key={f.t} style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<div style={{ width: 34, height: 34, borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<f.icon size={16} />
</div>
<div style={{ color: 'rgba(255,255,255,0.9)', fontWeight: 500, fontSize: '0.85rem' }}>{f.t}</div>
</div>
))}
</Stack>
</Box>
</div>
</div>
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', mt: 3 }}>
<div style={{ color: 'rgba(255,255,255,0.5)', marginTop: '24px', fontSize: '0.75rem' }}>
© 2026 Doormile Logistics Pvt. Ltd.
</Typography>
</Box>
</div>
</div>
{/* Form Panel */}
<Box
sx={{
<div
style={{
flexGrow: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
p: { xs: 3, sm: 6 },
bgcolor: '#ffffff'
padding: '48px',
backgroundColor: '#ffffff'
}}
>
<Card
elevation={0}
sx={{
<div
style={{
width: '100%',
maxWidth: 420,
p: { xs: 3, sm: 4.5 },
padding: '36px',
border: '1px solid #eaeaea',
borderRadius: 3,
borderRadius: 12,
boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.02)'
}}
>
{/* BLACK LOGO REPLACEMENT (Mobile View) */}
<Box sx={{ display: { xs: 'flex', md: 'none' }, mb: 3, filter: 'brightness(0)' }}>
<div className="show-on-mobile" style={{ marginBottom: '24px', filter: 'brightness(0)' }}>
<Logo />
</Box>
</div>
<Typography variant="h4" sx={{ fontWeight: 700, color: '#111111', fontSize: '1.75rem' }}>Hub Sign In</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 4 }}>
<h2 style={{ fontWeight: 700, color: '#111111', fontSize: '1.75rem', margin: '0 0 4px 0' }}>Hub Sign In</h2>
<p style={{ color: '#64748b', fontSize: '0.875rem', margin: '0 0 32px 0' }}>
Sign in to your Doormile Hub operations account.
</Typography>
</p>
<Stack spacing={3}>
<Box>
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
<div>
<div style={{ marginBottom: '8px', fontWeight: 600, color: '#444', fontSize: '0.875rem' }}>
Username / Email
</Typography>
<TextField
fullWidth
</div>
<TextInput
style={{ width: '100%' }}
placeholder="Enter your email"
value={auth}
onChange={(e) => setAuth(e.target.value)}
onChange={setAuth}
onKeyDown={(e) => e.key === 'Enter' && handleSignIn()}
/>
</Box>
</div>
<Box>
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>
<div>
<div style={{ marginBottom: '8px', fontWeight: 600, color: '#444', fontSize: '0.875rem' }}>
Password
</Typography>
<TextField
fullWidth
type={show ? 'text' : 'password'}
placeholder="Enter your password"
value={pwd}
onChange={(e) => setPwd(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSignIn()}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShow((s) => !s)} edge="end" size="small">
{show ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
</IconButton>
</InputAdornment>
)
}}
/>
</Box>
</div>
<div style={{ position: 'relative' }}>
<TextInput
style={{ width: '100%', paddingRight: '40px' }}
type={show ? 'text' : 'password'}
placeholder="Enter your password"
value={pwd}
onChange={setPwd}
onKeyDown={(e) => e.key === 'Enter' && handleSignIn()}
/>
<button
onClick={() => setShow(!show)}
style={{ position: 'absolute', right: 12, top: 8, background: 'none', border: 'none', cursor: 'pointer', color: '#64748b' }}
>
{show ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
</div>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<FormControlLabel
control={<Checkbox defaultChecked size="small" sx={{ color: '#C01227', '&.Mui-checked': { color: '#C01227' } }} />}
label={<Typography variant="body2" sx={{ color: '#555' }}>Remember me</Typography>}
/>
<Link href="#" underline="hover" variant="body2" sx={{ color: '#C01227', fontWeight: 600 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<CheckboxInput defaultChecked />
<span style={{ fontSize: '0.875rem', color: '#555' }}>Remember me</span>
</div>
<a href="#" style={{ fontSize: '0.875rem', color: 'var(--color-brand)', fontWeight: 600, textDecoration: 'none' }}>
Forgot password?
</Link>
</Stack>
</a>
</div>
{error && (
<Alert severity="error" sx={{ borderRadius: 2 }}>
<div style={{ backgroundColor: '#fef2f2', color: '#b91c1c', padding: '12px', borderRadius: '8px', fontSize: '0.875rem' }}>
{error}
</Alert>
</div>
)}
<Button
fullWidth
size="large"
variant="contained"
variant="primary"
onClick={handleSignIn}
disabled={loading}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : null}
sx={{
bgcolor: '#C01227',
color: '#fff',
py: 1.5,
fontWeight: 600,
borderRadius: 2,
textTransform: 'none',
boxShadow: 'none',
'&:hover': {
bgcolor: '#9E0E20',
boxShadow: 'none'
}
}}
style={{ width: '100%', justifyContent: 'center' }}
>
{loading && <Loader2 size={16} className="spin" style={{ marginRight: '8px' }} />}
{loading ? 'Signing in…' : 'Sign In'}
</Button>
<Box sx={{ textAlign: 'center', mt: 1 }}>
<Typography variant="body2" color="text.secondary">
New to Hub Operations?{' '}
<Link
href="#"
onClick={(e) => { e.preventDefault(); navigate('/signup'); }}
underline="hover"
sx={{ color: '#C01227', fontWeight: 600 }}
>
Create an account
</Link>
</Typography>
</Box>
</Stack>
</Card>
</Box>
</Box>
<div style={{ textAlign: 'center', marginTop: '8px', fontSize: '0.875rem', color: '#64748b' }}>
New to Hub Operations?{' '}
<a
href="#"
onClick={(e) => { e.preventDefault(); navigate('/signup'); }}
style={{ color: 'var(--color-brand)', fontWeight: 600, textDecoration: 'none' }}
>
Create an account
</a>
</div>
</div>
</div>
</div>
<style>{`
.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@media (max-width: 768px) {
.hide-on-mobile { display: none !important; }
}
@media (min-width: 769px) {
.show-on-mobile { display: none !important; }
}
`}</style>
</div>
);
}

308
src/pages/auth/Signup.jsx
View File

@@ -1,28 +1,10 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Box,
Card,
Grid,
Stack,
Typography,
TextField,
InputAdornment,
IconButton,
Button,
Link,
MenuItem,
FormControl,
Select,
Checkbox,
FormControlLabel
} from '@mui/material';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import HubIcon from '@mui/icons-material/Hub';
import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import { Network, UserCheck, Shield, Eye, EyeOff } from 'lucide-react';
import { TextInput } from '@astryxdesign/core/TextInput';
import { CheckboxInput } from '@astryxdesign/core/CheckboxInput';
import Button from '@/components/Button';
import Logo from '@/components/Logo';
const HUBS = [
@@ -58,17 +40,18 @@ export default function Signup() {
};
return (
<Box sx={{ display: 'flex', minHeight: '100vh', width: '100vw', bgcolor: '#ffffff', overflow: 'hidden' }}>
<div style={{ display: 'flex', minHeight: '100vh', width: '100vw', backgroundColor: '#ffffff', overflow: 'hidden' }}>
{/* Brand Side Panel */}
<Box
sx={{
display: { xs: 'none', md: 'flex' },
<div
className="hide-on-mobile"
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
width: { md: '28%', lg: '27%', xl: '25%' },
width: '28%',
minWidth: '360px',
p: 5,
padding: '40px',
color: '#fff',
background: 'linear-gradient(150deg, #C01227 0%, #9E0E20 55%, #7E0B17 100%)',
position: 'relative',
@@ -77,185 +60,172 @@ export default function Signup() {
}}
>
{/* Background Decorative Circles */}
<Box sx={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', top: -120, right: -120 }} />
<Box sx={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', bottom: -80, left: -60 }} />
<div style={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.06)', top: -120, right: -120 }} />
<div style={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', backgroundColor: 'rgba(255,255,255,0.06)', bottom: -80, left: -60 }} />
{/* BLACK LOGO REPLACEMENT (Sidebar) */}
<Box sx={{ filter: 'brightness(0) invert(0)', display: 'inline-flex' }}>
<div style={{ filter: 'brightness(0) invert(1)', display: 'inline-flex' }}>
<Logo height={24} />
</Box>
</div>
<Box sx={{ position: 'relative', my: 'auto' }}>
<Typography variant="overline" sx={{ color: 'rgba(255,255,255,0.65)', letterSpacing: '0.12em', fontWeight: 600 }}>
<div style={{ position: 'relative', margin: 'auto 0' }}>
<div style={{ color: 'rgba(255,255,255,0.65)', letterSpacing: '0.12em', fontWeight: 600, textTransform: 'uppercase', fontSize: '0.75rem', marginBottom: '8px' }}>
Hub Registration Gateway
</Typography>
<Typography variant="h4" sx={{ color: '#fff', fontWeight: 800, lineHeight: 1.2, mt: 1, mb: 2, fontSize: { md: '1.8rem', lg: '2.2rem' } }}>
Join the Connected
<br /> Logistics Network.
</Typography>
<Typography sx={{ color: 'rgba(255,255,255,0.8)', mb: 4, fontSize: '0.9rem', lineHeight: 1.5 }}>
</div>
<h1 style={{ color: '#fff', fontWeight: 800, lineHeight: 1.2, margin: '8px 0 16px', fontSize: '2rem' }}>
Join the Connected<br /> Logistics Network.
</h1>
<p style={{ color: 'rgba(255,255,255,0.8)', marginBottom: '32px', fontSize: '0.9rem', lineHeight: 1.5 }}>
Create an operational profile to access state-of-the-art sorting stations, live manifest creations, and miler optimization modules.
</Typography>
</p>
<Stack spacing={2.5}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
{[
{ icon: HubIcon, t: 'Connect to any of the 15+ nationwide hubs' },
{ icon: AssignmentIndIcon, t: 'Role-based access controls for security' },
{ icon: VerifiedUserIcon, t: 'Activity logging and dispatch compliance verification' }
{ icon: Network, t: 'Connect to any of the 15+ nationwide hubs' },
{ icon: UserCheck, t: 'Role-based access controls for security' },
{ icon: Shield, t: 'Activity logging and dispatch compliance verification' }
].map((f) => (
<Stack key={f.t} direction="row" spacing={1.5} alignItems="center">
<Box sx={{ width: 34, height: 34, borderRadius: 2, bgcolor: 'rgba(255,255,255,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<f.icon fontSize="small" />
</Box>
<Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontWeight: 500, fontSize: '0.85rem' }}>{f.t}</Typography>
</Stack>
<div key={f.t} style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
<div style={{ width: 34, height: 34, borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<f.icon size={16} />
</div>
<div style={{ color: 'rgba(255,255,255,0.9)', fontWeight: 500, fontSize: '0.85rem' }}>{f.t}</div>
</div>
))}
</Stack>
</Box>
</div>
</div>
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', mt: 3 }}>
<div style={{ color: 'rgba(255,255,255,0.5)', marginTop: '24px', fontSize: '0.75rem' }}>
© 2026 Doormile Logistics Pvt. Ltd.
</Typography>
</Box>
</div>
</div>
{/* Form Panel */}
<Box
sx={{
<div
style={{
flexGrow: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
p: { xs: 3, sm: 6 },
bgcolor: '#ffffff'
padding: '48px',
backgroundColor: '#ffffff'
}}
>
<Card
elevation={0}
sx={{
<div
style={{
width: '100%',
maxWidth: 480,
p: { xs: 3, sm: 4.5 },
padding: '36px',
border: '1px solid #eaeaea',
borderRadius: 3,
borderRadius: 12,
boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.02)'
}}
>
{/* BLACK LOGO REPLACEMENT (Mobile View) */}
<Box sx={{ display: { xs: 'flex', md: 'none' }, mb: 3, filter: 'brightness(0)' }}>
<div className="show-on-mobile" style={{ marginBottom: '24px', filter: 'brightness(0)' }}>
<Logo />
</Box>
</div>
<Typography variant="h4" sx={{ fontWeight: 700, color: '#111111', fontSize: '1.75rem' }}>Request Access</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 4 }}>
<h2 style={{ fontWeight: 700, color: '#111111', fontSize: '1.75rem', margin: '0 0 4px 0' }}>Request Access</h2>
<p style={{ color: '#64748b', fontSize: '0.875rem', margin: '0 0 32px 0' }}>
Register your credentials to join hub operations.
</Typography>
</p>
<Box component="form" onSubmit={handleSignUp}>
<Stack spacing={3}>
<Box>
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>Full Name</Typography>
<TextField fullWidth required placeholder="Enter full name" value={name} onChange={(e) => setName(e.target.value)} />
</Box>
<form onSubmit={handleSignUp} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
<div>
<div style={{ marginBottom: '8px', fontWeight: 600, color: '#444', fontSize: '0.875rem' }}>Full Name</div>
<TextInput style={{ width: '100%' }} required placeholder="Enter full name" value={name} onChange={setName} />
</div>
<Box>
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>Work Email</Typography>
<TextField fullWidth required type="email" placeholder="Enter work email" value={email} onChange={(e) => setEmail(e.target.value)} />
</Box>
<div>
<div style={{ marginBottom: '8px', fontWeight: 600, color: '#444', fontSize: '0.875rem' }}>Work Email</div>
<TextInput style={{ width: '100%' }} required type="email" placeholder="Enter work email" value={email} onChange={setEmail} />
</div>
<Grid container spacing={2}>
<Grid size={{ xs: 12, sm: 6 }} >
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>Assign Hub</Typography>
<FormControl fullWidth>
<Select value={hub} onChange={(e) => setHub(e.target.value)}>
{HUBS.map((h) => (
<MenuItem key={h.value} value={h.value}>{h.label}</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid size={{ xs: 12, sm: 6 }} >
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>Select Role</Typography>
<FormControl fullWidth>
<Select value={role} onChange={(e) => setRole(e.target.value)}>
{ROLES.map((r) => (
<MenuItem key={r.value} value={r.value}>{r.label}</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</Grid>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
<div>
<div style={{ marginBottom: '8px', fontWeight: 600, color: '#444', fontSize: '0.875rem' }}>Assign Hub</div>
<select
value={hub}
onChange={(e) => setHub(e.target.value)}
style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid #d1d5db', background: '#fff', fontSize: '0.875rem' }}
>
{HUBS.map((h) => (
<option key={h.value} value={h.value}>{h.label}</option>
))}
</select>
</div>
<div>
<div style={{ marginBottom: '8px', fontWeight: 600, color: '#444', fontSize: '0.875rem' }}>Select Role</div>
<select
value={role}
onChange={(e) => setRole(e.target.value)}
style={{ width: '100%', padding: '8px 12px', borderRadius: '6px', border: '1px solid #d1d5db', background: '#fff', fontSize: '0.875rem' }}
>
{ROLES.map((r) => (
<option key={r.value} value={r.value}>{r.label}</option>
))}
</select>
</div>
</div>
<Box>
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>Password</Typography>
<TextField
fullWidth
<div>
<div style={{ marginBottom: '8px', fontWeight: 600, color: '#444', fontSize: '0.875rem' }}>Password</div>
<div style={{ position: 'relative' }}>
<TextInput
style={{ width: '100%', paddingRight: '40px' }}
required
type={show ? 'text' : 'password'}
placeholder="Create password"
value={pwd}
onChange={(e) => setPwd(e.target.value)}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShow((s) => !s)} edge="end" size="small">
{show ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
</IconButton>
</InputAdornment>
)
}}
onChange={setPwd}
/>
</Box>
<button
type="button"
onClick={() => setShow(!show)}
style={{ position: 'absolute', right: 12, top: 8, background: 'none', border: 'none', cursor: 'pointer', color: '#64748b' }}
>
{show ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
</div>
<FormControlLabel
control={<Checkbox checked={agree} onChange={(e) => setAgree(e.target.checked)} size="small" sx={{ color: '#C01227', '&.Mui-checked': { color: '#C01227' } }} required />}
label={
<Typography variant="body2" color="text.secondary">
I agree to the{' '}
<Link href="#" underline="hover" sx={{ color: '#C01227', fontWeight: 500 }}>Terms of Service</Link> and{' '}
<Link href="#" underline="hover" sx={{ color: '#C01227', fontWeight: 500 }}>Operations Guidelines</Link>.
</Typography>
}
/>
<Button
fullWidth
size="large"
variant="contained"
type="submit"
sx={{
bgcolor: '#C01227',
color: '#fff',
py: 1.5,
fontWeight: 600,
borderRadius: 2,
textTransform: 'none',
boxShadow: 'none',
'&:hover': {
bgcolor: '#9E0E20',
boxShadow: 'none'
}
}}
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
<CheckboxInput checked={agree} onCheckedChange={setAgree} required style={{ marginTop: '2px' }} />
<div style={{ fontSize: '0.875rem', color: '#64748b', lineHeight: 1.4 }}>
I agree to the{' '}
<a href="#" style={{ color: 'var(--color-brand)', fontWeight: 500, textDecoration: 'none' }}>Terms of Service</a> and{' '}
<a href="#" style={{ color: 'var(--color-brand)', fontWeight: 500, textDecoration: 'none' }}>Operations Guidelines</a>.
</div>
</div>
<Button
variant="primary"
type="submit"
style={{ width: '100%', justifyContent: 'center' }}
>
Register Account
</Button>
<div style={{ textAlign: 'center', marginTop: '8px', fontSize: '0.875rem', color: '#64748b' }}>
Already have an account?{' '}
<a
href="#"
onClick={(e) => { e.preventDefault(); navigate('/login'); }}
style={{ color: 'var(--color-brand)', fontWeight: 600, textDecoration: 'none' }}
>
Register Account
</Button>
<Box sx={{ textAlign: 'center', mt: 1 }}>
<Typography variant="body2" color="text.secondary">
Already have an account?{' '}
<Link
href="#"
onClick={(e) => { e.preventDefault(); navigate('/login'); }}
underline="hover"
sx={{ color: '#C01227', fontWeight: 600 }}
>
Sign In
</Link>
</Typography>
</Box>
</Stack>
</Box>
</Card>
</Box>
</Box>
Sign In
</a>
</div>
</form>
</div>
</div>
<style>{`
@media (max-width: 768px) {
.hide-on-mobile { display: none !important; }
}
@media (min-width: 769px) {
.show-on-mobile { display: none !important; }
}
`}</style>
</div>
);
}

563
src/pages/operations/Dispatch.jsx
View File

@@ -1,56 +1,57 @@
import { useState, useEffect, useCallback } from 'react';
import {
Box,
Typography,
Card,
CardContent,
CardHeader,
Grid,
Button,
Stack,
TextField,
MenuItem,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Chip,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Snackbar,
Alert,
Avatar,
Divider,
useMediaQuery,
CircularProgress
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import AddIcon from '@mui/icons-material/Add';
import SendIcon from '@mui/icons-material/Send';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import EastRoundedIcon from '@mui/icons-material/EastRounded';
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import TwoWheelerOutlinedIcon from '@mui/icons-material/TwoWheelerOutlined';
import SwapHorizOutlinedIcon from '@mui/icons-material/SwapHorizOutlined';
/* eslint-disable react/prop-types */
import { useState, useEffect, useCallback, useMemo } from 'react';
import { Truck, Plus, ArrowRight } from 'lucide-react';
import dayjs from 'dayjs';
import { Card } from '@astryxdesign/core/Card';
import { TextInput } from '@astryxdesign/core/TextInput';
import { Selector } from '@astryxdesign/core/Selector';
import { Banner } from '@astryxdesign/core/Banner';
import { Badge } from '@astryxdesign/core/Badge';
import { Heading, Text } from '@astryxdesign/core/Text';
import { Table, proportional, pixel } from '@astryxdesign/core/Table';
import { HStack, VStack } from '@astryxdesign/core/Layout';
import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
import { useToast } from '@astryxdesign/core/Toast';
import Panel from '@/components/Panel';
import Button from '@/components/Button';
import PageHeader from '@/components/PageHeader';
import { getBatches, createBatch, updateBatchStatus } from '@/api/hub';
import DateRangePicker, { DATE_FMT } from '@/components/DateRangePicker';
import { getBatchesRange, createBatch, updateBatchStatus } from '@/api/hub';
import { getHubContext } from '@/auth/session';
function useMediaQuery(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [matches, query]);
return matches;
}
const STATUS_META = {
Preparing: { color: '#B06000', bg: '#FEF7E0', label: 'Preparing' },
Ready: { color: '#1A73E8', bg: '#E8F0FE', label: 'Ready to send' },
Sent: { color: '#1E8E3E', bg: '#E6F4EA', label: 'Sent' }
Preparing: { variant: 'warning', label: 'Preparing' },
Ready: { variant: 'info', label: 'Ready to send' },
Sent: { variant: 'success', label: 'Sent' }
};
// API batch status (Draft/Ready/Dispatched) → the label set this page renders.
const API_TO_UI_STATUS = { Draft: 'Preparing', Ready: 'Ready', Dispatched: 'Sent' };
const ROUTE_OPTIONS = [
{ value: 'Transfer to Mumbai Hub', label: 'Transfer to another city — Mumbai Hub' },
{ value: 'Transfer to Bengaluru Hub', label: 'Transfer to another city — Bengaluru Hub' },
{ value: 'Local Delivery: Dwarka', label: 'Local Delivery — Dwarka' },
{ value: 'Local Delivery: Saket', label: 'Local Delivery — Saket' },
{ value: 'Local Delivery: Rohini', label: 'Local Delivery — Rohini' }
];
const timeAgo = (iso, verb = 'Created') => {
if (!iso) return `${verb} recently`;
const then = new Date(iso).getTime();
@@ -63,13 +64,22 @@ const timeAgo = (iso, verb = 'Created') => {
return `${verb} ${Math.round(hrs / 24)} d ago`;
};
// Route/destination color per batch status — same categorical tokens as
// Badge, so the highlighted destination reads as part of the same status
// language as the rest of the app instead of a one-off hex value.
const destinationTone = (variant) => {
if (variant === 'warning') return 'var(--color-warning)';
if (variant === 'info') return 'var(--color-text-primary)';
return 'var(--color-icon-green)';
};
export default function Dispatch() {
const theme = useTheme();
const isMdDown = useMediaQuery(theme.breakpoints.down('md'));
const isMdDown = useMediaQuery('(max-width: 900px)');
const hub = getHubContext();
const hubName = hub.hubname || 'this hub';
const toast = useToast();
const notify = (msg, status = 'success') => toast({ body: msg, type: status });
// Real backend: tripsheetno / route / destination / item_count / kind (no vehicle field).
const mapBatch = useCallback(
(b) => ({
tripsheetid: b.tripsheetid,
@@ -94,27 +104,32 @@ export default function Dispatch() {
const [creating, setCreating] = useState(false);
const [busyId, setBusyId] = useState(null);
// Create form state
const today = dayjs().format(DATE_FMT);
const [range, setRange] = useState({ from: today, to: today });
const isToday = range.from === today && range.to === today;
const rangeLabel = isToday
? 'today'
: range.from === range.to
? dayjs(range.from).format('DD MMM')
: `${dayjs(range.from).format('DD MMM')} – ${dayjs(range.to).format('DD MMM')}`;
const [newRoute, setNewRoute] = useState('Transfer to Mumbai Hub');
const [newDestination, setNewDestination] = useState('');
const [newVehicle, setNewVehicle] = useState('');
const [newPkgsCount, setNewPkgsCount] = useState('5');
// Toast state
const [toast, setToast] = useState({ open: false, msg: '', severity: 'success' });
const load = useCallback(async () => {
setLoading(true);
setLoadError('');
try {
const res = await getBatches();
const res = await getBatchesRange(range.from, range.to);
setManifests((res?.data || []).map(mapBatch));
} catch (err) {
setLoadError(err?.message || 'Could not load batches.');
} finally {
setLoading(false);
}
}, [mapBatch]);
}, [mapBatch, range.from, range.to]);
useEffect(() => {
load();
@@ -124,7 +139,7 @@ export default function Dispatch() {
e.preventDefault();
if (creating) return;
if (!newVehicle.trim() || !newDestination.trim()) {
setToast({ open: true, msg: 'Enter the destination and the miler / vehicle.', severity: 'warning' });
notify('Enter the destination and the miler / vehicle.', 'warning');
return;
}
const kind = newRoute.toLowerCase().startsWith('transfer') ? 'transfer' : 'local';
@@ -141,16 +156,15 @@ export default function Dispatch() {
setOpenModal(false);
setNewVehicle('');
setNewDestination('');
setToast({ open: true, msg: `Batch ${label} created successfully`, severity: 'success' });
notify(`Batch ${label} created successfully`);
load();
} catch (err) {
setToast({ open: true, msg: err?.message || 'Could not create the batch.', severity: 'error' });
notify(err?.message || 'Could not create the batch.', 'error');
} finally {
setCreating(false);
}
};
// Move a batch to the next status via PATCH.
const advance = async (m, apiStatus, uiStatus, okMsg) => {
if (busyId) return;
setBusyId(m.tripsheetid);
@@ -163,9 +177,9 @@ export default function Dispatch() {
: x
)
);
setToast({ open: true, msg: okMsg, severity: 'success' });
notify(okMsg);
} catch (err) {
setToast({ open: true, msg: err?.message || 'Could not update this batch.', severity: 'error' });
notify(err?.message || 'Could not update this batch.', 'error');
} finally {
setBusyId(null);
}
@@ -174,238 +188,259 @@ export default function Dispatch() {
const handleSeal = (m) => advance(m, 'Ready', 'Ready', `Batch ${m.id} checked and ready to send.`);
const handleDispatch = (m) => advance(m, 'Dispatched', 'Sent', `Batch ${m.id} sent out! The miler/driver has been notified.`);
// Action button shown for each batch based on its status
const BatchAction = ({ m, fullWidth }) => {
const isBusy = busyId === m.tripsheetid;
if (m.status === 'Preparing') {
return (
<Button size="small" variant="outlined" color="info" fullWidth={fullWidth} disabled={isBusy} onClick={() => handleSeal(m)}
startIcon={isBusy ? <CircularProgress size={14} color="inherit" /> : null} sx={{ borderRadius: 2, fontWeight: 700 }}>
Check &amp; Mark Ready
<Button variant="secondary" size="sm" style={{ width: fullWidth ? '100%' : 'auto', justifyContent: 'center' }} disabled={isBusy} onClick={() => handleSeal(m)}>
{isBusy ? 'Working...' : 'Check & Mark Ready'}
</Button>
);
}
if (m.status === 'Ready') {
return (
<Button size="small" variant="contained" color="success" fullWidth={fullWidth} disabled={isBusy}
startIcon={isBusy ? <CircularProgress size={14} color="inherit" /> : <SendIcon sx={{ fontSize: 16 }} />} onClick={() => handleDispatch(m)} sx={{ borderRadius: 2, fontWeight: 700, boxShadow: 'none' }}>
Send Out
<Button variant="primary" size="sm" style={{ width: fullWidth ? '100%' : 'auto', justifyContent: 'center' }} disabled={isBusy} onClick={() => handleDispatch(m)}>
{isBusy ? 'Working...' : 'Send Out'}
</Button>
);
}
return <Chip size="small" icon={<CheckCircleIcon />} label="Sent" color="success" variant="outlined" sx={{ fontWeight: 700 }} />;
return <Badge variant="success" label="Sent" />;
};
// Origin → destination journey, reused in cards and table
const Journey = ({ m }) => {
const meta = STATUS_META[m.status] || STATUS_META.Preparing;
return (
<Stack spacing={0.75}>
<Stack direction="row" alignItems="center" sx={{ flexWrap: 'wrap', gap: 0.75 }}>
<Typography variant="body2" sx={{ fontWeight: 700, color: '#343A40' }}>{m.origin}</Typography>
<EastRoundedIcon sx={{ fontSize: 16, color: '#ADB5BD' }} />
<Typography variant="body2" sx={{ fontWeight: 700, color: meta.color }}>{m.destination}</Typography>
</Stack>
<Typography variant="caption" color="text.secondary">{m.currentLoc}</Typography>
</Stack>
<VStack gap={0.5}>
<HStack gap={1.5} align="center" wrap="wrap">
<Text type="body" weight="bold">{m.origin}</Text>
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><ArrowRight size={14} /></span>
<Text type="body" weight="bold" style={{ color: destinationTone(meta.variant) }}>{m.destination}</Text>
</HStack>
<Text type="supporting" color="secondary">{m.currentLoc}</Text>
</VStack>
);
};
const columns = useMemo(() => [
{
key: 'batch',
header: 'Batch',
width: proportional(1.2),
renderCell: (row) => (
<VStack gap={0.5}>
<Text type="body" weight="bold" style={{ fontFamily: 'monospace' }}>{row.id}</Text>
<Text type="supporting" color="secondary">{row.time}</Text>
</VStack>
)
},
{
key: 'journey',
header: 'Journey',
width: proportional(2),
renderCell: (row) => <Journey m={row} />
},
{
key: 'vehicle',
header: 'Miler / Vehicle',
width: proportional(1),
renderCell: (row) => <Text type="body" weight="semibold">{row.vehicle}</Text>
},
{
key: 'parcels',
header: 'Parcels',
width: pixel(90),
renderCell: (row) => <Text type="body" weight="bold">{row.packagesCount}</Text>
},
{
key: 'status',
header: 'Status',
width: pixel(120),
renderCell: (row) => {
const meta = STATUS_META[row.status] || STATUS_META.Preparing;
return <Badge variant={meta.variant} label={meta.label} />;
}
},
{
key: 'actions',
header: '',
width: pixel(160),
align: 'end',
renderCell: (row) => <BatchAction m={row} />
}
], []);
return (
<Box>
<div style={{ paddingBottom: '32px' }}>
<PageHeader
icon={LocalShippingIcon}
icon={Truck}
title="Dispatch & Transfer"
subtitle="Group parcels that go out together, check them, and send them either out for local delivery or transferred to another city hub."
action={<DateRangePicker value={range} onChange={setRange} />}
/>
<Grid container spacing={3}>
{/* Manifest Actions & List */}
<Grid size={{ xs: 12 }} >
<Card>
<CardHeader
title="Outgoing Batches"
subheader={`Each batch is a group of parcels leaving ${hubName} together`}
action={
<Button variant="contained" startIcon={<AddIcon />} onClick={() => setOpenModal(true)}>
New Batch
</Button>
}
/>
<Divider />
{loadError && (
<Alert severity="error" onClose={() => setLoadError('')} sx={{ m: 2, borderRadius: 2 }}>
{loadError}
</Alert>
)}
{loading ? (
<Box sx={{ py: 8, display: 'flex', justifyContent: 'center' }}>
<CircularProgress />
</Box>
) : manifests.length === 0 && !loadError ? (
<Box sx={{ py: 8, textAlign: 'center' }}>
<LocalShippingIcon sx={{ fontSize: 56, color: '#CED4DA', mb: 1.5 }} />
<Typography variant="body2" color="text.secondary">No outgoing batches yet. Create one to get started.</Typography>
</Box>
) : isMdDown ? (
/* ── MOBILE / TABLET: spacious cards ── */
<Box sx={{ p: { xs: 2, sm: 2.5 }, display: 'flex', flexDirection: 'column', gap: 2 }}>
{manifests.map((m) => {
const meta = STATUS_META[m.status] || STATUS_META.Preparing;
const KindIcon = m.kind === 'transfer' ? SwapHorizOutlinedIcon : TwoWheelerOutlinedIcon;
return (
<Card key={m.id} elevation={0} sx={{ borderRadius: 3, border: '1px solid #ECEEF1' }}>
<CardContent sx={{ p: 2.25, '&:last-child': { pb: 2.25 } }}>
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1.5 }} gap={1}>
<Stack direction="row" alignItems="center" gap={1.5} sx={{ minWidth: 0 }}>
<Avatar variant="rounded" sx={{ bgcolor: meta.bg, color: meta.color, borderRadius: 2, width: 38, height: 38 }}>
<KindIcon sx={{ fontSize: 20 }} />
</Avatar>
<Box sx={{ minWidth: 0 }}>
<Typography sx={{ fontWeight: 800, fontFamily: 'monospace', color: '#1A1A2E', lineHeight: 1.2 }}>{m.id}</Typography>
<Typography variant="caption" color="text.secondary">{m.time}</Typography>
</Box>
</Stack>
<Chip size="small" label={meta.label} sx={{ fontWeight: 700, bgcolor: meta.bg, color: meta.color, flexShrink: 0 }} />
</Stack>
<Box sx={{ p: 1.5, bgcolor: '#FAFBFC', borderRadius: 2, mb: 1.5 }}>
<Journey m={m} />
</Box>
<Stack direction="row" flexWrap="wrap" gap={0.75} sx={{ mb: 2 }}>
<Chip size="small" icon={<TwoWheelerOutlinedIcon sx={{ fontSize: '15px !important' }} />} label={m.vehicle}
sx={{ bgcolor: '#F1F3F5', color: '#495057', fontWeight: 600, maxWidth: '100%', '& .MuiChip-icon': { color: '#9AA0A6' } }} />
<Chip size="small" icon={<Inventory2OutlinedIcon sx={{ fontSize: '15px !important' }} />} label={`${m.packagesCount} parcels`}
sx={{ bgcolor: '#F1F3F5', color: '#495057', fontWeight: 600, '& .MuiChip-icon': { color: '#9AA0A6' } }} />
</Stack>
<BatchAction m={m} fullWidth />
</CardContent>
</Card>
);
})}
</Box>
) : (
/* ── DESKTOP: spacious table ── */
<TableContainer sx={{ overflowX: 'auto' }}>
<Table sx={{ minWidth: 820 }}>
<TableHead>
<TableRow sx={{ bgcolor: '#FAFBFC' }}>
{['Batch', 'Journey', 'Miler / Vehicle', 'Parcels', 'Status', 'Action'].map((h, i) => (
<TableCell key={h} align={i === 3 ? 'center' : i === 5 ? 'right' : 'left'}
sx={{ fontWeight: 700, fontSize: '0.7rem', color: '#6C757D', textTransform: 'uppercase', letterSpacing: 0.5, py: 2, borderBottom: '1px solid #ECEEF1', whiteSpace: 'nowrap' }}>
{h}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{manifests.map((m) => {
const meta = STATUS_META[m.status] || STATUS_META.Preparing;
const KindIcon = m.kind === 'transfer' ? SwapHorizOutlinedIcon : TwoWheelerOutlinedIcon;
return (
<TableRow key={m.id} hover sx={{ '& td': { borderBottom: '1px solid #F4F6F8', py: 2.25 }, '&:last-child td': { border: 0 } }}>
<TableCell>
<Stack direction="row" alignItems="center" gap={1.5}>
<Avatar variant="rounded" sx={{ bgcolor: meta.bg, color: meta.color, borderRadius: 2, width: 38, height: 38 }}>
<KindIcon sx={{ fontSize: 20 }} />
</Avatar>
<Box>
<Typography sx={{ fontWeight: 800, fontFamily: 'monospace', color: '#1A1A2E', lineHeight: 1.2 }}>{m.id}</Typography>
<Typography variant="caption" color="text.secondary">{m.time}</Typography>
</Box>
</Stack>
</TableCell>
<TableCell sx={{ minWidth: 240 }}><Journey m={m} /></TableCell>
<TableCell sx={{ color: '#495057', fontWeight: 600, maxWidth: 200 }}>{m.vehicle}</TableCell>
<TableCell align="center" sx={{ whiteSpace: 'nowrap', fontWeight: 700, color: '#1A1A2E' }}>{m.packagesCount}</TableCell>
<TableCell>
<Chip size="small" label={meta.label} sx={{ fontWeight: 700, whiteSpace: 'nowrap', bgcolor: meta.bg, color: meta.color }} />
</TableCell>
<TableCell align="right"><BatchAction m={m} /></TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
</Card>
</Grid>
</Grid>
{/* Creation Modal */}
<Dialog open={openModal} onClose={() => setOpenModal(false)} fullWidth maxWidth="xs">
<DialogTitle sx={{ fontWeight: 700 }}>Create a New Batch</DialogTitle>
<DialogContent>
<Box component="form" onSubmit={handleCreateManifest} sx={{ mt: 1 }}>
<Stack spacing={2.5}>
<TextField
select
fullWidth
label="Where is this batch going?"
value={newRoute}
onChange={(e) => setNewRoute(e.target.value)}
>
<MenuItem value="Transfer to Mumbai Hub">Transfer to another city — Mumbai Hub</MenuItem>
<MenuItem value="Transfer to Bengaluru Hub">Transfer to another city — Bengaluru Hub</MenuItem>
<MenuItem value="Local Delivery: Dwarka">Local Delivery — Dwarka</MenuItem>
<MenuItem value="Local Delivery: Saket">Local Delivery — Saket</MenuItem>
<MenuItem value="Local Delivery: Rohini">Local Delivery — Rohini</MenuItem>
</TextField>
<TextField
fullWidth
label="Full destination address / hub"
placeholder="e.g. Dwarka Sector 12, Delhi"
value={newDestination}
onChange={(e) => setNewDestination(e.target.value)}
required
/>
<TextField
fullWidth
label="Miler name or vehicle number"
placeholder="e.g. Amit Kumar (EV) or DL-3C-YY-1092"
value={newVehicle}
onChange={(e) => setNewVehicle(e.target.value)}
required
/>
<TextField
fullWidth
type="number"
label="How many parcels?"
value={newPkgsCount}
onChange={(e) => setNewPkgsCount(e.target.value)}
inputProps={{ min: 1 }}
required
/>
</Stack>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenModal(false)} disabled={creating}>Cancel</Button>
<Button variant="contained" onClick={handleCreateManifest} disabled={creating}
startIcon={creating ? <CircularProgress size={16} color="inherit" /> : null}>
{creating ? 'Creating…' : 'Create Batch'}
<Panel>
<div
style={{
padding: '16px 20px',
borderBottom: '1px solid var(--color-border)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: '16px'
}}
>
<HStack gap={3} align="center">
<span
style={{
background: 'var(--color-background-blue)',
color: 'var(--color-icon-blue)',
width: 36,
height: 36,
borderRadius: 'var(--radius-element)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0
}}
>
<Truck size={18} />
</span>
<VStack gap={0}>
<Heading level={4} style={{ margin: 0 }}>Outgoing Batches</Heading>
<Text type="supporting" color="secondary">
{isToday
? `Each batch is a group of parcels leaving ${hubName} together`
: `${manifests.length} batch${manifests.length === 1 ? '' : 'es'} · ${rangeLabel}`}
</Text>
</VStack>
</HStack>
<Button variant="primary" onClick={() => setOpenModal(true)} icon={<Plus size={16} />}>
New Batch
</Button>
</DialogActions>
</Dialog>
</div>
<Snackbar
open={toast.open}
autoHideDuration={4000}
onClose={() => setToast({ ...toast, open: false })}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
>
<Alert severity={toast.severity} onClose={() => setToast({ ...toast, open: false })} sx={{ width: '100%' }}>
{toast.msg}
</Alert>
</Snackbar>
</Box>
{loadError && (
<div style={{ padding: '16px' }}>
<Banner status="error" title="Error" description={loadError} />
</div>
)}
{loading ? (
<div style={{ padding: '48px', textAlign: 'center' }}>
<Text type="body" color="secondary">Loading...</Text>
</div>
) : manifests.length === 0 && !loadError ? (
<div style={{ padding: '48px', textAlign: 'center' }}>
<Text type="body" color="secondary">
{isToday ? 'No outgoing batches yet. Create one to get started.' : `No batches ${rangeLabel}.`}
</Text>
</div>
) : isMdDown ? (
/* ── MOBILE / TABLET: cards ── */
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
{manifests.map((m) => {
const meta = STATUS_META[m.status] || STATUS_META.Preparing;
return (
<Card key={m.id} padding={3} style={{ border: '1px solid var(--color-border)' }}>
<HStack justify="between" align="center" style={{ marginBottom: '10px' }}>
<VStack gap={0}>
<Text type="body" weight="bold" style={{ fontFamily: 'monospace' }}>{m.id}</Text>
<Text type="supporting" color="secondary">{m.time}</Text>
</VStack>
<Badge variant={meta.variant} label={meta.label} />
</HStack>
<div style={{ padding: '10px 12px', background: 'var(--color-background-muted)', borderRadius: 'var(--radius-inner)', marginBottom: '12px' }}>
<Journey m={m} />
</div>
<HStack gap={4} style={{ marginBottom: '12px' }}>
<VStack gap={0}>
<Text type="supporting" color="secondary">Miler / Vehicle</Text>
<Text type="body" weight="semibold">{m.vehicle}</Text>
</VStack>
<VStack gap={0}>
<Text type="supporting" color="secondary">Parcels</Text>
<Text type="body" weight="semibold">{m.packagesCount}</Text>
</VStack>
</HStack>
<BatchAction m={m} fullWidth />
</Card>
);
})}
</div>
) : (
/* ── DESKTOP: table ── */
<div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
<Table
data={manifests}
columns={columns}
idKey="tripsheetid"
density="balanced"
dividers="rows"
hasHover
/>
</div>
)}
</Panel>
{/* Create Batch Dialog */}
<Dialog isOpen={openModal} onOpenChange={setOpenModal} width={480}>
<form onSubmit={handleCreateManifest}>
<Layout
header={<DialogHeader title="Create a New Batch" onOpenChange={setOpenModal} />}
content={
<LayoutContent>
<VStack gap={4} style={{ padding: '24px' }}>
<Selector
label="Where is this batch going?"
options={ROUTE_OPTIONS}
value={newRoute}
onChange={setNewRoute}
/>
<TextInput
label="Full destination address / hub"
placeholder="e.g. Dwarka Sector 12, Delhi"
value={newDestination}
onChange={(e) => setNewDestination(e.target.value)}
required
/>
<TextInput
label="Miler name or vehicle number"
placeholder="e.g. Amit Kumar (EV) or DL-3C-YY-1092"
value={newVehicle}
onChange={(e) => setNewVehicle(e.target.value)}
required
/>
<TextInput
type="number"
label="How many parcels?"
value={newPkgsCount}
onChange={(e) => setNewPkgsCount(e.target.value)}
min="1"
required
/>
</VStack>
</LayoutContent>
}
footer={
<LayoutFooter hasDivider>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', width: '100%', padding: '16px 24px' }}>
<Button variant="ghost" onClick={() => setOpenModal(false)} disabled={creating}>Cancel</Button>
<Button variant="primary" type="submit" disabled={creating}>
{creating ? 'Creating…' : 'Create Batch'}
</Button>
</div>
</LayoutFooter>
}
/>
</form>
</Dialog>
</div>
);
}

407
src/pages/operations/HubSettings.jsx
View File

@@ -1,25 +1,43 @@
import { useState, useEffect, useCallback } from 'react';
import {
Box, Card, CardContent, CardHeader, Button, Stack, Typography, Divider, Avatar, Chip,
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useMediaQuery,
Dialog, DialogTitle, DialogContent, DialogActions, TextField, MenuItem, InputAdornment,
IconButton, Snackbar, Alert, CircularProgress
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
import WarehouseOutlinedIcon from '@mui/icons-material/WarehouseOutlined';
import AddIcon from '@mui/icons-material/Add';
import PersonAddAlt1OutlinedIcon from '@mui/icons-material/PersonAddAlt1Outlined';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
/* eslint-disable react/prop-types */
import { useState, useEffect, useCallback, useMemo } from 'react';
import { Settings, Warehouse, Plus, UserPlus, Eye, EyeOff } from 'lucide-react';
import { Card } from '@astryxdesign/core/Card';
import { Text } from '@astryxdesign/core/Text';
import { HStack, VStack } from '@astryxdesign/core/Layout';
import { Badge } from '@astryxdesign/core/Badge';
import { TextInput } from '@astryxdesign/core/TextInput';
import { NumberInput } from '@astryxdesign/core/NumberInput';
import { Selector } from '@astryxdesign/core/Selector';
import { IconButton } from '@astryxdesign/core/IconButton';
import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
import { Table, proportional, pixel } from '@astryxdesign/core/Table';
import { EmptyState } from '@astryxdesign/core/EmptyState';
import { Banner } from '@astryxdesign/core/Banner';
import { Spinner } from '@astryxdesign/core/Spinner';
import { useToast } from '@astryxdesign/core/Toast';
import Panel from '@/components/Panel';
import Button from '@/components/Button';
import PageHeader from '@/components/PageHeader';
import { getHubs, createHub, createStaff } from '@/api/hub';
import { getHubContext } from '@/auth/session';
const BRAND = '#C01227';
function useMediaQuery(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [matches, query]);
return matches;
}
const HUB_TYPES = [
{ value: 'sorting_center', label: 'Sorting Center' },
{ value: 'delivery_hub', label: 'Delivery Hub' },
@@ -27,20 +45,24 @@ const HUB_TYPES = [
{ value: 'warehouse', label: 'Warehouse' }
];
const EMPTY_HUB = { hubname: '', hubtype: 'spoke', capacity: '30', contact: '', address: '', pincode: '' };
const EMPTY_HUB = { hubname: '', hubtype: 'spoke', capacity: 30, contact: '', address: '', pincode: '' };
const EMPTY_STAFF = { hubid: '', email: '', password: '', displayname: '' };
const prettyType = (t) => HUB_TYPES.find((h) => h.value === t)?.label || t || '—';
function StaffBadge({ has }) {
return has ? <Badge variant="success" label="Has login" /> : <Badge variant="warning" label="No login" />;
}
export default function HubSettings() {
const theme = useTheme();
const isMdDown = useMediaQuery(theme.breakpoints.down('md'));
const isMdDown = useMediaQuery('(max-width: 900px)');
const hub = getHubContext();
const toast = useToast();
const notify = (msg, status = 'success') => toast({ body: msg, type: status });
const [hubs, setHubs] = useState([]);
const [loading, setLoading] = useState(true);
const [loadError, setLoadError] = useState('');
const [toast, setToast] = useState({ open: false, msg: '', severity: 'success' });
const [hubDialog, setHubDialog] = useState(false);
const [hubForm, setHubForm] = useState(EMPTY_HUB);
@@ -51,8 +73,6 @@ export default function HubSettings() {
const [showPwd, setShowPwd] = useState(false);
const [savingStaff, setSavingStaff] = useState(false);
const notify = (msg, severity = 'success') => setToast({ open: true, msg, severity });
const load = useCallback(async () => {
setLoading(true);
setLoadError('');
@@ -80,7 +100,8 @@ export default function HubSettings() {
setStaffDialog(true);
};
const submitHub = async () => {
const submitHub = async (e) => {
e.preventDefault();
if (savingHub) return;
if (!hubForm.hubname.trim()) {
notify('Enter a hub name.', 'warning');
@@ -91,7 +112,7 @@ export default function HubSettings() {
await createHub({
hubname: hubForm.hubname.trim(),
hubtype: hubForm.hubtype,
capacity: parseInt(hubForm.capacity, 10) || 0,
capacity: hubForm.capacity || 0,
contact: hubForm.contact.trim(),
address: hubForm.address.trim(),
pincode: hubForm.pincode.trim()
@@ -106,7 +127,8 @@ export default function HubSettings() {
}
};
const submitStaff = async () => {
const submitStaff = async (e) => {
e.preventDefault();
if (savingStaff) return;
if (!staffForm.hubid || !staffForm.email.trim() || !staffForm.password) {
notify('Hub, email and password are all required.', 'warning');
@@ -131,184 +153,209 @@ export default function HubSettings() {
}
};
const StaffChip = ({ has }) =>
has ? (
<Chip size="small" icon={<CheckCircleOutlinedIcon sx={{ fontSize: '15px !important' }} />} label="Has login"
sx={{ fontWeight: 700, bgcolor: '#E6F4EA', color: '#1E8E3E', '& .MuiChip-icon': { color: '#1E8E3E' } }} />
) : (
<Chip size="small" icon={<HighlightOffOutlinedIcon sx={{ fontSize: '15px !important' }} />} label="No login"
sx={{ fontWeight: 700, bgcolor: '#FEF7E0', color: '#B06000', '& .MuiChip-icon': { color: '#B06000' } }} />
);
const columns = useMemo(() => [
{
key: 'hubname',
header: 'Hub',
width: proportional(1.4),
renderCell: (h) => <Text type="body" weight="bold">{h.hubname}</Text>
},
{
key: 'hubtype',
header: 'Type',
width: proportional(1),
renderCell: (h) => <Text type="body">{prettyType(h.hubtype)}</Text>
},
{
key: 'capacity',
header: 'Capacity',
width: pixel(110),
renderCell: (h) => <Text type="body">{h.capacity}</Text>
},
{
key: 'status',
header: 'Status',
width: pixel(120),
renderCell: (h) => <Badge variant="blue" label={h.status || 'active'} />
},
{
key: 'staff',
header: 'Staff Login',
width: pixel(140),
renderCell: (h) => <StaffBadge has={h.has_staff ?? h.has_staff_account} />
}
], []);
return (
<Box>
<div style={{ paddingBottom: '32px' }}>
<PageHeader
icon={SettingsRoundedIcon}
icon={Settings}
title="Hub Settings"
subtitle={`Create and manage hubs and staff logins${hub.city ? ` across ${hub.city}` : ''}. Doormile staff only.`}
/>
<Card>
<CardHeader
title={`Hubs in ${hub.city || 'your city'}`}
subheader="Every hub Doormile operates here"
avatar={<Avatar variant="rounded" sx={{ bgcolor: '#C0122710', color: BRAND, borderRadius: 2 }}><WarehouseOutlinedIcon /></Avatar>}
action={
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5}>
<Button variant="outlined" startIcon={<PersonAddAlt1OutlinedIcon />} onClick={openStaffDialog} disabled={hubs.length === 0}
sx={{ borderRadius: 2, fontWeight: 700 }}>
Add Staff
</Button>
<Button variant="contained" startIcon={<AddIcon />} onClick={openHubDialog}
sx={{ borderRadius: 2, fontWeight: 700, bgcolor: BRAND, '&:hover': { bgcolor: '#9E0E20' } }}>
Add New Hub
</Button>
</Stack>
}
sx={{ flexWrap: 'wrap', gap: 1, '& .MuiCardHeader-action': { m: 0, alignSelf: 'center' } }}
/>
<Divider />
<Panel>
<div
style={{
padding: '16px 20px',
borderBottom: '1px solid var(--color-border)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: '16px'
}}
>
<HStack gap={3} align="center">
<span
style={{
background: 'var(--color-background-blue)',
color: 'var(--color-icon-blue)',
width: 40,
height: 40,
borderRadius: 'var(--radius-element)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0
}}
>
<Warehouse size={20} />
</span>
<VStack gap={0.5}>
<Text type="body" weight="bold">Hubs in {hub.city || 'your city'}</Text>
<Text type="supporting" color="secondary">Every hub Doormile operates here</Text>
</VStack>
</HStack>
<HStack gap={2}>
<Button variant="secondary" icon={<UserPlus size={16} />} onClick={openStaffDialog} disabled={hubs.length === 0}>Add Staff</Button>
<Button variant="primary" icon={<Plus size={16} />} onClick={openHubDialog}>Add New Hub</Button>
</HStack>
</div>
{loadError && (
<Alert severity="error" onClose={() => setLoadError('')} sx={{ m: 2, borderRadius: 2 }}>
{loadError}
</Alert>
<div style={{ padding: '16px' }}>
<Banner status="error" title="Error" description={loadError} />
</div>
)}
{loading ? (
<Box sx={{ py: 8, display: 'flex', justifyContent: 'center' }}>
<CircularProgress />
</Box>
<div style={{ padding: '48px', display: 'flex', justifyContent: 'center' }}>
<Spinner label="Loading hubs" size="lg" />
</div>
) : hubs.length === 0 && !loadError ? (
<Box sx={{ py: 8, textAlign: 'center' }}>
<WarehouseOutlinedIcon sx={{ fontSize: 56, color: '#CED4DA', mb: 1.5 }} />
<Typography variant="body2" color="text.secondary">No hubs yet. Add your first hub.</Typography>
</Box>
<EmptyState
icon={<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><Warehouse size={48} /></span>}
title="No hubs yet"
description="Add your first hub to get started."
style={{ padding: '48px 0' }}
/>
) : isMdDown ? (
<Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
{hubs.map((h) => (
<Card key={h.hubid} elevation={0} sx={{ borderRadius: 2, border: '1px solid #ECEEF1' }}>
<CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" gap={1}>
<Box>
<Typography sx={{ fontWeight: 800, color: '#1A1A2E' }}>{h.hubname}</Typography>
<Typography variant="caption" color="text.secondary">{prettyType(h.hubtype)} · Cap {h.capacity}</Typography>
</Box>
<StaffChip has={(h.has_staff ?? h.has_staff_account)} />
</Stack>
</CardContent>
<Card key={h.hubid} padding={3} style={{ border: '1px solid var(--color-border)' }}>
<HStack justify="between" align="start" gap={2}>
<VStack gap={0}>
<Text type="body" weight="bold">{h.hubname}</Text>
<Text type="supporting" color="secondary">{prettyType(h.hubtype)} · Cap {h.capacity}</Text>
</VStack>
<StaffBadge has={h.has_staff ?? h.has_staff_account} />
</HStack>
</Card>
))}
</Box>
</div>
) : (
<TableContainer>
<Table sx={{ minWidth: 640 }}>
<TableHead>
<TableRow sx={{ bgcolor: '#FAFBFC' }}>
{['Hub', 'Type', 'Capacity', 'Status', 'Staff Login'].map((h) => (
<TableCell key={h} sx={{ fontWeight: 700, fontSize: '0.7rem', color: '#6C757D', textTransform: 'uppercase', letterSpacing: 0.5, py: 1.75 }}>
{h}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{hubs.map((h) => (
<TableRow key={h.hubid} hover>
<TableCell sx={{ fontWeight: 700, color: '#1A1A2E' }}>{h.hubname}</TableCell>
<TableCell>{prettyType(h.hubtype)}</TableCell>
<TableCell>{h.capacity}</TableCell>
<TableCell>
<Chip size="small" label={h.status || 'active'}
sx={{ fontWeight: 700, textTransform: 'capitalize', bgcolor: '#E8F0FE', color: '#1A73E8' }} />
</TableCell>
<TableCell><StaffChip has={(h.has_staff ?? h.has_staff_account)} /></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
<Table data={hubs} columns={columns} idKey="hubid" density="balanced" dividers="rows" hasHover />
</div>
)}
</Card>
</Panel>
{/* Create Hub dialog */}
<Dialog open={hubDialog} onClose={() => setHubDialog(false)} fullWidth maxWidth="sm">
<DialogTitle sx={{ fontWeight: 700 }}>Add a New Hub</DialogTitle>
<DialogContent>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
The city is set automatically from your hub — it can’t be changed here.
</Typography>
<Stack spacing={2.5} sx={{ mt: 0.5 }}>
<TextField fullWidth label="Hub name" value={hubForm.hubname} required
onChange={(e) => setHubForm((f) => ({ ...f, hubname: e.target.value }))} />
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
<TextField select fullWidth label="Hub type" value={hubForm.hubtype}
onChange={(e) => setHubForm((f) => ({ ...f, hubtype: e.target.value }))}>
{HUB_TYPES.map((t) => <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>)}
</TextField>
<TextField fullWidth type="number" label="Capacity" value={hubForm.capacity} inputProps={{ min: 0 }}
onChange={(e) => setHubForm((f) => ({ ...f, capacity: e.target.value }))} />
</Stack>
<TextField fullWidth label="Contact number" value={hubForm.contact}
onChange={(e) => setHubForm((f) => ({ ...f, contact: e.target.value }))} />
<TextField fullWidth label="Address" value={hubForm.address}
onChange={(e) => setHubForm((f) => ({ ...f, address: e.target.value }))} />
<TextField fullWidth label="Pincode" value={hubForm.pincode}
onChange={(e) => setHubForm((f) => ({ ...f, pincode: e.target.value }))} />
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setHubDialog(false)} disabled={savingHub}>Cancel</Button>
<Button variant="contained" onClick={submitHub} disabled={savingHub}
startIcon={savingHub ? <CircularProgress size={16} color="inherit" /> : null}
sx={{ bgcolor: BRAND, '&:hover': { bgcolor: '#9E0E20' } }}>
{savingHub ? 'Creating…' : 'Create Hub'}
</Button>
</DialogActions>
<Dialog isOpen={hubDialog} onOpenChange={setHubDialog} width={480} purpose="form">
<form onSubmit={submitHub}>
<Layout
header={<DialogHeader title="Add a New Hub" onOpenChange={setHubDialog} />}
content={
<LayoutContent>
<VStack gap={4} style={{ padding: '24px' }}>
<Text type="supporting" color="secondary">The city is set automatically from your hub — it can&rsquo;t be changed here.</Text>
<TextInput label="Hub name" value={hubForm.hubname} isRequired onChange={(e) => setHubForm((f) => ({ ...f, hubname: e.target.value }))} />
<HStack gap={3} wrap="wrap">
<div style={{ flex: '1 1 180px' }}>
<Selector label="Hub type" options={HUB_TYPES} value={hubForm.hubtype} onChange={(v) => setHubForm((f) => ({ ...f, hubtype: v }))} />
</div>
<div style={{ flex: '1 1 140px' }}>
<NumberInput label="Capacity" value={hubForm.capacity} min={0} onChange={(v) => setHubForm((f) => ({ ...f, capacity: v }))} />
</div>
</HStack>
<TextInput label="Contact number" value={hubForm.contact} onChange={(e) => setHubForm((f) => ({ ...f, contact: e.target.value }))} />
<TextInput label="Address" value={hubForm.address} onChange={(e) => setHubForm((f) => ({ ...f, address: e.target.value }))} />
<TextInput label="Pincode" value={hubForm.pincode} onChange={(e) => setHubForm((f) => ({ ...f, pincode: e.target.value }))} />
</VStack>
</LayoutContent>
}
footer={
<LayoutFooter hasDivider>
<HStack justify="end" gap={2} style={{ width: '100%', padding: '16px 24px' }}>
<Button variant="ghost" onClick={() => setHubDialog(false)} disabled={savingHub}>Cancel</Button>
<Button variant="primary" type="submit" disabled={savingHub}>{savingHub ? 'Creating…' : 'Create Hub'}</Button>
</HStack>
</LayoutFooter>
}
/>
</form>
</Dialog>
{/* Create Staff dialog */}
<Dialog open={staffDialog} onClose={() => setStaffDialog(false)} fullWidth maxWidth="sm">
<DialogTitle sx={{ fontWeight: 700 }}>Add a Hub Staff Login</DialogTitle>
<DialogContent>
<Stack spacing={2.5} sx={{ mt: 1 }}>
<TextField select fullWidth label="Hub" value={staffForm.hubid} required
onChange={(e) => setStaffForm((f) => ({ ...f, hubid: e.target.value }))}>
{hubs.map((h) => <MenuItem key={h.hubid} value={h.hubid}>{h.hubname}</MenuItem>)}
</TextField>
<TextField fullWidth label="Display name" value={staffForm.displayname}
onChange={(e) => setStaffForm((f) => ({ ...f, displayname: e.target.value }))} />
<TextField fullWidth type="email" label="Email" value={staffForm.email} required
onChange={(e) => setStaffForm((f) => ({ ...f, email: e.target.value }))} />
<TextField fullWidth type={showPwd ? 'text' : 'password'} label="Password" value={staffForm.password} required
onChange={(e) => setStaffForm((f) => ({ ...f, password: e.target.value }))}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowPwd((s) => !s)} edge="end" size="small">
{showPwd ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
</IconButton>
</InputAdornment>
)
}} />
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setStaffDialog(false)} disabled={savingStaff}>Cancel</Button>
<Button variant="contained" onClick={submitStaff} disabled={savingStaff}
startIcon={savingStaff ? <CircularProgress size={16} color="inherit" /> : null}
sx={{ bgcolor: BRAND, '&:hover': { bgcolor: '#9E0E20' } }}>
{savingStaff ? 'Creating…' : 'Create Login'}
</Button>
</DialogActions>
<Dialog isOpen={staffDialog} onOpenChange={setStaffDialog} width={480} purpose="form">
<form onSubmit={submitStaff}>
<Layout
header={<DialogHeader title="Add a Hub Staff Login" onOpenChange={setStaffDialog} />}
content={
<LayoutContent>
<VStack gap={4} style={{ padding: '24px' }}>
<Selector
label="Hub"
isRequired
options={hubs.map((h) => ({ value: String(h.hubid), label: h.hubname }))}
value={String(staffForm.hubid)}
onChange={(v) => setStaffForm((f) => ({ ...f, hubid: v }))}
/>
<TextInput label="Display name" value={staffForm.displayname} onChange={(e) => setStaffForm((f) => ({ ...f, displayname: e.target.value }))} />
<TextInput type="email" label="Email" value={staffForm.email} isRequired onChange={(e) => setStaffForm((f) => ({ ...f, email: e.target.value }))} />
<HStack gap={2} align="end">
<div style={{ flex: 1 }}>
<TextInput
type={showPwd ? 'text' : 'password'}
label="Password"
value={staffForm.password}
isRequired
onChange={(e) => setStaffForm((f) => ({ ...f, password: e.target.value }))}
/>
</div>
<IconButton
label={showPwd ? 'Hide password' : 'Show password'}
tooltip={showPwd ? 'Hide password' : 'Show password'}
icon={showPwd ? <EyeOff size={16} /> : <Eye size={16} />}
variant="secondary"
onClick={() => setShowPwd((s) => !s)}
/>
</HStack>
</VStack>
</LayoutContent>
}
footer={
<LayoutFooter hasDivider>
<HStack justify="end" gap={2} style={{ width: '100%', padding: '16px 24px' }}>
<Button variant="ghost" onClick={() => setStaffDialog(false)} disabled={savingStaff}>Cancel</Button>
<Button variant="primary" type="submit" disabled={savingStaff}>{savingStaff ? 'Creating…' : 'Create Login'}</Button>
</HStack>
</LayoutFooter>
}
/>
</form>
</Dialog>
<Snackbar open={toast.open} autoHideDuration={4000} onClose={() => setToast({ ...toast, open: false })}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
<Alert severity={toast.severity} variant="filled" onClose={() => setToast({ ...toast, open: false })} sx={{ borderRadius: 2, fontWeight: 600 }}>
{toast.msg}
</Alert>
</Snackbar>
</Box>
</div>
);
}

561
src/pages/operations/Inbound.jsx
View File

@@ -1,28 +1,26 @@
import { useState, useMemo, useEffect, useCallback } from 'react';
import {
Box, Typography, Card, CardContent, Grid, TextField, Button, Stack,
MenuItem, Table, TableBody, TableCell, TableContainer, TableHead,
TableRow, Chip, Alert, Snackbar, InputAdornment, Avatar, Divider,
useMediaQuery, CircularProgress
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import QrCodeScannerOutlinedIcon from '@mui/icons-material/QrCodeScannerOutlined';
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
import EastOutlinedIcon from '@mui/icons-material/EastOutlined';
import MoveToInboxOutlinedIcon from '@mui/icons-material/MoveToInboxOutlined';
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined';
import AcUnitOutlinedIcon from '@mui/icons-material/AcUnitOutlined';
import ScaleOutlinedIcon from '@mui/icons-material/ScaleOutlined';
import ThermostatOutlinedIcon from '@mui/icons-material/ThermostatOutlined';
import WarehouseOutlinedIcon from '@mui/icons-material/WarehouseOutlined';
import HomeWorkOutlinedIcon from '@mui/icons-material/HomeWorkOutlined';
import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
QrCode, Truck, CheckCircle2, ArrowRight, Inbox,
Package, AlertTriangle, Snowflake,
Warehouse, MapPin, Loader2, Flag
} from 'lucide-react';
import dayjs from 'dayjs';
import { TextInput } from '@astryxdesign/core/TextInput';
import { Heading, Text } from '@astryxdesign/core/Text';
import { Button } from '@astryxdesign/core/Button';
import { Card } from '@astryxdesign/core/Card';
import { FormLayout } from '@astryxdesign/core/FormLayout';
import { Field } from '@astryxdesign/core/Field';
import { Table, proportional, pixel } from '@astryxdesign/core/Table';
import { Badge } from '@astryxdesign/core/Badge';
import { EmptyState } from '@astryxdesign/core/EmptyState';
import { useToast } from '@astryxdesign/core/Toast';
import { Banner } from '@astryxdesign/core/Banner';
import PageHeader from '@/components/PageHeader';
import { getInboundToday, inboundBooking } from '@/api/hub';
import DateRangePicker, { DATE_FMT } from '@/components/DateRangePicker';
import StatCard from '@/components/StatCard';
import { getInboundRange, inboundBooking } from '@/api/hub';
import { getHubContext } from '@/auth/session';
const SHELVES = ['Zone A (Shelf 1)', 'Zone A (Shelf 2)', 'Zone B (Shelf 1)', 'Zone C (Cold Room)', 'Exception Area'];
@@ -34,11 +32,10 @@ const ORIGINS = [
{ value: 'Client Pickup', label: 'Direct Client Pickup (Local)' }
];
// Turn an ISO timestamp into a friendly "10 min ago" label.
const timeAgo = (iso) => {
if (!iso) return 'Recently';
const then = new Date(iso).getTime();
if (Number.isNaN(then) || then < 1420070400000) return 'Recently'; // guard zero/0001 dates
if (Number.isNaN(then) || then < 1420070400000) return 'Recently';
const mins = Math.round((Date.now() - then) / 60000);
if (mins < 1) return 'Just now';
if (mins < 60) return `${mins} min ago`;
@@ -47,11 +44,7 @@ const timeAgo = (iso) => {
return `${Math.round(hrs / 24)} d ago`;
};
// Map an API inbound record onto the shape this page renders.
// Real backend uses consignmentid / trackingno / chargeableweight / deliverypincode.
const mapInbound = (row, hubName) => {
// Backend GET /hub/inbound/today sends: originname, destinationname, updatedat.
// (chargeableweight is NOT sent by this endpoint yet — see the note to backend.)
const w = row.chargeableweight ?? row.deadweight ?? row.weight;
return {
bookingid: row.consignmentid ?? row.bookingid,
@@ -59,8 +52,7 @@ const mapInbound = (row, hubName) => {
sender: row.sendername || (row.senderid ? `Sender #${row.senderid}` : '—'),
origin: row.originname || row.origin || (row.originhubid ? `Hub ${row.originhubid}` : '—'),
currentLoc: hubName,
destination:
row.destinationname || row.destination || row.deliverypincode || (row.destinationhubid ? `Hub ${row.destinationhubid}` : '—'),
destination: row.destinationname || row.destination || row.deliverypincode || (row.destinationhubid ? `Hub ${row.destinationhubid}` : '—'),
weight: typeof w === 'string' ? w : w != null ? `${w} kg` : '—',
condition: row.condition || 'Good',
temp: row.temperature || 'N/A',
@@ -69,18 +61,12 @@ const mapInbound = (row, hubName) => {
};
};
const shelfStyle = (shelf) => {
if (shelf === 'Exception Area') return { color: '#D93025', bg: '#FCE8E6' };
if (shelf.includes('Cold')) return { color: '#00838F', bg: '#E0F7FA' };
return { color: '#1A73E8', bg: '#E8F0FE' };
};
const isGood = (c) => c === 'Good';
export default function Inbound() {
const theme = useTheme();
const isMdDown = useMediaQuery(theme.breakpoints.down('md'));
const hub = getHubContext();
const hubName = hub.hubname || 'this hub';
const toast = useToast();
const [bookingId, setBookingId] = useState('');
const [trackingId, setTrackingId] = useState('');
@@ -96,22 +82,28 @@ export default function Inbound() {
const [inboundLogs, setInboundLogs] = useState([]);
const [loading, setLoading] = useState(true);
const [loadError, setLoadError] = useState('');
const [toast, setToast] = useState({ open: false, msg: '', severity: 'success' });
const today = dayjs().format(DATE_FMT);
const [range, setRange] = useState({ from: today, to: today });
const isToday = range.from === today && range.to === today;
const rangeLabel = isToday
? 'today'
: range.from === range.to
? dayjs(range.from).format('DD MMM')
: `${dayjs(range.from).format('DD MMM')} – ${dayjs(range.to).format('DD MMM')}`;
const loadInbound = useCallback(async () => {
setLoading(true);
setLoadError('');
try {
const res = await getInboundToday();
const res = await getInboundRange(range.from, range.to);
setInboundLogs((res?.data || []).map((r) => mapInbound(r, hubName)));
} catch (err) {
setLoadError(err?.message || 'Could not load today’s inbound parcels.');
setLoadError(err?.message || 'Could not load inbound parcels.');
} finally {
setLoading(false);
}
// hubName is derived from a stable localStorage read; safe to omit.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [range.from, range.to, hubName]);
useEffect(() => {
loadInbound();
@@ -125,7 +117,6 @@ export default function Inbound() {
return { received, exceptions, coldChain, pendingSort };
}, [inboundLogs]);
// Local preview of the shelf the backend is likely to recommend (it decides for real).
const recommendShelf = () => {
if (condition.includes('Damaged') || condition.includes('Wet') || condition.includes('Missing')) return 'Exception Area';
if (temp !== 'N/A' && temp !== '') return 'Zone C (Cold Room)';
@@ -136,7 +127,7 @@ export default function Inbound() {
e.preventDefault();
if (submitting) return;
if (!bookingId.trim() || !trackingId.trim()) {
setToast({ open: true, msg: 'Enter the booking ID and tracking ID to scan a parcel in.', severity: 'warning' });
toast({ body: 'Enter the booking ID and tracking ID to scan a parcel in.', type: 'warning' });
return;
}
@@ -152,7 +143,6 @@ export default function Inbound() {
const data = res?.data || {};
const shelf = data.recommended_shelf || recommendShelf();
// Optimistically prepend, then refresh from the server for the source of truth.
setInboundLogs((prev) => [
{
bookingid: data.bookingid ?? bookingId,
@@ -169,291 +159,288 @@ export default function Inbound() {
},
...prev
]);
setToast({ open: true, msg: `${data.trackingnumber || trackingId.trim()} received · routed to ${shelf}`, severity: 'success' });
toast({ body: `${data.trackingnumber || trackingId.trim()} received · routed to ${shelf}`, type: 'success' });
setBookingId(''); setTrackingId(''); setCustomer(''); setSenderAddress(''); setDestination(''); setWeight(''); setCondition('Good'); setTemp('');
loadInbound();
} catch (err) {
// 404 = the booking ID doesn't exist. This screen receives an EXISTING
// booking into the hub; it does not create a new parcel. Make that clear.
const notFound = err?.status === 404 || /not found/i.test(err?.message || '');
setToast({
open: true,
msg: notFound
toast({
body: notFound
? `No booking found with ID "${bookingId.trim()}". This screen receives a booking that already exists — enter a Booking ID from the system (e.g. an unassigned pickup).`
: err?.message || 'Could not scan this parcel in.',
severity: notFound ? 'warning' : 'error'
type: notFound ? 'warning' : 'error'
});
} finally {
setSubmitting(false);
}
};
const fieldSx = { '& .MuiOutlinedInput-root': { borderRadius: 2 } };
// Reusable journey block
const Journey = ({ log }) => (
<Stack spacing={0.5}>
<Stack direction="row" alignItems="center" sx={{ flexWrap: 'wrap', gap: 0.75 }}>
<Typography variant="body2" sx={{ fontWeight: 700, color: '#343A40' }}>{log.origin}</Typography>
<EastOutlinedIcon sx={{ fontSize: 14, color: '#ADB5BD' }} />
<Typography variant="body2" sx={{ fontWeight: 700, color: '#C01227' }}>{log.currentLoc}</Typography>
<EastOutlinedIcon sx={{ fontSize: 14, color: '#ADB5BD' }} />
<Typography variant="body2" sx={{ fontWeight: 700, color: '#343A40' }}>{log.destination.split(',')[0]}</Typography>
</Stack>
<Stack direction="row" alignItems="center" gap={0.5}>
<PlaceOutlinedIcon sx={{ fontSize: 13, color: '#9AA0A6' }} />
<Typography variant="caption" color="text.secondary" noWrap>{log.destination}</Typography>
</Stack>
</Stack>
);
const columns = useMemo(() => [
{
key: 'parcel',
header: <div style={{ paddingLeft: '24px', whiteSpace: 'nowrap' }}>Parcel Info</div>,
width: pixel(224),
renderCell: (row) => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px', paddingLeft: '24px' }}>
<div style={{ fontWeight: 800, fontFamily: 'monospace', color: '#0f172a', fontSize: '1rem' }}>{row.trackingId}</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.75rem', color: '#64748b' }}>
<span style={{ fontWeight: 600 }}>{row.weight}</span>
<span style={{ color: '#cbd5e1' }}>•</span>
<span>{row.time}</span>
</div>
</div>
)
},
{
key: 'journey',
width: proportional(2),
header: <div style={{ whiteSpace: 'nowrap' }}>Journey</div>,
renderCell: (row) => (
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', padding: '4px 0' }}>
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
<div style={{ width: 24, height: 24, borderRadius: 12, backgroundColor: '#d1fae5', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<MapPin size={12} color="#059669" />
</div>
<div>
<div style={{ fontWeight: 700, fontSize: '0.875rem', color: '#0f172a', lineHeight: 1.2 }}>{row.origin}</div>
<div style={{ fontSize: '0.75rem', color: '#64748b', marginTop: '2px' }}>Origin</div>
</div>
</div>
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
<div style={{ width: 24, height: 24, borderRadius: 12, backgroundColor: '#fee2e2', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<Flag size={12} color="#dc2626" />
</div>
<div>
<div style={{ fontWeight: 700, fontSize: '0.875rem', color: '#334155', lineHeight: 1.2 }}>{row.destination.split(',')[0]}</div>
<div style={{ fontSize: '0.75rem', color: '#64748b', marginTop: '2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '200px' }}>{row.destination}</div>
</div>
</div>
</div>
)
},
{
key: 'condition',
header: <div style={{ whiteSpace: 'nowrap' }}>Condition</div>,
width: pixel(140),
renderCell: (row) => (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '8px' }}>
<Badge variant={isGood(row.condition) ? 'success' : 'error'} label={row.condition} />
{row.temp !== 'N/A' && (
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.75rem', color: '#0d9488', fontWeight: 600 }}>
<Snowflake size={12} /> {row.temp}
</div>
)}
</div>
)
},
{
key: 'shelf',
header: <div style={{ whiteSpace: 'nowrap' }}>Placement</div>,
width: pixel(180),
renderCell: (row) => {
let variant = 'info';
if (row.shelf === 'Exception Area') variant = 'error';
if (row.shelf.includes('Cold')) variant = 'neutral';
return (
<div style={{ paddingRight: '24px' }}>
<Badge variant={variant} label={row.shelf} icon={Warehouse} />
</div>
);
}
}
], []);
return (
<Box>
{/* ── Header ── */}
<div style={{ paddingBottom: '32px' }}>
<PageHeader
icon={MoveToInboxOutlinedIcon}
icon={Inbox}
title="Receive Parcels"
subtitle="Scan each parcel as it arrives, note its condition, and we'll suggest which shelf to put it on."
action={<DateRangePicker value={range} onChange={setRange} />}
/>
{/* ── KPI strip ── */}
<Grid container spacing={{ xs: 1.5, sm: 2 }} sx={{ mb: 3 }}>
{[
{ icon: MoveToInboxOutlinedIcon, label: 'Received Today', value: stats.received, color: '#1A73E8', bg: '#E8F0FE' },
{ icon: Inventory2OutlinedIcon, label: 'To Sort', value: stats.pendingSort, color: '#B06000', bg: '#FEF7E0' },
{ icon: WarningAmberOutlinedIcon, label: 'Needs Checking', value: stats.exceptions, color: '#D93025', bg: '#FCE8E6' },
{ icon: AcUnitOutlinedIcon, label: 'Cold Items', value: stats.coldChain, color: '#00838F', bg: '#E0F7FA' },
].map((s, i) => (
<Grid size={{ xs: 6, md: 3 }} key={i}>
<Card elevation={0} sx={{ borderRadius: 2, border: '1px solid #ECEEF1', height: '100%' }}>
<CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
<Stack direction="row" alignItems="center" spacing={2.5} sx={{ mb: 2 }}>
<Avatar variant="rounded" sx={{ bgcolor: s.bg, color: s.color, borderRadius: 1, width: 48, height: 48, flexShrink: 0 }}>
<s.icon sx={{ fontSize: 24 }} />
</Avatar>
<Typography sx={{ fontSize: '0.8rem', color: '#6C757D', fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', lineHeight: 1.4 }}>{s.label}</Typography>
</Stack>
<Typography sx={{ fontSize: '2rem', fontWeight: 800, color: '#1A1A2E', lineHeight: 1.15, mb: 1 }}>{s.value}</Typography>
</CardContent>
</Card>
</Grid>
))}
</Grid>
{/* KPI strip - Ultra Compact */}
<div style={{ display: 'flex', alignItems: 'center', gap: '24px', flexWrap: 'wrap', padding: '16px 20px', background: '#fff', borderRadius: '12px', border: '1px solid #e2e8f0', marginBottom: '24px', boxShadow: '0 1px 3px rgba(0,0,0,0.02)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: '1 1 auto' }}>
<div style={{ width: 36, height: 36, borderRadius: '8px', background: '#eff6ff', color: '#3b82f6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Inbox size={18} /></div>
<div>
<div style={{ fontSize: '0.7rem', color: '#64748b', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{isToday ? 'Received Today' : 'Received'}</div>
<div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#0f172a', lineHeight: 1.1 }}>{loading ? '...' : stats.received}</div>
</div>
</div>
{/* ── Main ── */}
<Grid container spacing={{ xs: 2, md: 2.5 }} alignItems="stretch">
<div style={{ width: 1, height: 32, background: '#e2e8f0', display: 'none', '@media (min-width: 640px)': { display: 'block' } }} />
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: '1 1 auto' }}>
<div style={{ width: 36, height: 36, borderRadius: '8px', background: '#fff7ed', color: '#f97316', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Package size={18} /></div>
<div>
<div style={{ fontSize: '0.7rem', color: '#64748b', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>To Sort</div>
<div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#0f172a', lineHeight: 1.1 }}>{loading ? '...' : stats.pendingSort}</div>
</div>
</div>
<div style={{ width: 1, height: 32, background: '#e2e8f0', display: 'none', '@media (min-width: 640px)': { display: 'block' } }} />
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: '1 1 auto' }}>
<div style={{ width: 36, height: 36, borderRadius: '8px', background: '#fef2f2', color: '#ef4444', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><AlertTriangle size={18} /></div>
<div>
<div style={{ fontSize: '0.7rem', color: '#64748b', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Needs Checking</div>
<div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#0f172a', lineHeight: 1.1 }}>{loading ? '...' : stats.exceptions}</div>
</div>
</div>
<div style={{ width: 1, height: 32, background: '#e2e8f0', display: 'none', '@media (min-width: 640px)': { display: 'block' } }} />
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: '1 1 auto' }}>
<div style={{ width: 36, height: 36, borderRadius: '8px', background: '#f0fdfa', color: '#14b8a6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Snowflake size={18} /></div>
<div>
<div style={{ fontSize: '0.7rem', color: '#64748b', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Cold Items</div>
<div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#0f172a', lineHeight: 1.1 }}>{loading ? '...' : stats.coldChain}</div>
</div>
</div>
</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', alignItems: 'stretch' }}>
{/* Scanner Panel */}
<Grid size={{ xs: 12, lg: 4 }}>
<Card elevation={0} sx={{ borderRadius: 2, border: '1px solid #ECEEF1', height: '100%' }}>
<Box sx={{ p: 2.5, pb: 2 }}>
<Stack
direction="row"
alignItems="center"
spacing={2} // Increase this value
>
<Avatar
variant="rounded"
sx={{
bgcolor: "#C0122710",
color: "#C01227",
borderRadius: 1,
width: 40,
height: 40,
}}
>
<QrCodeScannerOutlinedIcon />
</Avatar>
<div style={{ flex: '1 1 350px', display: 'flex' }}>
<Card style={{ width: '100%', padding: '0', borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 2px 14px rgba(0,0,0,0.02)', display: 'flex', flexDirection: 'column' }}>
<div style={{ padding: '20px', borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', gap: '16px' }}>
<div style={{ width: 40, height: 40, borderRadius: '8px', backgroundColor: '#eff6ff', color: '#3b82f6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<QrCode size={20} />
</div>
<div>
<Heading level={4} style={{ margin: 0 }}>Add a Parcel</Heading>
<Text type="supporting" color="secondary">Record a parcel arriving at {hubName}</Text>
</div>
</div>
<Box>
<Typography
variant="h5"
sx={{ fontWeight: 700, color: "#1A1A2E" }}
>
Add a Parcel
</Typography>
<form onSubmit={handleSubmit} style={{ padding: '20px' }}>
<FormLayout>
<Field label="Booking ID" description="Must be an existing booking in the system">
<TextInput required placeholder="e.g. 15" value={bookingId} onChange={setBookingId} />
</Field>
<Typography variant="caption" color="text.secondary">
Record a parcel arriving at {hubName}
</Typography>
</Box>
</Stack>
</Box>
<Divider />
<CardContent sx={{ pt: 3 }}>
<Box component="form" onSubmit={handleSubmit}>
<Stack spacing={2.5}>
<TextField fullWidth label="Booking ID" placeholder="e.g. 15" value={bookingId}
onChange={(e) => setBookingId(e.target.value)} sx={fieldSx} required
helperText="Must be an existing booking in the system (this receives it — it doesn't create a new one)"
InputProps={{ startAdornment: <InputAdornment position="start"><Inventory2OutlinedIcon sx={{ color: '#9AA0A6', fontSize: 20 }} /></InputAdornment> }} />
<Field label="Tracking ID">
<TextInput placeholder="e.g. DM-882204" value={trackingId} onChange={setTrackingId} />
</Field>
<TextField fullWidth label="Tracking ID" placeholder="e.g. DM-882204" value={trackingId}
onChange={(e) => setTrackingId(e.target.value)} sx={fieldSx}
InputProps={{
startAdornment: <InputAdornment position="start"><QrCodeScannerOutlinedIcon sx={{ color: '#9AA0A6', fontSize: 20 }} /></InputAdornment>
}} />
<Field label="Where it came from">
<select
value={origin}
onChange={(e) => setOrigin(e.target.value)}
style={{ width: '100%', padding: '8px 12px', borderRadius: '8px', border: '1px solid #cbd5e1', background: '#fff', color: '#0f172a', fontSize: '0.875rem' }}
>
{ORIGINS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
</select>
</Field>
<TextField select fullWidth label="Where it came from" value={origin}
onChange={(e) => setOrigin(e.target.value)} sx={fieldSx}
InputProps={{ startAdornment: <InputAdornment position="start"><HomeWorkOutlinedIcon sx={{ color: '#9AA0A6', fontSize: 20 }} /></InputAdornment> }}>
{ORIGINS.map((o) => <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>)}
</TextField>
<Field label="Sender Address">
<TextInput placeholder="e.g. Andheri East, Mumbai" value={senderAddress} onChange={setSenderAddress} />
</Field>
<TextField fullWidth label="Sender Address" placeholder="e.g. Andheri East, Mumbai" value={senderAddress}
onChange={(e) => setSenderAddress(e.target.value)} sx={fieldSx} />
<Field label="Where it's going (delivery address)">
<TextInput required placeholder="e.g. Rohini Sec 9, Delhi" value={destination} onChange={setDestination} />
</Field>
<TextField fullWidth label="Where it's going (delivery address)" placeholder="e.g. Rohini Sec 9, Delhi" value={destination}
onChange={(e) => setDestination(e.target.value)} required sx={fieldSx}
InputProps={{ startAdornment: <InputAdornment position="start"><PlaceOutlinedIcon sx={{ color: '#9AA0A6', fontSize: 20 }} /></InputAdornment> }} />
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
<Field label="Weight">
<TextInput placeholder="2.4 kg" value={weight} onChange={setWeight} />
</Field>
<Field label="Condition">
<select
value={condition}
onChange={(e) => setCondition(e.target.value)}
style={{ width: '100%', padding: '8px 12px', borderRadius: '8px', border: '1px solid #cbd5e1', background: '#fff', color: '#0f172a', fontSize: '0.875rem' }}
>
<option value="Good">Good</option>
<option value="Damaged Box">Damaged Box</option>
<option value="Wet / Crushed">Wet / Crushed</option>
<option value="Missing Label">Missing Label</option>
</select>
</Field>
</div>
<Stack direction="row" spacing={2}>
<TextField fullWidth label="Weight" placeholder="2.4 kg" value={weight}
onChange={(e) => setWeight(e.target.value)} sx={fieldSx}
InputProps={{ startAdornment: <InputAdornment position="start"><ScaleOutlinedIcon sx={{ color: '#9AA0A6', fontSize: 18 }} /></InputAdornment> }} />
<TextField fullWidth select label="Condition" value={condition}
onChange={(e) => setCondition(e.target.value)} sx={fieldSx}>
<MenuItem value="Good">Good</MenuItem>
<MenuItem value="Damaged Box">Damaged Box</MenuItem>
<MenuItem value="Wet / Crushed">Wet / Crushed</MenuItem>
<MenuItem value="Missing Label">Missing Label</MenuItem>
</TextField>
</Stack>
<Field label="Temperature (Cold Chain)">
<TextInput placeholder="4.0°C — or N/A if dry" value={temp} onChange={setTemp} />
</Field>
<TextField fullWidth label="Temperature (Cold Chain)" placeholder="4.0°C — or N/A if dry" value={temp}
onChange={(e) => setTemp(e.target.value)} sx={fieldSx}
InputProps={{ startAdornment: <InputAdornment position="start"><ThermostatOutlinedIcon sx={{ color: '#9AA0A6', fontSize: 20 }} /></InputAdornment> }} />
<Button fullWidth size="large" variant="contained" type="submit" disabled={submitting}
startIcon={submitting ? <CircularProgress size={18} color="inherit" /> : <CheckCircleOutlinedIcon />}
sx={{ mt: 0.5, py: 1.3, borderRadius: 2, bgcolor: '#C01227', fontWeight: 700,
boxShadow: '0 4px 14px rgba(192,18,39,0.30)', '&:hover': { bgcolor: '#9E0E20' } }}>
<div style={{ marginTop: '16px' }}>
<Button
variant="primary"
type="submit"
disabled={submitting}
icon={submitting ? <Loader2 size={16} className="spin" /> : <CheckCircle2 size={16} />}
style={{ width: '100%', justifyContent: 'center' }}
>
{submitting ? 'Scanning in…' : 'Mark Received at Hub'}
</Button>
</Stack>
</Box>
</CardContent>
</div>
</FormLayout>
</form>
</Card>
</Grid>
</div>
{/* Ledger Panel */}
<Grid size={{ xs: 12, lg: 8 }}>
<Card elevation={0} sx={{ borderRadius: 2, border: '1px solid #ECEEF1', height: '100%', display: 'flex', flexDirection: 'column' }}>
<Box sx={{ p: 2.5, pb: 2 }}>
<Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
<Stack direction="row" alignItems="center" gap={2} spacing={2}>
<Avatar variant="rounded" sx={{ bgcolor: '#E8F0FE', color: '#1A73E8', borderRadius: 2, width: 40, height: 40 }}>
<LocalShippingOutlinedIcon />
</Avatar>
<Box>
<Typography variant="h5" sx={{ fontWeight: 700, color: '#1A1A2E' }}>Recently Received</Typography>
<Typography variant="caption" color="text.secondary">Parcels logged at the hub today</Typography>
</Box>
</Stack>
<Chip label={`${inboundLogs.length} total`} size="small"
sx={{ fontWeight: 700, bgcolor: '#F1F3F5', color: '#5F6368', borderRadius: 2 }} />
</Stack>
</Box>
<Divider />
<div style={{ flex: '2 1 600px', display: 'flex' }}>
<Card style={{ width: '100%', padding: '0', borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 2px 14px rgba(0,0,0,0.02)', display: 'flex', flexDirection: 'column' }}>
<div style={{ padding: '20px', borderBottom: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div style={{ width: 40, height: 40, borderRadius: '8px', backgroundColor: '#eff6ff', color: '#3b82f6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Truck size={20} />
</div>
<div>
<Heading level={4} style={{ margin: 0 }}>Recently Received</Heading>
<Text type="supporting" color="secondary">Parcels logged at the hub {rangeLabel}</Text>
</div>
</div>
<div style={{ padding: '4px 12px', borderRadius: '12px', background: '#f1f5f9', color: '#475569', fontSize: '0.75rem', fontWeight: 700 }}>
{inboundLogs.length} total
</div>
</div>
{loadError && (
<Alert severity="error" onClose={() => setLoadError('')} sx={{ m: 2, borderRadius: 2 }}>
{loadError}
</Alert>
<div style={{ padding: '16px' }}>
<Banner status="error" title="Error" description={loadError} />
</div>
)}
{loading ? (
<Box sx={{ py: 8, display: 'flex', justifyContent: 'center' }}>
<CircularProgress />
</Box>
) : inboundLogs.length === 0 && !loadError ? (
<Box sx={{ py: 8, textAlign: 'center' }}>
<MoveToInboxOutlinedIcon sx={{ fontSize: 56, color: '#CED4DA', mb: 1.5 }} />
<Typography variant="body2" color="text.secondary">No parcels received yet today.</Typography>
</Box>
) : isMdDown ? (
<Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
{inboundLogs.map((log, i) => {
const ss = shelfStyle(log.shelf);
return (
<Card key={i} elevation={0} sx={{ borderRadius: 2, border: '1px solid #ECEEF1' }}>
<CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1.5 }}>
<Typography variant="body2" sx={{ fontWeight: 800, fontFamily: 'monospace', color: '#1A1A2E' }}>{log.trackingId}</Typography>
<Stack direction="row" alignItems="center" gap={0.5}>
<AccessTimeOutlinedIcon sx={{ fontSize: 13, color: '#9AA0A6' }} />
<Typography variant="caption" color="text.secondary">{log.time}</Typography>
</Stack>
</Stack>
<Journey log={log} />
<Stack direction="row" flexWrap="wrap" gap={0.75} sx={{ mt: 1.5 }}>
<Chip size="small" icon={<ScaleOutlinedIcon sx={{ fontSize: '14px !important' }} />} label={log.weight}
sx={{ bgcolor: '#F1F3F5', color: '#495057', fontWeight: 600, '& .MuiChip-icon': { color: '#9AA0A6' } }} />
<Chip size="small" label={log.condition}
sx={{ fontWeight: 700, bgcolor: isGood(log.condition) ? '#E6F4EA' : '#FCE8E6', color: isGood(log.condition) ? '#1E8E3E' : '#D93025' }} />
{log.temp !== 'N/A' && (
<Chip size="small" icon={<ThermostatOutlinedIcon sx={{ fontSize: '14px !important' }} />} label={log.temp}
sx={{ bgcolor: '#E0F7FA', color: '#00838F', fontWeight: 600, '& .MuiChip-icon': { color: '#00838F' } }} />
)}
<Chip size="small" icon={<WarehouseOutlinedIcon sx={{ fontSize: '14px !important' }} />} label={log.shelf}
sx={{ bgcolor: ss.bg, color: ss.color, fontWeight: 600, '& .MuiChip-icon': { color: ss.color } }} />
</Stack>
</CardContent>
</Card>
);
})}
</Box>
<div style={{ display: 'flex', justifyContent: 'center', padding: '48px 0' }}>
<Loader2 size={32} className="spin" color="#2563eb" />
</div>
) : (
/* ── DESKTOP: table with horizontal scroll guard ── */
<TableContainer sx={{ flexGrow: 1 }}>
<Table sx={{ minWidth: 820 }}>
<TableHead>
<TableRow sx={{ bgcolor: '#FAFBFC' }}>
{['Parcel No.', 'Journey', 'Weight', 'Condition', 'Temp', 'Goes On Shelf', 'Time'].map((h, i) => (
<TableCell key={h} align={i >= 2 && i <= 4 ? 'center' : i === 6 ? 'right' : 'left'}
sx={{ fontWeight: 700, fontSize: '0.7rem', color: '#6C757D', textTransform: 'uppercase', letterSpacing: 0.5, borderBottom: '1px solid #ECEEF1', py: 1.5, whiteSpace: 'nowrap' }}>
{h}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{inboundLogs.map((log, index) => {
const ss = shelfStyle(log.shelf);
return (
<TableRow key={index} hover sx={{ '& td': { borderBottom: '1px solid #F4F6F8' }, '&:last-child td': { border: 0 } }}>
<TableCell sx={{ fontWeight: 800, fontFamily: 'monospace', color: '#1A1A2E', whiteSpace: 'nowrap' }}>{log.trackingId}</TableCell>
<TableCell sx={{ minWidth: 240 }}><Journey log={log} /></TableCell>
<TableCell align="center" sx={{ whiteSpace: 'nowrap', fontWeight: 600, color: '#495057' }}>{log.weight}</TableCell>
<TableCell align="center">
<Chip size="small" label={log.condition}
sx={{ fontWeight: 700, whiteSpace: 'nowrap', bgcolor: isGood(log.condition) ? '#E6F4EA' : '#FCE8E6', color: isGood(log.condition) ? '#1E8E3E' : '#D93025' }} />
</TableCell>
<TableCell align="center" sx={{ whiteSpace: 'nowrap', fontWeight: 600, color: log.temp !== 'N/A' ? '#00838F' : '#9AA0A6' }}>{log.temp}</TableCell>
<TableCell>
<Chip size="small" icon={<WarehouseOutlinedIcon sx={{ fontSize: '14px !important' }} />} label={log.shelf}
sx={{ fontWeight: 600, whiteSpace: 'nowrap', bgcolor: ss.bg, color: ss.color, '& .MuiChip-icon': { color: ss.color } }} />
</TableCell>
<TableCell align="right" sx={{ whiteSpace: 'nowrap', color: '#9AA0A6', fontSize: '0.78rem' }}>{log.time}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<div className="hide-scrollbar" style={{ flex: 1, padding: '16px 0', overflowX: 'auto', overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
<Table
data={inboundLogs}
columns={columns}
idKey="trackingId"
density="balanced"
dividers="rows"
emptyState={
!loadError && (
<EmptyState
icon={<Inbox size={48} color="#cbd5e1" />}
title={isToday ? 'No parcels received yet today.' : `No parcels received ${rangeLabel}.`}
description="Waiting for incoming shipments."
style={{ padding: '64px 0' }}
/>
)
}
/>
</div>
)}
</Card>
</Grid>
</Grid>
</div>
</div>
<Snackbar open={toast.open} autoHideDuration={4000} onClose={() => setToast({ ...toast, open: false })}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
<Alert severity={toast.severity} variant="filled" onClose={() => setToast({ ...toast, open: false })}
sx={{ borderRadius: 2, fontWeight: 600, boxShadow: '0 8px 24px rgba(0,0,0,0.18)' }}>
{toast.msg}
</Alert>
</Snackbar>
</Box>
<style>{`
.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
`}</style>
</div>
);
}

677
src/pages/operations/OrderAssignment.jsx
View File

@@ -1,54 +1,56 @@
import { useState, useEffect, useCallback } from 'react';
import {
Box,
Typography,
Card,
CardContent,
CardHeader,
Button,
Divider,
Avatar,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Chip,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
List,
ListItemButton,
ListItemText,
ListItemAvatar,
Radio,
Badge,
Checkbox,
useMediaQuery,
CircularProgress,
Alert,
Snackbar
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import TwoWheelerIcon from '@mui/icons-material/TwoWheeler';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import PersonOutlineRoundedIcon from '@mui/icons-material/PersonOutlineRounded';
import StarRoundedIcon from '@mui/icons-material/StarRounded';
import { useState, useEffect, useCallback, useMemo } from 'react';
import { UserCheck, Bike, Sparkles, Star } from 'lucide-react';
import dayjs from 'dayjs';
import { Banner } from '@astryxdesign/core/Banner';
import { Badge } from '@astryxdesign/core/Badge';
import { Heading, Text } from '@astryxdesign/core/Text';
import { Table, proportional, pixel, useTableSelection, useTableSelectionState } from '@astryxdesign/core/Table';
import { HStack, VStack, Card } from '@astryxdesign/core/Layout';
import { CheckboxInput } from '@astryxdesign/core/CheckboxInput';
import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
import { useToast } from '@astryxdesign/core/Toast';
import { EmptyState } from '@astryxdesign/core/EmptyState';
import Panel from '@/components/Panel';
import Button from '@/components/Button';
import PageHeader from '@/components/PageHeader';
import { getUnassignedBookings, getMilers, assignMiler, autoAssignBooking } from '@/api/hub';
import DateRangePicker, { DATE_FMT } from '@/components/DateRangePicker';
import { getBookingsRange, getMilers, assignMiler, autoAssignBooking } from '@/api/hub';
import { getHubContext } from '@/auth/session';
function useMediaQuery(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [matches, query]);
return matches;
}
const PENDING = 'Pending Assignment';
const isPendingStatus = (s) => {
const v = (s || '').toLowerCase();
return !v || v === 'pending' || v === 'unassigned' || v === 'pending assignment';
};
const statusChip = (status) => {
if (status === PENDING) return { label: 'Needs a miler', variant: 'warning' };
if (/^cancel/i.test(status)) return { label: 'Cancelled', variant: 'error' };
if (/deliver/i.test(status)) return { label: 'Delivered', variant: 'success' };
if (/picked/i.test(status)) return { label: 'Picked up', variant: 'info' };
if (/no miler/i.test(status)) return { label: 'No miler in range', variant: 'error' };
if (/assigning/i.test(status)) return { label: 'Assigning…', variant: 'info' };
return { label: 'Assigned', variant: 'success' };
};
const timeAgo = (iso) => {
if (!iso) return 'Recently';
const then = new Date(iso).getTime();
@@ -61,21 +63,27 @@ const timeAgo = (iso) => {
return `${Math.round(hrs / 24)} d ago`;
};
// Real backend: snake_case fields + a parcels[] array (no packagedescription).
const mapOrder = (b) => {
const parcels = b.parcels || [];
const totalWeight = parcels.reduce((s, p) => s + (p.weight || 0), 0);
const pkg = parcels.length
? `${parcels.map((p) => p.itemcategory || 'Parcel').join(', ')}${totalWeight ? ` · ${totalWeight}kg` : ''}`
: b.packagedescription || '—';
const raw = (b.status || '').toLowerCase();
let status;
if (isPendingStatus(raw)) status = PENDING;
else if (raw === 'cancelled') status = 'Cancelled';
else if (raw === 'delivered') status = 'Delivered';
else if (raw === 'picked_up') status = 'Picked up';
else status = b.milername ? `Assigned to ${b.milername}` : 'Assigned';
return {
id: b.bookingid,
id: b.bookingid ?? b.consignmentid ?? b.booking_id ?? b.id,
customer: b.customer_name || b.customerName || 'Customer',
pickup: b.pickup_address || b.pickupaddress || '—',
drop: b.delivery_address || b.deliveryaddress || '—',
package: pkg,
time: timeAgo(b.created_at || b.createdat),
status: PENDING
status
};
};
@@ -88,8 +96,7 @@ const mapMiler = (m) => ({
});
export default function OrderAssignment() {
const theme = useTheme();
const isMdDown = useMediaQuery(theme.breakpoints.down('md'));
const isMdDown = useMediaQuery('(max-width: 900px)');
const hub = getHubContext();
const [orders, setOrders] = useState([]);
@@ -97,22 +104,30 @@ export default function OrderAssignment() {
const [loading, setLoading] = useState(true);
const [loadError, setLoadError] = useState('');
const [busy, setBusy] = useState(false);
const [toast, setToast] = useState({ open: false, msg: '', severity: 'success' });
const toast = useToast();
const [selectedOrders, setSelectedOrders] = useState([]);
const [selectedOrders, setSelectedOrders] = useState(() => new Set());
const today = dayjs().format(DATE_FMT);
const [range, setRange] = useState({ from: today, to: today });
const isToday = range.from === today && range.to === today;
const rangeLabel = isToday
? 'today'
: range.from === range.to
? dayjs(range.from).format('DD MMM')
: `${dayjs(range.from).format('DD MMM')} – ${dayjs(range.to).format('DD MMM')}`;
// Single Assign Dialog State
const [selectedOrderForAssign, setSelectedOrderForAssign] = useState(null);
const [assignDialogOpen, setAssignDialogOpen] = useState(false);
const [selectedMiler, setSelectedMiler] = useState('');
const notify = (msg, severity = 'success') => setToast({ open: true, msg, severity });
const notify = (msg, status = 'success') => toast({ body: msg, type: status });
const load = useCallback(async () => {
setLoading(true);
setLoadError('');
try {
const [bookings, milerRes] = await Promise.all([getUnassignedBookings(), getMilers().catch(() => null)]);
const [bookings, milerRes] = await Promise.all([getBookingsRange(range.from, range.to), getMilers().catch(() => null)]);
setOrders((bookings?.data || []).map(mapOrder));
if (milerRes?.data) setMilers(milerRes.data.map(mapMiler));
} catch (err) {
@@ -120,30 +135,21 @@ export default function OrderAssignment() {
} finally {
setLoading(false);
}
}, []);
}, [range.from, range.to]);
useEffect(() => {
load();
}, [load]);
// Milers that can take a new pickup right now.
const availableMilers = milers.filter((m) => ['Available', 'Assigned'].includes(m.status));
const handleSelectAll = (event) => {
if (event.target.checked) {
const pendingIds = orders.filter(o => o.status === PENDING).map(o => o.id);
setSelectedOrders(pendingIds);
} else {
setSelectedOrders([]);
}
};
const handleSelectOne = (id) => {
if (selectedOrders.includes(id)) {
setSelectedOrders(selectedOrders.filter(selectedId => selectedId !== id));
} else {
setSelectedOrders([...selectedOrders, id]);
}
const handleSelectOne = (id, isSelected) => {
setSelectedOrders((prev) => {
const next = new Set(prev);
if (isSelected) next.add(String(id));
else next.delete(String(id));
return next;
});
};
const handleOpenAssign = (order) => {
@@ -152,7 +158,6 @@ export default function OrderAssignment() {
setAssignDialogOpen(true);
};
// Assign a specific miler to a single booking.
const handleAssign = async () => {
if (!selectedMiler || busy) return;
const miler = availableMilers.find((m) => m.id === selectedMiler);
@@ -162,7 +167,11 @@ export default function OrderAssignment() {
const res = await assignMiler(order.id, selectedMiler);
const name = res?.data?.milername || miler?.name || 'miler';
setOrders((prev) => prev.map((o) => (o.id === order.id ? { ...o, status: `Assigned to ${name}` } : o)));
setSelectedOrders((prev) => prev.filter((id) => id !== order.id));
setSelectedOrders((prev) => {
const next = new Set(prev);
next.delete(String(order.id));
return next;
});
setAssignDialogOpen(false);
notify(`Pickup #${order.id} assigned to ${name}.`);
} catch (err) {
@@ -172,10 +181,9 @@ export default function OrderAssignment() {
}
};
// Let the AI engine assign every selected booking (POST /hub/bookings/:id/auto-assign).
const handleAutoAssignAll = async () => {
if (selectedOrders.length === 0 || busy) return;
const ids = orders.filter((o) => selectedOrders.includes(o.id) && o.status === PENDING).map((o) => o.id);
if (selectedOrders.size === 0 || busy) return;
const ids = orders.filter((o) => selectedOrders.has(String(o.id)) && o.status === PENDING).map((o) => o.id);
setBusy(true);
let ok = 0;
let pending = 0;
@@ -183,7 +191,6 @@ export default function OrderAssignment() {
for (const id of ids) {
try {
const res = await autoAssignBooking(id);
// 202 → engine still working: success:true but no miler yet.
const name = res?.data?.milername;
if (name) {
setOrders((prev) => prev.map((o) => (o.id === id ? { ...o, status: `Assigned to ${name}` } : o)));
@@ -193,257 +200,351 @@ export default function OrderAssignment() {
pending += 1;
}
} catch (err) {
// 422 → no eligible miler in range; other codes → generic failure.
failed += 1;
if (err?.status === 422) {
setOrders((prev) => prev.map((o) => (o.id === id ? { ...o, status: 'No miler in range' } : o)));
}
}
}
setSelectedOrders([]);
setSelectedOrders(new Set());
setBusy(false);
const parts = [];
if (ok) parts.push(`assigned ${ok}`);
if (pending) parts.push(`${pending} in progress`);
if (failed) parts.push(`${failed} failed`);
notify(`Auto-assign: ${parts.join(', ')}.`, failed ? 'warning' : 'success');
load(); // refresh from server for the true state
load();
};
const pendingCount = orders.filter((o) => o.status === PENDING).length;
const isAllSelected = selectedOrders.length > 0 && selectedOrders.length === pendingCount;
const { selectionConfig } = useTableSelectionState({
data: orders,
idKey: 'id',
getIsItemSelectable: (o) => o.status === PENDING,
selectedKeys: selectedOrders,
setSelectedKeys: setSelectedOrders
});
const selectionPlugin = useTableSelection(selectionConfig);
const columns = useMemo(() => [
{
key: 'request',
header: 'Request Details',
width: pixel(160),
renderCell: (row) => (
<VStack gap={0.5}>
<Text type="body" weight="bold" style={{ fontFamily: 'monospace' }}>{row.id}</Text>
<Text type="supporting" color="secondary" maxLines={1} style={{ maxWidth: 150 }}>{row.package}</Text>
</VStack>
)
},
{
key: 'journey',
header: 'Journey',
width: proportional(2),
renderCell: (row) => (
<VStack gap={2}>
<VStack gap={0}>
<Text type="supporting" color="secondary">{row.customer}</Text>
<Text type="body">{row.pickup}</Text>
</VStack>
<VStack gap={0}>
<Text type="supporting" color="secondary">Going to</Text>
<Text type="body">{row.drop}</Text>
</VStack>
</VStack>
)
},
{
key: 'status',
header: 'Status',
width: pixel(140),
renderCell: (row) => {
const c = statusChip(row.status);
return <Badge variant={c.variant} label={c.label} />;
}
},
{
key: 'action',
header: 'Assignment',
width: pixel(180),
renderCell: (row) => {
const isAssigned = row.status !== PENDING;
const c = statusChip(row.status);
return !isAssigned ? (
<Button variant="secondary" size="sm" onClick={() => handleOpenAssign(row)} style={{ width: '100%', justifyContent: 'center' }}>
Choose Miler
</Button>
) : (
<Text type="body" weight="semibold" style={{ color: c.variant === 'success' ? 'var(--color-icon-green)' : 'var(--color-text-secondary)' }}>
{row.status}
</Text>
);
}
}
], []);
return (
<Box>
<div style={{ paddingBottom: '32px' }}>
<PageHeader
icon={AssignmentIndIcon}
icon={UserCheck}
title="Pickup Requests"
subtitle="Customers want these parcels collected. Pick a nearby miler for each one, or select several and assign them all at once."
action={<DateRangePicker value={range} onChange={setRange} />}
/>
<Card>
<CardHeader
title="Waiting for a Miler"
subheader={`New pickup requests around ${hub.city || 'your city'}`}
avatar={<Avatar variant="rounded" sx={{ bgcolor: 'primary.lighter', color: 'primary.main', borderRadius: 2 }}><AssignmentIndIcon /></Avatar>}
action={
<Button
variant={selectedOrders.length === 0 ? 'outlined' : 'contained'}
color="primary"
startIcon={busy ? <CircularProgress size={16} color="inherit" /> : <AutoAwesomeIcon />}
onClick={handleAutoAssignAll}
disabled={selectedOrders.length === 0 || busy}
sx={{ borderRadius: 2, fontWeight: 700, boxShadow: 'none', whiteSpace: 'nowrap' }}
<Panel>
<div
style={{
padding: '20px 24px',
borderBottom: '1px solid var(--color-border)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexWrap: 'wrap',
gap: '16px'
}}
>
<HStack gap={4} align="center">
<span
style={{
background: 'var(--color-background-blue)',
color: 'var(--color-icon-blue)',
width: 40,
height: 40,
borderRadius: 'var(--radius-element)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0
}}
>
{selectedOrders.length === 0 ? 'Auto-Assign' : `Auto-Assign (${selectedOrders.length})`}
</Button>
}
sx={{ flexWrap: 'wrap', gap: 1, '& .MuiCardHeader-action': { m: 0, alignSelf: 'center' } }}
/>
<Divider />
<UserCheck size={20} />
</span>
<VStack gap={0.5}>
<Heading level={4} style={{ margin: 0 }}>{isToday ? 'Waiting for a Miler' : `Pickup requests · ${rangeLabel}`}</Heading>
<Text type="supporting" color="secondary">
{isToday
? `New pickup requests around ${hub.city || 'your city'}`
: `${orders.length} pickup request${orders.length === 1 ? '' : 's'} in this range around ${hub.city || 'your city'}`}
</Text>
</VStack>
</HStack>
<Button
variant={selectedOrders.size === 0 ? 'secondary' : 'primary'}
onClick={handleAutoAssignAll}
disabled={selectedOrders.size === 0 || busy}
icon={!busy ? <Sparkles size={16} /> : undefined}
>
{busy ? 'Working...' : `Auto-Assign ${selectedOrders.size > 0 ? `(${selectedOrders.size})` : ''}`}
</Button>
</div>
{loadError && (
<Alert severity="error" onClose={() => setLoadError('')} sx={{ m: 2, borderRadius: 2 }}>
{loadError}
</Alert>
<div style={{ padding: '16px' }}>
<Banner status="error" title="Error" description={loadError} />
</div>
)}
{loading ? (
<Box sx={{ py: 8, display: 'flex', justifyContent: 'center' }}>
<CircularProgress />
</Box>
) : orders.length === 0 && !loadError ? (
<Box sx={{ py: 8, textAlign: 'center' }}>
<AssignmentIndIcon sx={{ fontSize: 56, color: '#CED4DA', mb: 1.5 }} />
<Typography variant="body2" color="text.secondary">No pickup requests waiting right now.</Typography>
</Box>
<div style={{ padding: '64px', textAlign: 'center' }}>
<Text type="body" color="secondary">Loading...</Text>
</div>
) : isMdDown ? (
/* ── MOBILE / TABLET: cards ── */
<Box sx={{ p: { xs: 2, sm: 2.5 }, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
{orders.map((row) => {
const isSelected = selectedOrders.includes(row.id);
const isAssigned = row.status !== 'Pending Assignment';
return (
<Card key={row.id} elevation={0}
sx={{ borderRadius: 2, border: '1px solid', borderColor: isSelected ? 'primary.main' : '#ECEEF1', bgcolor: isAssigned ? '#FAFBFC' : '#fff' }}>
<CardContent sx={{ p: 2.25, '&:last-child': { pb: 2.25 } }}>
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" gap={1} sx={{ mb: 1.5 }}>
<Stack direction="row" alignItems="center" gap={1} sx={{ minWidth: 0 }}>
orders.length === 0 && !loadError ? (
<EmptyState
icon={<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><UserCheck size={48} /></span>}
title={isToday ? 'No pickup requests waiting right now.' : `No pickup requests ${rangeLabel}.`}
description="There is no data available."
style={{ padding: '64px 0' }}
/>
) : (
<div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
{orders.map((row) => {
const isSelected = selectedOrders.has(String(row.id));
const isAssigned = row.status !== PENDING;
const c = statusChip(row.status);
return (
<Card
key={row.id}
padding={4}
style={{
border: `1px solid ${isSelected ? 'var(--color-accent)' : 'var(--color-border)'}`,
background: isAssigned ? 'var(--color-background-muted)' : 'var(--color-background-surface)'
}}
>
<HStack gap={2} justify="between" align="center" style={{ marginBottom: '12px' }}>
<HStack gap={2} align="center">
{!isAssigned && (
<Checkbox size="small" sx={{ p: 0 }} checked={isSelected} onChange={() => handleSelectOne(row.id)} />
<CheckboxInput
label={`Select ${row.id}`}
isLabelHidden
value={isSelected}
onChange={(checked) => handleSelectOne(row.id, checked)}
/>
)}
<Box sx={{ minWidth: 0 }}>
<Typography sx={{ fontWeight: 800, fontFamily: 'monospace', color: '#1A1A2E', lineHeight: 1.2 }}>{row.id}</Typography>
<Typography variant="caption" color="text.secondary">{row.time}</Typography>
</Box>
</Stack>
{!isAssigned
? <Chip size="small" label="Needs a miler" sx={{ fontWeight: 700, flexShrink: 0, bgcolor: '#FEF7E0', color: '#B06000' }} />
: <Chip size="small" icon={<CheckCircleIcon sx={{ fontSize: '15px !important' }} />} label="Assigned" sx={{ fontWeight: 700, flexShrink: 0, bgcolor: '#E6F4EA', color: '#1E8E3E', '& .MuiChip-icon': { color: '#1E8E3E' } }} />}
</Stack>
<VStack gap={0}>
<Text type="body" weight="bold" style={{ fontFamily: 'monospace' }}>{row.id}</Text>
<Text type="supporting" color="secondary">{row.time}</Text>
</VStack>
</HStack>
<Badge variant={c.variant} label={c.label} />
</HStack>
<Stack spacing={1} sx={{ p: 1.5, bgcolor: '#FAFBFC', borderRadius: 2, mb: 1.5 }}>
<Stack direction="row" alignItems="center" gap={1}>
<PersonOutlineRoundedIcon sx={{ fontSize: 17, color: '#9AA0A6' }} />
<Typography variant="body2" sx={{ fontWeight: 600 }}>{row.customer}</Typography>
</Stack>
<Stack direction="row" alignItems="center" gap={1}>
<PlaceOutlinedIcon sx={{ fontSize: 17, color: '#1E8E3E' }} />
<Typography variant="body2" color="text.secondary"><b>Pick up:</b> {row.pickup}</Typography>
</Stack>
<Stack direction="row" alignItems="center" gap={1}>
<FlagOutlinedIcon sx={{ fontSize: 17, color: '#C01227' }} />
<Typography variant="body2" color="text.secondary"><b>Going to:</b> {row.drop}</Typography>
</Stack>
<Stack direction="row" alignItems="center" gap={1}>
<Inventory2OutlinedIcon sx={{ fontSize: 17, color: '#9AA0A6' }} />
<Typography variant="body2" color="text.secondary">{row.package}</Typography>
</Stack>
</Stack>
<VStack gap={2} style={{ padding: '12px', background: 'var(--color-background-muted)', borderRadius: 'var(--radius-inner)', marginBottom: '16px' }}>
<Text type="body" weight="semibold">{row.customer}</Text>
<Text type="supporting" color="secondary"><b>Pick up:</b> {row.pickup}</Text>
<Text type="supporting" color="secondary"><b>Going to:</b> {row.drop}</Text>
<Text type="supporting" color="secondary">{row.package}</Text>
</VStack>
{!isAssigned ? (
<Button fullWidth size="small" variant="contained" startIcon={<TwoWheelerIcon sx={{ fontSize: 16 }} />}
onClick={() => handleOpenAssign(row)} sx={{ borderRadius: 2, fontWeight: 700, boxShadow: 'none' }}>
<Button style={{ width: '100%', justifyContent: 'center' }} variant="primary" onClick={() => handleOpenAssign(row)}>
Choose a Miler
</Button>
) : (
<Typography variant="body2" sx={{ textAlign: 'center', fontWeight: 700, color: '#1E8E3E' }}>{row.status}</Typography>
<Text
type="body"
weight="bold"
style={{ textAlign: 'center', display: 'block', color: c.variant === 'success' ? 'var(--color-icon-green)' : 'var(--color-text-secondary)' }}
>
{row.status}
</Text>
)}
</CardContent>
</Card>
);
})}
</Box>
</Card>
);
})}
</div>
)
) : (
/* ── DESKTOP: spacious table ── */
<TableContainer sx={{ overflowX: 'auto' }}>
<Table sx={{ minWidth: 820 }}>
<TableHead>
<TableRow sx={{ bgcolor: '#FAFBFC' }}>
<TableCell padding="checkbox">
<Checkbox
indeterminate={selectedOrders.length > 0 && selectedOrders.length < pendingCount}
checked={isAllSelected && pendingCount > 0}
onChange={handleSelectAll}
disabled={pendingCount === 0}
/>
</TableCell>
{['Request', 'Pick Up From', 'Going To', 'Parcel', 'Status', 'Action'].map((h, i) => (
<TableCell key={h} align={i === 5 ? 'right' : 'left'}
sx={{ fontWeight: 700, fontSize: '0.7rem', color: '#6C757D', textTransform: 'uppercase', letterSpacing: 0.5, py: 2, borderBottom: '1px solid #ECEEF1', whiteSpace: 'nowrap' }}>
{h}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{orders.map((row) => {
const isSelected = selectedOrders.includes(row.id);
const isAssigned = row.status !== 'Pending Assignment';
return (
<TableRow key={row.id} selected={isSelected} hover
sx={{ bgcolor: isAssigned ? '#FAFBFC' : 'inherit', '& td': { borderBottom: '1px solid #F4F6F8', py: 2 }, '&:last-child td': { border: 0 } }}>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} onChange={() => handleSelectOne(row.id)} disabled={isAssigned} />
</TableCell>
<TableCell sx={{ fontWeight: 800, fontFamily: 'monospace', color: '#1A1A2E', whiteSpace: 'nowrap' }}>{row.id}</TableCell>
<TableCell>
<Typography variant="body2" fontWeight={700}>{row.customer}</Typography>
<Stack direction="row" alignItems="center" gap={0.5}>
<PlaceOutlinedIcon sx={{ fontSize: 14, color: '#1E8E3E' }} />
<Typography variant="caption" color="text.secondary">{row.pickup}</Typography>
</Stack>
</TableCell>
<TableCell sx={{ fontWeight: 600, color: '#495057' }}>{row.drop}</TableCell>
<TableCell sx={{ color: '#495057' }}>{row.package}</TableCell>
<TableCell>
{!isAssigned
? <Chip size="small" label="Needs a miler" sx={{ fontWeight: 700, whiteSpace: 'nowrap', bgcolor: '#FEF7E0', color: '#B06000' }} />
: <Chip size="small" icon={<CheckCircleIcon sx={{ fontSize: '15px !important' }} />} label="Assigned" sx={{ fontWeight: 700, whiteSpace: 'nowrap', bgcolor: '#E6F4EA', color: '#1E8E3E', '& .MuiChip-icon': { color: '#1E8E3E' } }} />}
</TableCell>
<TableCell align="right">
{!isAssigned ? (
<Button variant="outlined" size="small" startIcon={<TwoWheelerIcon sx={{ fontSize: 16 }} />}
onClick={() => handleOpenAssign(row)} sx={{ borderRadius: 2, fontWeight: 700, whiteSpace: 'nowrap' }}>
Choose Miler
</Button>
) : (
<Typography variant="caption" sx={{ fontWeight: 700, color: '#1E8E3E', whiteSpace: 'nowrap' }}>{row.status}</Typography>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
</Card>
<Dialog open={assignDialogOpen} onClose={() => setAssignDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>Choose a Miler for pickup #{selectedOrderForAssign?.id}</DialogTitle>
<DialogContent dividers>
<Typography variant="subtitle2" sx={{ mb: 2 }}>Milers at {hub.hubname || 'this hub'}:</Typography>
{availableMilers.length === 0 ? (
<Typography variant="body2" color="text.secondary" sx={{ py: 2 }}>
No available milers right now. Try Auto-Assign, or check the Milers page.
</Typography>
) : (
<List>
{availableMilers.map((miler) => (
<ListItemButton
key={miler.id}
onClick={() => setSelectedMiler(miler.id)}
sx={{
border: '1px solid',
borderColor: selectedMiler === miler.id ? 'primary.main' : 'divider',
borderRadius: 2,
mb: 1,
bgcolor: selectedMiler === miler.id ? 'primary.lighter' : 'transparent'
}}
>
<ListItemAvatar>
<Badge color="success" variant="dot" anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
<Avatar sx={{ bgcolor: 'grey.200', color: 'grey.700' }}><TwoWheelerIcon /></Avatar>
</Badge>
</ListItemAvatar>
<ListItemText
primary={miler.name}
secondary={
<Stack direction="row" alignItems="center" gap={0.5} component="span">
<span>{miler.status}</span>
{miler.rating != null && (
<>
<span>•</span>
<StarRoundedIcon sx={{ fontSize: 14, color: '#F5A623' }} />
<span>{miler.rating}</span>
</>
)}
</Stack>
}
primaryTypographyProps={{ fontWeight: 600 }}
/* ── DESKTOP: spacious table ── */
<div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
<Table
data={orders}
columns={columns}
idKey="id"
density="balanced"
dividers="rows"
hasHover
plugins={{ selection: selectionPlugin }}
emptyState={
!loadError && (
<EmptyState
icon={<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><UserCheck size={48} /></span>}
title={isToday ? 'No pickup requests waiting right now.' : `No pickup requests ${rangeLabel}.`}
description="There is no data available."
style={{ padding: '64px 0' }}
/>
<Radio checked={selectedMiler === miler.id} onChange={() => setSelectedMiler(miler.id)} />
</ListItemButton>
))}
</List>
)}
</DialogContent>
<DialogActions>
<Button onClick={() => setAssignDialogOpen(false)} color="inherit">Cancel</Button>
<Button onClick={handleAssign} variant="contained" disabled={!selectedMiler || busy}
startIcon={busy ? <CircularProgress size={16} color="inherit" /> : null}>
Confirm Assignment
</Button>
</DialogActions>
</Dialog>
)
}
/>
</div>
)}
</Panel>
<Snackbar open={toast.open} autoHideDuration={4000} onClose={() => setToast({ ...toast, open: false })}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
<Alert severity={toast.severity} variant="filled" onClose={() => setToast({ ...toast, open: false })} sx={{ borderRadius: 2, fontWeight: 600 }}>
{toast.msg}
</Alert>
</Snackbar>
</Box>
{/* Assign Dialog Overlay */}
<Dialog isOpen={assignDialogOpen} onOpenChange={setAssignDialogOpen} width={500}>
<Layout
header={<DialogHeader title={`Choose a Miler for pickup #${selectedOrderForAssign?.id}`} onOpenChange={setAssignDialogOpen} />}
content={
<LayoutContent>
<div style={{ padding: '24px', maxHeight: '60vh', overflowY: 'auto' }}>
<Text type="supporting" weight="semibold" style={{ marginBottom: '16px', display: 'block' }}>Milers at {hub.hubname || 'this hub'}:</Text>
{availableMilers.length === 0 ? (
<EmptyState
title="No milers available"
description="No available milers right now. Try Auto-Assign, or check the Milers page."
isCompact
/>
) : (
<VStack gap={2}>
{availableMilers.map((miler) => (
<div
key={miler.id}
onClick={() => setSelectedMiler(miler.id)}
style={{
border: `1px solid ${selectedMiler === miler.id ? 'var(--color-accent)' : 'var(--color-border)'}`,
borderRadius: 'var(--radius-inner)',
padding: '12px 16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
background: selectedMiler === miler.id ? 'var(--color-background-muted)' : 'transparent',
cursor: 'pointer'
}}
>
<HStack gap={4} align="center">
<div style={{ position: 'relative' }}>
<span
style={{
width: '40px',
height: '40px',
borderRadius: 'var(--radius-full)',
background: 'var(--color-neutral)',
color: 'var(--color-text-secondary)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Bike size={20} />
</span>
<span
style={{
position: 'absolute',
bottom: 0,
right: 0,
width: '12px',
height: '12px',
borderRadius: 'var(--radius-full)',
background: 'var(--color-icon-green)',
border: '2px solid var(--color-background-surface)'
}}
/>
</div>
<VStack gap={0}>
<Text type="body" weight="semibold">{miler.name}</Text>
<HStack gap={1} align="center">
<Text type="supporting" color="secondary">{miler.status}</Text>
{miler.rating != null && (
<>
<Text type="supporting" color="secondary">•</Text>
<span style={{ color: 'var(--color-icon-orange)', display: 'flex' }}>
<Star size={12} fill="currentColor" />
</span>
<Text type="supporting" color="secondary">{miler.rating}</Text>
</>
)}
</HStack>
</VStack>
</HStack>
<input
type="radio"
checked={selectedMiler === miler.id}
readOnly
style={{ width: '18px', height: '18px', accentColor: 'var(--color-accent)' }}
/>
</div>
))}
</VStack>
)}
</div>
</LayoutContent>
}
footer={
<LayoutFooter hasDivider>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', width: '100%', padding: '16px 24px' }}>
<Button variant="ghost" onClick={() => setAssignDialogOpen(false)}>Cancel</Button>
<Button variant="primary" onClick={handleAssign} disabled={!selectedMiler || busy}>
{busy ? 'Working...' : 'Confirm Assignment'}
</Button>
</div>
</LayoutFooter>
}
/>
</Dialog>
</div>
);
}

721
src/pages/operations/RiderRoutes.jsx
View File

@@ -1,46 +1,47 @@
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
import {
Box, Typography, Card, CardContent, Avatar, Chip, Stack, Button, Grid,
IconButton, List, ListItemButton, ListItemText, Collapse, Tooltip, Divider,
LinearProgress, Menu, MenuItem, Drawer, Paper
} from '@mui/material';
import { alpha } from '@mui/material/styles';
import { MapContainer, TileLayer, Marker, Popup, Polyline, Tooltip as LTooltip, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import {
Route, Play, Pause, RotateCcw, Gauge, Eye, EyeOff, ChevronDown, ChevronUp,
Warehouse, Flag, Package, CheckCircle2, XCircle, Bike, Store, Users, Ruler,
Wallet, Phone, MapPin, Clock, User, ArrowLeft, Scale, CalendarClock, FileText
} from 'lucide-react';
import { Card } from '@astryxdesign/core/Card';
import { Heading, Text } from '@astryxdesign/core/Text';
import { HStack, VStack } from '@astryxdesign/core/Layout';
import { Grid } from '@astryxdesign/core/Grid';
import { Avatar } from '@astryxdesign/core/Avatar';
import { Badge } from '@astryxdesign/core/Badge';
import { ProgressBar } from '@astryxdesign/core/ProgressBar';
import { IconButton } from '@astryxdesign/core/IconButton';
import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
import { Dialog } from '@astryxdesign/core/Dialog';
import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
import { Divider } from '@astryxdesign/core/Divider';
import { EmptyState } from '@astryxdesign/core/EmptyState';
import Panel from '@/components/Panel';
import Button from '@/components/Button';
import PageHeader from '@/components/PageHeader';
import StatCard from '@/components/StatCard';
import { getRiderRoutes } from '@/api/hub';
import { getHubContext } from '@/auth/session';
import RouteOutlinedIcon from '@mui/icons-material/RouteOutlined';
import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
import SpeedRoundedIcon from '@mui/icons-material/SpeedRounded';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
import WarehouseRoundedIcon from '@mui/icons-material/WarehouseRounded';
import FlagRoundedIcon from '@mui/icons-material/FlagRounded';
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
import DeliveryDiningRoundedIcon from '@mui/icons-material/DeliveryDiningRounded';
import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined';
import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
import StraightenRoundedIcon from '@mui/icons-material/StraightenRounded';
import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
import PhoneOutlinedIcon from '@mui/icons-material/PhoneOutlined';
import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import ScaleOutlinedIcon from '@mui/icons-material/ScaleOutlined';
import ScheduleOutlinedIcon from '@mui/icons-material/ScheduleOutlined';
import NotesOutlinedIcon from '@mui/icons-material/NotesOutlined';
import CallOutlinedIcon from '@mui/icons-material/CallOutlined';
import MyLocationOutlinedIcon from '@mui/icons-material/MyLocationOutlined';
function useMediaQuery(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [matches, query]);
return matches;
}
// ════════════════════════════════════════════════════════════════════════════════
// Leaflet base-icon fix (same approach as TrackingMap.jsx)
@@ -138,8 +139,20 @@ const moverIcon = (color) => new L.DivIcon({
const HUB = { lat: 11.0168, lng: 76.9558, label: getHubContext().hubname || 'Hub' };
// Palette assigned to milers round-robin so each route line is a distinct colour.
// These are intentionally literal (not design tokens) — they exist purely to tell
// routes apart at a glance, the same way a legend uses arbitrary swatch colours.
const ROUTE_COLORS = ['#1A73E8', '#8E24AA', '#1E8E3E', '#E8710A', '#C01227', '#00838F'];
// Mixes a hex colour with white/alpha for tints — a tiny stand-in for the
// alpha() helper MUI provided, kept local since these are per-rider swatch
// colours rather than themed tokens.
const hexAlpha = (hex, a) => {
const h = hex.replace('#', '');
const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
const n = parseInt(full, 16);
return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
};
// Map an API rider-route (from GET /hub/rider-routes) into the structure this
// page renders: a `pickup` trip with a list of order stops. Fields the API does
// not provide (customer, weight, COD, slot, instructions) default gracefully.
@@ -193,19 +206,18 @@ const mapRoute = (r, i) => {
};
// ── helpers ────────────────────────────────────────────────────────────────────
const initials = (n) => n.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase();
const inr = (n) => `₹${(Number(n) || 0).toLocaleString('en-IN')}`;
const lerpPoint = (a, b, t) => ({ lat: a.lat + (b.lat - a.lat) * t, lng: a.lng + (b.lng - a.lng) * t });
const STATUS_META = {
Picked: { color: '#1A73E8', icon: CheckCircleRoundedIcon, label: 'Picked up' },
Missed: { color: '#D93025', icon: CancelRoundedIcon, label: 'Missed' },
'In progress': { color: '#F29900', icon: DeliveryDiningRoundedIcon, label: 'In progress' },
Pending: { color: '#80868B', icon: ScheduleOutlinedIcon, label: 'Pending' },
Picked: { variant: 'success', icon: CheckCircle2, label: 'Picked up' },
Missed: { variant: 'error', icon: XCircle, label: 'Missed' },
'In progress': { variant: 'warning', icon: Bike, label: 'In progress' },
Pending: { variant: 'neutral', icon: CalendarClock, label: 'Pending' }
};
const MODES = {
pickup: { label: 'Pickups', icon: StorefrontOutlinedIcon, doneLabel: 'Picked up', doneStatus: 'Picked', failStatus: 'Missed', pointLabel: 'Pickup', dash: '8 8' },
pickup: { label: 'Pickups', icon: Store, doneLabel: 'Picked up', doneStatus: 'Picked', failStatus: 'Missed', pointLabel: 'Pickup', dash: '8 8' }
};
// ════════════════════════════════════════════════════════════════════════════════
@@ -225,144 +237,107 @@ async function fetchRoadRoute(stops) {
// ════════════════════════════════════════════════════════════════════════════════
// Small presentational pieces
// ════════════════════════════════════════════════════════════════════════════════
function KpiCard({ icon: Icon, label, value, sub, color, bg }) {
return (
<Card elevation={0} sx={{ borderRadius: 2, border: '1px solid #ECEEF1', height: '100%' }}>
<CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
<Stack direction="row" alignItems="center" spacing={1.25} sx={{ mb: 1 }}>
<Avatar variant="rounded" sx={{ bgcolor: bg, color, width: 34, height: 34, borderRadius: 2 }}>
<Icon sx={{ fontSize: 18 }} />
</Avatar>
<Typography sx={{ fontSize: '0.68rem', color: '#6C757D', fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>
{label}
</Typography>
</Stack>
<Typography sx={{ fontSize: '1.5rem', fontWeight: 800, color: '#1A1A2E', lineHeight: 1.1 }}>{value}</Typography>
{sub && <Typography variant="caption" color="text.secondary">{sub}</Typography>}
</CardContent>
</Card>
);
}
function DetailRow({ icon: Icon, label, value, valueColor }) {
if (value === undefined || value === null || value === '') return null;
return (
<Stack direction="row" spacing={2} alignItems="flex-start">
<Icon sx={{ fontSize: 20, color: '#9AA0A6', mt: 0.25 }} />
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>{label}</Typography>
<Typography sx={{ fontWeight: 600, color: valueColor || '#343A40', wordBreak: 'break-word' }}>{value}</Typography>
</Box>
</Stack>
<HStack gap={2} align="start">
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex', marginTop: 2 }}><Icon size={16} /></span>
<VStack gap={0} style={{ flex: 1, minWidth: 0 }}>
<Text type="supporting" color="secondary">{label}</Text>
<Text type="body" weight="semibold" style={{ color: valueColor, wordBreak: 'break-word' }}>{value}</Text>
</VStack>
</HStack>
);
}
// Full order/pickup detail panel — rendered INLINE in the left column (not a modal)
// so the map stays visible and zoomed to the stop while these details are read.
// Full order/pickup detail panel — rendered in the right-side sheet so the map
// stays visible and zoomed to the stop while these details are read.
function OrderDetailPanel({ data, onBack }) {
const { order, rider, mode, index } = data;
const meta = STATUS_META[order.status] || {};
const StatusIcon = meta.icon || CheckCircleRoundedIcon;
const isPickup = mode === 'pickup';
return (
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', bgcolor: '#fff' }}>
{/* Header */}
<Box sx={{ background: `linear-gradient(135deg, ${rider.color} 0%, ${alpha(rider.color, 0.82)} 100%)`, px: 2.75, py: 2.25, color: '#fff', flexShrink: 0 }}>
<Button onClick={onBack} startIcon={<ArrowBackRoundedIcon />} size="small"
sx={{ color: 'rgba(255,255,255,0.95)', textTransform: 'none', fontWeight: 600, mb: 1.25, ml: -0.5, '&:hover': { bgcolor: 'rgba(255,255,255,0.12)' } }}>
Close
</Button>
<Stack direction="row" alignItems="center" spacing={0.75} useFlexGap sx={{ flexWrap: 'wrap', mb: 1 }}>
<Chip size="small" icon={(isPickup ? <StorefrontOutlinedIcon /> : <DeliveryDiningRoundedIcon />)} label={isPickup ? 'Pickup' : 'Delivery'}
sx={{ bgcolor: 'rgba(255,255,255,0.18)', color: '#fff', fontWeight: 700, '& .MuiChip-icon': { color: '#fff' } }} />
<Chip size="small" icon={<StatusIcon sx={{ color: '#fff !important' }} />} label={meta.label || order.status}
sx={{ bgcolor: 'rgba(255,255,255,0.18)', color: '#fff', fontWeight: 700 }} />
</Stack>
<Typography variant="h6" sx={{ fontWeight: 800, lineHeight: 1.25 }}>{order.customer}</Typography>
<Typography variant="body2" sx={{ opacity: 0.9, fontFamily: 'monospace', mt: 0.25 }}>#{order.orderId}</Typography>
</Box>
<Layout
height="fill"
header={
<div style={{ background: rider.color, color: '#fff', padding: '20px 24px' }}>
<Button variant="ghost" onClick={onBack} icon={<ArrowLeft size={16} />} style={{ color: '#fff', marginBottom: '12px', marginLeft: '-8px' }}>Close</Button>
<HStack gap={1.5} wrap="wrap" style={{ marginBottom: '10px' }}>
<Badge variant="neutral" label={isPickup ? 'Pickup' : 'Delivery'} style={{ background: 'rgba(255,255,255,0.2)', color: '#fff' }} />
<Badge variant="neutral" label={meta.label || order.status} style={{ background: 'rgba(255,255,255,0.2)', color: '#fff' }} />
</HStack>
<Heading level={4} style={{ color: '#fff', margin: 0 }}>{order.customer}</Heading>
<Text type="supporting" style={{ color: '#fff', opacity: 0.9, fontFamily: 'monospace' }}>#{order.orderId}</Text>
</div>
}
content={
<LayoutContent isScrollable padding={0}>
<VStack gap={3} style={{ padding: '20px', background: 'var(--color-background-muted)' }}>
<Card padding={3}>
<Text type="supporting" weight="bold" color="secondary" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '14px' }}>
{isPickup ? 'Merchant / Sender' : 'Customer'}
</Text>
<VStack gap={3}>
<DetailRow icon={isPickup ? Store : User} label="Name" value={order.customer} />
<DetailRow icon={Phone} label="Phone" value={order.phone} />
<DetailRow icon={MapPin} label="Pickup address" value={order.address} />
</VStack>
</Card>
{/* Body */}
<Box sx={{ p: 2, bgcolor: '#F8F9FB', flex: 1, overflow: 'auto' }}>
<Stack spacing={1.75}>
<Card padding={3}>
<Text type="supporting" weight="bold" color="secondary" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '14px' }}>Pickup Summary</Text>
<Grid columns={2} gap={3}>
<DetailRow icon={Clock} label="Picked at" value={order.time} />
<DetailRow icon={CalendarClock} label="Time slot" value={order.slot} />
<DetailRow icon={Package} label="Items" value={order.items != null ? `${order.items} ${order.items === 1 ? 'parcel' : 'parcels'}` : ''} />
<DetailRow icon={Scale} label="Weight" value={order.weight} />
<DetailRow icon={Ruler} label="Leg distance" value={order.legKm != null ? `${order.legKm} km` : ''} />
<DetailRow icon={Wallet} label="Payment" value={order.payment} />
</Grid>
</Card>
{/* Contact */}
<Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid #E2E8F0', bgcolor: '#fff' }}>
<Typography variant="overline" sx={{ color: '#6C757D', fontWeight: 700, letterSpacing: 1, fontSize: '0.7rem', display: 'block', mb: 1.5 }}>
{isPickup ? 'MERCHANT / SENDER' : 'CUSTOMER'}
</Typography>
<Stack spacing={1.75}>
<DetailRow icon={isPickup ? StorefrontOutlinedIcon : PersonOutlineOutlinedIcon} label="Name" value={order.customer} />
<DetailRow icon={PhoneOutlinedIcon} label="Phone" value={order.phone} />
<DetailRow icon={PlaceOutlinedIcon} label="Pickup address" value={order.address} />
</Stack>
</Paper>
{order.cod > 0 && (
<div style={{ padding: '14px', borderRadius: 'var(--radius-element)', background: 'var(--color-background-orange)', border: '1px solid var(--color-icon-orange)' }}>
<HStack gap={2} align="center">
<span style={{ color: 'var(--color-icon-orange)', display: 'flex' }}><Wallet size={20} /></span>
<VStack gap={0}>
<Text type="supporting" weight="bold" style={{ color: 'var(--color-text-orange)' }}>CASH ON PICKUP</Text>
<Text type="body" weight="bold" style={{ color: 'var(--color-text-orange)' }}>{inr(order.cod)}</Text>
</VStack>
</HStack>
</div>
)}
{/* Pickup summary */}
<Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid #E2E8F0', bgcolor: '#fff' }}>
<Typography variant="overline" sx={{ color: '#6C757D', fontWeight: 700, letterSpacing: 1, fontSize: '0.7rem', display: 'block', mb: 1.5 }}>
PICKUP SUMMARY
</Typography>
<Grid container rowSpacing={2} columnSpacing={1.5}>
<Grid item xs={6}><DetailRow icon={AccessTimeOutlinedIcon} label="Picked at" value={order.time} /></Grid>
<Grid item xs={6}><DetailRow icon={ScheduleOutlinedIcon} label="Time slot" value={order.slot} /></Grid>
<Grid item xs={6}><DetailRow icon={Inventory2OutlinedIcon} label="Items" value={order.items != null ? `${order.items} ${order.items === 1 ? 'parcel' : 'parcels'}` : ''} /></Grid>
<Grid item xs={6}><DetailRow icon={ScaleOutlinedIcon} label="Weight" value={order.weight} /></Grid>
<Grid item xs={6}><DetailRow icon={StraightenRoundedIcon} label="Leg distance" value={order.legKm != null ? `${order.legKm} km` : ''} /></Grid>
<Grid item xs={6}><DetailRow icon={PaymentsOutlinedIcon} label="Payment" value={order.payment} /></Grid>
</Grid>
</Paper>
<Card padding={3}>
<Text type="supporting" weight="bold" color="secondary" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '14px' }}>Route &amp; Location</Text>
<VStack gap={3}>
<DetailRow icon={isPickup ? Store : Warehouse} label="Route leg" value={isPickup ? `${order.customer} → ${HUB.label}` : `${HUB.label} → ${order.customer}`} />
<DetailRow icon={MapPin} label="Coordinates" value={order.lat != null && order.lng != null ? `${order.lat.toFixed(4)}, ${order.lng.toFixed(4)}` : ''} />
{order.instructions && <DetailRow icon={FileText} label="Instructions" value={order.instructions} valueColor="var(--color-text-secondary)" />}
</VStack>
</Card>
{order.cod > 0 && (
<Box sx={{ p: 2, borderRadius: 2, bgcolor: alpha('#F29900', 0.1), border: `1px solid ${alpha('#F29900', 0.3)}` }}>
<Stack direction="row" alignItems="center" spacing={1.5}>
<PaymentsOutlinedIcon sx={{ color: '#B06000' }} />
<Box>
<Typography variant="caption" sx={{ color: '#B06000', fontWeight: 700 }}>CASH ON PICKUP</Typography>
<Typography sx={{ fontWeight: 800, color: '#B06000' }}>{inr(order.cod)}</Typography>
</Box>
</Stack>
</Box>
)}
{/* Route & location */}
<Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid #E2E8F0', bgcolor: '#fff' }}>
<Typography variant="overline" sx={{ color: '#6C757D', fontWeight: 700, letterSpacing: 1, fontSize: '0.7rem', display: 'block', mb: 1.5 }}>
ROUTE &amp; LOCATION
</Typography>
<Stack spacing={1.75}>
<DetailRow icon={isPickup ? StorefrontOutlinedIcon : WarehouseRoundedIcon} label="Route leg"
value={isPickup ? `${order.customer} → ${HUB.label}` : `${HUB.label} → ${order.customer}`} />
<DetailRow icon={MyLocationOutlinedIcon} label="Coordinates"
value={order.lat != null && order.lng != null ? `${order.lat.toFixed(4)}, ${order.lng.toFixed(4)}` : ''} />
{order.instructions && <DetailRow icon={NotesOutlinedIcon} label="Instructions" value={order.instructions} valueColor="#5F6368" />}
</Stack>
</Paper>
{/* Assigned miler */}
<Paper elevation={0} sx={{ p: 2, borderRadius: 2, border: '1px solid #E2E8F0', bgcolor: '#fff' }}>
<Typography variant="overline" sx={{ color: '#6C757D', fontWeight: 700, letterSpacing: 1, fontSize: '0.7rem', display: 'block', mb: 1.5 }}>
ASSIGNED MILER
</Typography>
<Stack direction="row" alignItems="center" spacing={1.5}>
<Avatar sx={{ width: 40, height: 40, bgcolor: alpha(rider.color, 0.14), color: rider.color, fontWeight: 700 }}>{initials(rider.name)}</Avatar>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography sx={{ fontWeight: 700 }} noWrap>{rider.name}</Typography>
<Typography variant="caption" color="text.secondary">{rider.vehicle} · {rider.vehicleNo} · Stop {index}</Typography>
</Box>
</Stack>
</Paper>
</Stack>
</Box>
{/* Footer */}
<Box sx={{ p: 2, borderTop: '1px solid #E9ECEF', bgcolor: '#fff', display: 'flex', gap: 1.25, flexShrink: 0 }}>
<Button fullWidth variant="outlined" startIcon={<CallOutlinedIcon />} href={`tel:${order.phone}`} sx={{ borderRadius: 2 }}>Call</Button>
<Button fullWidth variant="contained" startIcon={<CheckCircleRoundedIcon />} onClick={onBack} sx={{ borderRadius: 2, bgcolor: rider.color, '&:hover': { bgcolor: rider.color } }}>Done</Button>
</Box>
</Box>
<Card padding={3}>
<Text type="supporting" weight="bold" color="secondary" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '14px' }}>Assigned Miler</Text>
<HStack gap={3} align="center">
<Avatar name={rider.name} size={40} style={{ backgroundColor: hexAlpha(rider.color, 0.14), color: rider.color }} />
<VStack gap={0} style={{ minWidth: 0 }}>
<Text type="body" weight="bold">{rider.name}</Text>
<Text type="supporting" color="secondary">{rider.vehicle} · {rider.vehicleNo} · Stop {index}</Text>
</VStack>
</HStack>
</Card>
</VStack>
</LayoutContent>
}
footer={
<div style={{ padding: '16px', borderTop: '1px solid var(--color-border)', display: 'flex', gap: '10px' }}>
<Button variant="secondary" style={{ flex: 1, justifyContent: 'center' }} icon={<Phone size={16} />} onClick={() => window.open(`tel:${order.phone}`, '_self')}>Call</Button>
<Button variant="primary" style={{ flex: 1, justifyContent: 'center', background: rider.color }} icon={<CheckCircle2 size={16} />} onClick={onBack}>Done</Button>
</div>
}
/>
);
}
@@ -370,6 +345,7 @@ function OrderDetailPanel({ data, onBack }) {
// MAIN COMPONENT
// ════════════════════════════════════════════════════════════════════════════════
export default function RiderRoutes() {
const isMdDown = useMediaQuery('(max-width: 900px)');
const [mode] = useState('pickup'); // pickups only
const [riders, setRiders] = useState([]); // loaded from /hub/rider-routes
const [loading, setLoading] = useState(true);
@@ -384,7 +360,6 @@ export default function RiderRoutes() {
const [playing, setPlaying] = useState(null);
const [progress, setProgress] = useState(0);
const [speed, setSpeed] = useState(1);
const [speedAnchor, setSpeedAnchor] = useState(null);
const rafRef = useRef(null);
const lastTsRef = useRef(0);
const resolvedRef = useRef({}); // keys we've already fetched/attempted
@@ -519,59 +494,50 @@ export default function RiderRoutes() {
return { rider, path, travelled, pos };
}, [playing, progress, pathFor, riders]);
const speedMenuItems = [0.5, 1, 2, 4].map((s) => ({
label: `${s}× speed`,
icon: speed === s ? <CheckCircle2 size={14} /> : undefined,
onClick: () => setSpeed(s)
}));
return (
<Box sx={{ pt: { xs: 1, md: 1 }, pb: 1 }}>
{/* ── Header ── */}
<Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems={{ md: 'center' }} gap={1} mb={2} sx={{ mb: 2 }}>
<Stack direction="row" alignItems="center" spacing={2.5}>
<Avatar sx={{ bgcolor: alpha('#C01227', 0.1), color: '#C01227', width: 56, height: 56, borderRadius: 2 }}>
<RouteOutlinedIcon sx={{ fontSize: 30 }} />
</Avatar>
<Box>
<Typography variant="h4" sx={{ fontWeight: 800, letterSpacing: '-0.4px', lineHeight: 1.2 }}>Rider Routes</Typography>
<Typography variant="body1" color="text.secondary" sx={{ fontWeight: 500 }}>
Pickups each miler covered today open any order for full details, or press play to replay the trip.
</Typography>
</Box>
</Stack>
</Stack>
<div style={{ paddingBottom: '32px' }}>
<PageHeader
icon={Route}
title="Rider Routes"
subtitle="Pickups each miler covered today — open any order for full details, or press play to replay the trip."
/>
{!loading && riders.length === 0 && (
<Card elevation={0} sx={{ borderRadius: 2, border: '1px dashed #CED4DA', py: 8, textAlign: 'center', mt: 3 }}>
<RouteOutlinedIcon sx={{ fontSize: 56, color: '#CED4DA', mb: 1.5 }} />
<Typography variant="h6" sx={{ fontWeight: 700, color: '#495057' }}>No rider routes today</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
Once milers are assigned pickups, their planned stops will show up here.
</Typography>
</Card>
<EmptyState
icon={<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><Route size={48} /></span>}
title="No rider routes today"
description="Once milers are assigned pickups, their planned stops will show up here."
style={{ padding: '48px 0', marginBottom: '20px' }}
/>
)}
{/* ── Analysis KPI strip ── */}
<Grid container spacing={2.5} mt={4} sx={{ mb: 2 }}>
{[
{ icon: GroupsOutlinedIcon, label: 'Active Milers', value: kpi.activeRiders, sub: `of ${riders.length}`, color: '#1A73E8', bg: '#E8F0FE' },
{ icon: modeCfg.icon, label: modeCfg.label, value: kpi.orders, sub: 'pickups covered', color: '#C01227', bg: alpha('#C01227', 0.1) },
{ icon: CheckCircleRoundedIcon, label: modeCfg.doneLabel, value: kpi.done, sub: `${kpi.fail} missed`, color: '#1E8E3E', bg: '#E6F4EA' },
{ icon: StraightenRoundedIcon, label: 'Distance', value: `${kpi.km} km`, sub: 'fleet total today', color: '#8E24AA', bg: '#F3E5F5' },
].map((k, i) => (
<Grid item xs={6} sm={6} md={3} key={i}><KpiCard {...k} /></Grid>
))}
{/* KPI strip */}
<Grid columns={{ minWidth: 160, repeat: 'fit' }} gap={1.5} style={{ marginBottom: '16px' }}>
<StatCard size="sm" icon={Users} label="Active Milers" value={kpi.activeRiders} tone="blue" />
<StatCard size="sm" icon={Store} label={modeCfg.label} value={kpi.orders} tone="red" />
<StatCard size="sm" icon={CheckCircle2} label={modeCfg.doneLabel} value={kpi.done} tone="green" />
<StatCard size="sm" icon={Ruler} label="Distance" value={`${kpi.km} km`} tone="purple" />
</Grid>
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', lg: 'row' }, gap: 3, pb: 4 }}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
{/* ── Left control panel — the milers list; clicking an order opens the
full detail in a right-side drawer (below). ── */}
<Box sx={{ width: { xs: '100%', lg: 380 }, flexShrink: 0 }}>
<Card sx={{ borderRadius: 2, border: '1px solid #ECEEF1', boxShadow: '0 4px 20px rgba(0,0,0,0.04)' }}>
<Box sx={{ px: 3, py: 2.25, borderBottom: '1px solid #F1F3F5', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Typography sx={{ fontWeight: 700 }}>Milers &amp; their {modeCfg.label.toLowerCase()}</Typography>
full detail in a right-side sheet (below). ── */}
<div style={{ flex: '1 1 340px', maxWidth: 400 }}>
<Panel>
<HStack justify="between" align="center" style={{ padding: '14px 20px', borderBottom: '1px solid var(--color-border)' }}>
<Text type="body" weight="bold">Milers &amp; their {modeCfg.label.toLowerCase()}</Text>
{(playing || progress > 0) && (
<Button size="small" startIcon={<ReplayRoundedIcon />} onClick={resetAnim} sx={{ textTransform: 'none', color: '#5F6368' }}>Reset</Button>
<Button variant="ghost" size="sm" icon={<RotateCcw size={14} />} onClick={resetAnim}>Reset</Button>
)}
</Box>
</HStack>
<List disablePadding sx={{ maxHeight: { lg: 620 }, overflow: 'auto' }}>
<div style={{ maxHeight: 640, overflowY: 'auto' }}>
{riders.map((rider) => {
const trip = rider[mode];
const orders = trip.stops.filter((s) => s.kind === 'order');
@@ -580,174 +546,150 @@ export default function RiderRoutes() {
const isPlaying = playing === rider.id;
const isVisible = visible[rider.id];
return (
<Box key={rider.id} sx={{ borderBottom: '1px solid #F4F5F7' }}>
<Box sx={{ display: 'flex', alignItems: 'center', px: 2, py: 1.5, gap: 1, opacity: isVisible ? 1 : 0.5 }}>
<Box sx={{ width: 6, height: 40, borderRadius: 2, bgcolor: rider.color, flexShrink: 0 }} />
<Avatar sx={{ width: 38, height: 38, bgcolor: alpha(rider.color, 0.12), color: rider.color, fontWeight: 700, fontSize: 14 }}>{initials(rider.name)}</Avatar>
<ListItemButton disableGutters onClick={() => setExpanded(isOpen ? null : rider.id)} sx={{ flex: 1, borderRadius: 2, px: 1, py: 0.5, minWidth: 0 }}>
<ListItemText
primary={<Typography sx={{ fontWeight: 700, fontSize: '0.92rem' }} noWrap>{rider.name}</Typography>}
secondary={<Typography variant="caption" color="text.secondary" noWrap>{done}/{orders.length} {modeCfg.doneLabel.toLowerCase()} · {trip.distanceKm} km</Typography>}
/>
{isOpen ? <ExpandLessRoundedIcon sx={{ color: '#9AA0A6' }} /> : <ExpandMoreRoundedIcon sx={{ color: '#9AA0A6' }} />}
</ListItemButton>
</Box>
<div key={rider.id} style={{ borderBottom: '1px solid var(--color-border)', opacity: isVisible ? 1 : 0.5 }}>
<HStack gap={2} align="center" style={{ padding: '14px 16px 8px' }}>
<span style={{ width: 5, height: 36, borderRadius: 'var(--radius-full)', background: rider.color, flexShrink: 0 }} />
<Avatar name={rider.name} size={36} style={{ backgroundColor: hexAlpha(rider.color, 0.14), color: rider.color, borderRadius: '50%' }} />
<button
type="button"
onClick={() => setExpanded(isOpen ? null : rider.id)}
style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0', textAlign: 'left' }}
>
<VStack gap={0} style={{ minWidth: 0 }}>
<Text type="body" weight="bold" maxLines={1}>{rider.name}</Text>
<Text type="supporting" color="secondary" maxLines={1}>{done}/{orders.length} {modeCfg.doneLabel.toLowerCase()} · {trip.distanceKm} km</Text>
</VStack>
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex', flexShrink: 0 }}>
{isOpen ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
</span>
</button>
</HStack>
{/* per-rider stat chips (analysis) */}
<Stack direction="row" gap={1} flexWrap="wrap" sx={{ px: 2, pb: 1.5 }}>
<Chip size="small" icon={<Inventory2OutlinedIcon sx={{ fontSize: '14px !important' }} />} label={`${orders.length} ${modeCfg.label.toLowerCase()}`} sx={{ height: 24, fontWeight: 600, bgcolor: '#F1F3F5' }} />
<Chip size="small" icon={<CheckCircleRoundedIcon sx={{ fontSize: '14px !important', color: '#1E8E3E !important' }} />} label={done} sx={{ height: 24, fontWeight: 600, bgcolor: alpha('#1E8E3E', 0.1), color: '#1E8E3E' }} />
<Chip size="small" icon={<StraightenRoundedIcon sx={{ fontSize: '14px !important' }} />} label={`${trip.distanceKm} km`} sx={{ height: 24, fontWeight: 600, bgcolor: '#F1F3F5' }} />
<Chip size="small" icon={<AccessTimeOutlinedIcon sx={{ fontSize: '14px !important' }} />} label={`${trip.startTime}–${trip.endTime}`} sx={{ height: 24, fontWeight: 600, bgcolor: '#F1F3F5' }} />
</Stack>
{/* per-rider stat badges (analysis) */}
<HStack gap={1} wrap="wrap" style={{ padding: '0 16px 10px' }}>
<Badge variant="neutral" label={`${orders.length} ${modeCfg.label.toLowerCase()}`} />
<Badge variant="green" label={String(done)} />
<Badge variant="neutral" label={`${trip.distanceKm} km`} />
</HStack>
{/* action row */}
<Stack direction="row" gap={1.25} sx={{ px: 2, pb: 2 }}>
<HStack gap={2} style={{ padding: '0 16px 14px' }}>
<Button
size="small"
variant={isPlaying ? 'contained' : 'outlined'}
startIcon={isPlaying ? <PauseRoundedIcon /> : <PlayArrowRoundedIcon />}
size="sm"
variant={isPlaying ? 'primary' : 'secondary'}
icon={isPlaying ? <Pause size={14} /> : <Play size={14} />}
onClick={() => startAnim(rider.id)}
sx={{
textTransform: 'none', fontWeight: 600, borderRadius: 2, flex: 1,
...(isPlaying
? { bgcolor: rider.color, '&:hover': { bgcolor: rider.color } }
: { color: rider.color, borderColor: alpha(rider.color, 0.5), '&:hover': { borderColor: rider.color, bgcolor: alpha(rider.color, 0.06) } }),
}}
style={{ flex: 1, justifyContent: 'center', ...(isPlaying ? { background: rider.color } : { color: rider.color, borderColor: hexAlpha(rider.color, 0.5) }) }}
>
{isPlaying ? 'Playing…' : 'Animate route'}
</Button>
<Tooltip title={isVisible ? 'Hide route' : 'Show route'}>
<IconButton size="small" onClick={() => toggleVisible(rider.id)} sx={{ border: '1px solid #E9ECEF', borderRadius: 2 }}>
{isVisible ? <VisibilityOutlinedIcon fontSize="small" /> : <VisibilityOffOutlinedIcon fontSize="small" />}
</IconButton>
</Tooltip>
</Stack>
<IconButton
size="sm"
variant="secondary"
label={isVisible ? 'Hide route' : 'Show route'}
tooltip={isVisible ? 'Hide route' : 'Show route'}
icon={isVisible ? <Eye size={14} /> : <EyeOff size={14} />}
onClick={() => toggleVisible(rider.id)}
/>
</HStack>
{isPlaying && (
<Box sx={{ px: 2, pb: 1.5 }}>
<LinearProgress variant="determinate" value={progress * 100} sx={{ height: 6, borderRadius: 2, bgcolor: '#EDEFF2', '& .MuiLinearProgress-bar': { bgcolor: rider.color, borderRadius: 2 } }} />
</Box>
<div style={{ padding: '0 16px 14px' }}>
<ProgressBar label={`${rider.name} playback`} isLabelHidden value={progress * 100} variant="accent" />
</div>
)}
{/* expandable stops — rich order cards; click to open detail */}
<Collapse in={isOpen} unmountOnExit>
<Box sx={{ px: 2, pb: 2, pt: 0.5 }}>
<Stack spacing={1.25}>
{trip.stops.map((s, i) => {
const key = `${rider.id}-${i}`;
const isHub = s.kind === 'hub';
const meta = STATUS_META[s.status];
const StatusIcon = meta?.icon;
{isOpen && (
<VStack gap={1.5} style={{ padding: '0 16px 16px' }}>
{trip.stops.map((s, i) => {
const key = `${rider.id}-${i}`;
const meta = STATUS_META[s.status];
const StatusIcon = meta?.icon;
return (
<div
key={key}
onMouseEnter={() => setFocusedStop(key)}
onMouseLeave={() => setFocusedStop((f) => (f === key ? null : f))}
onClick={() => openDetail(rider, s, i)}
style={{
padding: '12px', borderRadius: 'var(--radius-element)', cursor: 'pointer',
border: `1px solid ${focusedStop === key ? hexAlpha(rider.color, 0.55) : 'var(--color-border)'}`,
background: focusedStop === key ? hexAlpha(rider.color, 0.05) : 'var(--color-background-surface)'
}}
>
<HStack justify="between" align="center" gap={1}>
<HStack gap={1.5} align="center" style={{ minWidth: 0 }}>
<span style={{ width: 24, height: 24, borderRadius: 'var(--radius-inner)', flexShrink: 0, background: hexAlpha(rider.color, 0.14), color: rider.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 12 }}>{i}</span>
<Text type="body" weight="bold" maxLines={1}>
<span style={{ color: 'var(--color-text-secondary)', fontWeight: 600 }}>Order </span>#{s.orderId}
</Text>
</HStack>
{meta && <Badge variant={meta.variant} label={meta.label} icon={StatusIcon ? <StatusIcon size={12} /> : undefined} />}
</HStack>
// Hub return — compact row, not a card.
if (isHub) {
return (
<Stack key={key} direction="row" alignItems="center" gap={1.25} sx={{ px: 0.5, py: 0.5 }}>
<Box sx={{ width: 28, height: 28, borderRadius: 2, flexShrink: 0, bgcolor: alpha('#C01227', 0.12), color: '#C01227', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<WarehouseRoundedIcon sx={{ fontSize: 16 }} />
</Box>
<Box sx={{ minWidth: 0 }}>
<Typography sx={{ fontWeight: 700, fontSize: '0.82rem' }} noWrap>{s.label}</Typography>
<Typography variant="caption" color="text.secondary">Back to hub · {s.time}</Typography>
</Box>
</Stack>
);
}
<HStack justify="between" align="center" gap={1} style={{ marginTop: 8 }}>
<HStack gap={1} align="center" style={{ minWidth: 0 }}>
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><Bike size={14} /></span>
<Text type="supporting" color="secondary" maxLines={1}>{rider.name}</Text>
</HStack>
<HStack gap={1} align="center" style={{ flexShrink: 0 }}>
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><Clock size={13} /></span>
<Text type="supporting" color="secondary">{s.time}</Text>
</HStack>
</HStack>
return (
<Box
key={key}
onMouseEnter={() => setFocusedStop(key)}
onMouseLeave={() => setFocusedStop((f) => (f === key ? null : f))}
onClick={() => openDetail(rider, s, i)}
sx={{
p: 1.5, borderRadius: 2, cursor: 'pointer', transition: 'all .15s',
border: '1px solid', borderColor: focusedStop === key ? alpha(rider.color, 0.55) : '#ECEEF1',
bgcolor: focusedStop === key ? alpha(rider.color, 0.04) : '#fff',
boxShadow: '0 1px 3px rgba(0,0,0,0.03)',
'&:hover': { borderColor: alpha(rider.color, 0.55), boxShadow: '0 4px 14px rgba(0,0,0,0.07)' },
}}
>
{/* order id + status */}
<Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
<Stack direction="row" alignItems="center" gap={1} sx={{ minWidth: 0 }}>
<Box sx={{ width: 26, height: 26, borderRadius: 2, flexShrink: 0, bgcolor: alpha(rider.color, 0.14), color: rider.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 12 }}>{i}</Box>
<Typography sx={{ fontWeight: 700, fontSize: '0.82rem' }} noWrap>
<Box component="span" sx={{ color: '#9AA0A6', fontWeight: 600 }}>Order </Box>#{s.orderId}
</Typography>
</Stack>
{meta && (
<Chip size="small" icon={<StatusIcon sx={{ fontSize: '14px !important', color: `${meta.color} !important` }} />} label={meta.label}
sx={{ height: 22, fontSize: '0.68rem', fontWeight: 700, color: meta.color, bgcolor: alpha(meta.color, 0.1), flexShrink: 0 }} />
)}
</Stack>
<Divider style={{ margin: '10px 0' }} />
{/* rider + time */}
<Stack direction="row" alignItems="center" justifyContent="space-between" gap={1} sx={{ mt: 1 }}>
<Stack direction="row" alignItems="center" gap={0.75} sx={{ minWidth: 0 }}>
<DeliveryDiningRoundedIcon sx={{ fontSize: 16, color: '#9AA0A6', flexShrink: 0 }} />
<Typography variant="caption" sx={{ fontWeight: 600, color: '#5F6368' }} noWrap>{rider.name}</Typography>
</Stack>
<Stack direction="row" alignItems="center" gap={0.5} sx={{ flexShrink: 0 }}>
<AccessTimeOutlinedIcon sx={{ fontSize: 14, color: '#9AA0A6' }} />
<Typography variant="caption" sx={{ fontWeight: 600, color: '#5F6368' }}>{s.time}</Typography>
</Stack>
</Stack>
<HStack gap={1} align="center">
<span style={{ color: rider.color, display: 'flex' }}><Store size={14} /></span>
<Text type="body" weight="bold" maxLines={1}>{s.customer}</Text>
</HStack>
<HStack gap={1} align="start" style={{ marginTop: 4 }}>
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex', marginTop: 1 }}><MapPin size={14} /></span>
<Text type="supporting" color="secondary" maxLines={1} style={{ flex: 1 }}>{s.address}</Text>
</HStack>
<Divider sx={{ my: 1.25 }} />
{/* merchant + address */}
<Stack direction="row" alignItems="center" gap={0.75}>
<StorefrontOutlinedIcon sx={{ fontSize: 16, color: rider.color, flexShrink: 0 }} />
<Typography sx={{ fontWeight: 700, fontSize: '0.82rem' }} noWrap>{s.customer}</Typography>
</Stack>
<Stack direction="row" alignItems="flex-start" gap={0.75} sx={{ mt: 0.5 }}>
<PlaceOutlinedIcon sx={{ fontSize: 16, color: '#9AA0A6', flexShrink: 0, mt: '1px' }} />
<Typography variant="caption" color="text.secondary" noWrap sx={{ flex: 1, minWidth: 0 }}>{s.address}</Typography>
</Stack>
{/* metric chips — only render fields the API actually returned */}
{(s.legKm != null || s.weight || s.items != null) && (
<Stack direction="row" sx={{ flexWrap: 'wrap', gap: 0.75, mt: 1.25 }}>
{s.legKm != null && <Chip size="small" icon={<StraightenRoundedIcon sx={{ fontSize: '13px !important' }} />} label={`${s.legKm} km`} sx={{ height: 22, fontSize: '0.68rem', fontWeight: 600, bgcolor: '#F1F3F5' }} />}
{s.weight && <Chip size="small" icon={<ScaleOutlinedIcon sx={{ fontSize: '13px !important' }} />} label={s.weight} sx={{ height: 22, fontSize: '0.68rem', fontWeight: 600, bgcolor: '#F1F3F5' }} />}
{s.items != null && <Chip size="small" icon={<Inventory2OutlinedIcon sx={{ fontSize: '13px !important' }} />} label={`${s.items} ${s.items === 1 ? 'parcel' : 'parcels'}`} sx={{ height: 22, fontSize: '0.68rem', fontWeight: 600, bgcolor: '#F1F3F5' }} />}
</Stack>
)}
</Box>
);
})}
</Stack>
</Box>
</Collapse>
</Box>
{(s.legKm != null || s.weight || s.items != null) && (
<HStack gap={1} wrap="wrap" style={{ marginTop: 10 }}>
{s.legKm != null && <Badge variant="neutral" label={`${s.legKm} km`} />}
{s.weight && <Badge variant="neutral" label={s.weight} />}
{s.items != null && <Badge variant="neutral" label={`${s.items} ${s.items === 1 ? 'parcel' : 'parcels'}`} />}
</HStack>
)}
</div>
);
})}
</VStack>
)}
</div>
);
})}
</List>
</Card>
</Box>
</div>
</Panel>
</div>
{/* ── Map ── */}
<Box ref={mapRef} sx={{ flex: 1, minWidth: 0, scrollMarginTop: 72 }}>
<Card sx={{ height: { xs: 460, sm: 560, lg: 700 }, borderRadius: 2, border: '1px solid #ECEEF1', overflow: 'hidden', position: 'relative', boxShadow: '0 4px 20px rgba(0,0,0,0.04)' }}>
<div ref={mapRef} style={{ flex: '2 1 480px', minWidth: 0, scrollMarginTop: 72 }}>
<Card padding={0} style={{ height: isMdDown ? 400 : 560, border: '1px solid var(--color-border)', overflow: 'hidden', position: 'relative' }}>
{playState && (
<Box sx={{ position: 'absolute', top: 14, left: 14, zIndex: 1000, minWidth: 230, bgcolor: 'rgba(255,255,255,0.97)', borderRadius: 2, p: 1.75, boxShadow: '0 8px 28px rgba(0,0,0,0.14)', border: `1px solid ${alpha(playState.rider.color, 0.3)}` }}>
<Stack direction="row" alignItems="center" spacing={1.25} mb={1}>
<Avatar sx={{ width: 30, height: 30, bgcolor: playState.rider.color, fontSize: 12, fontWeight: 700 }}>{initials(playState.rider.name)}</Avatar>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography sx={{ fontWeight: 700, fontSize: '0.85rem' }} noWrap>{playState.rider.name}</Typography>
<Typography variant="caption" color="text.secondary">Replaying {modeCfg.label.toLowerCase().replace(/s$/, '')} · {Math.round(progress * 100)}%</Typography>
</Box>
<IconButton size="small" onClick={() => setPlaying(null)}><PauseRoundedIcon fontSize="small" /></IconButton>
<Tooltip title="Speed"><IconButton size="small" onClick={(e) => setSpeedAnchor(e.currentTarget)}><SpeedRoundedIcon fontSize="small" /></IconButton></Tooltip>
</Stack>
<LinearProgress variant="determinate" value={progress * 100} sx={{ height: 6, borderRadius: 2, bgcolor: '#EDEFF2', '& .MuiLinearProgress-bar': { bgcolor: playState.rider.color, borderRadius: 2 } }} />
</Box>
<div style={{ position: 'absolute', top: 14, left: 14, zIndex: 1000, minWidth: 220, background: 'var(--color-background-surface)', borderRadius: 'var(--radius-element)', padding: '14px', boxShadow: 'var(--shadow-high, 0 8px 28px rgba(0,0,0,0.14))', border: `1px solid ${hexAlpha(playState.rider.color, 0.3)}` }}>
<HStack gap={2} align="center" style={{ marginBottom: 8 }}>
<Avatar name={playState.rider.name} size={28} style={{ backgroundColor: playState.rider.color, color: '#fff' }} />
<VStack gap={0} style={{ flex: 1, minWidth: 0 }}>
<Text type="supporting" weight="bold" maxLines={1}>{playState.rider.name}</Text>
<Text type="supporting" color="secondary">Replaying pickup · {Math.round(progress * 100)}%</Text>
</VStack>
<IconButton size="sm" variant="ghost" label="Pause" icon={<Pause size={14} />} onClick={() => setPlaying(null)} />
<DropdownMenu
button={{ icon: <Gauge size={14} />, variant: 'ghost', size: 'sm', isIconOnly: true, label: 'Change speed' }}
hasChevron={false}
items={speedMenuItems}
/>
</HStack>
<ProgressBar label="Playback progress" isLabelHidden value={progress * 100} variant="accent" />
</div>
)}
<Menu anchorEl={speedAnchor} open={Boolean(speedAnchor)} onClose={() => setSpeedAnchor(null)}>
{[0.5, 1, 2, 4].map((s) => (<MenuItem key={s} selected={speed === s} onClick={() => { setSpeed(s); setSpeedAnchor(null); }}>{s}× speed</MenuItem>))}
</Menu>
<MapContainer center={[HUB.lat, HUB.lng]} zoom={11} scrollWheelZoom style={{ height: '100%', width: '100%' }}>
<MapResizeHandler />
@@ -784,17 +726,17 @@ export default function RiderRoutes() {
eventHandlers={{ click: () => openDetail(rider, s, i) }}
>
<Popup>
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>{modeCfg.pointLabel} {i} · {s.customer}</Typography>
<Typography variant="caption" display="block">{s.address}</Typography>
<Typography variant="caption" display="block">#{s.orderId} · {s.time} · {STATUS_META[s.status]?.label}</Typography>
<Typography variant="caption" display="block" sx={{ color: rider.color, fontWeight: 700, cursor: 'pointer' }} onClick={() => openDetail(rider, s, i)}>View full details →</Typography>
<strong>{modeCfg.pointLabel} {i} · {s.customer}</strong>
<div>{s.address}</div>
<div>#{s.orderId} · {s.time} · {STATUS_META[s.status]?.label}</div>
<div style={{ color: rider.color, fontWeight: 700, cursor: 'pointer' }} onClick={() => openDetail(rider, s, i)}>View full details →</div>
</Popup>
</Marker>
);
})}
{!dimmed && endStop && (
<Marker position={[endStop.lat, endStop.lng]} icon={flagIcon} zIndexOffset={-100}>
<LTooltip direction="top" offset={[0, -14]}>{mode === 'pickup' ? 'Returned to hub' : 'Trip end'} · {rider[mode].endTime}</LTooltip>
<LTooltip direction="top" offset={[0, -14]}>Returned to hub · {rider[mode].endTime}</LTooltip>
</Marker>
)}
</React.Fragment>
@@ -813,49 +755,38 @@ export default function RiderRoutes() {
</Card>
{/* Legend */}
<Stack direction="row" flexWrap="wrap" gap={2} sx={{ mt: 2 }}>
<HStack gap={3} wrap="wrap" style={{ marginTop: '14px' }}>
{riders.map((r) => (
<Stack key={r.id} direction="row" alignItems="center" gap={0.75} sx={{ opacity: visible[r.id] ? 1 : 0.4, cursor: 'pointer' }} onClick={() => toggleVisible(r.id)}>
<Box sx={{ width: 18, height: 4, borderRadius: 2, bgcolor: r.color }} />
<Typography variant="caption" sx={{ fontWeight: 600, color: '#5F6368' }}>{r.name}</Typography>
</Stack>
<HStack key={r.id} gap={1.5} align="center" style={{ opacity: visible[r.id] ? 1 : 0.4, cursor: 'pointer' }} onClick={() => toggleVisible(r.id)}>
<span style={{ width: 18, height: 4, borderRadius: 'var(--radius-full)', background: r.color, display: 'inline-block' }} />
<Text type="supporting" weight="semibold" color="secondary">{r.name}</Text>
</HStack>
))}
<Box sx={{ flex: 1 }} />
<Stack direction="row" alignItems="center" gap={0.75}>
<FlagRoundedIcon sx={{ fontSize: 16, color: '#1E8E3E' }} />
<Typography variant="caption" sx={{ fontWeight: 600, color: '#5F6368' }}>{mode === 'pickup' ? 'Hub return' : 'Trip end'}</Typography>
</Stack>
<Stack direction="row" alignItems="center" gap={0.75}>
<WarehouseRoundedIcon sx={{ fontSize: 16, color: '#C01227' }} />
<Typography variant="caption" sx={{ fontWeight: 600, color: '#5F6368' }}>Hub</Typography>
</Stack>
</Stack>
</Box>
</Box>
<div style={{ flex: 1 }} />
<HStack gap={1} align="center">
<span style={{ color: 'var(--color-icon-green)', display: 'flex' }}><Flag size={16} /></span>
<Text type="supporting" weight="semibold" color="secondary">Hub return</Text>
</HStack>
<HStack gap={1} align="center">
<span style={{ color: 'var(--color-brand)', display: 'flex' }}><Warehouse size={16} /></span>
<Text type="supporting" weight="semibold" color="secondary">Hub</Text>
</HStack>
</HStack>
</div>
</div>
{/* ── Order detail — right-side drawer ── */}
<Drawer
anchor="right"
open={Boolean(detail)}
onClose={closeDetail}
sx={{
// Temporary drawers render at zIndex.drawer (1200) here, below the app bar
// (drawer + 1). On mobile the sheet starts at top:0, so its Close button
// would hide under the app bar. Lift the whole modal above it.
zIndex: (t) => t.zIndex.modal,
'& .MuiDrawer-paper': {
width: { xs: '100%', sm: 360 },
maxWidth: '100%',
top: { xs: 0, sm: 64 },
height: { xs: '100%', sm: 'calc(100% - 64px)' },
borderTopLeftRadius: { sm: 16 },
overflow: 'hidden',
boxShadow: '-8px 0 30px rgba(0,0,0,0.12)',
},
}}
{/* ── Order detail — right-side sheet ── */}
<Dialog
isOpen={Boolean(detail)}
onOpenChange={(o) => { if (!o) closeDetail(); }}
width={380}
maxHeight="100vh"
style={{ height: '100vh' }}
position={{ top: 0, right: 0, bottom: 0 }}
purpose="info"
>
{detail && <OrderDetailPanel data={detail} onBack={closeDetail} />}
</Drawer>
</Box>
</Dialog>
</div>
);
}

1845
src/pages/operations/Riders.jsx
View File

File diff suppressed because it is too large Load Diff

420
src/pages/operations/Routing.jsx
View File

@@ -1,18 +1,17 @@
/* eslint-disable react/prop-types */
import { useState, useEffect, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';
import {
Box, Typography, Card, CardContent, CardHeader, Grid, TextField, Button,
Stack, Divider, Alert, AlertTitle, Avatar, List, ListItemButton, ListItemText, Chip, CircularProgress
} from '@mui/material';
import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import HelpIcon from '@mui/icons-material/Help';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import HubIcon from '@mui/icons-material/Hub';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import LocalOfferIcon from '@mui/icons-material/LocalOffer';
import { Box, QrCode, ArrowRight, HelpCircle, AlertTriangle, Truck, MapPin, Snowflake, Tag } from 'lucide-react';
import { Card } from '@astryxdesign/core/Card';
import { TextInput } from '@astryxdesign/core/TextInput';
import { Banner } from '@astryxdesign/core/Banner';
import { Badge } from '@astryxdesign/core/Badge';
import { Heading, Text } from '@astryxdesign/core/Text';
import { HStack, VStack } from '@astryxdesign/core/Layout';
import Panel from '@/components/Panel';
import Button from '@/components/Button';
import PageHeader from '@/components/PageHeader';
import { getRouting, getInboundToday } from '@/api/hub';
import { getHubContext } from '@/auth/session';
@@ -20,6 +19,56 @@ import { getHubContext } from '@/auth/session';
const isException = (condition) =>
/damag|wet|crush|missing|broken/i.test(condition || '');
// Classify the next action from the API's nexthop + condition. Colors map to
// Astryx's categorical tokens so each queue type reads as part of the same
// status language as Badge/StatCard, not one-off hex values.
const determineNextAction = (pkg) => {
if (isException(pkg.condition)) {
return { queue: 'Needs Checking', action: 'Set aside for a supervisor', tone: 'red', icon: <AlertTriangle size={22} /> };
}
if (pkg.iscoldchain) {
return { queue: 'Cold Chain', action: 'Put in the cold room (Zone C)', tone: 'cyan', icon: <Snowflake size={22} /> };
}
if ((pkg.nexthop || '').toLowerCase().startsWith('transfer')) {
return { queue: 'Transfer to Another City', action: pkg.nexthop, tone: 'purple', icon: <Truck size={22} /> };
}
if ((pkg.nexthop || '').toLowerCase().includes('local')) {
return { queue: 'Local Delivery', action: `Send to ${pkg.destination || 'the delivery lane'}`, tone: 'green', icon: <MapPin size={22} /> };
}
return { queue: pkg.nexthop || 'Check the address', action: pkg.nexthop || 'Check the address', tone: 'gray', icon: <HelpCircle size={22} /> };
};
const TONE_VARS = {
red: { icon: 'var(--color-icon-red)', bg: 'var(--color-background-red)' },
cyan: { icon: 'var(--color-icon-cyan)', bg: 'var(--color-background-cyan)' },
purple: { icon: 'var(--color-icon-purple)', bg: 'var(--color-background-purple)' },
green: { icon: 'var(--color-icon-green)', bg: 'var(--color-background-green)' },
gray: { icon: 'var(--color-icon-secondary)', bg: 'var(--color-background-muted)' }
};
function IconTile({ tone = 'blue', size = 32, children }) {
const { icon, bg } = tone === 'blue'
? { icon: 'var(--color-icon-blue)', bg: 'var(--color-background-blue)' }
: TONE_VARS[tone] || TONE_VARS.gray;
return (
<span
style={{
width: size,
height: size,
borderRadius: 'var(--radius-element)',
background: bg,
color: icon,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0
}}
>
{children}
</span>
);
}
export default function Routing() {
const [searchParams] = useSearchParams();
const hub = getHubContext();
@@ -68,230 +117,189 @@ export default function Routing() {
}
}, [searchParams, handleSearch]);
// Classify the next action from the API's nexthop + condition.
const determineNextAction = (pkg) => {
if (isException(pkg.condition)) {
return { queue: 'Needs Checking', action: 'Set aside for a supervisor', color: '#D93025', bg: '#FCE8E6', icon: <WarningAmberIcon /> };
}
if (pkg.iscoldchain) {
return { queue: 'Cold Chain', action: 'Put in the cold room (Zone C)', color: '#00838F', bg: '#E0F7FA', icon: <AcUnitIcon /> };
}
if ((pkg.nexthop || '').toLowerCase().startsWith('transfer')) {
return { queue: 'Transfer to Another City', action: pkg.nexthop, color: '#8E24AA', bg: '#F3E5F5', icon: <LocalShippingIcon /> };
}
if ((pkg.nexthop || '').toLowerCase().includes('local')) {
return { queue: 'Local Delivery', action: `Send to ${pkg.destination || 'the delivery lane'}`, color: '#1E8E3E', bg: '#E6F4EA', icon: <HubIcon /> };
}
return { queue: pkg.nexthop || 'Check the address', action: pkg.nexthop || 'Check the address', color: '#5F6368', bg: '#F1F3F4', icon: <HelpIcon /> };
};
return (
<Box>
<Box sx={{ mb: 4 }}>
<Typography variant="h4" sx={{ fontWeight: 800, color: '#212529', mb: 1 }}>Where Does It Go?</Typography>
<Typography variant="body1" color="text.secondary">
Scan a parcel and we'll tell you exactly what to do with it next — deliver locally, transfer to another city, or set it aside.
</Typography>
</Box>
<div style={{ paddingBottom: '32px', display: 'flex', flexDirection: 'column', flex: 1 }}>
<PageHeader
icon={Box}
title="Where Does It Go?"
subtitle="Scan a parcel and we'll tell you exactly what to do with it next — deliver locally, transfer to another city, or set it aside."
/>
<Grid container spacing={3.5}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', flex: 1, alignItems: 'stretch' }}>
{/* Search Panel */}
<Grid size={{ xs: 12, md: 5, lg: 4 }} >
<Stack spacing={3}>
<Card sx={{ borderRadius: 2, boxShadow: '0px 2px 14px rgba(38,38,38,0.04)', border: '1px solid #eaeaea' }}>
<CardHeader
title={<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>Scan a Parcel</Typography>}
avatar={<Avatar sx={{ bgcolor: '#C0122710', color: '#C01227', borderRadius: 2 }}><QrCodeScannerIcon /></Avatar>}
<VStack gap={2} style={{ flex: '1 1 300px', display: 'flex', flexDirection: 'column' }}>
<Panel style={{ flex: 3, display: 'flex', flexDirection: 'column' }}>
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', gap: '10px' }}>
<IconTile size={30}><QrCode size={16} /></IconTile>
<Text type="body" weight="bold">Scan a Parcel</Text>
</div>
<VStack gap={3} style={{ padding: '16px', flex: 1 }}>
<TextInput
label="Parcel tracking number"
placeholder="e.g. DM-1001"
value={searchId}
onChange={setSearchId}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
/>
<Divider />
<CardContent sx={{ pt: 3 }}>
<Stack spacing={2}>
<TextField
fullWidth
label="Parcel tracking number"
placeholder="e.g. DM-1001"
value={searchId}
onChange={(e) => setSearchId(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
InputProps={{
sx: { borderRadius: 2, bgcolor: '#fff' }
}}
/>
<Button
variant="contained"
size="large"
onClick={() => handleSearch()}
fullWidth
disabled={loading}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : null}
sx={{ bgcolor: '#C01227', py: 1.5, borderRadius: 2, boxShadow: '0px 6px 16px rgba(192, 18, 39, 0.28)', '&:hover': { bgcolor: '#9E0E20' } }}
>
{loading ? 'Checking…' : 'Tell Me What To Do'}
</Button>
</Stack>
</CardContent>
</Card>
<Button
onClick={() => handleSearch()}
style={{ width: '100%', justifyContent: 'center' }}
disabled={loading}
variant="primary"
>
{loading ? 'Checking…' : 'Tell Me What To Do'}
</Button>
</VStack>
</Panel>
<Card sx={{ borderRadius: 2, boxShadow: '0px 2px 14px rgba(38,38,38,0.04)', border: '1px solid #eaeaea' }}>
<CardHeader
title={<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>Parcels Waiting</Typography>}
subheader={<Typography variant="caption" sx={{ color: 'text.secondary' }}>Tap a parcel to check it</Typography>}
avatar={<Avatar sx={{ bgcolor: '#E8F0FE', color: '#1A73E8', borderRadius: 2 }}><LocalOfferIcon /></Avatar>}
/>
<Divider />
<CardContent sx={{ pt: 2, p: 1 }}>
<List disablePadding>
{waiting.length === 0 && (
<Typography variant="body2" color="text.secondary" sx={{ p: 2 }}>
No parcels inbounded today.
</Typography>
)}
{waiting.map((pkg) => (
<ListItemButton
key={pkg.trackingno}
onClick={() => {
setSearchId(pkg.trackingno);
handleSearch(pkg.trackingno);
}}
selected={searchId === pkg.trackingno}
sx={{
borderRadius: 2, mb: 1, p: 2,
border: '1px solid',
borderColor: searchId === pkg.trackingno ? '#C01227' : '#eaeaea',
bgcolor: searchId === pkg.trackingno ? '#C0122708' : '#fff',
'&:hover': { bgcolor: '#f8f9fa' }
}}
>
<ListItemText
primary={pkg.trackingno}
secondary={`Going to ${pkg.dest}`}
primaryTypographyProps={{ fontWeight: 700, fontSize: '0.9rem', color: searchId === pkg.trackingno ? '#C01227' : '#212529' }}
secondaryTypographyProps={{ fontSize: '0.75rem', mt: 0.5, color: '#6c757d' }}
/>
</ListItemButton>
))}
</List>
</CardContent>
</Card>
</Stack>
</Grid>
<Panel style={{ flex: 7, display: 'flex', flexDirection: 'column' }}>
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', gap: '10px' }}>
<IconTile size={30}><Tag size={16} /></IconTile>
<VStack gap={0}>
<Text type="body" weight="bold">Parcels Waiting</Text>
<Text type="supporting" color="secondary">Tap a parcel to check it</Text>
</VStack>
</div>
<div style={{ padding: '8px', display: 'flex', flexDirection: 'column', gap: '6px', flex: 1, overflowY: 'auto' }}>
{waiting.length === 0 && (
<div style={{ padding: '16px', textAlign: 'center' }}>
<Text type="supporting" color="secondary">No parcels inbounded today.</Text>
</div>
)}
{waiting.map((pkg) => {
const selected = searchId === pkg.trackingno;
return (
<div
key={pkg.trackingno}
onClick={() => {
setSearchId(pkg.trackingno);
handleSearch(pkg.trackingno);
}}
style={{
padding: '10px 12px',
borderRadius: 'var(--radius-inner)',
cursor: 'pointer',
border: `1px solid ${selected ? 'var(--color-accent)' : 'var(--color-border)'}`,
backgroundColor: selected ? 'var(--color-accent-muted)' : 'var(--color-background-surface)',
transition: 'all 0.15s ease'
}}
>
<Text type="body" weight="bold" style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>{pkg.trackingno}</Text>
<Text type="supporting" color="secondary" style={{ display: 'block', marginTop: 2 }}>Going to {pkg.dest}</Text>
</div>
);
})}
</div>
</Panel>
</VStack>
{/* Visual Route Guideline Panel */}
<Grid size={{ xs: 12, md: 7, lg: 8 }} >
<div style={{ display: 'flex', flexDirection: 'column', flex: 2, minWidth: '320px' }}>
{!searched ? (
<Card sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', py: { xs: 8, sm: 15 }, px: 2, border: '2px dashed #CED4DA', bgcolor: '#fff', borderRadius: 2, height: '100%', boxShadow: 'none' }}>
<Stack alignItems="center" spacing={3}>
<Avatar sx={{ bgcolor: '#F8F9FA', color: '#ADB5BD', width: 80, height: 80 }}>
<QrCodeScannerIcon sx={{ fontSize: 40 }} />
</Avatar>
<Box sx={{ textAlign: 'center' }}>
<Typography variant="h5" sx={{ fontWeight: 800, color: '#495057' }}>Scan a parcel to begin</Typography>
<Typography variant="body2" sx={{ mt: 1, color: '#868E96' }}>We'll show you where it needs to go.</Typography>
</Box>
</Stack>
<Card style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '64px 24px', border: '2px dashed #cbd5e1', backgroundColor: '#f8fafc', boxShadow: 'none', height: '100%' }}>
<div style={{ background: '#e2e8f0', color: '#94a3b8', width: '80px', height: '80px', borderRadius: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
<QrCode size={40} />
</div>
<Heading level={4} style={{ color: '#475569', marginBottom: '8px', textAlign: 'center' }}>Scan a parcel to begin</Heading>
<Text type="body" color="secondary" style={{ textAlign: 'center' }}>We&apos;ll show you where it needs to go.</Text>
</Card>
) : matchedPkg ? (
<Card sx={{ height: '100%', borderRadius: 2, border: '1px solid #eaeaea', boxShadow: '0px 4px 20px rgba(0,0,0,0.06)' }}>
<CardHeader
title={<Typography variant="h5" sx={{ fontWeight: 800 }}>{matchedPkg.trackingno}</Typography>}
subheader={<Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>{matchedPkg.customername ? `For ${matchedPkg.customername}` : `Shelf: ${matchedPkg.recommendedshelf || '—'}`}</Typography>}
action={
<Chip
label={matchedPkg.condition || 'Good'}
sx={{ fontWeight: 700, bgcolor: isException(matchedPkg.condition) ? '#FCE8E6' : '#F1F3F5', color: isException(matchedPkg.condition) ? '#D93025' : '#495057', borderRadius: 2 }}
/>
}
sx={{ px: { xs: 2.5, sm: 4 }, pt: { xs: 3, sm: 4 }, pb: 2 }}
/>
<Divider />
<CardContent sx={{ p: { xs: 2.5, sm: 4 } }}>
<Panel style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100%' }}>
<div style={{ padding: '16px', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '12px', flexWrap: 'wrap' }}>
<VStack gap={0}>
<Text type="large" weight="bold" style={{ fontFamily: 'monospace' }}>{matchedPkg.trackingno}</Text>
<Text type="supporting" color="secondary">
{matchedPkg.customername ? `For ${matchedPkg.customername}` : `Shelf: ${matchedPkg.recommendedshelf || '—'}`}
</Text>
</VStack>
<Badge variant={isException(matchedPkg.condition) ? 'error' : 'neutral'} label={matchedPkg.condition || 'Good'} />
</div>
<VStack gap={3} style={{ padding: '16px' }}>
{/* Action Banner */}
<Box sx={{ mb: { xs: 3, sm: 5 }, p: { xs: 2, sm: 3 }, bgcolor: '#F8F9FB', borderRadius: 2, display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, border: '1px solid #E9ECEF' }}>
<Avatar sx={{ bgcolor: '#212529', color: '#fff', width: { xs: 50, sm: 64 }, height: { xs: 50, sm: 64 }, borderRadius: 2, flexShrink: 0 }}>
{determineNextAction(matchedPkg).icon}
</Avatar>
<Box sx={{ minWidth: 0 }}>
<Typography variant="overline" sx={{ display: 'block', color: '#6c757d', fontWeight: 700, letterSpacing: 1, lineHeight: 1.3 }}>
<HStack
gap={4}
align="center"
style={{ padding: '16px', backgroundColor: TONE_VARS[determineNextAction(matchedPkg).tone]?.bg || 'var(--color-background-muted)', borderRadius: 'var(--radius-element)' }}
>
<IconTile tone={determineNextAction(matchedPkg).tone} size={52}>{determineNextAction(matchedPkg).icon}</IconTile>
<VStack gap={0.5}>
<Text type="supporting" weight="bold" style={{ letterSpacing: '0.06em', textTransform: 'uppercase' }} color="secondary">
{determineNextAction(matchedPkg).queue}
</Typography>
<Typography sx={{ fontWeight: 800, color: '#212529', mt: 0.5, fontSize: { xs: '1.3rem', sm: '2.125rem' }, lineHeight: 1.15 }}>
</Text>
<Text type="large" weight="bold" style={{ lineHeight: 1.2 }}>
{determineNextAction(matchedPkg).action}
</Typography>
</Box>
</Box>
</Text>
</VStack>
</HStack>
{/* Parcel Journey */}
<Box sx={{ mb: { xs: 3, sm: 5 }, p: { xs: 2, sm: 3 }, bgcolor: '#f8f9fa', borderRadius: 2, border: '1px solid #eaeaea' }}>
<Typography variant="overline" color="text.secondary" sx={{ display: 'block', mb: { xs: 2, sm: 3 }, letterSpacing: '0.08em', fontWeight: 700 }}>
The Parcel's Journey
</Typography>
<Stack
direction={{ xs: 'column', sm: 'row' }}
alignItems={{ xs: 'stretch', sm: 'center' }}
justifyContent="space-between"
spacing={2}
>
<Box sx={{ textAlign: { xs: 'left', sm: 'center' }, flex: 1 }}>
<Typography variant="subtitle2" sx={{ color: '#868E96' }}>Right Now (Here)</Typography>
<Typography variant="body1" sx={{ fontWeight: 800, color: '#C01227', mt: 0.5 }}>{HUB_NAME}</Typography>
</Box>
<ArrowForwardIcon sx={{ color: '#CED4DA', transform: { xs: 'rotate(90deg)', sm: 'none' }, alignSelf: 'center' }} />
<Box sx={{ textAlign: { xs: 'left', sm: 'center' }, flex: 1 }}>
<Typography variant="subtitle2" sx={{ color: '#868E96' }}>Put On Shelf</Typography>
<Typography variant="body1" sx={{ fontWeight: 700, color: '#212529', mt: 0.5 }}>{matchedPkg.recommendedshelf || '—'}</Typography>
</Box>
<ArrowForwardIcon sx={{ color: '#CED4DA', transform: { xs: 'rotate(90deg)', sm: 'none' }, alignSelf: 'center' }} />
<Box sx={{ textAlign: { xs: 'left', sm: 'center' }, flex: 1 }}>
<Typography variant="subtitle2" sx={{ color: '#868E96' }}>Going To</Typography>
<Typography variant="body1" sx={{ fontWeight: 700, color: '#212529', mt: 0.5 }}>{matchedPkg.destination || '—'}</Typography>
</Box>
</Stack>
</Box>
<div style={{ padding: '16px', backgroundColor: 'var(--color-background-surface)', borderRadius: 'var(--radius-element)', border: '1px solid var(--color-border)' }}>
<Text type="supporting" weight="bold" color="secondary" style={{ letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: '12px' }}>
The Parcel&apos;s Journey
</Text>
<HStack align="center" justify="between" wrap="wrap" gap={2}>
<VStack gap={0.5} style={{ flex: 1, minWidth: 100 }}>
<Text type="supporting" color="secondary">Right Now (Here)</Text>
<Text type="body" weight="bold">{HUB_NAME}</Text>
</VStack>
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><ArrowRight size={16} /></span>
<VStack gap={0.5} style={{ flex: 1, minWidth: 100, textAlign: 'center' }}>
<Text type="supporting" color="secondary">Put On Shelf</Text>
<Text type="body" weight="semibold">{matchedPkg.recommendedshelf || '—'}</Text>
</VStack>
<span style={{ color: 'var(--color-icon-disabled)', display: 'flex' }}><ArrowRight size={16} /></span>
<VStack gap={0.5} style={{ flex: 1, minWidth: 100, textAlign: 'right' }}>
<Text type="supporting" color="secondary">Going To</Text>
<Text type="body" weight="semibold">{matchedPkg.destination || '—'}</Text>
</VStack>
</HStack>
</div>
{/* Handling Alerts */}
{isException(matchedPkg.condition) && (
<Alert severity="error" variant="filled" sx={{ borderRadius: 2, mb: 2 }}>
<AlertTitle sx={{ fontWeight: 700 }}>Something's Wrong</AlertTitle>
Condition reported as <strong>{matchedPkg.condition}</strong>. Set it aside in the Exception Area for a supervisor.
</Alert>
<Banner
status="error"
title="Something's Wrong"
description={`Condition reported as ${matchedPkg.condition}. Set it aside in the Exception Area for a supervisor.`}
/>
)}
{matchedPkg.iscoldchain && (
<Alert severity="info" sx={{ borderRadius: 2, border: '1px solid #b2ebf2', bgcolor: '#e0f7fa', mb: 2 }}>
<AlertTitle sx={{ fontWeight: 700, color: '#00838F' }}>Cold chain parcel</AlertTitle>
Move this parcel to the <strong>Cold Room (Zone C)</strong> right away.
</Alert>
<Banner
status="info"
title="Cold chain parcel"
description="Move this parcel to the Cold Room (Zone C) right away."
/>
)}
{determineNextAction(matchedPkg).queue === 'Transfer to Another City' && (
<Alert severity="info" sx={{ borderRadius: 2, border: '1px solid #bae1ff', bgcolor: '#e6f2ff' }}>
<AlertTitle sx={{ fontWeight: 700, color: '#0055b3' }}>Put in the transfer bin</AlertTitle>
<strong>{matchedPkg.nexthop}</strong>. It will go out with the next city transfer.
</Alert>
<Banner
status="info"
title="Put in the transfer bin"
description={`${matchedPkg.nexthop}. It will go out with the next city transfer.`}
/>
)}
{determineNextAction(matchedPkg).queue === 'Local Delivery' && (
<Alert severity="success" sx={{ borderRadius: 2, border: '1px solid #c3e6cb', bgcolor: '#d4edda' }}>
<AlertTitle sx={{ fontWeight: 700, color: '#155724' }}>Ready for local delivery</AlertTitle>
Place this parcel in the <strong>{matchedPkg.destination}</strong> lane so a miler can take it out.
</Alert>
<Banner
status="success"
title="Ready for local delivery"
description={`Place this parcel in the ${matchedPkg.destination} lane so a miler can take it out.`}
/>
)}
</CardContent>
</Card>
</VStack>
</Panel>
) : (
<Card sx={{ height: '100%', borderRadius: 2 }}>
<CardContent sx={{ py: { xs: 8, sm: 15 }, textAlign: 'center' }}>
<Alert severity="error" sx={{ justifyContent: 'center', borderRadius: 2 }}>
<AlertTitle sx={{ fontWeight: 700 }}>Package Not Found</AlertTitle>
The package code <strong>{searchId}</strong> is not registered in the system.
</Alert>
</CardContent>
<Card style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 24px' }}>
<Banner
status="error"
title="Package Not Found"
description={`The package code ${searchId} is not registered in the system.`}
/>
</Card>
)}
</Grid>
</Grid>
</Box>
</div>
</div>
</div>
);
}

286
src/pages/operations/TrackingMap.jsx
View File

@@ -1,21 +1,35 @@
import React, { useState, useEffect, useRef } from 'react';
import {
Box, Typography, Card, CardHeader, Avatar, Stack, Chip, List, ListItem,
ListItemAvatar, ListItemText, Badge, Divider, Alert
} from '@mui/material';
import DeliveryDiningIcon from '@mui/icons-material/DeliveryDining';
import HubIcon from '@mui/icons-material/Hub';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
import { Bike, Truck, MapPin } from 'lucide-react';
import { MapContainer, TileLayer, Marker, Popup, Polyline, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { Card } from '@astryxdesign/core/Card';
import { Heading, Text } from '@astryxdesign/core/Text';
import { Banner } from '@astryxdesign/core/Banner';
import { Badge } from '@astryxdesign/core/Badge';
import { Avatar } from '@astryxdesign/core/Avatar';
import { EmptyState } from '@astryxdesign/core/EmptyState';
import { StatusDot } from '@astryxdesign/core/StatusDot';
import { Collapsible } from '@astryxdesign/core/Collapsible';
import { getMilers, getMilerLocations, getHubs, getTripsheetsInTransit } from '@/api/hub';
import { getHubContext } from '@/auth/session';
// Keeps Leaflet's canvas sized correctly when the container resizes (sidebar
// toggle, window resize, first paint inside a flex box). Without this the map
// renders grey/blank tiles — the #1 reason a real map "doesn't show".
function useMediaQuery(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [matches, query]);
return matches;
}
function MapResizeHandler() {
const map = useMap();
useEffect(() => {
@@ -29,7 +43,6 @@ function MapResizeHandler() {
return null;
}
// Fix leaflet default marker icons issue
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
@@ -37,24 +50,23 @@ L.Icon.Default.mergeOptions({
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
});
// Custom HTML Icons for Leaflet
const createHubIcon = () => new L.DivIcon({
className: 'custom-leaflet-icon',
html: `<div style="background-color: #C01227; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #ffffff; box-shadow: 0px 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;"><svg fill="#ffffff" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>`,
html: `<div style="background-color: #ef4444; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #ffffff; box-shadow: 0px 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;"><svg fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>`,
iconSize: [36, 36],
iconAnchor: [18, 18],
});
const createRiderIcon = () => new L.DivIcon({
className: 'custom-leaflet-icon',
html: `<div style="background-color: #0070f3; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0px 4px 10px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;"><svg fill="#ffffff" width="16" height="16" viewBox="0 0 24 24"><path d="M19 7c0-1.1-.9-2-2-2h-3v2h3v2.65L13.52 14H10V9H6c-2.21 0-4 1.79-4 4v3h2c0 1.66 1.34 3 3 3s3-1.34 3-3h4.48L19 10.35V7zM7 17c-.55 0-1-.45-1-1h2c0 .55-.45 1-1 1z"/></svg></div>`,
html: `<div style="background-color: #3b82f6; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0px 4px 10px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;"><svg fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" viewBox="0 0 24 24"><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="18.5" cy="17.5" r="3.5"/><path d="M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-3 11.5V14l-3-3 4-3 2 3h2"/></svg></div>`,
iconSize: [30, 30],
iconAnchor: [15, 15],
});
const createLinehaulIcon = () => new L.DivIcon({
className: 'custom-leaflet-icon',
html: `<div style="background-color: #ff9900; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0px 4px 12px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center;"><svg fill="#ffffff" width="18" height="18" viewBox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg></div>`,
html: `<div style="background-color: #f59e0b; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0px 4px 12px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center;"><svg fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18" viewBox="0 0 24 24"><path d="M5 18H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v11"/><path d="M14 9h4l4 4v5h-3"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></div>`,
iconSize: [34, 34],
iconAnchor: [17, 17],
});
@@ -62,26 +74,26 @@ const createLinehaulIcon = () => new L.DivIcon({
const prettyHubType = (t) =>
({ sorting_center: 'Sorting Center', delivery_hub: 'Delivery Hub', spoke: 'Spoke', warehouse: 'Warehouse' }[t] || t || 'Hub');
// Colour-code a miler pin/list item by their live availability status.
const statusMeta = (status) => {
switch (status) {
case 'Assigned':
case 'On Pickup':
return { color: '#1A73E8', label: status };
return { color: '#3b82f6', bg: '#eff6ff', label: status, variant: 'info' };
case 'Available':
case 'Idle':
return { color: '#1E8E3E', label: status };
return { color: '#10b981', bg: '#ecfdf5', label: status, variant: 'success' };
case 'On_Break':
case 'On Break':
return { color: '#8E24AA', label: 'On Break' };
return { color: '#a855f7', bg: '#faf5ff', label: 'On Break', variant: 'warning' };
case 'Offline':
return { color: '#80868B', label: 'Offline' };
return { color: '#64748b', bg: '#f8fafc', label: 'Offline', variant: 'neutral' };
default:
return { color: '#0070f3', label: status || 'Active' };
return { color: '#3b82f6', bg: '#eff6ff', label: status || 'Active', variant: 'info' };
}
};
export default function TrackingMap() {
const isMdDown = useMediaQuery('(max-width: 900px)');
const hub = getHubContext();
const [milers, setMilers] = useState([]);
const [error, setError] = useState('');
@@ -89,7 +101,6 @@ export default function TrackingMap() {
const [linehauls, setLinehauls] = useState([]);
const didLoad = useRef(false);
// Hub pins are static per session — load once from /hub/hubs (has lat/lon).
useEffect(() => {
getHubs()
.then((res) =>
@@ -102,10 +113,6 @@ export default function TrackingMap() {
.catch(() => setHubs([]));
}, []);
// Poll live miler GPS every 5 seconds. The guide's /admin/milers/locations
// (Redis GEO) returns nothing on this backend, so we read coordinates from
// /hub/milers (currentlatitude/currentlongitude) and fall back to the GEO
// endpoint if it ever starts returning data.
useEffect(() => {
let active = true;
const normalize = (list) =>
@@ -144,7 +151,6 @@ export default function TrackingMap() {
};
}, []);
// Poll real transfer trucks in transit every 5 seconds.
useEffect(() => {
let active = true;
const poll = async () => {
@@ -164,8 +170,8 @@ export default function TrackingMap() {
current: [t.currentlat, t.currentlon]
}))
);
} catch {
/* leave last-known trucks on transient failure */
} catch (err) {
console.error(err);
}
};
poll();
@@ -176,7 +182,6 @@ export default function TrackingMap() {
};
}, []);
// Centre on the milers when we have them, otherwise a sensible national view.
const mapCenter =
milers.length > 0
? [
@@ -186,164 +191,169 @@ export default function TrackingMap() {
: [22.0, 76.0];
return (
<Box>
<Box sx={{ mb: 4 }}>
<Typography variant="h4" sx={{ fontWeight: 800, color: '#111' }}>Live Map</Typography>
<Typography variant="body1" color="text.secondary">See where your milers and transfer trucks are right now, on the map.</Typography>
</Box>
<div style={{ paddingBottom: '32px' }}>
<div style={{ marginBottom: '32px' }}>
<Heading level={2} style={{ color: '#0f172a', marginBottom: '8px' }}>Live Map</Heading>
<Text type="body" color="secondary">See where your milers and transfer trucks are right now, on the map.</Text>
</div>
{error && (
<Alert severity="error" onClose={() => setError('')} sx={{ mb: 3, borderRadius: 2 }}>
{error}
</Alert>
<div style={{ marginBottom: '24px' }}>
<Banner status="error" title="Error" description={error} />
</div>
)}
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', lg: 'row' }, gap: 3.5 }}>
<div style={{ display: 'flex', flexDirection: 'row', gap: '24px', flexWrap: 'wrap' }}>
{/* Map Canvas Frame */}
<Box sx={{ flex: 2, minWidth: 0 }}>
<Card sx={{ height: { xs: 380, sm: 480, lg: 620 }, width: '100%', position: 'relative', overflow: 'hidden', border: '1px solid #eaeaea', borderRadius: 2, boxShadow: '0px 4px 24px rgba(0,0,0,0.02)' }}>
<div style={{ flex: '2 1 0%', minWidth: '300px' }}>
<Card style={{ height: isMdDown ? '400px' : '700px', width: '100%', position: 'relative', overflow: 'hidden', padding: 0, borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 2px 14px rgba(0,0,0,0.02)' }}>
<MapContainer center={mapCenter} zoom={6} scrollWheelZoom style={{ height: '100%', width: '100%' }}>
<MapResizeHandler />
<TileLayer
url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
{/* Plot Hubs */}
{hubs.map((h) => (
<Marker key={h.id} position={h.position} icon={createHubIcon()}>
<Popup>
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>{h.name}</Typography>
<Typography variant="caption">{h.type}</Typography>
<div style={{ fontWeight: 700, fontSize: '0.875rem' }}>{h.name}</div>
<div style={{ fontSize: '0.75rem', color: '#64748b' }}>{h.type}</div>
</Popup>
</Marker>
))}
{/* Plot live Milers */}
{milers.map((m) => (
<Marker key={m.userid} position={[m.lat, m.lon]} icon={createRiderIcon()}>
<Popup>
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>{m.displayname || `Miler ${m.userid}`}</Typography>
<Typography variant="caption" display="block">{statusMeta(m.status).label}</Typography>
{m.bookingid && <Typography variant="caption" display="block">On booking #{m.bookingid}</Typography>}
<div style={{ fontWeight: 700, fontSize: '0.875rem' }}>{m.displayname || `Miler ${m.userid}`}</div>
<div style={{ fontSize: '0.75rem', color: statusMeta(m.status).color }}>{statusMeta(m.status).label}</div>
{m.bookingid && <div style={{ fontSize: '0.75rem', color: '#64748b', marginTop: '4px' }}>On booking #{m.bookingid}</div>}
</Popup>
</Marker>
))}
{/* Plot transfer trucks in transit (real positions) */}
{linehauls.map((lh) => (
<React.Fragment key={lh.id}>
<Polyline positions={[lh.start, lh.end]} color="#C01227" dashArray="10, 10" weight={3} opacity={0.5} />
<Polyline positions={[lh.start, lh.end]} color="#ef4444" dashArray="10, 10" weight={3} opacity={0.5} />
<Marker position={lh.current} icon={createLinehaulIcon()}>
<Popup>
<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>{lh.name}</Typography>
<Typography variant="caption">Progress: {Math.round(lh.progress * 100)}%</Typography>
<div style={{ fontWeight: 700, fontSize: '0.875rem' }}>{lh.name}</div>
<div style={{ fontSize: '0.75rem', color: '#64748b' }}>Progress: {Math.round(lh.progress * 100)}%</div>
</Popup>
</Marker>
</React.Fragment>
))}
</MapContainer>
</Card>
</Box>
</div>
{/* Sidebar Status Trackers */}
<Box sx={{ flex: 1, minWidth: 0 }}>
<Stack spacing={3}>
{/* Active Network Hub Nodes Summary */}
<Card sx={{ border: '1px solid #eaeaea', borderRadius: 2, boxShadow: '0px 4px 20px rgba(0,0,0,0.01)' }}>
<CardHeader
title={<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>Active Hub Nodes</Typography>}
avatar={<Avatar sx={{ bgcolor: '#C0122710', color: '#C01227', borderRadius: 2 }}><HubIcon fontSize="small" /></Avatar>}
/>
<Divider />
<List disablePadding>
<div style={{ flex: '1 1 0%', minWidth: '300px', display: 'flex', flexDirection: 'column', gap: '24px' }}>
<Card style={{ padding: '0', borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 2px 14px rgba(0,0,0,0.02)' }}>
<Collapsible
defaultIsOpen={true}
style={{ paddingRight: '20px' }}
trigger={
<div style={{ padding: '16px 8px 16px 20px', display: 'flex', alignItems: 'center', gap: '12px' }}>
<div style={{ background: '#fef2f2', color: '#ef4444', width: '32px', height: '32px', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<MapPin size={18} />
</div>
<Heading level={5} style={{ margin: 0 }}>Active Hub Nodes</Heading>
</div>
}
>
<div style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid #e2e8f0' }}>
{hubs.length === 0 && (
<ListItem sx={{ px: 3, py: 1.5 }}>
<ListItemText primary="No hubs to show" primaryTypographyProps={{ color: 'text.secondary', fontSize: '0.85rem' }} />
</ListItem>
<EmptyState title="No hubs" description="No hubs to show" isCompact />
)}
{hubs.map((h) => (
<ListItem key={h.id} sx={{ px: 3, py: 1.5, borderBottom: '1px solid #f4f4f4', '&:last-child': { border: 0 } }}>
<ListItemText
primary={h.name}
secondary={h.type}
primaryTypographyProps={{ fontWeight: 600, color: '#222', fontSize: '0.9rem' }}
secondaryTypographyProps={{ fontSize: '0.75rem' }}
/>
<Chip size="small" label="Online" sx={{ bgcolor: '#00A85410', color: '#00A854', fontWeight: 600, fontSize: '0.75rem' }} />
</ListItem>
<div key={h.id} style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid #f1f5f9' }}>
<div>
<div style={{ fontWeight: 600, color: '#0f172a', fontSize: '0.875rem' }}>{h.name}</div>
<div style={{ fontSize: '0.75rem', color: '#64748b' }}>{h.type}</div>
</div>
<Badge variant="success" label="Online" />
</div>
))}
</List>
</Card>
</div>
</Collapsible>
</Card>
{/* Real-time Last Mile Miler Logs */}
<Card sx={{ border: '1px solid #eaeaea', borderRadius: 2, boxShadow: '0px 4px 20px rgba(0,0,0,0.01)' }}>
<CardHeader
title={<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>Milers Out Now{hub.city ? ` (${hub.city})` : ''}</Typography>}
avatar={<Avatar sx={{ bgcolor: '#0070f310', color: '#0070f3', borderRadius: 2 }}><DeliveryDiningIcon fontSize="small" /></Avatar>}
/>
<Divider />
{milers.length === 0 ? (
<Box sx={{ px: 3, py: 3 }}>
<Typography variant="body2" color="text.secondary">No milers reporting a location right now.</Typography>
</Box>
) : (
<List disablePadding>
{milers.map((m) => {
<Card style={{ padding: '0', borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 2px 14px rgba(0,0,0,0.02)' }}>
<Collapsible
defaultIsOpen={true}
style={{ paddingRight: '20px' }}
trigger={
<div style={{ padding: '16px 8px 16px 20px', display: 'flex', alignItems: 'center', gap: '12px' }}>
<div style={{ background: '#eff6ff', color: '#3b82f6', width: '32px', height: '32px', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Bike size={18} />
</div>
<Heading level={5} style={{ margin: 0 }}>Milers Out Now {hub.city ? `(${hub.city})` : ''}</Heading>
</div>
}
>
<div style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid #e2e8f0' }}>
{milers.length === 0 ? (
<EmptyState title="No active milers" description="No milers reporting a location right now." isCompact />
) : (
milers.map((m) => {
const meta = statusMeta(m.status);
const name = m.displayname || `Miler ${m.userid}`;
return (
<ListItem key={m.userid} sx={{ px: 3, py: 1.75, borderBottom: '1px solid #f4f4f4', '&:last-child': { border: 0 } }}>
<ListItemAvatar>
<Badge color="success" variant="dot" overlap="circular" anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
<Avatar sx={{ width: 34, height: 34, bgcolor: meta.color, fontWeight: 700, fontSize: 13 }}>{name.charAt(0)}</Avatar>
</Badge>
</ListItemAvatar>
<ListItemText
primary={name}
secondary={m.bookingid ? `On booking #${m.bookingid}` : 'No active booking'}
primaryTypographyProps={{ fontWeight: 600, color: '#222', fontSize: '0.875rem' }}
secondaryTypographyProps={{ fontSize: '0.75rem', noWrap: true }}
<div key={m.userid} style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: '12px', borderBottom: '1px solid #f1f5f9' }}>
<Avatar
name={name}
status={<StatusDot variant={m.status === 'Offline' ? 'error' : 'success'} label={m.status === 'Offline' ? 'Offline' : 'Online'} />}
size="md"
/>
<Typography variant="caption" sx={{ color: meta.color, fontWeight: 700, ml: 1, bgcolor: `${meta.color}12`, px: 1, py: 0.5, borderRadius: 2, whiteSpace: 'nowrap' }}>
{meta.label}
</Typography>
</ListItem>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: 600, color: '#0f172a', fontSize: '0.875rem' }}>{name}</div>
<div style={{ fontSize: '0.75rem', color: '#64748b' }}>{m.bookingid ? `On booking #${m.bookingid}` : 'No active booking'}</div>
</div>
{m.status !== 'Offline' && <Badge variant={meta.variant} label={meta.label} />}
</div>
);
})}
</List>
)}
</Card>
})
)}
</div>
</Collapsible>
</Card>
{/* Linehaul Fleet Shipments Tracker */}
<Card sx={{ border: '1px solid #eaeaea', borderRadius: 3, boxShadow: '0px 4px 20px rgba(0,0,0,0.01)' }}>
<CardHeader
title={<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>City Transfers</Typography>}
avatar={<Avatar sx={{ bgcolor: '#ff990010', color: '#ff9900', borderRadius: 2 }}><LocalShippingIcon fontSize="small" /></Avatar>}
/>
<Divider />
<List disablePadding>
<Card style={{ padding: '0', borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 2px 14px rgba(0,0,0,0.02)' }}>
<Collapsible
defaultIsOpen={false}
style={{ paddingRight: '20px' }}
trigger={
<div style={{ padding: '16px 8px 16px 20px', display: 'flex', alignItems: 'center', gap: '12px' }}>
<div style={{ background: '#fffbeb', color: '#f59e0b', width: '32px', height: '32px', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Truck size={18} />
</div>
<Heading level={5} style={{ margin: 0 }}>City Transfers</Heading>
</div>
}
>
<div style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid #e2e8f0' }}>
{linehauls.length === 0 && (
<EmptyState title="No transfers" description="No trucks in transit." isCompact />
)}
{linehauls.map(lh => (
<ListItem key={lh.id} sx={{ px: 3, py: 2 }}>
<ListItemText
primary={lh.name}
secondary={`Status: ${lh.status}`}
primaryTypographyProps={{ fontWeight: 600, color: '#222', fontSize: '0.875rem' }}
secondaryTypographyProps={{ fontSize: '0.75rem', mt: 0.25 }}
/>
<Typography variant="caption" sx={{ color: '#e08500', fontWeight: 700, bgcolor: '#ff990008', px: 1, py: 0.5, borderRadius: 2 }}>
{Math.round(lh.progress * 100)}% route
</Typography>
</ListItem>
<div key={lh.id} style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid #f1f5f9' }}>
<div>
<div style={{ fontWeight: 600, color: '#0f172a', fontSize: '0.875rem' }}>{lh.name}</div>
<div style={{ fontSize: '0.75rem', color: '#64748b' }}>Status: {lh.status}</div>
</div>
<Badge variant="warning" label={`${Math.round(lh.progress * 100)}% route`} />
</div>
))}
</List>
</Card>
</div>
</Collapsible>
</Card>
</Stack>
</Box>
</Box>
</Box>
</div>
</div>
</div>
);
}

191
src/theme/componentsOverride.js
View File

@@ -1,191 +0,0 @@
import customShadows from './shadows';
// ==============================|| DOORMILE THEME - COMPONENT OVERRIDES ||============================== //
// Clean, corporate Material Design tuning for the whole console.
export default function componentsOverride(theme) {
const { palette } = theme;
return {
MuiCssBaseline: {
styleOverrides: {
html: { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' },
body: { backgroundColor: palette.background.default },
'*::-webkit-scrollbar': { width: 8, height: 8 },
'*::-webkit-scrollbar-thumb': { background: palette.grey[300], borderRadius: 8 },
'*::-webkit-scrollbar-thumb:hover': { background: palette.grey[400] }
}
},
MuiButton: {
defaultProps: { disableElevation: true, disableRipple: false },
styleOverrides: {
root: {
borderRadius: 8,
fontWeight: 600,
padding: '8px 18px',
transition: 'background-color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease',
'&:active': { transform: 'translateY(0.5px)' },
'&.Mui-focusVisible': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` }
},
containedPrimary: {
boxShadow: customShadows.primaryGlow,
'&:hover': { boxShadow: customShadows.primaryGlowHover, backgroundColor: palette.primary.dark }
},
outlined: {
borderColor: palette.grey[300],
'&:hover': { borderColor: palette.grey[400], backgroundColor: palette.grey[50] }
},
text: { '&:hover': { backgroundColor: palette.grey[100] } },
sizeLarge: { padding: '11px 24px', fontSize: '0.9375rem' },
sizeSmall: { padding: '5px 14px' },
// Give every button clear breathing room between its icon and label
startIcon: { marginRight: 10 },
endIcon: { marginLeft: 10 }
}
},
MuiIconButton: {
styleOverrides: { root: { borderRadius: 8 } }
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 14,
border: `1px solid ${palette.grey[200]}`,
boxShadow: customShadows.card,
backgroundImage: 'none',
transition: 'box-shadow .22s ease, border-color .22s ease, transform .22s ease'
}
}
},
MuiCardHeader: {
defaultProps: { titleTypographyProps: { variant: 'h5' }, subheaderTypographyProps: { variant: 'caption' } },
styleOverrides: { root: { padding: 20 } }
},
MuiCardContent: {
styleOverrides: { root: { padding: 20, '&:last-child': { paddingBottom: 20 } } }
},
MuiPaper: {
defaultProps: { elevation: 0 },
styleOverrides: { rounded: { borderRadius: 14 } }
},
MuiToggleButtonGroup: {
styleOverrides: {
root: { backgroundColor: palette.grey[100], borderRadius: 10, padding: 4, gap: 4 },
grouped: {
border: 0,
borderRadius: '8px !important',
margin: 0
}
}
},
MuiToggleButton: {
styleOverrides: {
root: {
border: 0,
borderRadius: 8,
padding: '6px 12px',
color: palette.grey[600],
transition: 'all .18s ease',
'&:hover': { backgroundColor: palette.grey[200] },
'&.Mui-selected': {
backgroundColor: palette.background.paper,
color: palette.primary.main,
boxShadow: customShadows.card,
'&:hover': { backgroundColor: palette.background.paper }
}
}
}
},
MuiChip: {
styleOverrides: {
root: { borderRadius: 6, fontWeight: 600, fontSize: '0.75rem' },
sizeSmall: { height: 22 },
label: { paddingLeft: 8, paddingRight: 8 }
}
},
MuiTableCell: {
styleOverrides: {
root: { borderColor: palette.grey[200], padding: '12px 16px', fontSize: '0.8125rem' },
head: {
fontWeight: 600,
color: palette.grey[600],
backgroundColor: palette.grey[50],
textTransform: 'none',
whiteSpace: 'nowrap'
}
}
},
MuiTableRow: {
styleOverrides: {
root: { transition: 'background-color .15s ease', '&:hover': { backgroundColor: palette.grey[50] } }
}
},
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: 8,
backgroundColor: palette.background.paper,
transition: 'box-shadow .2s ease, border-color .2s ease',
'& .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[300], transition: 'border-color .2s ease' },
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[400] },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: palette.primary.main, borderWidth: 1 }
},
input: { padding: '11px 14px' }
}
},
MuiSelect: {
styleOverrides: {
select: {
paddingTop: '11px',
paddingBottom: '11px',
paddingLeft: '14px',
display: 'flex',
alignItems: 'center'
}
}
},
MuiInputLabel: {
styleOverrides: { root: { color: palette.grey[600], fontSize: '0.875rem' } }
},
MuiTab: {
styleOverrides: {
root: { textTransform: 'none', fontWeight: 600, minHeight: 46, fontSize: '0.875rem' }
}
},
MuiTabs: {
styleOverrides: { indicator: { height: 3, borderRadius: 3 } }
},
MuiTooltip: {
styleOverrides: {
tooltip: { backgroundColor: palette.grey[800], borderRadius: 6, fontSize: '0.75rem', padding: '6px 10px' }
}
},
MuiDialog: {
styleOverrides: { paper: { borderRadius: 16 } }
},
MuiAvatar: {
styleOverrides: { root: { fontWeight: 600, fontSize: '0.875rem' } }
},
MuiListItemButton: {
styleOverrides: { root: { borderRadius: 8 } }
},
MuiLinearProgress: {
styleOverrides: { root: { borderRadius: 8, height: 6, backgroundColor: palette.grey[200] } }
},
MuiMenu: {
styleOverrides: { paper: { borderRadius: 12, boxShadow: customShadows.dropdown, marginTop: 6, border: `1px solid ${palette.grey[200]}` } }
},
MuiMenuItem: {
styleOverrides: {
root: {
borderRadius: 8,
margin: '2px 6px',
padding: '8px 10px',
fontSize: '0.875rem',
'&:hover': { backgroundColor: palette.grey[100] }
}
}
}
};
}

20
src/theme/index.js
View File

@@ -1,20 +0,0 @@
import { createTheme } from '@mui/material/styles';
import palette from './palette';
import typography from './typography';
import customShadows from './shadows';
import componentsOverride from './componentsOverride';
// ==============================|| DOORMILE THEME - ENTRY ||============================== //
let theme = createTheme({
palette,
typography,
shape: { borderRadius: 6 },
customShadows,
mixins: { toolbar: { minHeight: 64 } }
});
theme.components = componentsOverride(theme);
export default theme;

102
src/theme/palette.js
View File

@@ -1,102 +0,0 @@
// ==============================|| DOORMILE THEME - PALETTE ||============================== //
// Corporate red brand palette. Brand red #C01227.
export const grey = {
0: '#FFFFFF',
50: '#F8F9FA',
100: '#F1F3F5',
200: '#E9ECEF',
300: '#DEE2E6',
400: '#CED4DA',
500: '#ADB5BD',
600: '#868E96',
700: '#495057',
800: '#343A40', // Slate
900: '#212529', // Graphite
A50: '#F8F9FA',
A100: '#E9ECEF'
};
const palette = {
mode: 'light',
common: { black: '#000000', white: '#FFFFFF' },
primary: {
lighter: '#F8E0E3',
100: '#EFBBC1',
200: '#E08A92',
light: '#D6515C',
400: '#CC2E3C',
main: '#C01227',
dark: '#9E0E20',
700: '#870C1B',
darker: '#7E0B17',
900: '#520710',
contrastText: '#FFFFFF'
},
secondary: {
lighter: grey[100],
100: grey[100],
200: grey[200],
light: grey[300],
400: grey[400],
main: grey[500],
600: grey[600],
dark: grey[700],
800: grey[800],
darker: grey[900],
A100: grey[0],
A200: grey[400],
A300: grey[700],
contrastText: grey[0]
},
error: {
lighter: '#FEEAE9',
light: '#F88078',
main: '#F04134',
dark: '#A82216',
darker: '#7A150C',
contrastText: '#FFFFFF'
},
warning: {
lighter: '#FFF7E0',
light: '#FFD666',
main: '#FFBF00',
dark: '#B38600',
darker: '#805F00',
contrastText: '#262626'
},
info: {
lighter: '#E0F7F8',
light: '#66CBD2',
main: '#00A2AE',
dark: '#00727B',
darker: '#005159',
contrastText: '#FFFFFF'
},
success: {
lighter: '#E3F6EC',
light: '#5CC98C',
main: '#00A854',
dark: '#00773B',
darker: '#00552A',
contrastText: '#FFFFFF'
},
grey,
text: {
primary: grey[800],
secondary: grey[600],
disabled: grey[400]
},
action: {
disabled: grey[300],
hover: 'rgba(192, 18, 39, 0.04)',
selected: 'rgba(192, 18, 39, 0.08)'
},
divider: grey[200],
background: {
paper: '#FFFFFF',
default: grey.A50
}
};
export default palette;

15
src/theme/shadows.js
View File

@@ -1,15 +0,0 @@
// ==============================|| DOORMILE THEME - CUSTOM SHADOWS ||============================== //
// Layered elevation (a tight contact shadow + a soft ambient shadow) reads far more
// premium than a single blurry drop shadow. Brand glow on CTAs is kept restrained.
const customShadows = {
card: '0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06)',
cardHover: '0 10px 28px -6px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.05)',
widget: '0 1px 3px rgba(16, 24, 40, 0.06)',
dropdown: '0 12px 32px -8px rgba(16, 24, 40, 0.18), 0 4px 10px rgba(16, 24, 40, 0.06)',
primaryGlow: '0 4px 12px -2px rgba(192, 18, 39, 0.22)',
primaryGlowHover: '0 6px 16px -2px rgba(192, 18, 39, 0.30)',
header: '0 1px 0 rgba(16, 24, 40, 0.06)'
};
export default customShadows;

28
src/theme/typography.js
View File

@@ -1,28 +0,0 @@
// ==============================|| DOORMILE THEME - TYPOGRAPHY ||============================== //
// A deliberate type scale with optical tracking: large display text gets tighter
// negative letter-spacing, small UI text stays legible. Optical tracking like this
// is what separates a designed interface from a default Material build.
const typography = {
fontFamily: '"Public Sans", "Inter", "Helvetica", "Arial", sans-serif',
htmlFontSize: 16,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 700,
h1: { fontWeight: 800, fontSize: '2.375rem', lineHeight: 1.15, letterSpacing: '-0.022em' },
h2: { fontWeight: 800, fontSize: '1.875rem', lineHeight: 1.2, letterSpacing: '-0.02em' },
h3: { fontWeight: 700, fontSize: '1.5rem', lineHeight: 1.28, letterSpacing: '-0.018em' },
h4: { fontWeight: 700, fontSize: '1.25rem', lineHeight: 1.35, letterSpacing: '-0.014em' },
h5: { fontWeight: 700, fontSize: '1rem', lineHeight: 1.5, letterSpacing: '-0.01em' },
h6: { fontWeight: 600, fontSize: '0.875rem', lineHeight: 1.57, letterSpacing: '-0.006em' },
caption: { fontWeight: 400, fontSize: '0.75rem', lineHeight: 1.66 },
body1: { fontSize: '0.875rem', lineHeight: 1.6, letterSpacing: '-0.003em' },
body2: { fontSize: '0.75rem', lineHeight: 1.66 },
subtitle1: { fontSize: '0.875rem', fontWeight: 600, lineHeight: 1.57, letterSpacing: '-0.006em' },
subtitle2: { fontSize: '0.75rem', fontWeight: 600, lineHeight: 1.66 },
overline: { fontSize: '0.6875rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' },
button: { textTransform: 'none', fontWeight: 600, letterSpacing: '-0.006em' }
};
export default typography;