docs: create milestone v2.0 roadmap (5 phases)
This commit is contained in:
@@ -77,29 +77,29 @@ Which phases cover which requirements. Updated during roadmap creation.
|
|||||||
|
|
||||||
| Requirement | Phase | Status |
|
| Requirement | Phase | Status |
|
||||||
|-------------|-------|--------|
|
|-------------|-------|--------|
|
||||||
| DS-01 | — | Pending |
|
| DS-01 | Phase 5 | Pending |
|
||||||
| DS-02 | — | Pending |
|
| DS-02 | Phase 5 | Pending |
|
||||||
| DS-03 | — | Pending |
|
| DS-03 | Phase 5 | Pending |
|
||||||
| SETUP-01 | — | Pending |
|
| SETUP-01 | Phase 6, 7 | Pending |
|
||||||
| SETUP-02 | — | Pending |
|
| SETUP-02 | Phase 6, 7 | Pending |
|
||||||
| SETUP-03 | — | Pending |
|
| SETUP-03 | Phase 7 | Pending |
|
||||||
| SETUP-04 | — | Pending |
|
| SETUP-04 | Phase 7 | Pending |
|
||||||
| SETUP-05 | — | Pending |
|
| SETUP-05 | Phase 7 | Pending |
|
||||||
| AUTO-01 | — | Pending |
|
| AUTO-01 | Phase 6, 8 | Pending |
|
||||||
| AUTO-02 | — | Pending |
|
| AUTO-02 | Phase 8 | Pending |
|
||||||
| AUTO-03 | — | Pending |
|
| AUTO-03 | Phase 6, 8 | Pending |
|
||||||
| BV-01 | — | Pending |
|
| BV-01 | Phase 9 | Pending |
|
||||||
| BV-02 | — | Pending |
|
| BV-02 | Phase 9 | Pending |
|
||||||
| BV-03 | — | Pending |
|
| BV-03 | Phase 9 | Pending |
|
||||||
| DASH-01 | — | Pending |
|
| DASH-01 | Phase 9 | Pending |
|
||||||
| DASH-02 | — | Pending |
|
| DASH-02 | Phase 9 | Pending |
|
||||||
| DASH-03 | — | Pending |
|
| DASH-03 | Phase 9 | Pending |
|
||||||
|
|
||||||
**Coverage:**
|
**Coverage:**
|
||||||
- v2.0 requirements: 17 total
|
- v2.0 requirements: 17 total
|
||||||
- Mapped to phases: 0
|
- Mapped to phases: 17
|
||||||
- Unmapped: 17 ⚠️
|
- Unmapped: 0 ✓
|
||||||
|
|
||||||
---
|
---
|
||||||
*Requirements defined: 2026-04-02*
|
*Requirements defined: 2026-04-02*
|
||||||
*Last updated: 2026-04-02 after initial definition*
|
*Last updated: 2026-04-02 after v2.0 roadmap creation*
|
||||||
|
|||||||
116
.planning/ROADMAP.md
Normal file
116
.planning/ROADMAP.md
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
# Roadmap: SimpleFinanceDash v2.0 — UX Simplification & Design Rework
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This milestone transforms SimpleFinanceDash from a visually polished but cognitively complex app into a guided, intuitive budgeting experience. Work flows from a global design token rework (sharp edges, clearer pastels) through data safety foundations, a wizard-driven first-run setup, automatic budget creation, and finally a simplified budget view with inline item adding. Every phase delivers a coherent, verifiable capability on top of the fully working v1.0 baseline.
|
||||||
|
|
||||||
|
## Phases
|
||||||
|
|
||||||
|
**Phase Numbering:**
|
||||||
|
- Integer phases (5-9): v2.0 milestone work, continuing from v1.0's Phase 4
|
||||||
|
- Decimal phases: Urgent insertions if needed (marked INSERTED)
|
||||||
|
|
||||||
|
Decimal phases appear between their surrounding integers in numeric order.
|
||||||
|
|
||||||
|
- [ ] **Phase 5: Design System Token Rework** - Replace rounded corners with sharp edges and refine OKLCH pastel tokens across all 9 pages
|
||||||
|
- [ ] **Phase 6: Preset Data, First-Run Detection, and DB Safety** - Seed preset library, build first-run hook, and add DB uniqueness constraints that protect against duplicate data
|
||||||
|
- [ ] **Phase 7: Setup Wizard** - 3-step first-run wizard with income, pre-filled recurring items, and review — skippable, state-persisted, bilingual
|
||||||
|
- [ ] **Phase 8: Auto-Budget Creation** - Auto-create current month's budget from template on dashboard visit, with correct currency and first-creation toast
|
||||||
|
- [ ] **Phase 9: Inline Add and Dashboard Simplification** - Replace Quick Add page with inline Sheet panel, simplify dashboard to at-a-glance view, add empty states
|
||||||
|
|
||||||
|
## Phase Details
|
||||||
|
|
||||||
|
### Phase 5: Design System Token Rework
|
||||||
|
**Goal**: Users see a sharp, minimal, clearly pastel UI across every page — the visual foundation that all subsequent phases build on
|
||||||
|
**Depends on**: Phase 4 (v1.0 complete)
|
||||||
|
**Requirements**: DS-01, DS-02, DS-03
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. Every rounded element across all 9 pages has sharp corners — no pill buttons, no rounded cards, no rounded inputs visible anywhere in the app
|
||||||
|
2. Category color swatches are visibly colorful against white backgrounds — not washed-out or grey-tinted — and still pass WCAG 4.5:1 contrast for text
|
||||||
|
3. Page layouts feel uncluttered — content sections have consistent whitespace gaps and no visual crowding between cards or sections
|
||||||
|
4. A full visual pass of all 9 pages (Dashboard, Budget List, Budget Detail, Template, Categories, Quick Add, Settings, Login, Register) confirms no regressions from token changes
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 6: Preset Data, First-Run Detection, and DB Safety
|
||||||
|
**Goal**: The data layer is safe and ready — duplicate budget/category writes are impossible at the DB level, and the app correctly identifies first-run users
|
||||||
|
**Depends on**: Phase 5
|
||||||
|
**Requirements**: AUTO-01, AUTO-03, SETUP-01, SETUP-02
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. Attempting to create two budgets for the same user and month is rejected at the DB level (unique constraint on `budgets(user_id, start_date)`)
|
||||||
|
2. Attempting to create two categories with the same name for the same user is rejected at the DB level (unique constraint on `categories(user_id, name)`)
|
||||||
|
3. All existing v1.0 users have `profiles.setup_completed = true` after the backfill migration runs — they will not be shown the wizard on their next login
|
||||||
|
4. `useFirstRunState` hook returns `true` only for users with zero categories or zero template items — returning `false` for any user with existing data
|
||||||
|
5. `src/data/presets.ts` contains ~15-20 curated budget items with sensible default amounts, grouped by category type, with both English and German i18n translation keys defined
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 7: Setup Wizard
|
||||||
|
**Goal**: A new user can set up their budget template in under 3 minutes by following a guided 3-step wizard with pre-filled common items and a live running balance
|
||||||
|
**Depends on**: Phase 6
|
||||||
|
**Requirements**: SETUP-01, SETUP-02, SETUP-03, SETUP-04, SETUP-05
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. A new user (zero categories, zero template items) is automatically redirected to `/setup` on their first login and sees a 3-step wizard: income entry, recurring items selection, and review
|
||||||
|
2. The recurring items step shows ~15-20 pre-filled common items (rent, groceries, car insurance, utilities, etc.) with editable default amounts — user can check or uncheck each
|
||||||
|
3. A "remaining to allocate" balance updates live as items are checked or unchecked in step 2, showing income minus the sum of selected item amounts
|
||||||
|
4. User can click "Skip" on any individual step or "Skip setup" to exit the wizard entirely without creating any data — and lands on the dashboard
|
||||||
|
5. Completing the wizard creates a populated template from selected items — user lands on the dashboard with their template in place, and refreshing the browser mid-wizard restores the wizard at the correct step
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 8: Auto-Budget Creation
|
||||||
|
**Goal**: Users never manually trigger budget creation — visiting a month for the first time automatically creates their budget from the template, silently and correctly
|
||||||
|
**Depends on**: Phase 7
|
||||||
|
**Requirements**: AUTO-01, AUTO-02, AUTO-03
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. Navigating to the dashboard for a month that has no budget (but a populated template) creates the budget automatically — no button click or prompt required
|
||||||
|
2. The first time a budget is auto-created in a session, a toast notification appears naming the month and indicating it was created from the template — subsequent months are created silently
|
||||||
|
3. The auto-created budget uses the user's configured currency from their profile settings, not a hardcoded default
|
||||||
|
4. Rapidly navigating between months or opening the dashboard in two tabs does not produce duplicate budget rows
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 9: Inline Add and Dashboard Simplification
|
||||||
|
**Goal**: Users add one-off items to their budget directly from the budget view, the Quick Add page is gone, and the dashboard shows this month's data at a glance without chart overload
|
||||||
|
**Depends on**: Phase 8
|
||||||
|
**Requirements**: BV-01, BV-02, BV-03, DASH-01, DASH-02, DASH-03
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. An "Add item" control on the budget detail page opens a Sheet panel showing the category library — user selects a category, enters an amount, and the item appears in the budget without a page navigation
|
||||||
|
2. The Quick Add page is removed from the sidebar navigation — visiting `/quick-add` redirects to `/budgets` instead of showing an error
|
||||||
|
3. The dashboard displays this month's summary cards (income, expenses, balance) with correct totals that match what the user entered in the budget detail page
|
||||||
|
4. The dashboard does not show the 3-column chart grid by default — the primary view is the at-a-glance summary and collapsible category sections
|
||||||
|
5. Empty template, empty dashboard, and empty budget view each show a clear empty state with a visible call-to-action guiding the user to the next step
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
## Requirements Traceability
|
||||||
|
|
||||||
|
| Requirement | Phase | Status |
|
||||||
|
|-------------|-------|--------|
|
||||||
|
| DS-01 | Phase 5 | Pending |
|
||||||
|
| DS-02 | Phase 5 | Pending |
|
||||||
|
| DS-03 | Phase 5 | Pending |
|
||||||
|
| SETUP-01 | Phase 6, 7 | Pending |
|
||||||
|
| SETUP-02 | Phase 6, 7 | Pending |
|
||||||
|
| SETUP-03 | Phase 7 | Pending |
|
||||||
|
| SETUP-04 | Phase 7 | Pending |
|
||||||
|
| SETUP-05 | Phase 7 | Pending |
|
||||||
|
| AUTO-01 | Phase 6, 8 | Pending |
|
||||||
|
| AUTO-02 | Phase 8 | Pending |
|
||||||
|
| AUTO-03 | Phase 6, 8 | Pending |
|
||||||
|
| BV-01 | Phase 9 | Pending |
|
||||||
|
| BV-02 | Phase 9 | Pending |
|
||||||
|
| BV-03 | Phase 9 | Pending |
|
||||||
|
| DASH-01 | Phase 9 | Pending |
|
||||||
|
| DASH-02 | Phase 9 | Pending |
|
||||||
|
| DASH-03 | Phase 9 | Pending |
|
||||||
|
|
||||||
|
**Coverage: 17/17 v2.0 requirements mapped. No orphans.**
|
||||||
|
|
||||||
|
## Progress
|
||||||
|
|
||||||
|
**Execution Order:**
|
||||||
|
Phases execute in numeric order: 5 → 6 → 7 → 8 → 9
|
||||||
|
|
||||||
|
| Phase | Plans Complete | Status | Completed |
|
||||||
|
|-------|----------------|--------|-----------|
|
||||||
|
| 5. Design System Token Rework | 0/? | Not started | - |
|
||||||
|
| 6. Preset Data, First-Run Detection, DB Safety | 0/? | Not started | - |
|
||||||
|
| 7. Setup Wizard | 0/? | Not started | - |
|
||||||
|
| 8. Auto-Budget Creation | 0/? | Not started | - |
|
||||||
|
| 9. Inline Add and Dashboard Simplification | 0/? | Not started | - |
|
||||||
@@ -2,12 +2,12 @@
|
|||||||
gsd_state_version: 1.0
|
gsd_state_version: 1.0
|
||||||
milestone: v2.0
|
milestone: v2.0
|
||||||
milestone_name: UX Simplification & Design Rework
|
milestone_name: UX Simplification & Design Rework
|
||||||
status: planning
|
status: ready_to_plan
|
||||||
stopped_at: null
|
stopped_at: null
|
||||||
last_updated: "2026-04-02T00:00:00.000Z"
|
last_updated: "2026-04-02T00:00:00.000Z"
|
||||||
last_activity: 2026-04-02
|
last_activity: 2026-04-02
|
||||||
progress:
|
progress:
|
||||||
total_phases: 0
|
total_phases: 5
|
||||||
completed_phases: 0
|
completed_phases: 0
|
||||||
total_plans: 0
|
total_plans: 0
|
||||||
completed_plans: 0
|
completed_plans: 0
|
||||||
@@ -21,47 +21,38 @@ progress:
|
|||||||
See: .planning/PROJECT.md (updated 2026-04-02)
|
See: .planning/PROJECT.md (updated 2026-04-02)
|
||||||
|
|
||||||
**Core value:** Opening the app should feel like opening a beautifully designed personal spreadsheet — clean pastel colors, clear data layout, approachable and visually delightful. The UI IS the product.
|
**Core value:** Opening the app should feel like opening a beautifully designed personal spreadsheet — clean pastel colors, clear data layout, approachable and visually delightful. The UI IS the product.
|
||||||
**Current focus:** Defining requirements for v2.0
|
**Current focus:** Phase 5 — Design System Token Rework
|
||||||
|
|
||||||
## Current Position
|
## Current Position
|
||||||
|
|
||||||
Phase: Not started (defining requirements)
|
Phase: 5 of 9 overall (1 of 5 in v2.0)
|
||||||
Plan: —
|
Plan: Not started
|
||||||
Status: Defining requirements
|
Status: Ready to plan
|
||||||
Last activity: 2026-04-02 — Milestone v2.0 started
|
Last activity: 2026-04-02 — v2.0 roadmap created, 5 phases defined
|
||||||
|
|
||||||
Progress: [░░░░░░░░░░░░░░░░░░░░] 0/0 plans (0%)
|
Progress: [░░░░░░░░░░░░░░░░░░░░] 0/? plans (0%)
|
||||||
|
|
||||||
## Performance Metrics
|
## Performance Metrics
|
||||||
|
|
||||||
**Velocity:**
|
**Velocity (v1.0 baseline):**
|
||||||
|
- Total plans completed (v1.0): 10
|
||||||
|
- Average duration: ~2.4 min/plan
|
||||||
|
- Total execution time: ~24 min
|
||||||
|
|
||||||
- Total plans completed: 0
|
**By Phase (v1.0):**
|
||||||
- Average duration: -
|
|
||||||
- Total execution time: 0 hours
|
|
||||||
|
|
||||||
**By Phase:**
|
|
||||||
|
|
||||||
| Phase | Plans | Total | Avg/Plan |
|
| Phase | Plans | Total | Avg/Plan |
|
||||||
|-------|-------|-------|----------|
|
|-------|-------|-------|----------|
|
||||||
| - | - | - | - |
|
| 01 Design Foundation | 2 | ~5 min | 2.5 min |
|
||||||
|
| 02 Dashboard Charts | 3 | ~7 min | 2.3 min |
|
||||||
**Recent Trend:**
|
| 03 Collapsible Sections | 2 | ~4 min | 2 min |
|
||||||
|
| 04 Full-App Consistency | 3 | ~7 min | 2.3 min |
|
||||||
|
|
||||||
|
**v2.0 Trend:**
|
||||||
- Last 5 plans: -
|
- Last 5 plans: -
|
||||||
- Trend: -
|
- Trend: -
|
||||||
|
|
||||||
*Updated after each plan completion*
|
*Updated after each plan completion*
|
||||||
| Phase 01 P01 | 3min | 2 tasks | 5 files |
|
|
||||||
| Phase 01 P02 | 2min | 2 tasks | 5 files |
|
|
||||||
| Phase 02 P02 | 2min | 2 tasks | 4 files |
|
|
||||||
| Phase 02 P01 | 2min | 2 tasks | 4 files |
|
|
||||||
| Phase 02-dashboard-charts-and-layout P03 | 3min | 2 tasks | 2 files |
|
|
||||||
| Phase 03-collapsible-dashboard-sections P01 | 2min | 2 tasks | 8 files |
|
|
||||||
| Phase 03-collapsible-dashboard-sections P02 | 2min | 1 tasks | 2 files |
|
|
||||||
| Phase 04-full-app-design-consistency P01 | 2min | 2 tasks | 4 files |
|
|
||||||
| Phase 04-full-app-design-consistency P02 | 3min | 2 tasks | 4 files |
|
|
||||||
| Phase 04-full-app-design-consistency P03 | 2min | 2 tasks | 4 files |
|
|
||||||
|
|
||||||
## Accumulated Context
|
## Accumulated Context
|
||||||
|
|
||||||
@@ -70,30 +61,9 @@ Progress: [░░░░░░░░░░░░░░░░░░░░] 0/0 pla
|
|||||||
Decisions are logged in PROJECT.md Key Decisions table.
|
Decisions are logged in PROJECT.md Key Decisions table.
|
||||||
Recent decisions affecting current work:
|
Recent decisions affecting current work:
|
||||||
|
|
||||||
- [Roadmap]: 4-phase structure derived from research — foundation before features, dashboard before other pages, charts before collapsibles
|
- [Roadmap v2.0]: 5-phase structure — tokens first (global scope), DB safety before UI writes, wizard before auto-budget, auto-budget before inline add
|
||||||
- [Roadmap]: All research flags set to NO — no `/gsd:research-phase` needed before any phase
|
- [Roadmap v2.0]: Phase 6 kept separate from Phase 7 — DB constraints and backfill migration must land before any wizard UI to prevent data corruption
|
||||||
- [Phase 01]: Applied Recharts v3 initialDimension patch on chart.tsx (shadcn-ui/ui#9892)
|
- [Roadmap v2.0]: SETUP-01, SETUP-02, AUTO-01, AUTO-03 split across Phase 6 and Phase 7/8 — Phase 6 provides the prerequisite DB/data layer, later phases deliver user-visible behavior
|
||||||
- [Phase 01]: Category text colors darkened to oklch ~0.55 for WCAG 4.5:1 contrast; chart fills kept lighter at ~0.65-0.70 (two-tier pattern)
|
|
||||||
- [Phase 01]: StatCard uses font-bold (upgraded from font-semibold) for stronger KPI visual weight
|
|
||||||
- [Phase 01]: SummaryStrip accepts t() as prop to stay presentational; DashboardSkeleton mirrors exact grid layout to prevent shift
|
|
||||||
- [Phase 02]: Donut legend placed below chart for better 3-column layout fit
|
|
||||||
- [Phase 02]: ChartEmptyState created in Plan 02 as Rule 3 deviation (blocking dep from Plan 01)
|
|
||||||
- [Phase 02]: MonthNavigator uses Select dropdown for month jump -- consistent with existing form patterns
|
|
||||||
- [Phase 02]: useMonthParam uses useSearchParams callback form to preserve other URL params
|
|
||||||
- [Phase 02-03]: useMemo hooks declared before early returns (Rules of Hooks compliance)
|
|
||||||
- [Phase 02-03]: QuickAdd button placed below chart grid (SummaryStrip -> charts -> QuickAdd ordering)
|
|
||||||
- [Phase 02-03]: Chart grid uses md:grid-cols-2 lg:grid-cols-3 responsive breakpoints
|
|
||||||
- [Phase 03-collapsible-dashboard-sections]: CategorySection uses controlled open/onOpenChange pattern — Plan 02 will own open state in DashboardContent
|
|
||||||
- [Phase 03-collapsible-dashboard-sections]: Direction-aware diff: spending types (bill, variable_expense, debt) over when actual > budgeted; income/saving/investment over when actual < budgeted
|
|
||||||
- [Phase 03-collapsible-dashboard-sections]: CollapsibleContent wired to CSS keyframes via data-[state=open]:animate-collapsible-open Tailwind variant
|
|
||||||
- [Phase 03-collapsible-dashboard-sections]: key prop state reset over useEffect: keying DashboardContent by budgetId causes full remount on month change, cleanly resetting openSections without violating react-hooks linter rules
|
|
||||||
- [Phase 04-full-app-design-consistency]: Inline SVG paths used for Google and GitHub icons — avoids dependency on external icon library while keeping icons fully styled
|
|
||||||
- [Phase 04-full-app-design-consistency]: Auth card accent pattern established: border-t-4 border-t-primary shadow-lg on Card with bg-muted/60 background and favicon.svg logo
|
|
||||||
- [Phase 04-full-app-design-consistency]: TemplatePage uses manual PageShell-mirrored layout (flex flex-col gap-6) instead of PageShell directly — preserves inline-editable TemplateName component
|
|
||||||
- [Phase 04-full-app-design-consistency]: SettingsPage CardHeader and CardTitle removed — PageShell provides page-level title, CardContent gets pt-6 to compensate
|
|
||||||
- [Phase 04-full-app-design-consistency]: Direction-aware diff pattern replicated from CategorySection: SPENDING_TYPES array + isSpendingType() covers all 6 category types correctly
|
|
||||||
- [Phase 04-full-app-design-consistency]: TierBadge column removed from BudgetDetailPage to reduce visual noise and align with CategorySection display style
|
|
||||||
- [Phase 04-full-app-design-consistency]: budgets.month/year/total keys added to en.json and de.json — i18next interpolation pattern for translated total labels
|
|
||||||
|
|
||||||
### Pending Todos
|
### Pending Todos
|
||||||
|
|
||||||
@@ -101,10 +71,11 @@ None yet.
|
|||||||
|
|
||||||
### Blockers/Concerns
|
### Blockers/Concerns
|
||||||
|
|
||||||
- ⚠️ [Phase 02-03] 6 pre-existing lint errors in unrelated files (MonthNavigator.tsx, badge.tsx, button.tsx, sidebar.tsx, useBudgets.ts) — not caused by Phase 2 changes but may affect Phase 3 CI
|
- ⚠️ [Phase 8] Verify `profiles` table currency column name before writing auto-create code — check `supabase/migrations/001_profiles.sql` at planning time (research flagged this)
|
||||||
|
- ⚠️ [Phase 6] `setup_completed` backfill migration must ship before Phase 7 deploys — existing v1.0 users must not see the wizard on first v2.0 login
|
||||||
|
|
||||||
## Session Continuity
|
## Session Continuity
|
||||||
|
|
||||||
Last session: 2026-04-02
|
Last session: 2026-04-02
|
||||||
Stopped at: Milestone v2.0 kickoff — defining requirements
|
Stopped at: Roadmap created — ready to plan Phase 5
|
||||||
Resume file: None
|
Resume file: None
|
||||||
|
|||||||
116
.planning/milestones/v2.0-ROADMAP.md
Normal file
116
.planning/milestones/v2.0-ROADMAP.md
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
# Roadmap: SimpleFinanceDash v2.0 — UX Simplification & Design Rework
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This milestone transforms SimpleFinanceDash from a visually polished but cognitively complex app into a guided, intuitive budgeting experience. Work flows from a global design token rework (sharp edges, clearer pastels) through data safety foundations, a wizard-driven first-run setup, automatic budget creation, and finally a simplified budget view with inline item adding. Every phase delivers a coherent, verifiable capability on top of the fully working v1.0 baseline.
|
||||||
|
|
||||||
|
## Phases
|
||||||
|
|
||||||
|
**Phase Numbering:**
|
||||||
|
- Integer phases (5-9): v2.0 milestone work, continuing from v1.0's Phase 4
|
||||||
|
- Decimal phases: Urgent insertions if needed (marked INSERTED)
|
||||||
|
|
||||||
|
Decimal phases appear between their surrounding integers in numeric order.
|
||||||
|
|
||||||
|
- [ ] **Phase 5: Design System Token Rework** - Replace rounded corners with sharp edges and refine OKLCH pastel tokens across all 9 pages
|
||||||
|
- [ ] **Phase 6: Preset Data, First-Run Detection, and DB Safety** - Seed preset library, build first-run hook, and add DB uniqueness constraints that protect against duplicate data
|
||||||
|
- [ ] **Phase 7: Setup Wizard** - 3-step first-run wizard with income, pre-filled recurring items, and review — skippable, state-persisted, bilingual
|
||||||
|
- [ ] **Phase 8: Auto-Budget Creation** - Auto-create current month's budget from template on dashboard visit, with correct currency and first-creation toast
|
||||||
|
- [ ] **Phase 9: Inline Add and Dashboard Simplification** - Replace Quick Add page with inline Sheet panel, simplify dashboard to at-a-glance view, add empty states
|
||||||
|
|
||||||
|
## Phase Details
|
||||||
|
|
||||||
|
### Phase 5: Design System Token Rework
|
||||||
|
**Goal**: Users see a sharp, minimal, clearly pastel UI across every page — the visual foundation that all subsequent phases build on
|
||||||
|
**Depends on**: Phase 4 (v1.0 complete)
|
||||||
|
**Requirements**: DS-01, DS-02, DS-03
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. Every rounded element across all 9 pages has sharp corners — no pill buttons, no rounded cards, no rounded inputs visible anywhere in the app
|
||||||
|
2. Category color swatches are visibly colorful against white backgrounds — not washed-out or grey-tinted — and still pass WCAG 4.5:1 contrast for text
|
||||||
|
3. Page layouts feel uncluttered — content sections have consistent whitespace gaps and no visual crowding between cards or sections
|
||||||
|
4. A full visual pass of all 9 pages (Dashboard, Budget List, Budget Detail, Template, Categories, Quick Add, Settings, Login, Register) confirms no regressions from token changes
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 6: Preset Data, First-Run Detection, and DB Safety
|
||||||
|
**Goal**: The data layer is safe and ready — duplicate budget/category writes are impossible at the DB level, and the app correctly identifies first-run users
|
||||||
|
**Depends on**: Phase 5
|
||||||
|
**Requirements**: AUTO-01, AUTO-03, SETUP-01, SETUP-02
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. Attempting to create two budgets for the same user and month is rejected at the DB level (unique constraint on `budgets(user_id, start_date)`)
|
||||||
|
2. Attempting to create two categories with the same name for the same user is rejected at the DB level (unique constraint on `categories(user_id, name)`)
|
||||||
|
3. All existing v1.0 users have `profiles.setup_completed = true` after the backfill migration runs — they will not be shown the wizard on their next login
|
||||||
|
4. `useFirstRunState` hook returns `true` only for users with zero categories or zero template items — returning `false` for any user with existing data
|
||||||
|
5. `src/data/presets.ts` contains ~15-20 curated budget items with sensible default amounts, grouped by category type, with both English and German i18n translation keys defined
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 7: Setup Wizard
|
||||||
|
**Goal**: A new user can set up their budget template in under 3 minutes by following a guided 3-step wizard with pre-filled common items and a live running balance
|
||||||
|
**Depends on**: Phase 6
|
||||||
|
**Requirements**: SETUP-01, SETUP-02, SETUP-03, SETUP-04, SETUP-05
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. A new user (zero categories, zero template items) is automatically redirected to `/setup` on their first login and sees a 3-step wizard: income entry, recurring items selection, and review
|
||||||
|
2. The recurring items step shows ~15-20 pre-filled common items (rent, groceries, car insurance, utilities, etc.) with editable default amounts — user can check or uncheck each
|
||||||
|
3. A "remaining to allocate" balance updates live as items are checked or unchecked in step 2, showing income minus the sum of selected item amounts
|
||||||
|
4. User can click "Skip" on any individual step or "Skip setup" to exit the wizard entirely without creating any data — and lands on the dashboard
|
||||||
|
5. Completing the wizard creates a populated template from selected items — user lands on the dashboard with their template in place, and refreshing the browser mid-wizard restores the wizard at the correct step
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 8: Auto-Budget Creation
|
||||||
|
**Goal**: Users never manually trigger budget creation — visiting a month for the first time automatically creates their budget from the template, silently and correctly
|
||||||
|
**Depends on**: Phase 7
|
||||||
|
**Requirements**: AUTO-01, AUTO-02, AUTO-03
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. Navigating to the dashboard for a month that has no budget (but a populated template) creates the budget automatically — no button click or prompt required
|
||||||
|
2. The first time a budget is auto-created in a session, a toast notification appears naming the month and indicating it was created from the template — subsequent months are created silently
|
||||||
|
3. The auto-created budget uses the user's configured currency from their profile settings, not a hardcoded default
|
||||||
|
4. Rapidly navigating between months or opening the dashboard in two tabs does not produce duplicate budget rows
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
### Phase 9: Inline Add and Dashboard Simplification
|
||||||
|
**Goal**: Users add one-off items to their budget directly from the budget view, the Quick Add page is gone, and the dashboard shows this month's data at a glance without chart overload
|
||||||
|
**Depends on**: Phase 8
|
||||||
|
**Requirements**: BV-01, BV-02, BV-03, DASH-01, DASH-02, DASH-03
|
||||||
|
**Success Criteria** (what must be TRUE):
|
||||||
|
1. An "Add item" control on the budget detail page opens a Sheet panel showing the category library — user selects a category, enters an amount, and the item appears in the budget without a page navigation
|
||||||
|
2. The Quick Add page is removed from the sidebar navigation — visiting `/quick-add` redirects to `/budgets` instead of showing an error
|
||||||
|
3. The dashboard displays this month's summary cards (income, expenses, balance) with correct totals that match what the user entered in the budget detail page
|
||||||
|
4. The dashboard does not show the 3-column chart grid by default — the primary view is the at-a-glance summary and collapsible category sections
|
||||||
|
5. Empty template, empty dashboard, and empty budget view each show a clear empty state with a visible call-to-action guiding the user to the next step
|
||||||
|
**Plans**: TBD
|
||||||
|
|
||||||
|
## Requirements Traceability
|
||||||
|
|
||||||
|
| Requirement | Phase | Status |
|
||||||
|
|-------------|-------|--------|
|
||||||
|
| DS-01 | Phase 5 | Pending |
|
||||||
|
| DS-02 | Phase 5 | Pending |
|
||||||
|
| DS-03 | Phase 5 | Pending |
|
||||||
|
| SETUP-01 | Phase 6, 7 | Pending |
|
||||||
|
| SETUP-02 | Phase 6, 7 | Pending |
|
||||||
|
| SETUP-03 | Phase 7 | Pending |
|
||||||
|
| SETUP-04 | Phase 7 | Pending |
|
||||||
|
| SETUP-05 | Phase 7 | Pending |
|
||||||
|
| AUTO-01 | Phase 6, 8 | Pending |
|
||||||
|
| AUTO-02 | Phase 8 | Pending |
|
||||||
|
| AUTO-03 | Phase 6, 8 | Pending |
|
||||||
|
| BV-01 | Phase 9 | Pending |
|
||||||
|
| BV-02 | Phase 9 | Pending |
|
||||||
|
| BV-03 | Phase 9 | Pending |
|
||||||
|
| DASH-01 | Phase 9 | Pending |
|
||||||
|
| DASH-02 | Phase 9 | Pending |
|
||||||
|
| DASH-03 | Phase 9 | Pending |
|
||||||
|
|
||||||
|
**Coverage: 17/17 v2.0 requirements mapped. No orphans.**
|
||||||
|
|
||||||
|
## Progress
|
||||||
|
|
||||||
|
**Execution Order:**
|
||||||
|
Phases execute in numeric order: 5 → 6 → 7 → 8 → 9
|
||||||
|
|
||||||
|
| Phase | Plans Complete | Status | Completed |
|
||||||
|
|-------|----------------|--------|-----------|
|
||||||
|
| 5. Design System Token Rework | 0/? | Not started | - |
|
||||||
|
| 6. Preset Data, First-Run Detection, DB Safety | 0/? | Not started | - |
|
||||||
|
| 7. Setup Wizard | 0/? | Not started | - |
|
||||||
|
| 8. Auto-Budget Creation | 0/? | Not started | - |
|
||||||
|
| 9. Inline Add and Dashboard Simplification | 0/? | Not started | - |
|
||||||
Reference in New Issue
Block a user