# Balance Card

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

Component · Admin · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/BalanceCard/)

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`.

## Example

```tsx
import * as React from "react";
import { BalanceCard, ServiceMonitor } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-col"
      style={{
        gap: 16,
      }}
    >
      <div
        className="tf-grid"
        style={
          {
            "--cols": "repeat(3, minmax(0, 1fr))",
            gap: 16,
          } as React.CSSProperties
        }
      >
        <BalanceCard
          name="Provider A"
          sub="Followers, likes"
          balance={1840.5}
          perDay={212}
          low={500}
          spark={[2400, 2300, 2150, 2020, 1990, 1910, 1840]}
          onTopUp={() => {}}
        />
        <BalanceCard
          name="Provider B"
          sub="Views"
          balance={310.2}
          perDay={96}
          low={400}
          spark={[900, 780, 640, 520, 470, 380, 310]}
          onTopUp={() => {}}
        />
        <BalanceCard
          name="SMS gateway"
          sub="Verification codes"
          balance={0}
          perDay={4.1}
          low={20}
          icon="phone"
          tint="sky"
          onTopUp={() => {}}
        />
      </div>
      <div className="tf-panel tf-panel-flush tf-panel-list">
        <ServiceMonitor
          items={[
            {
              name: "Checkout",
              status: "ok",
              statusLabel: "Operational",
              latency: 182,
              errorRate: 0.2,
              checked: "30 s ago",
              history: ["ok", "ok", "ok", "ok", "ok", "ok", "ok", "ok", "ok", "ok", "ok", "ok"],
            },
            {
              name: "Provider A API",
              status: "warn",
              statusLabel: "Slow",
              latency: 2310,
              errorRate: 3.4,
              checked: "30 s ago",
              history: [
                "ok",
                "ok",
                "ok",
                "warn",
                "ok",
                "ok",
                "warn",
                "warn",
                "ok",
                "warn",
                "warn",
                "warn",
              ],
            },
            {
              name: "Mail delivery",
              status: "danger",
              statusLabel: "Down",
              latency: null,
              errorRate: 100,
              checked: "1 min ago",
              history: [
                "ok",
                "ok",
                "ok",
                "ok",
                "ok",
                "ok",
                "ok",
                "ok",
                "ok",
                "danger",
                "danger",
                "danger",
              ],
            },
          ]}
        />
      </div>
    </div>
  );
}
```

## 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. |