Zero Amount header at the top of budget and month pages #7

New issue

Closed

opened 2026-04-17 12:03:34 -06:00 by claude-code · 0 comments

claude-code commented

2026-04-17 12:03:34 -06:00

Collaborator

Goal

Give each page a prominent "Zero Amount" header so the zero-based budgeting discipline is visible at a glance. When the number is zero, every dollar has a home. When it is positive there is unassigned income; when negative the plan (or actual spending) exceeds income.

Calculation

Sum across sections, with income on the positive side and all other sections on the negative side. The Primary Debt Target is excluded (it is a pointer to a Debt Minimums row, not its own total).

Budget (/): sum(income.amount) - sum(non_income.amount) as a single number.
Month (/month/YYYY-MM): two numbers side by side:
- Planned: sum(income.planned) - sum(non_income.planned)
- Applied: sum(income.applied) - sum(non_income.applied)

Display

Large, bold, tabular-numerals typography at the top of the page, above the nav or alongside it
Label "Zero Amount"
Color:
- Green when the value is exactly $0.00
- Amber when positive (unassigned money, under-budget)
- Red when negative (over-budget)
Updates live via HTMX out-of-band swap on every entry add / edit / delete, same pattern the debt target card uses

Acceptance criteria

/ renders a single "Zero Amount" number at the top using the budget calculation
/month/YYYY-MM renders two numbers at the top: "Planned $X" and "Applied $Y"
Adding, editing, or deleting any entry updates the header via OOB swap without a full page reload
Color coding: green at zero, amber when positive, red when negative
Pytest covers the math (positive, negative, exact zero) and the OOB re-render
No regression in existing tests

Out of scope

Configurable currency or per-section weighting
Historical chart of zero over time

## Goal Give each page a prominent "Zero Amount" header so the zero-based budgeting discipline is visible at a glance. When the number is zero, every dollar has a home. When it is positive there is unassigned income; when negative the plan (or actual spending) exceeds income. ## Calculation Sum across sections, with income on the positive side and all other sections on the negative side. The Primary Debt Target is excluded (it is a pointer to a Debt Minimums row, not its own total). * **Budget (`/`)**: `sum(income.amount) - sum(non_income.amount)` as a single number. * **Month (`/month/YYYY-MM`)**: two numbers side by side: * Planned: `sum(income.planned) - sum(non_income.planned)` * Applied: `sum(income.applied) - sum(non_income.applied)` ## Display * Large, bold, tabular-numerals typography at the top of the page, above the nav or alongside it * Label "Zero Amount" * Color: * Green when the value is exactly `$0.00` * Amber when positive (unassigned money, under-budget) * Red when negative (over-budget) * Updates live via HTMX out-of-band swap on every entry add / edit / delete, same pattern the debt target card uses ## Acceptance criteria * [ ] `/` renders a single "Zero Amount" number at the top using the budget calculation * [ ] `/month/YYYY-MM` renders two numbers at the top: "Planned $X" and "Applied $Y" * [ ] Adding, editing, or deleting any entry updates the header via OOB swap without a full page reload * [ ] Color coding: green at zero, amber when positive, red when negative * [ ] Pytest covers the math (positive, negative, exact zero) and the OOB re-render * [ ] No regression in existing tests ## Out of scope * Configurable currency or per-section weighting * Historical chart of zero over time