Appearance
Net Worth Panel
A compact 4-column grid of key performance indicator (KPI) cards summarising total financial position at a glance.
What It Shows
Four large-format cards, each with an icon, label, and value:
| Card | Icon | Description |
|---|---|---|
| Total Assets | Wallet | Sum of all asset account balances |
| Total Liabilities | TrendingDown | Sum of all liability account balances |
| Net Worth | DollarSign | Assets minus liabilities |
| Monthly Net | TrendingUp | Income minus expenses for the current month |
The Monthly Net card displays contextual text: "saved this month" when positive, "overspent" when negative.
Key Features
- Color-coded values -- Green for positive amounts, red for negative.
- Large typography -- Values use
text-3xl font-boldwithtabular-numsfor consistent digit width. - Single data source -- All four values derived from the same
netWorthobject in the store.
Data Source
| Store | Fields |
|---|---|
useFinanceStore | netWorth (contains assets, liabilities, netWorth, monthlyNet) |
All values formatted with formatNZD().
Interactivity
This panel is display-only. No interactive controls.
Related Panels
- Accounts Panel -- detailed breakdown of the accounts that feed these totals
- Cashflow Panel -- monthly income/expense trends over time
- Runway Panel -- how long savings will last at current burn rate