Blog: Cleaner Dashboard — One KPI Section, Zero Redundancy
Cleaner Dashboard — One KPI Section, Zero Redundancy
Release v0.1.294
What changed
The dashboard used to greet you with three separate layers of numbers before you even reached the Work Queue — the thing you actually opened the dashboard to act on.
At the top sat the DashboardHealthBar: a compact strip showing Active Tenancies, Deposits at Risk, Reports Due, Avg Release, and Open Disputes. Scroll past that and you'd hit the Work Queue. Keep going and you'd find the collapsible KpiSummaryStrip — showing exactly the same five metrics, this time with sparkline trend cards.
The duplication was complete. Every number in the health bar had an identical counterpart in the strip below.
Why it mattered
The Work Queue was buried
The Work Queue is the primary "need attention now" signal on the dashboard. It already surfaces counts and section headers inline. Having a redundant stat strip floating above it forced users to scroll further before reaching anything actionable — roughly 60 px of extra travel on a standard desktop display, more on smaller screens.
Labels vanished on tablets
The DashboardHealthBar used a hidden md:inline class on its label <span> elements. At the md breakpoint — typical tablet width — the labels were hidden entirely, leaving bare numbers with no context. This was a silent readability failure that had no fallback.
What we did
We removed the DashboardHealthBar entirely and made the KpiSummaryStrip the single source of truth for portfolio-level metrics.
The strip is now:
- Always visible — no longer collapsible by default, so the data is never hidden behind a toggle
- Positioned below the Work Queue — the queue leads, the stats provide context
- Free of duplication — one set of numbers, one place to read them
Before After
────────────────────── ──────────────────────
[DashboardHealthBar] [Work Queue]
[Work Queue] → [Portfolio Health]
[KpiSummaryStrip] (KpiSummaryStrip, always open)
The label truncation issue disappears along with the component that caused it.
Impact
| Metric | Before | After |
|---|---|---|
| Distinct KPI layers on dashboard | 3 | 2 |
| Duplicate metric displays | 5 (all metrics shown twice) | 0 |
| Scroll distance to Work Queue | Baseline + ~60 px | Baseline |
| Tablet label visibility | Broken at md breakpoint | Full labels visible at all widths |
Affected file
src/app/dashboard/dashboard-health-bar.tsx