BusinessHealthPanel
The controls checklist: each check's verdict, one line of evidence and its area (Books, Collections, Payables, Compliance), failures first, with a summary like '2 of 5 checks need you'.
import { BusinessHealthPanel } from "@cynco-labs/ui";Example
import { BusinessHealthPanel } from "@cynco-labs/ui";
const checks = [
{
id: "close",
label: "Sep 2026 can close",
detail: "2 bank transactions still unmatched",
area: "books",
status: "warn",
},
{
id: "bank",
label: "Bank is reconciled",
detail: "Maybank current account reconciled to 30 Oct",
area: "books",
status: "pass",
},
{
id: "ar",
label: "Receivables are current",
detail: "RM 31,450.00 overdue · Kopi Kampung Trading 90+ days",
area: "collections",
status: "fail",
},
{
id: "dso",
label: "Collecting inside 45 days",
detail: "38 days sales outstanding",
area: "collections",
status: "pass",
},
{
id: "bills",
label: "Bills paid on time",
detail: "Nothing due this week",
area: "payables",
status: "pass",
},
{
id: "sst",
label: "SST-02 (Sep–Oct) filed",
detail: "Due 30 Nov 2026",
area: "compliance",
status: "na",
},
];
export default function BusinessHealthPanelDemo() {
return (
<div className="max-w-[560px]">
<BusinessHealthPanel checks={checks} />
</div>
);
}Use
Dashboard 'Checks' pane — the CFO's to-do for today.
Props
checks [{id, label, detail, area, status: fail|warn|pass|na, href?}] or null (unavailable); plus className and native element props (spread on the root).
Notes
Responsive: area tag hides below 24rem; evidence line wraps instead of truncating on narrow containers.