Balance Card

Admin · BalanceCard, ServiceMonitor

Prepaid balances at providers and the health of the services the shop depends on: BalanceCard and ServiceMonitor.

BalanceCard: name, sub, logo or icon + tint, balance, currency, perDay (burn rate → "lasts about n days"), low (warning threshold), spark, status / statusLabel (override), onTopUp, topUpLabel, action.
ServiceMonitor: items ({id, name, status, statusLabel, latency (ms), errorRate (%), checked, history (statuses, oldest first)}), label.

PreviewCode

Provider AFollowers, likes

€1,840.50€212 per day · lasts about 8 daysWarns below €500

Provider BViews

Low

€310.20€96 per day · lasts about 3 daysWarns below €400

SMS gatewayVerification codes

Empty

€0€4.10 per dayWarns below €20

CheckoutOperational182 ms0.2%30 s ago

Provider A APISlow2,310 ms3.4%30 s ago

Mail deliveryDown—100%1 min ago

Props

BalanceCard

Prop	Type	Notes
`name`	`string`	Required
`sub?`	`ReactNode`
`logo?`	`ReactNode`
`icon?`	`IconName`
`tint?`	`Tint`
`balance`	`number`	Required
`currency?`	`string`
`perDay?`	`number`
`low?`	`number`
`spark?`	`number[]`
`status?`	`Status`
`statusLabel?`	`string`
`onTopUp?`	`() => void`
`topUpLabel?`	`string`
`action?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ServiceMonitor

Prop	Type	Notes
`items`	`{ id?: string; name: string; status: Status; statusLabel?: string; latency?: number \| null; errorRate?: number \| null; checked?: string; history?: (Status \| "none")[]; }[]`	Required
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.