diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 9acaa53..1716776 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -12,7 +12,7 @@ This milestone transforms SimpleFinanceDash from a functional-but-basic budget a Decimal phases appear between their surrounding integers in numeric order. -- [ ] **Phase 1: Design Foundation and Primitives** - Install shadcn primitives, extend color tokens, build PageShell and StatCard/SummaryStrip +- [x] **Phase 1: Design Foundation and Primitives** - Install shadcn primitives, extend color tokens, build PageShell and StatCard/SummaryStrip - [ ] **Phase 2: Dashboard Charts and Layout** - Build DashboardContent orchestrator with all three chart types and month navigation - [ ] **Phase 3: Collapsible Dashboard Sections** - Add CategorySection with Radix Collapsible, BudgetLineItems, and group totals - [ ] **Phase 4: Full-App Design Consistency** - Apply PageShell and established patterns to all 9 non-dashboard pages @@ -33,8 +33,8 @@ Decimal phases appear between their surrounding integers in numeric order. **Plans**: 2 plans Plans: -- [ ] 01-01-PLAN.md — Install shadcn primitives (chart + collapsible), extend OKLCH color tokens, add i18n keys -- [ ] 01-02-PLAN.md — Build PageShell, StatCard, SummaryStrip, DashboardSkeleton and integrate into DashboardPage +- [x] 01-01-PLAN.md — Install shadcn primitives (chart + collapsible), extend OKLCH color tokens, add i18n keys +- [x] 01-02-PLAN.md — Build PageShell, StatCard, SummaryStrip, DashboardSkeleton and integrate into DashboardPage ### Phase 2: Dashboard Charts and Layout **Goal**: Deliver the full dashboard chart suite — donut, vertical bar, and horizontal bar — inside a responsive ChartPanel, with month navigation and memoized data derivations @@ -132,7 +132,7 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4 | Phase | Plans Complete | Status | Completed | |-------|----------------|--------|-----------| -| 1. Design Foundation and Primitives | 0/2 | Planning complete | - | +| 1. Design Foundation and Primitives | 2/2 | Complete | 2026-03-16 | | 2. Dashboard Charts and Layout | 0/TBD | Not started | - | | 3. Collapsible Dashboard Sections | 0/TBD | Not started | - | | 4. Full-App Design Consistency | 0/TBD | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 2c82ead..1827550 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -3,15 +3,15 @@ gsd_state_version: 1.0 milestone: v1.0 milestone_name: milestone status: executing -stopped_at: Completed 01-01-PLAN.md -last_updated: "2026-03-16T11:16:11.810Z" -last_activity: 2026-03-16 — Completed 01-01 (Design Primitives) +stopped_at: Completed 01-02-PLAN.md +last_updated: "2026-03-16T11:22:03.566Z" +last_activity: 2026-03-16 — Completed 01-02 (Dashboard Shared Components) progress: total_phases: 4 - completed_phases: 0 + completed_phases: 1 total_plans: 2 - completed_plans: 1 - percent: 50 + completed_plans: 2 + percent: 100 --- # Project State @@ -25,12 +25,12 @@ See: .planning/PROJECT.md (updated 2026-03-16) ## Current Position -Phase: 1 of 4 (Design Foundation and Primitives) -Plan: 1 of 2 in current phase -Status: Executing -Last activity: 2026-03-16 — Completed 01-01 (Design Primitives) +Phase: 1 of 4 (Design Foundation and Primitives) -- COMPLETE +Plan: 2 of 2 in current phase +Status: Phase Complete +Last activity: 2026-03-16 — Completed 01-02 (Dashboard Shared Components) -Progress: [█████░░░░░] 50% +Progress: [██████████] 100% ## Performance Metrics @@ -51,6 +51,7 @@ Progress: [█████░░░░░] 50% *Updated after each plan completion* | Phase 01 P01 | 3min | 2 tasks | 5 files | +| Phase 01 P02 | 2min | 2 tasks | 5 files | ## Accumulated Context @@ -63,6 +64,8 @@ Recent decisions affecting current work: - [Roadmap]: All research flags set to NO — no `/gsd:research-phase` needed before any phase - [Phase 01]: Applied Recharts v3 initialDimension patch on chart.tsx (shadcn-ui/ui#9892) - [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 ### Pending Todos @@ -75,6 +78,6 @@ None yet. ## Session Continuity -Last session: 2026-03-16T11:16:11.808Z -Stopped at: Completed 01-01-PLAN.md +Last session: 2026-03-16T11:22:03.564Z +Stopped at: Completed 01-02-PLAN.md Resume file: None diff --git a/.planning/phases/01-design-foundation-and-primitives/01-02-SUMMARY.md b/.planning/phases/01-design-foundation-and-primitives/01-02-SUMMARY.md new file mode 100644 index 0000000..83aaf52 --- /dev/null +++ b/.planning/phases/01-design-foundation-and-primitives/01-02-SUMMARY.md @@ -0,0 +1,111 @@ +--- +phase: 01-design-foundation-and-primitives +plan: 02 +subsystem: ui +tags: [react, components, skeleton, responsive-grid, semantic-colors, dashboard] + +# Dependency graph +requires: + - phase: 01-01 + provides: "OKLCH semantic status tokens (over-budget, on-budget), category text colors, i18n keys" +provides: + - "PageShell reusable page header component with title/description/action slots" + - "StatCard KPI card with value formatting, semantic color, and variance badge" + - "SummaryStrip responsive 3-card grid (income/expenses/balance) composing StatCards" + - "DashboardSkeleton pulse-animated loading placeholder mirroring dashboard layout" + - "DashboardPage refactored with semantic tokens and shared components" +affects: [02-dashboard-components, 03-dashboard-page, 04-polish] + +# Tech tracking +tech-stack: + added: [lucide-react/TrendingUp/TrendingDown/Minus] + patterns: [page-shell-wrapper, stat-card-composition, skeleton-mirrors-layout, semantic-color-tokens-in-jsx] + +key-files: + created: + - src/components/shared/PageShell.tsx + - src/components/dashboard/StatCard.tsx + - src/components/dashboard/SummaryStrip.tsx + - src/components/dashboard/DashboardSkeleton.tsx + modified: + - src/pages/DashboardPage.tsx + +key-decisions: + - "StatCard uses font-bold (upgraded from font-semibold) for stronger KPI visual weight" + - "SummaryStrip accepts t() as prop to stay presentational (no internal useTranslation hook)" + - "DashboardSkeleton mirrors exact grid structure (3-col summary + 2-col chart) to prevent layout shift" + - "Variance badge uses inline icon+text layout instead of Badge component for lighter visual weight" + +patterns-established: + - "PageShell pattern: all pages wrap content in PageShell with title prop from t() call" + - "Skeleton-mirrors-layout: loading skeletons replicate exact grid structure of the real content" + - "Semantic color classes: use text-on-budget/text-over-budget/bg-on-budget/bg-over-budget instead of hardcoded color values" + +requirements-completed: [UI-DASH-01, UI-DESIGN-01, UI-RESPONSIVE-01] + +# Metrics +duration: 2min +completed: 2026-03-16 +--- + +# Phase 1 Plan 2: Dashboard Shared Components Summary + +**PageShell, StatCard, SummaryStrip, and DashboardSkeleton components with semantic OKLCH color tokens replacing all hardcoded green/red values in DashboardPage** + +## Performance + +- **Duration:** 2 min +- **Started:** 2026-03-16T11:17:50Z +- **Completed:** 2026-03-16T11:20:38Z +- **Tasks:** 2 +- **Files modified:** 5 + +## Accomplishments +- Created 4 new shared components (PageShell, StatCard, SummaryStrip, DashboardSkeleton) establishing reusable patterns for all 9 pages +- Refactored DashboardPage to use shared components, eliminating inline SummaryCard and null loading states +- Replaced all hardcoded green/red color classes with semantic OKLCH tokens (text-on-budget, text-over-budget, bg-on-budget, bg-over-budget) + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Create PageShell, StatCard, SummaryStrip, and DashboardSkeleton** - `ffc5c5f` (feat) +2. **Task 2: Integrate new components into DashboardPage** - `a533e06` (feat) + +## Files Created/Modified +- `src/components/shared/PageShell.tsx` - Reusable page header wrapper with title, description, and action slot +- `src/components/dashboard/StatCard.tsx` - KPI display card with formatted value, semantic color, and optional variance badge with directional icon +- `src/components/dashboard/SummaryStrip.tsx` - Responsive 3-card grid (1/2/3 cols by breakpoint) composing StatCards for income, expenses, and balance +- `src/components/dashboard/DashboardSkeleton.tsx` - Pulse-animated loading placeholder mirroring summary grid and chart card layout +- `src/pages/DashboardPage.tsx` - Refactored to use PageShell, SummaryStrip, DashboardSkeleton; removed inline SummaryCard; semantic color tokens throughout + +## Decisions Made +- StatCard uses `font-bold` (upgraded from existing `font-semibold`) for stronger visual weight on KPI values +- SummaryStrip receives `t` function as a prop rather than calling `useTranslation()` internally, keeping it as a pure presentational component +- DashboardSkeleton mirrors the exact grid structure of the real dashboard (3-col summary row + 2-col chart row) to prevent layout shift on load +- Variance badge uses inline icon+text layout (TrendingUp/TrendingDown/Minus icons) instead of Badge component for lighter visual treatment + +## Deviations from Plan + +None - plan executed exactly as written. + +## Issues Encountered +- Pre-existing lint errors (5 total in badge.tsx, button.tsx, sidebar.tsx, useBudgets.ts) remain from before this plan. No new lint errors introduced. Build passes cleanly. + +## User Setup Required + +None - no external service configuration required. + +## Next Phase Readiness +- PageShell pattern ready for all remaining pages (budgets, categories, template, settings, quick-add) +- StatCard/SummaryStrip available for any page needing KPI displays +- DashboardSkeleton pattern established for loading states across the app +- All Phase 1 components complete; Phase 2 can begin dashboard-specific chart and detail work + +## Self-Check: PASSED + +All 5 created/modified files verified present. Both task commits (ffc5c5f, a533e06) verified in git log. + +--- +*Phase: 01-design-foundation-and-primitives* +*Completed: 2026-03-16*