Dashboard Patterns — Home, Orders, Order Details

The three core screens, all reading from mock core/data/ services behind a backend-swappable seam (OrdersService, DashboardService).

Home (features/home)

The operator's daily landing screen — faithful port of the design import, with the design's off-domain placeholder copy replaced by drayage-TMS copy:

• God's Eye View — a dark stylized (non-geospatial) map card: labelled route pins (PINS, tone-colored dots + labels), map-control chips (plus/minus/sun/compass icons), and the Live Activity Stream — a list of .home__stream-card entries (hand-styled, not tip-activity-item, since the stream lives inside the dark map card with its own accent-border styling).
• AI hero — tip-input (shape="pill" size="lg") with a projected tip-button [trailing] "Generate" action; tip-avatar + greeting line.
• Requires Your Attention — tip-card variant="highlight" accent="gold" wrapping an alert (LFD/demurrage copy) with Snooze/Resolve tip-buttons.
• Getting Started — plain tip-card with a tip-progress-bar (onboardingProgress) and a manually-rendered step list (not tip-activity-item — steps have a done/current check-circle, not a tone accent).

Orders (features/orders)

All Orders — 6 tip-stat-card KPI tiles (Total inverse, Arriving, Pick-Up highlight w/ progress + [footnote], Delivered, Returned, Dropped) sourced from DashboardService.cards(), 1:1 with the backend's dashboard-card contract. Below, one tip-card [padding]="'0'" hosts:

• Toolbar — tip-input search + four tip-select filters (Date Range, Status, Carrier, Port) bound to OrdersService's filter signals, plus Export/Add tip-buttons.
• Table — native <table> (not a DS component) with tip-checkbox row selection, tip-badge status, mono container numbers, an LFD pill with countdown, and a driver-dispatch cell (tip-avatar + status dot, or an "Assign Driver" affordance).
• Loading → data → empty — a loading signal (mirroring the design's setTimeout(…, 1100) shimmer) renders SKELETON_ROW_COUNT shimmer rows via tip-skeleton; once loaded, an empty filtered result renders tip-empty-state (icon="search-x") inside a full-colspan cell instead of table rows.
• Row click → router.navigate(['/orders', row.id]); the row's own checkbox cell calls $event.stopPropagation() so selecting a row doesn't also navigate.

Order Details (features/order-details)

/orders/:id single-order drill-down, resolved via OrdersService.getById(id()) off the route param (toSignal over route.paramMap), with the JSX source's own field-level || 'default' fallbacks reproduced exactly so the page never shows blank fields for a partially-mocked order:

• Header — mono order id, tip-badge [tone]="statusTone()", type, customer, created date; Export/Edit/Dispatch tip-buttons.
• Milestone stepper — a static STEPS array (Booked → Returned; not derived from the order), each dot done/current/pending.
• Left column — Shipment Details facts grid (8 rows, mono flag per row) inside a tip-card; Shipment Timeline as a list of tip-activity-item fed by MOCK_ORDER_TIMELINE (core/data/mock-data.ts).
• Right column — LFD/Demurrage Shield (tip-card accent="gold" + tip-progress-bar gold fill), Driver Dispatch (tip-avatar status="online" + facts), Documents list (icon + name + mono filename + tip-badge emerald/neutral for Parsed/On file).

Shared conventions across all three

• KPI/stat figures are pre-computed by the service layer (never aggregated client-side) — mirrors the backend spec's server-side dashboard-card math (design principle 3, sub-second performance).
• OnPush + signals throughout; no NgRx yet (deferred until cross-feature shared state is needed — see app/frontend/README.md).
• Static view scaffolding (stepper steps, documents, timeline) that isn't yet backed by the order/dashboard models is called out in code comments as "not derived from the order record" — keep that distinction when wiring real data in a future increment.