fix(budget): warn when section budgets exceed overall target

[dccakes]

Daily Product Improvement

📝 TLDR

Add a contextual warning banner in the Budget Overview when the sum of section budgets exceeds the overall target budget.

📝 Description

When users set a target budget and then allocate section budgets (venue, catering, etc.) that cumulatively exceed that target, the app previously showed no warning. The only indication was a faint hint line under the "Target Budget" stat tile reading "Planned across sections: $X" — easy to miss, and carrying no visual urgency.

This means a couple could believe they are planning within budget while their sections already commit them to overspending, discovering the problem only after actual spend is recorded.

This Change

• Computes overPlanned when totalPlanned > targetTotal and a target exists
• Renders a destructive-toned banner below the stat tiles grid explaining the overage amount and suggesting corrective actions
• The banner is purely additive — no existing layout, data flow, or component API is changed

🧪 Testing

• Manually tested: set a target budget, add sections whose totals exceed it, confirm banner appears
• Confirmed banner does not render when totalPlanned ≤ targetTotal
• Confirmed banner does not render when no target is set
• TypeScript check passes with no new errors

🧪 How to test as a user

1. Go to Budget
2. Set a target budget (e.g. $10,000 via "Set budget")
3. Add two or more sections with individual budgets that total more than $10,000
4. The overview should now show a red warning banner below the stat tiles explaining the overage

📚 Documentation

N/A — UI-only change, no API or data model changes.

📦 Dependencies

None.

---

Recommendations Reviewed

Area: src/components/budget/budget-summary.tsx
Issue: When planned section totals exceed the target, no visible warning is shown — only a faint hint text
Recommendation: Add contextual warning banner below stat tiles ✅ Selected
Type: UX/UI
Priority: High
Effort: Small

---

Area: src/components/guest-list/guest-search-filter.tsx
Issue: Three nearly-identical custom dropdown implementations (RSVP, Tag, Country) each manage open/close state, outer-click refs, and positioning manually instead of using the existing DropdownMenu UI component
Recommendation: Refactor Tag and Country filter dropdowns to use DropdownMenu
Type: Frontend cleanup
Priority: Medium
Effort: Medium

---

Area: src/components/vendor/vendor-card.tsx
Issue: Ratings breakdown panel uses a hidden/block class toggle — no keyboard support, no focus trap, no escape-to-close, can clip off-screen
Recommendation: Replace with Popover component from the UI library
Type: UX/UI + Frontend cleanup
Priority: Medium
Effort: Small

---

Area: src/components/guest-list/guest-search-filter.tsx
Issue: useEffect that resets filters on selectedEventId change contains five eslint-disable-next-line react/hooks/set-state-in-effect suppressions — fragile pattern that can cause stale resets
Recommendation: Use a key prop to remount the component on event change, or lift filter state to a URL param
Type: Frontend cleanup
Priority: Low
Effort: Medium

---

Selected Improvement

Added a overPlanned computed value and a destructive-toned banner in BudgetSummary that renders when section budgets collectively exceed the target.

Why This Was Selected

• High user impact: users can unknowingly over-plan without any feedback until they start spending
• Targeted: single file, additive change, no component API changes
• Low risk: purely additive rendering, no logic changes to existing paths

Changes Made

• Added const overPlanned = targetTotal > 0 && totalPlanned > targetTotal derived value
• Added conditional warning banner below the stat tiles grid when overPlanned is true

Files Changed

• src/components/budget/budget-summary.tsx

Verification

• TypeScript: npm run typecheck — no new errors
• Logic: banner only shows when target > 0 AND planned > target; hidden in all other cases
• No unrelated files changed

Future Recommendations

Recommendation: Refactor guest filter dropdowns to use DropdownMenu UI component
Priority: Medium
Effort: Medium
Reason not included: Functional change covering 3 dropdowns; higher risk and scope than today's targeted run
Should become GitHub issue: No — can be picked up in a future daily run

Recommendation: Replace vendor card ratings panel toggle with Popover component
Priority: Medium
Effort: Small
Reason not included: Separate area, separate PR; today's run focused on budget
Should become GitHub issue: No — small enough to pick up in a future daily run

Recommendation: Remove eslint-disable suppressions in guest filter useEffect via key-reset or URL state
Priority: Low
Effort: Medium
Reason not included: Requires understanding of filter state lifecycle; not trivially safe
Should become GitHub issue: No — low priority

GitHub Issues Created or Proposed

None created. All unimplemented recommendations are small enough to track in future daily runs without separate issue overhead.

🤖 Generated with Claude Code

https://claude.ai/code/session_01M5TV64uuKMoVyqDR4C6Yps

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
scv	Error		Sep 2, 2026 10:17am UTC

[github-actions]

Jest Test Coverage

Coverage Summary

Lines	Statements	Branches	Functions
	83.11% (36264/43629)	82.14% (3813/4642)	69.49% (1073/1544)