Expenses cashflow card
Planned annual spend across the life plan as a bar chart, with life-stage bands and the one-off events that move it.
Your spending plan
Annual spend in today's money
<ExpensesCashflowCard data={spendingPlan} />Usage
import { ExpensesCashflowCard, type ExpensesCashflowData } from "@reva/ui";Renders the expenses cashflow tool output (wiring lands with the follow-up agent tool). Each point's value is the household's planned living spend plus debt repayments for that calendar year, as a decimal string in today's money. Stage bands render beneath the axis, one-off events render as dashed markers with flags above the bars, and a bar whose year carries an event highlights in the accent gold fill automatically.
Pass data with a stable reference (module scope, state or useMemo). The x-axis is categorical, so stage bounds and event years must land on plotted years — an event between points renders no marker, and stage bounds clamp to the plotted range.
Examples
Life plan with stages and events
The full state: life-stage bands under the axis, event flags on a two-row stagger above the bars, event years highlighted. Hover a bar for the year, age, planned spend and that year's events.
Your spending plan
Annual spend in today's money
<ExpensesCashflowCarddata={{ reporting_currency: "GBP", points, // one per year, ~50 years stages: [ { label: "Working", from_year: 2026, to_year: 2035, intent: "neutral" }, { label: "Early retirement", from_year: 2036, to_year: 2043, intent: "info" }, { label: "Retirement", from_year: 2044, to_year: 2063, intent: "warning" }, { label: "Slow-down", from_year: 2064, to_year: 2076, intent: "neutral" }, ], events: [ { year: 2029, label: "New family home", sublabel: "£1m" }, { year: 2043, label: "Pension unlocks" }, ],}}/>Bars only
Without stages or events the strip and the flag headroom collapse — just the annual spend series.
Your spending plan
Annual spend in today's money
<ExpensesCashflowCard data={{ reporting_currency: "GBP", points }} />Short horizon
At a ten-year horizon the bars widen and every year keeps its tick.
Your spending plan
Annual spend in today's money
<ExpensesCashflowCard data={shortPlan} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | ExpensesCashflowData | — | The card payload. Stable reference required. |
title | string | "Your spending plan" | Card title. |
subtitle | string | "Annual spend in today's money" | Muted line under the title. |
The data fields:
| Field | Type | Description |
|---|---|---|
reporting_currency | string | ISO currency for every value (e.g. "GBP"). |
points | ExpensesCashflowPoint[] | One per calendar year: year, optional age (tooltip header), value decimal string. |
stages | ExpensesCashflowStage[] | Optional life-stage bands: label, from_year, to_year (inclusive), intent. |
events | ExpensesCashflowEvent[] | Optional one-off markers: year, label, optional sublabel. |
Stage intent accepts "primary" | "accent" | "neutral" | "constructive" | "destructive" | "warning" | "caution" | "info" and defaults to "neutral".