diff --git a/.planning/phases/07-setup-wizard/07-01-SUMMARY.md b/.planning/phases/07-setup-wizard/07-01-SUMMARY.md new file mode 100644 index 0000000..c606119 --- /dev/null +++ b/.planning/phases/07-setup-wizard/07-01-SUMMARY.md @@ -0,0 +1,86 @@ +--- +phase: 07-setup-wizard +plan: 01 +subsystem: frontend/setup-wizard +tags: [wizard, ui, state-management, i18n] +dependency_graph: + requires: [src/data/presets.ts, src/lib/types.ts, src/hooks/useAuth.ts] + provides: [src/hooks/useWizardState.ts, src/pages/SetupPage.tsx, src/components/setup/*] + affects: [src/i18n/en.json, src/i18n/de.json] +tech_stack: + added: [shadcn/checkbox] + patterns: [localStorage-synced-state, multi-step-wizard, grouped-preset-checklist] +key_files: + created: + - src/hooks/useWizardState.ts + - src/components/setup/WizardStepper.tsx + - src/components/setup/IncomeStep.tsx + - src/components/setup/AllocationBar.tsx + - src/components/setup/CategoryGroupHeader.tsx + - src/components/setup/PresetItemRow.tsx + - src/components/setup/RecurringItemsStep.tsx + - src/pages/SetupPage.tsx + - src/components/ui/checkbox.tsx + modified: + - src/i18n/en.json + - src/i18n/de.json +decisions: + - "Profile fetched inline in SetupPage (same pattern as SettingsPage) since useAuth does not expose profile" + - "Used manual reduce for grouping PRESETS by type for broad browser compatibility" +metrics: + duration: 178s + completed: 2026-04-20T19:06:36Z + tasks_completed: 2 + tasks_total: 2 + files_created: 9 + files_modified: 2 +--- + +# Phase 07 Plan 01: Setup Wizard UI Shell Summary + +LocalStorage-synced 3-step wizard with income input, grouped preset checklist (19 items), live allocation bar, and horizontal stepper navigation. + +## Commits + +| Task | Commit | Description | +|------|--------|-------------| +| 1 | bbcb07f | useWizardState hook, i18n keys (EN+DE), shadcn checkbox | +| 2 | e141197 | All 7 wizard UI components and SetupPage orchestrator | + +## What Was Built + +1. **useWizardState hook** - Manages wizard step, income, and item selections in localStorage keyed by userId. Validates JSON shape on load (T-07-01 mitigation). Bills and variable_expense items pre-checked by default. + +2. **WizardStepper** - Horizontal 1-2-3 stepper with circles, connector lines, and step labels. Completed steps are clickable; future steps are disabled. + +3. **IncomeStep** - Number input pre-filled with 3000, currency suffix from profile, helper text, and inline validation error display. + +4. **AllocationBar** - Sticky bar showing remaining = income - sum(checked amounts). Green when positive, red (destructive) when negative. aria-live="polite" for screen readers. + +5. **CategoryGroupHeader** - Colored dot + label + item count for each of the 6 category types. + +6. **PresetItemRow** - Checkbox + preset name (i18n) + category badge with colored border + editable amount input (disabled when unchecked). + +7. **RecurringItemsStep** - Groups all 19 PRESETS into 6 category sections with AllocationBar at top. + +8. **SetupPage** - Page orchestrator: centered card layout (max-w-2xl), loads profile for currency, renders stepper + active step, handles Next/Back/Skip navigation with income validation. + +## i18n + +All wizard copy added under `setup.*` namespace in both `en.json` and `de.json` (35 keys each). German translations use proper umlauts and natural phrasing. + +## Deviations from Plan + +None - plan executed exactly as written. + +## Known Stubs + +| File | Line | Stub | Reason | +|------|------|------|--------| +| src/pages/SetupPage.tsx | Step 3 content | "Review step coming in next plan" placeholder | Plan 02 will implement ReviewStep and completion logic | +| src/pages/SetupPage.tsx | Skip setup button | No-op onClick | Plan 02 will wire skip to mark setup_completed and redirect | +| src/pages/SetupPage.tsx | Complete button | Disabled, no handler | Plan 02 will implement completion sequence | + +These stubs are intentional -- Plan 02 explicitly owns the ReviewStep, completion logic, routing, and redirect. + +## Self-Check: PASSED