Backoffice
BalanceCard
A supplier's prepaid balance against the next renewal (Figma "Backoffice / Balance Card" 2058:55415): Ok, Shortfall, Stale.
Shortfall is red because a session drop stops someone's protection; it always comes with the line that says what falls and when.
<BalanceCard status="shortfall" statusLabel="Falta saldo" supplier="IPRoyal" balance="US$ 2,17" checkedAt="consultado há 12 min" coverage={0.42} facts={[{ label: "Renovação", value: "29 out · US$ 5,20" }]} shortfall="Faltam US$ 3,03 · 1 sessão cai em 29 out" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Balance Card
string
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Status · Ok
| Backoffice / Balance Card |
|---|
IPRoyalCobertoUS$ 18,40consultado há 12 min
|
Status · Shortfall
| Backoffice / Balance Card |
|---|
IPRoyalFalta saldoUS$ 2,17consultado há 12 min
Faltam US$ 3,03 · 1 sessão cai em 29 out |
Status · Stale
| Backoffice / Balance Card |
|---|
IPRoyalDesatualizadoUS$ 2,17consultado há 3 dias
|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| status | "ok" | "shortfall" | "stale" | — | Figma "Status": covered, short of the next renewal, or not checked lately. |
| statusLabel | string | — | The status in words ("Coberto", "Falta saldo", "Desatualizado"). |
| supplier | ReactNode | — | "IPRoyal". |
| balance | ReactNode | — | "US$ 2,17". |
| checkedAt | ReactNode | — | "consultado há 12 min". |
| coverage | number | — | How much of the next renewal the balance covers, 0 to 1 (Ok 1, the Figma shortfall sample 0.42). Drawn only; the words carry it. |
| facts? | { label: ReactNode; value: ReactNode; }[] | — | Lines under the bar: renewal, sessions… |
| shortfall? | ReactNode | — | Figma "shortfall": what breaks and when ("Faltam US$ 3,03 · 1 sessão cai em 29 out"). |
| actions? | ReactNode | — | "Adicionar saldo", "Consultar agora". Wrap in WriteOnly (components/page/write-only.tsx): a phone is read-only. |
| className? | string | — |