---
phase: 04-chart-polish-and-bug-fixes
plan: "02"
subsystem: ui
tags: [recharts, react, typescript, i18n, locale, formatCurrency]

# Dependency graph
requires:
  - phase: 04-chart-polish-and-bug-fixes
    provides: "formatCurrency(amount, currency?, locale?) with defensive locale guard"
provides:
  - "Custom Recharts Tooltip on ExpenseBreakdown pie chart showing category name + formatted currency"
  - "Custom Recharts Tooltip on AvailableBalance donut chart showing segment name + formatted currency"
  - "AvailableBalance center text locale-aware via locale prop"
  - "DashboardPage threads user.preferred_locale from useAuth to both chart components"
affects: [future-chart-components, locale-threading]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "Custom Recharts Tooltip via content prop with shadcn design-token styling (bg-background, border-border/50, shadow-xl)"
    - "Locale threaded from useAuth() in page component down to leaf chart components as optional prop with 'en' default"

key-files:
  created: []
  modified:
    - frontend/src/components/ExpenseBreakdown.tsx
    - frontend/src/components/AvailableBalance.tsx
    - frontend/src/pages/DashboardPage.tsx
    - frontend/src/pages/DashboardPage.test.tsx

key-decisions:
  - "Custom Tooltip content renderer replicates ChartTooltipContent styling without importing shadcn source — aligned with project rule forbidding edits to src/components/ui/"
  - "useAuth() called in DashboardPage is idempotent — reads from same React state as App.tsx, no double-fetch"
  - "Locale threading scoped to chart components only in this plan — table components (BillsTracker, etc.) use 'en' default from formatCurrency, full threading deferred"
  - "DashboardPage.test.tsx mocks useAuth to prevent i18n initReactI18next import error triggered by new useAuth dependency"

patterns-established:
  - "Pattern: locale prop on chart components is optional with 'en' default — callers that don't have locale context still work"

requirements-completed: [IXTN-04]

# Metrics
duration: 10min
completed: 2026-03-12
---

# Phase 4 Plan 02: Chart Tooltip Currency Formatting Summary

**Custom Recharts tooltips on both charts show locale-aware formatted currency, with user.preferred_locale threaded from useAuth through DashboardPage**

## Performance

- **Duration:** 10 min
- **Started:** 2026-03-12T09:25:00Z
- **Completed:** 2026-03-12T09:35:00Z
- **Tasks:** 2
- **Files modified:** 4

## Accomplishments
- ExpenseBreakdown pie chart replaces bare `<Tooltip />` with custom content renderer showing category name and formatCurrency-formatted value
- AvailableBalance donut chart gains a Tooltip for the first time, using same custom renderer pattern; center text also receives locale
- DashboardPage imports useAuth, derives userLocale with fallback to 'en', and passes it as locale prop to both chart components

## Task Commits

Each task was committed atomically:

1. **Task 1: Add locale prop and custom Tooltip to both chart components** - `f141c4f` (feat)
2. **Task 2: Thread user locale from useAuth through DashboardPage to chart components** - `5a70899` (feat)

**Plan metadata:** (docs commit — see final_commit)

## Files Created/Modified
- `frontend/src/components/ExpenseBreakdown.tsx` - Added locale prop, formatCurrency import, custom Tooltip content renderer
- `frontend/src/components/AvailableBalance.tsx` - Added locale prop, Tooltip import, custom Tooltip content renderer, locale passed to center text formatCurrency
- `frontend/src/pages/DashboardPage.tsx` - Added useAuth import, userLocale derivation, locale prop passed to AvailableBalance and ExpenseBreakdown
- `frontend/src/pages/DashboardPage.test.tsx` - Added useAuth mock to prevent i18n initReactI18next error

## Decisions Made
- Custom Tooltip uses shadcn CSS variable classes (bg-background, border-border/50, shadow-xl) rather than importing ChartTooltipContent — aligns with project rule against editing ui/ source files
- Locale threading scoped to chart components only — table components already have 'en' default via formatCurrency, full threading deferred per plan spec
- DashboardPage.test.tsx required a useAuth mock because useAuth imports @/i18n which calls i18n.use(initReactI18next) — the existing react-i18next mock did not export initReactI18next

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] DashboardPage test broken by new useAuth import**
- **Found during:** Task 2 (Thread user locale from useAuth through DashboardPage)
- **Issue:** Adding `useAuth` to DashboardPage caused the test file to fail with "No initReactI18next export defined on react-i18next mock" — because useAuth transitively imports @/i18n which calls i18n.use(initReactI18next)
- **Fix:** Added `vi.mock('@/hooks/useAuth', ...)` to DashboardPage.test.tsx, returning a user with preferred_locale: 'en'
- **Files modified:** frontend/src/pages/DashboardPage.test.tsx
- **Verification:** Full test suite passes (51 tests), production build succeeds with no TypeScript errors
- **Committed in:** `5a70899` (Task 2 commit)

---

**Total deviations:** 1 auto-fixed (Rule 1 - bug introduced by task change)
**Impact on plan:** Auto-fix was necessary to restore test suite. No scope creep.

## Issues Encountered
None beyond the auto-fixed test breakage above.

## User Setup Required
None - no external service configuration required.

## Next Phase Readiness
- Both chart components now display locale-aware currency tooltips
- Locale threading pattern established: page-level useAuth() call + optional locale prop with 'en' default
- Ready to extend locale threading to table components if desired in a future plan

---
*Phase: 04-chart-polish-and-bug-fixes*
*Completed: 2026-03-12*