You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Budget Health hero card at the top of /budget/overview is no longer wanted. The page should render the SubNav directly above the Cost Breakdown Table (which already replicates and improves the same information).
Reproduction
Open the running app and visit /budget/overview with sample data.
Observe the large hero card with metrics row (Available Funds, Projected Cost Range, Expected Payback, Remaining) and a stacked BudgetBar segments visualization at the top of the page.
Scope
The hero card lives in client/src/pages/BudgetOverviewPage/BudgetOverviewPage.tsx lines 577-696 inside <section className={styles.heroCard}>. It contains:
Available Funds metric
Projected Cost Range metric
Expected Payback metric (conditional on hasPayback)
Remaining (best/worst) metric with hover/tap detail panel
A stacked BudgetBar segments visualization with overflow
Desktop hover tooltip and mobile bar detail panel
Expected Behavior
The hero card section is fully removed. The page renders the SubNav (kept) and goes straight to the Cost Breakdown Table. All code paths exclusively used by the hero card must be deleted — no dead code left behind.
Cleanup Checklist (notes for the dev-team-lead spec)
Helpers: RemainingDetailPanel, MobileBarDetail, SegmentTooltipContent, formatPct, the inner formatShort
State only used by the hero card: hoveredSegment, mobileBarOpen, remainingDetailOpen, handleSegmentHover, handleSegmentClick, plus their setters
The Tooltip import from BudgetOverviewPage.tsx (Tooltip is used elsewhere — only the local import goes)
The BudgetBar import from BudgetOverviewPage.tsx (BudgetBar component is also used by BudgetSummaryCard and SourceUtilizationCard, so the component file stays — only the local import is removed)
All hero-card-only CSS classes in BudgetOverviewPage.module.css: heroCard, metricsRow, metricsRowWithPayback, metricGroup, metricLabel, metricValue, metricRange, metricRangeSep, metricPaybackValue, paybackCappedNote, metricValueInteractive, metricPositive, metricNegative, metricHint, remainingDetailPanel/Open, remainingPanel*, mobileBarDetail*, segmentTooltip*, barWrapper, barTooltipAnchor, mobileDetail/Open, plus the print-mode rule at line 542 that hid heroCard
The hasPayback and remaining* computations referenced only by the hero card
Hero-card-only i18n keys in client/src/i18n/{en,de}/budget.json: overview.availableFunds, overview.projectedCostRange, overview.expectedPayback, overview.paybackCapped, overview.remaining, overview.remainingDetail, overview.bars.*, overview.remainingPerspectives.*, overview.ofAvailableFunds. Verify each key has no other consumer before deleting (grep across client/src).
Existing tests in BudgetOverviewPage.test.tsx that target hero-card behavior (formatShort outputs, metricGroup queries, hover/tap remaining-detail interactions, BudgetBar segment hover, mobile bar detail) must be removed; tests for SubNav, action dropdown, error/loading/empty states, and Cost Breakdown Table integration stay.
Acceptance Criteria
Given budget data exists, When I visit /budget/overview, Then I see the page title, sub-navigation, and the Cost Breakdown Table directly — no hero card, no metrics row, no stacked bar.
Given I view the page on desktop, tablet, and mobile, Then the layout works at all three breakpoints with no leftover empty space from the removed card.
Given I view the page in dark mode, Then the rest of the page still renders correctly without any orphaned styles.
Given the change is implemented, When I run git grep for the removed helper names, state slots, CSS class names, and i18n keys, Then they appear in zero places (no dead code, no orphan styles, no orphan translations).
Given I print the page, Then the printout shows the Cost Breakdown Table without any leftover hero card or related print-mode rules.
Given Cost Breakdown Table tests, BudgetBar component tests, and other budget surfaces (BudgetSummaryCard, SourceUtilizationCard, BudgetSourcesPage), Then they remain green — only hero-card-specific tests are removed.
Notes
Priority: Should Have
Parent Epic: None (EPIC-05 Budget Management is closed/Done; no active Budget epic). Standalone bug.
Type: Refactor / Removal — no new functionality, only deletion of unwanted UI and dead code.
[product-owner]
Summary
The Budget Health hero card at the top of
/budget/overviewis no longer wanted. The page should render the SubNav directly above the Cost Breakdown Table (which already replicates and improves the same information).Reproduction
/budget/overviewwith sample data.BudgetBarsegments visualization at the top of the page.Scope
The hero card lives in
client/src/pages/BudgetOverviewPage/BudgetOverviewPage.tsxlines 577-696 inside<section className={styles.heroCard}>. It contains:hasPayback)BudgetBarsegments visualization with overflowExpected Behavior
The hero card section is fully removed. The page renders the SubNav (kept) and goes straight to the Cost Breakdown Table. All code paths exclusively used by the hero card must be deleted — no dead code left behind.
Cleanup Checklist (notes for the dev-team-lead spec)
RemainingDetailPanel,MobileBarDetail,SegmentTooltipContent,formatPct, the innerformatShorthoveredSegment,mobileBarOpen,remainingDetailOpen,handleSegmentHover,handleSegmentClick, plus their settersTooltipimport fromBudgetOverviewPage.tsx(Tooltip is used elsewhere — only the local import goes)BudgetBarimport fromBudgetOverviewPage.tsx(BudgetBar component is also used byBudgetSummaryCardandSourceUtilizationCard, so the component file stays — only the local import is removed)BudgetOverviewPage.module.css:heroCard,metricsRow,metricsRowWithPayback,metricGroup,metricLabel,metricValue,metricRange,metricRangeSep,metricPaybackValue,paybackCappedNote,metricValueInteractive,metricPositive,metricNegative,metricHint,remainingDetailPanel/Open,remainingPanel*,mobileBarDetail*,segmentTooltip*,barWrapper,barTooltipAnchor,mobileDetail/Open, plus the print-mode rule at line 542 that hidheroCardhasPaybackandremaining*computations referenced only by the hero cardclient/src/i18n/{en,de}/budget.json:overview.availableFunds,overview.projectedCostRange,overview.expectedPayback,overview.paybackCapped,overview.remaining,overview.remainingDetail,overview.bars.*,overview.remainingPerspectives.*,overview.ofAvailableFunds. Verify each key has no other consumer before deleting (grep acrossclient/src).BudgetOverviewPage.test.tsxthat target hero-card behavior (formatShortoutputs,metricGroupqueries, hover/tap remaining-detail interactions,BudgetBarsegment hover, mobile bar detail) must be removed; tests for SubNav, action dropdown, error/loading/empty states, and Cost Breakdown Table integration stay.Acceptance Criteria
/budget/overview, Then I see the page title, sub-navigation, and the Cost Breakdown Table directly — no hero card, no metrics row, no stacked bar.git grepfor the removed helper names, state slots, CSS class names, and i18n keys, Then they appear in zero places (no dead code, no orphan styles, no orphan translations).Notes