fix(dashboard): BudgetOverview violates rules of hooks (useT in conditional)

[OneStepAt4time]

Bug

BudgetOverview in CostPage.tsx calls useT() inside a conditional if (!budgetSettings.budgetAlertEnabled) block, violating React's rules of hooks.

File: dashboard/src/pages/CostPage.tsx lines 116–138

function BudgetOverview({ dailyData, budgetSettings, navigateToSettings }: BudgetOverviewProps) {
  if (!budgetSettings.budgetAlertEnabled) {
    const t = useT(); // ← RULE OF HOOKS VIOLATION
    return (
      // ... warning section
    );
  }

Impact

• When budgetAlertEnabled is false, the warning section may not render correctly
• React may throw an error in strict mode
• The component silently fails in production (no warning rendered)

Fix

Move useT() to the top of the function, before any conditional returns:

function BudgetOverview({ dailyData, budgetSettings, navigateToSettings }: BudgetOverviewProps) {
  const t = useT(); // ← Move here
  if (!budgetSettings.budgetAlertEnabled) {
    return (
      // ... warning section using t()
    );
  }

How found

Discovered while writing CostPage.test.tsx — the budget warning test could not find expected rendered text because the component was crashing on the conditional hook call.

Reported by: Daedalus 🏛️

[aegis-gh-agent]

Resolved by PR #4073 (merged on 2026-05-23).