Usage meter
A tenant's texting and calling for the period, as labeled quantities with comparative bars. The building block for showing customers their traffic — or re-billing them for it.
Installation
npx shadcn@latest add @handset/usage-meterUsage
import { UsageMeter } from "@/components/handset/usage-meter";
// This month, scoped by your proxy to the signed-in tenant:
<UsageMeter />
// A specific billing period:
<UsageMeter start="2026-07-01" end="2026-08-01" title="July usage" />Quantities come straight from Handset's usage ledger — the same numbers your invoice bills on, so what a customer sees here reconciles with what you charge them. Prices are deliberately left out: your margin over Handset's rates is your business, not the component's. Map quantities to your own prices in a wrapping component if you re-bill.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tenantId | string | — | Scope to one tenant (usually handled server-side). |
| start | string | start of month | RFC 3339 or YYYY-MM-DD. |
| end | string | now | RFC 3339 or YYYY-MM-DD. |
| title | string | "Usage this month" | Card heading. |
| pollMs | number | 0 | 0 = fetch once. |
| className | string | — | Merged onto the card. |