CashFlowOverview
Money movement chart: inflow and outflow bars per month with net as a line, a 3M/6M range toggle and the window's net, or a connect-bank empty state.
import { CashFlowOverview } from "@cynco-labs/ui";Example
import { CashFlowOverview } from "@cynco-labs/ui";
const pts = [
{ label: "May", credits: 61200, debits: 48700, net: 12500 },
{ label: "Jun", credits: 58400, debits: 62100, net: -3700 },
{ label: "Jul", credits: 66900, debits: 51300, net: 15600 },
{ label: "Aug", credits: 72300, debits: 58800, net: 13500 },
{ label: "Sep", credits: 69150, debits: 60400, net: 8750 },
{ label: "Oct", credits: 74800, debits: 55900, net: 18900 },
];
export default function CashFlowOverviewDemo() {
return <CashFlowOverview points={pts} />;
}Use
Dashboard overview cash-flow card.
Props
points [{label, credits, debits, net}] oldest → newest; optional currency, hasActivity, defaultRange; plus className and native element props (spread on the root).
Notes
Responsive: SectionPanel header wraps the net figure and range toggle under the title; chart fills the width.