Skip to content

fix(ui): improve budget KPI card labels and arrow directions#32

Merged
robpaolella merged 2 commits into
mainfrom
fix/budget-kpi-labels
Apr 3, 2026
Merged

fix(ui): improve budget KPI card labels and arrow directions#32
robpaolella merged 2 commits into
mainfrom
fix/budget-kpi-labels

Conversation

@robpaolella
Copy link
Copy Markdown
Owner

Summary

Fixes the budget page KPI cards to show more accurate labels and correct arrow directions for expense tracking.

Changes

KPICard component

  • Added trendDirection prop to decouple arrow direction from color (trend controls color, trendDirection controls the arrow)
  • Defaults to trend when trendDirection is not provided (backward compatible)

BudgetPage

  • Actual Income: Changed subtitle from "remaining" to "under budget" when income is below target
  • Actual Expenses: Now shows contextual subtitles — "remaining" when under budget, "over budget" when exceeded
  • Fixed arrow direction on expense KPI: down arrow (good) when under budget, up arrow (bad) when over
  • Expense KPI trend color now reflects status: green when under budget, red when over

robpaolella and others added 2 commits April 3, 2026 16:15
- Actual Expenses: show "$X over budget" in red when over, keep "$X remaining" in green when under
- Actual Income: change "remaining" to "under budget" when below target

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add trendDirection prop to KPICard to decouple arrow direction from
color. Expenses under budget show green with arrow down, over budget
shows red with arrow up.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@robpaolella robpaolella merged commit 152e46c into main Apr 3, 2026
1 check passed
@robpaolella robpaolella deleted the fix/budget-kpi-labels branch April 3, 2026 23:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant