Office Review Tool
Hazard Map
Vehicle Damage
Team Wins
How might we?
help engineers see a whole fleet’s health at a glance, without digging through raw incident logs one drive at a time?
Platforms
React + TypeScript + Vite, deployed to GitHub Pages
Category
Fleet Operations Review, Office Dashboard
Role
End-to-end: data viz, map integration, responsive layout
Design System
Same primitives, office surface
Every card on this dashboard reuses the same five colors and one severity taxonomy — validated once, reused everywhere, never reinvented per panel.
Severity
SEV1 · Critical Takeover
Damage Status
Resolved
Hotspot Rank
#1
ODD Coverage
Ingestion
Team Wins
9 Resolved
Status & Accent Colors
Critical — #D03B3B
Serious — #EC835A
Warning — #FAB219
Good — #0CA30C
Accent — #3987E5
Why It Works
Safety data and morale, side by side.
Team Wins sits right next to the incident log instead of a separate tool, so celebrating progress never gets treated as an afterthought.
Geography you can actually see.
Real OpenStreetMap tiles at real coordinates make spatial patterns obvious at a glance — no squinting at a lat/lng table to spot a cluster.
One validated palette, zero guessing.
Every color on this dashboard passed the dataviz skill’s CVD and contrast checks before shipping — not eyeballed, run through the validator.
Approach & Process
End-to-End Ownership
Owned end-to-end design for Fleet Dashboard, spanning the incident log, the hazard map, and the team-wins morale panel that engineers actually check every morning.
One Taxonomy, One Dashboard
Nothing re-mapped for the office.
The same subsystem × severity classification the cockpit tags with renders directly here — no separate office-side schema to keep in sync.
Validated Palette, Not Guessed
Ran every color through the dataviz skill’s validator before shipping it:
Status colors (critical/serious/warning/good) distinct from any categorical series
Severity always paired with a label — color never carries meaning alone
Contrast checked against the actual dark panel surface, not assumed
Built From Real Fixtures
Every panel reads from the same shape of data the cockpit would eventually stream:
Hazard hotspots plotted at real lat/lng on OpenStreetMap tiles, no API key needed
Vehicle damage modeled as its own typed fixture, not hardcoded JSX
Team-wins counters computed from the same incident list, not separate numbers
Same Taxonomy, New Surface
Extended the cockpit’s data model for the office context, not reinvented it:
A live map for spatial pattern-spotting across hotspots
A vehicle damage summary for maintenance planning
A team-wins panel, deliberately kept separate from the safety metrics
Hazard Route Map
Every hotspot, plotted for real
Fault and disengagement hotspots render on real OpenStreetMap tiles at their actual coordinates, colored by severity, with a ranked list alongside so the worst locations surface first.
No API key, no mock map — free tiles, real geography.
4th & Market
SEV1 · 3 priors
Howard St Underpass
SEV2 · 2 priors
5th & Mission
SEV2 · 1 prior
Team Wins
Morale gets a number too
Issues resolved, days since the last SEV1, safe miles logged, driver shoutouts — four counters that exist purely to celebrate the team, sitting right next to the safety data instead of buried in a separate tool.
Positive framing, same underlying incident data.
9
Issues Resolved
6
Days Since Last SEV1
2,140 mi
Safe Miles Logged
4
Driver Shoutouts
-40%
SEV1 vs Last Month
500 mi
AV-11 Clean Streak
On Target
Night ODD Coverage
0
SEV1 This Week
Vehicle Damage Summary
Maintenance, not just incidents
Per-vehicle damage tracked by component and severity — cosmetic, minor, moderate — with an open/resolved status, so maintenance planning doesn’t require cross-referencing a spreadsheet against the incident log.
Four vehicles, four fixture entries — the same typed shape a real maintenance feed would use.
ODD Coverage & Ingestion
Coverage and ingestion, always visible
Day/night/rain/dense-traffic passes track against campaign targets right on the dashboard, next to write-rate, storage, and sensor-sync status.
No separate log to dig through for either one.
Downtown ODD Loop — 6 / 10 passes
Day — 4 passes
Night — 1 pass
Rain/Wet — 1 pass
Dense Traffic — 2 passes
Payload Ingestion
148.4 MB/s write rate
842.5 / 1024 GB storage used
Sensor streams synced
