75 lines
3.5 KiB
Markdown
75 lines
3.5 KiB
Markdown
---
|
|
phase: 07-setup-wizard
|
|
plan: 02
|
|
subsystem: frontend/setup-wizard
|
|
tags: [wizard, completion, routing, first-run-redirect]
|
|
dependency_graph:
|
|
requires: [src/hooks/useWizardState.ts, src/hooks/useCategories.ts, src/hooks/useTemplate.ts, src/hooks/useFirstRunState.ts, src/data/presets.ts]
|
|
provides: [src/components/setup/ReviewStep.tsx, /setup route, first-run redirect]
|
|
affects: [src/pages/SetupPage.tsx, src/App.tsx, src/pages/DashboardPage.tsx]
|
|
tech_stack:
|
|
added: []
|
|
patterns: [wizard-completion-flow, category-dedup-on-constraint, query-invalidation-before-redirect]
|
|
key_files:
|
|
created:
|
|
- src/components/setup/ReviewStep.tsx
|
|
modified:
|
|
- src/pages/SetupPage.tsx
|
|
- src/App.tsx
|
|
- src/pages/DashboardPage.tsx
|
|
decisions:
|
|
- "Moved hook calls above early returns in DashboardPage to comply with React rules of hooks"
|
|
- "Skip on step 3 calls same handleSkipSetup as global skip (per UI-SPEC)"
|
|
metrics:
|
|
duration: 145s
|
|
completed: 2026-04-20T19:10:45Z
|
|
tasks_completed: 2
|
|
tasks_total: 2
|
|
files_created: 1
|
|
files_modified: 3
|
|
---
|
|
|
|
# Phase 07 Plan 02: Setup Wizard Completion and Routing Summary
|
|
|
|
ReviewStep with grouped read-only summary, wizard completion logic (category + template item creation with duplicate handling), skip flow, /setup route registration, and first-run redirect from dashboard.
|
|
|
|
## Commits
|
|
|
|
| Task | Commit | Description |
|
|
|------|--------|-------------|
|
|
| 1 | 396d342 | ReviewStep component and wizard completion/skip logic |
|
|
| 2 | 6b75f14 | Register /setup route and add first-run redirect |
|
|
|
|
## What Was Built
|
|
|
|
1. **ReviewStep** - Read-only summary component showing income, grouped checked items by category type, total expenses, and remaining balance. Uses Intl.NumberFormat for currency formatting. Remaining is colored green (text-on-budget) when positive, red (text-destructive) when negative.
|
|
|
|
2. **Wizard Completion Logic** - handleComplete creates one category per needed type (handles 23505 duplicate constraint), creates template items for all checked presets, marks profiles.setup_completed=true, clears localStorage wizard state, invalidates React Query cache, shows toast, and redirects to dashboard.
|
|
|
|
3. **Skip Flow** - handleSkipSetup clears localStorage, marks setup_completed=true without creating any data, and redirects to dashboard.
|
|
|
|
4. **Double-submit Prevention** - `completing` state disables all buttons during API calls (T-07-04 mitigation).
|
|
|
|
5. **/setup Route** - Registered in App.tsx as a protected standalone page (inside ProtectedRoute, outside AppLayout). Unauthenticated users are redirected to /login (T-07-06 mitigation).
|
|
|
|
6. **First-run Redirect** - DashboardPage uses useFirstRunState to detect users with no categories/template items and redirects them to /setup. Shows DashboardSkeleton during loading.
|
|
|
|
7. **Redirect Loop Prevention** - Query invalidation for ["categories"] and ["template-items"] after completion ensures useFirstRunState reads fresh data showing isFirstRun=false (T-07-07 mitigation).
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [Rule 1 - Bug] Fixed React hooks rule violation in DashboardPage**
|
|
- **Found during:** Task 2
|
|
- **Issue:** Plan instructed placing early returns before useMonthParam/useBudgets calls, which violates React rules of hooks (hooks cannot be called conditionally)
|
|
- **Fix:** Moved all hook calls (useMonthParam, useBudgets, useMemo) above the early return statements
|
|
- **Files modified:** src/pages/DashboardPage.tsx
|
|
- **Commit:** 6b75f14
|
|
|
|
## Known Stubs
|
|
|
|
None - all stubs from Plan 01 have been resolved.
|
|
|
|
## Self-Check: PASSED
|