OwedAgingRings
Receivables and payables as aging rings — one arc per band (Current, 1–30, 31–60, 61–90, 90+), the total in the middle, a keyed legend and the overdue footnote.
import { OwedAgingRings } from "@cynco-labs/ui";Example
import { OwedAgingRings } from "@cynco-labs/ui";
export default function OwedAgingRingsDemo() {
return (
<div className="max-w-[460px]">
<OwedAgingRings
dso={38}
receivables={{
current: 64850,
days1to30: 18200,
days31to60: 7650,
days61to90: 3400,
over90: 2200,
}}
payables={{ current: 39800, days1to30: 8940.6, days31to60: 2500, days61to90: 0, over90: 0 }}
/>
</div>
);
}Use
The Owed band of the CFO numbers panel, or any compact AR/AP aging glance.
Props
receivables, payables ({current, days1to30, days31to60, days61to90, over90, total?} or null); optional dso, currency; plus className and native element props (spread on the root).
Notes
Band colours use the status tokens (--status-green/blue/amber/orange/red); the ring track is stroke-muted; key dots use text-tiny tertiary. Responsive: rings sit side by side from 24rem of container width, stacked below.