docs(04-02): complete chart tooltip currency formatting plan

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.planning/phases/04-chart-polish-and-bug-fixes/04-02-SUMMARY.md

@@ -0,0 +1,116 @@
+---
+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*