[Liquid Glass]
Analytics Dashboards Hub
Company reporting moved from a legacy BI tool into one React app of production dashboards.
Reporting lived in a BI tool on top of the legacy MySQL: inconsistent colors, rounded numbers, exports that didn't match the screen, each dashboard rebuilt by hand.
Main developer of the hub and its dashboards, front end and data layer, working with each dashboard's business owner.
Move dashboards without changing the numbers people trust — and ship new ones fast enough to matter.
01 · Reproduce, then redesign
Legacy dashboards are captured with a browser-automation tool and reproduced 1:1, formulas included. Redesign starts only after the numbers match.
02 · Tables people already read
Heat-colored tables copied from the old tool; full numbers to the cent in tables, compact numbers only on chart labels.
03 · Two themes, one data palette
Navy glass and pure black. Themes change surfaces only — data colors never change, or the same number would have two readings. 48 hard-coded colors in 27 files became tokens.
04 · Exports equal the card
Per-panel CSV with exactly the columns and the cut on screen.
05 · Explain every metric
Info hints with the business definition and the formula on each KPI.
what you're seeing
A miniature dashboard: KPI cards, a trend chart, the offer funnel (front, order bump, upsell, downsell), a heat-colored table and the CSV it exports. The switches on top change theme, period and the role you're viewing as.try this
- 1.Switch theme: surfaces change, data colors don't.
- 2.View as Member: order counts and AOV disappear — from the table and from the CSV.
- 3.Change the period and check that the CSV preview always matches the table.
real vs simplified
The conventions are the hub's real ones; roles are owner / master / member as in production. Numbers are synthetic and the layout is condensed into one panel.! brokeThe funnel drew a 0% step as wide as a 6.9% step because of a minimum-width floor.
→ changedRemoved the floor; width always follows the value.
! brokeThere was no real theme system — the dark palette was hard-coded, so a second theme broke everywhere.
→ changedTokenized the colors, including a tooltip style repeated in 17 places.
Always Projected
Executive Margin Cockpit
Pipeline, Not Business
Lead Processing Latency
Effective Recovery
Lead Enrichment & ROI
Nothing Recomputable
Tiered Affiliates Dashboard
Cell by Cell
AOV, Funnel & A/B
Provider Grain
Dispatch Match Rate & a Silent Outage
Clone and Go
Dashboard Scaffold & Local-First Workflow