Appearance
Budget Panel
Set monthly spending targets per expense category and track actual spending against them. Budgets are sorted by usage percentage so the most stretched categories appear first.
What It Shows
A list of budget items, each with the category name, budgeted amount, actual spend, and a color-coded progress bar.
| Element | Detail |
|---|---|
| Category name | Matches categories from the Transactions Panel |
| Budgeted amount | Monthly target in NZD (inline editable) |
| Actual spend | Current month spending for that category |
| Progress bar | Visual fill proportional to spend/budget ratio |
Key Features
- Add budget -- Select any expense category and set a monthly NZD amount.
- Sorted by usage -- Budgets are ordered by percentage spent (highest first), surfacing overspend immediately.
- Inline editing -- Click the budget amount to edit it in place.
- Delete on hover -- A delete button appears on hover for each budget item.
Progress Bar Color Coding
| Usage | Color | Effect |
|---|---|---|
| Under 80% | Green | Standard fill |
| 80% -- 100% | Yellow | Warning fill + glow |
| Over 100% | Red | Overspend fill + glow |
The glow effect activates at 80% and above to draw attention to categories nearing or exceeding their budget.
Data Source
| Store | Fields |
|---|---|
useFinanceStore | budgets, categories |
All amounts formatted with formatNZD().
Interactivity
| Action | Result |
|---|---|
| Add budget | Category dropdown + amount input |
| Click amount | Inline edit mode |
| Hover row | Reveals delete button |
| Delete | Removes budget item |
Related Panels
- Transactions Panel -- shares category definitions
- Spending Panel -- shows the same spending data as a treemap
- What-If Simulator -- scenario changes affect actual spend figures