diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index 06f3a53..43c3dee 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -34,7 +34,7 @@ Requirements for this milestone. Each maps to roadmap phases. - [x] **IXTN-01**: Form submit buttons show a spinner during async operations (login, register, budget create/edit) - [x] **IXTN-02**: Inline-editable rows show a pencil icon on hover as an edit affordance - [x] **IXTN-03**: Inline edit saves show a brief visual confirmation (row background flash) -- [ ] **IXTN-04**: Chart tooltips display values formatted with the budget's currency +- [x] **IXTN-04**: Chart tooltips display values formatted with the budget's currency - [x] **IXTN-05**: Category deletion triggers a confirmation dialog before executing ### Empty & Loading States @@ -110,7 +110,7 @@ Which phases cover which requirements. Updated during roadmap creation. | STATE-01 | Phase 3 | Complete | | STATE-02 | Phase 3 | Complete | | STATE-03 | Phase 3 | Complete | -| IXTN-04 | Phase 4 | Pending | +| IXTN-04 | Phase 4 | Complete | | FIX-01 | Phase 4 | Complete | **Coverage:** diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 13a71ba..8e142d9 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -15,7 +15,7 @@ Decimal phases appear between their surrounding integers in numeric order. - [x] **Phase 1: Design Token Foundation** - Establish the pastel CSS variable system and semantic color tokens that all subsequent phases depend on (completed 2026-03-11) - [ ] **Phase 2: Layout and Brand Identity** - Polish the surfaces users see on every page load — login, sidebar, card headers, typography - [ ] **Phase 3: Interaction Quality and Completeness** - Add loading, empty, and error states plus inline edit affordances to eliminate the "unfinished" feeling -- [ ] **Phase 4: Chart Polish and Bug Fixes** - Finalize chart styling with semantic colors, formatted tooltips, and fix the currency locale bug +- [x] **Phase 4: Chart Polish and Bug Fixes** - Finalize chart styling with semantic colors, formatted tooltips, and fix the currency locale bug (completed 2026-03-12) ## Phase Details @@ -74,7 +74,7 @@ Plans: 1. All chart fills (donut slices, bar segments) use the semantic category colors from `lib/palette.ts` — "Bills" is the same color in the donut chart as it is in the FinancialOverview table 2. Chart tooltips display values formatted with the budget's currency (e.g., "1,234.56" not "1234.56") 3. The `formatCurrency` function uses the user's locale preference from their settings instead of the hardcoded `de-DE` — an English-locale user sees their numbers formatted correctly -**Plans:** 1/2 plans executed +**Plans:** 2/2 plans complete Plans: - [ ] 04-01-PLAN.md — TDD: formatCurrency locale parameter fix (FIX-01) - [ ] 04-02-PLAN.md — Chart tooltip wiring and locale threading (IXTN-04) @@ -89,4 +89,4 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4 | 1. Design Token Foundation | 2/2 | Complete | 2026-03-11 | | 2. Layout and Brand Identity | 0/2 | In progress | - | | 3. Interaction Quality and Completeness | 0/4 | Not started | - | -| 4. Chart Polish and Bug Fixes | 1/2 | In Progress| | +| 4. Chart Polish and Bug Fixes | 2/2 | Complete | 2026-03-12 | diff --git a/.planning/STATE.md b/.planning/STATE.md index 91835bd..e04f382 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -3,14 +3,14 @@ gsd_state_version: 1.0 milestone: v1.0 milestone_name: milestone status: planning -stopped_at: Completed 04-01-PLAN.md -last_updated: "2026-03-12T08:24:41.212Z" +stopped_at: Completed 04-02-PLAN.md +last_updated: "2026-03-12T08:28:10.884Z" last_activity: 2026-03-11 — Roadmap created from requirements and research progress: total_phases: 4 - completed_phases: 3 + completed_phases: 4 total_plans: 10 - completed_plans: 9 + completed_plans: 10 percent: 0 --- @@ -59,6 +59,7 @@ Progress: [░░░░░░░░░░] 0% | Phase 03-interaction-quality-and-completeness P02 | 5 | 2 tasks | 3 files | | Phase 03-interaction-quality-and-completeness P03 | 5 | 2 tasks | 4 files | | Phase 04-chart-polish-and-bug-fixes P01 | 1 | 2 tasks | 2 files | +| Phase 04-chart-polish-and-bug-fixes P02 | 10 | 2 tasks | 4 files | ## Accumulated Context @@ -90,6 +91,8 @@ Recent decisions affecting current work: - [Phase 03-interaction-quality-and-completeness]: Empty tracker sections show tinted skeleton card (not null) — section always visible with palette-tinted placeholders when no items exist - [Phase 04-chart-polish-and-bug-fixes]: formatCurrency third parameter defaults to 'en', replacing hardcoded 'de-DE' — all existing 2-arg call sites now produce English formatting (FIX-01) - [Phase 04-chart-polish-and-bug-fixes]: Defensive locale || 'en' guard in formatCurrency prevents RangeError when empty string is passed +- [Phase 04-chart-polish-and-bug-fixes]: Custom Tooltip content renderer replicates ChartTooltipContent styling without importing shadcn source — aligned with project rule forbidding edits to src/components/ui/ +- [Phase 04-chart-polish-and-bug-fixes]: DashboardPage.test.tsx mocks useAuth to prevent i18n initReactI18next import error triggered by new useAuth dependency ### Pending Todos @@ -102,6 +105,6 @@ None yet. ## Session Continuity -Last session: 2026-03-12T08:24:41.210Z -Stopped at: Completed 04-01-PLAN.md +Last session: 2026-03-12T08:28:10.883Z +Stopped at: Completed 04-02-PLAN.md Resume file: None diff --git a/.planning/config.json b/.planning/config.json index 578f403..ca67cff 100644 --- a/.planning/config.json +++ b/.planning/config.json @@ -9,6 +9,6 @@ "plan_check": true, "verifier": true, "nyquist_validation": true, - "_auto_chain_active": false + "_auto_chain_active": true } } \ No newline at end of file diff --git a/.planning/phases/04-chart-polish-and-bug-fixes/04-02-SUMMARY.md b/.planning/phases/04-chart-polish-and-bug-fixes/04-02-SUMMARY.md new file mode 100644 index 0000000..9459725 --- /dev/null +++ b/.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 `` 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*