Ship the delivery platform UI under modules/delivery with thin app routes, BFF proxy, CRUD for phase 10.0-10.1 APIs, and capability-gated future screens. Co-authored-by: Cursor <cursoragent@cursor.com>
2.1 KiB
2.1 KiB
Delivery Design System
Delivery uses the shared platform design system (@/components/ds) with module-specific tokens only — no duplicated Button/Input/Dialog implementations.
CSS tokens
Defined in frontend/styles/globals.css:
--delivery-accent: #0891b2; /* light — logistics cyan */
--delivery-accent-soft: rgba(8, 145, 178, 0.12);
--delivery-map: #0e7490;
--delivery-success / warning / danger
Dark mode: --delivery-accent: #22d3ee
Rule: Reference var(--delivery-accent) in module components; never hardcode hex.
Module design-system (modules/delivery/design-system/)
| Export | Purpose |
|---|---|
deliveryTokens |
Accent variable references |
DeliveryStatusChip |
Driver + lifecycle status badges |
DeliveryTablePage |
Search, sort, pagination wrapper |
DeliveryStatGrid |
Dashboard stat cards row |
lifecycleStatusLabels |
Persian labels for statuses |
driverStatusLabels |
Driver-specific statuses |
Layout patterns
- Portal shell: Fixed RTL sidebar (desktop), drawer (mobile), sticky mobile header
- Page header: Title + description + action slot
- CRUD list: Table + create dialog + edit drawer + delete confirm
- Phase gate: Centered card with phase badge — used instead of placeholder/mock data
- Map placeholder: 16:9 aspect map canvas with marker/route badges
Typography & spacing
Inherited from platform DS and Tailwind utilities. Consistent space-y-6 page rhythm, rounded-2xl cards, p-4 lg:p-6 main padding.
Icons
Lucide React — consistent with other TorbatYar modules.
Accessibility
aria-labelon mobile menu and close buttons- Keyboard: Escape closes dialogs/drawers (DS default)
- RTL-first breadcrumb and table alignment
Dark mode
Supported via ColorModeProvider toggle in portal shell; all surfaces use CSS variables.
Future: shared/maps
When frontend/shared/maps/ is populated, Delivery map pages should import shared map components rather than extending DeliveryMapPlaceholder.