A flexible card for showing one data point and a path into the deeper view it summarizes. Used across CSM dashboards (Accounts, My Accounts), homeowner snapshots, and operations overviews.
Imported from @/components/dashboard-widget.
The widget composed for the SmartAC CSM 'My Accounts' surface. Each tile summarizes a single signal and links into the queue or detail view that resolves it.
Header (label · icon · hint), a single value with optional unit and secondary, an optional delta pill, a viz slot, and a footer that links to the deeper destination.
Spacing and value scale flex with `size`. Pick `sm` for tight grids and ribbons, `md` for standard dashboard tiles, `lg` for hero metrics.
The `surface` prop maps to the surface tokens. Use `default` on inset pages, `inset` when nested inside another card, `muted` for de-emphasized supporting metrics.
Parent: bg-surface-default — child widgets use surface="inset"
Parent: bg-surface-inset — child widgets use surface="default"
Pick the `viz` shape that matches the data: sparkline for trend, area for trend with magnitude, bars for periodic counts, progress for fill-of-target, distribution for share-of-whole, none for a numbers-only tile.
Default, loading, empty, error, locked. Each preserves the card's footprint so a grid of widgets doesn't reflow as data resolves.
Three identical widgets, three different stories. Tone follows what's good for the metric, not the direction of the line.