Usage dashboard
A usage breakdown for a period: quantity per kind with comparative bars, plus spend when you pass your per-kind rates. The API summarizes one range, so this is the period view — not a time series.
Installation
npx shadcn@latest add @handset/usage-dashboardUsage
import { UsageDashboard } from "@/components/handset/usage-dashboard";
<UsageDashboard
tenantId={tenant.id}
start="2026-08-01"
rates={{ sms_segment_outbound: 0.008, voice_minute_outbound: 0.0075 }}
/>Takes the same options as useUsage (tenantId, start, end). The API returns quantities, not dollars — pass rates (your price per kind) and the dashboard totals the spend. Omit it to show quantities only.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tenantId | string | — | Scope to one tenant's usage. |
| start / end | string | — | RFC 3339 or YYYY-MM-DD; defaults to the current month. |
| rates | Record<UsageKind, number> | — | USD per unit, to compute spend. |
| className | string | — | Merged onto the root card. |