docs(07-01): complete setup wizard UI shell plan
- SUMMARY.md with all task commits, decisions, and known stubs
This commit is contained in:
86
.planning/phases/07-setup-wizard/07-01-SUMMARY.md
Normal file
86
.planning/phases/07-setup-wizard/07-01-SUMMARY.md
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user