FleetPilot — Frontend UX Decisions

Captured from design sessions with Claude Design Read this before any frontend work in VS Code

Dark vertical sidebar (#191E29) on the left. No horizontal nav.

Item	Badge
Dashboard	None
Fleet	None
Customers	None
Bookings	Red pip — overdue count
Live Tracking	Alert pip — vehicles in alert state
Violations	Red badge — unmatched count (status=received)
Incidents	Red badge — open count
PCN Queue	Amber badge — pending jobs count

Badges are not cosmetic — operators need to know where fires are burning before reading any page.

Dashboard

Strategy: triage-first, metrics-second. The dashboard answers two questions in <5 seconds: 1. Do I need to do anything? (the hero) 2. Is the business healthy? (orienting context)

Layout (top → bottom):

Topbar — page title + date + action buttons (New Booking, Add Vehicle, Add Customer)
Alert banner (amber, conditional) — only renders when urgent items exist. Aggregates overdue returns + unmatched violations + open incidents. First thing the eye hits. Example: "2 urgent items: GX21 TBK overdue 2 days · BK70 MNR PCN unmatched £120 → Review all ›"
Metrics row — 4 cards
Fleet utilisation: X of Y cars out
Revenue this month: total + £X outstanding as sub-label
Overdue returns: red if > 0 + "Needs action today"
Open violations: count + £X unrecovered
Two-column section
Left: Today's activity — colour-coded list of pickups (blue), returns (green), overdue (red)
Right: Recent alerts and events feed
Bottom section
Left (2/3): Unmatched violations — reg, type, status badge, amount. Daily action item, not buried on Violations page.
Right (1/3): Expiry alerts — MOT/insurance/tax, days remaining. Red < 7 days, amber < 30 days.

Bookings page

Decision: expandable rows, NOT split panel.

Operators primarily scan — they need all bookings visible at once. Map/timeline only takes space when explicitly needed.

Collapsed row: - Registration (monospace, RegPlate component) - Renter name + dates - DerivedStatus badge (active=green, upcoming=blue, overdue=red, returned=gray) - Payment status badge - Total value - Live tracker dot (green=live, grey=offline) - Alert pip if any alerts - Chevron to expand

Expanded row (inline beneath): - Left ~42%: Map placeholder (real Mapbox tiles = SAA-56), route polyline, vehicle pin, stat strip (4 cells: speed, location, odometer, last ping) - Right ~58%: - Alert strip (amber) if active alert - Renter card (name, licence age, previous bookings, contact buttons) - Event timeline (colour-coded dots) - Footer actions: Full map › | Log violation › | Log incident › | Immobilise ›

Filter pills: All / Active / Upcoming / Overdue / Returned + live counts Search: by reg, customer name, booking ID One row expanded at a time URL sync: ?expand= when row is expanded

Violations on past bookings: PCNs arrive weeks after booking ends. Flow: 1. Operator logs violation (via scan or manual) 2. System auto-matches to booking active on that date 3. Operator confirms match + sends recovery notice

Live Tracking page

This is a separate page from Bookings.

	Bookings	Live Tracking
Question	What's happening with this rental?	Where is my entire fleet right now?
Map	Per-booking route + events	All vehicles simultaneously
When	Managing a specific booking	Morning fleet check, spotting problems

Layout: - Full-width map (placeholder SVG now, Mapbox tiles = SAA-56) - Filter bar: All vehicles / Alerts only / Rented / Stationary - Right sidebar (140px): scrollable vehicle list, reg, speed/status, alert badges - Vehicle detail panel: opens on click, shows renter, alerts, "Open booking ›"

Pin colours: green=moving, amber=stationary, red=alert/overdue

URL sync: ?filter=&vehicle=

Mobile: bottom sheet with vaul, snap points at 50% / 90% / collapsed

Two-way link with Bookings: - Live Tracking detail panel → "Open booking ›" → /bookings?expand= - Bookings expanded row → "Full map ›" → /tracking?vehicle=

Pages still to design

Customer profile — rental history, documents, violations linked to customer
Vehicle detail — full history, documents (MOT, insurance), all bookings, violations
Settings — tracker integrations, notification preferences, staff management
Pricing page — for marketing site
Onboarding flow — first-time operator setup wizard

Tracker integration note

GPS trackers shown per-booking on Bookings and fleet-wide on Live Tracking. Frontend consumes a unified API — doesn't need to know which tracker brand. Each vehicle row shows: tracker status (live/offline) + tracker model as sub-label. Show tracker brand logo where space allows (SAA-68).

Mobile standard (SAA-37 — living reference)

Every frontend screen must pass before marking Done: - Tested at 390px viewport - Navigation usable one-handed - Forms work on mobile keyboard (correct input types, no zoom on focus) - Tables collapse to cards below 768px - Tap targets minimum 44px