@get-asset/react
Cashflow Summary Card
Styled card showing twelve months of cash in (green, upward) and cash out (purple, downward) for a fiscal year, diverging from a central $0 axis, with the monthly net cashflowdrawn as a line on top (green where positive, purple where negative). The header surfaces the year's net cashflow, money in and money out totals. Pass insights(shown in the preview) to render the AI insights panel to the left of the chart — it answers the listed questions from the cash-flow insights endpoint automatically, and an “Ask something else” input lets people type their own question for the same structured answer. The chart covers every calendar month the range on screen overlaps — a whole year gives the familiar twelve — and follows the AssetProvider's range unless dateFrom / dateTo pin it.
Built on the headless CashflowSummaryCard compound from @get-asset/sdk.
Preview
Loading preview…
Required scopes
The access token used by AssetProvider must include this scope for this primitive to fetch data successfully:
report:read
API reference
Root props
| Prop | Type | Default | Description |
|---|---|---|---|
dateFrom | CalendarDateString | — | Inclusive start (YYYY-MM-DD) of a fixed reporting range. Detaches the card from the AssetProvider's shared range entirely; must be paired with dateTo (passing one side alone throws). Use periodDateRange to derive the pair from a month, quarter or year. Omit both to follow the provider's DatePicker-driven range. |
dateTo | CalendarDateString | — | Inclusive end (YYYY-MM-DD) of the fixed reporting range. Must be paired with dateFrom. |
months | CashflowSummaryMonthOverride[] | — | Override fetched data — one entry per month on screen. Each entry: { month, moneyIn, moneyOut } (moneyOut positive). Skips the API call. |
scale | number | — | Override the +/- bound for the bar chart scale. |
state | "loading" | "error" | "empty" | — | Force a specific state for testing. |
insights | boolean | { questions?, ask? } | — | Show the AI insights panel to the left of the chart. Pass `true` and it fetches answers from the cash-flow insights endpoint automatically for the range on screen. Alongside the starter questions, an “Ask something else” input lets people type their own — it runs through the same endpoint and returns the same structured answer. Optionally override the starter `questions`, or inject `ask` to mock answers in docs / tests (this preview uses it). |
locked | boolean | — | Gate the report for a viewer who isn't entitled to it. Activates the SDK's Locked state: the metrics and chart render blurred and inert as a teaser behind a lock and the upgrade CTA; the insights panel is omitted. No live fetch runs while locked — the teaser shows built-in placeholder data (a `months` override still wins). |
upsell | { title?, description?, ctaLabel?, onUpgrade? } | — | Customize the locked state's copy and action. `ctaLabel` and `onUpgrade` are the tenant's upgrade wording and handler; `title` / `description` default per report. |
className | string | — | Forwarded to the outer card element. |
States
Loading preview…
Loading preview…
Loading preview…
Loading preview…
Loading preview…