makiolaj/SimpleFinanceDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(02-03): complete dashboard integration plan

Browse Source
This commit is contained in:
Jean-Luc Makiola
2026-03-16 14:24:52 +01:00
parent 243cacf862
commit fb27659f5c
3 changed files with 130 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.planning/ROADMAP.md
View File

@@ -13,7 +13,7 @@ This milestone transforms SimpleFinanceDash from a functional-but-basic budget a
Decimal phases appear between their surrounding integers in numeric order.
- [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
- [x] **Phase 2: Dashboard Charts and Layout** - Build DashboardContent orchestrator with all three chart types and month navigation (completed 2026-03-16)
- [ ] **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
@@ -134,6 +134,6 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4
| Phase | Plans Complete | Status | Completed |
|-------|----------------|--------|-----------|
| 1. Design Foundation and Primitives | 2/2 | Complete | 2026-03-16 |
| 2. Dashboard Charts and Layout | 0/3 | Not started | - |
| 2. Dashboard Charts and Layout | 3/3 | Complete | 2026-03-16 |
| 3. Collapsible Dashboard Sections | 0/TBD | Not started | - |
| 4. Full-App Design Consistency | 0/TBD | Not started | - |

18
.planning/STATE.md
View File

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
milestone: v1.0
milestone_name: milestone
status: executing
stopped_at: Wave 1 complete (02-01, 02-02). Wave 2 (02-03) not started — user paused.
last_updated: "2026-03-16T12:06:36.148Z"
stopped_at: Completed 02-03-PLAN.md — Phase 2 complete
last_updated: "2026-03-16T13:24:26.744Z"
last_activity: 2026-03-16 — Completed 02-01 (Month Navigation and Chart Infrastructure)
progress:
total_phases: 4
completed_phases: 1
completed_phases: 2
total_plans: 5
completed_plans: 4
completed_plans: 5
percent: 80
---
@@ -54,6 +54,7 @@ Progress: [████████░░] 80%
| 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 |
## Accumulated Context
@@ -72,6 +73,9 @@ Recent decisions affecting current work:
- [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
### Pending Todos
@@ -84,6 +88,6 @@ None yet.
## Session Continuity
Last session: 2026-03-16T12:06:36.146Z
Stopped at: Wave 1 complete (02-01, 02-02). Wave 2 (02-03) not started — user paused.
Resume file: .planning/phases/02-dashboard-charts-and-layout/02-03-PLAN.md
Last session: 2026-03-16T13:24:26.742Z
Stopped at: Completed 02-03-PLAN.md — Phase 2 complete
Resume file: None

117
.planning/phases/02-dashboard-charts-and-layout/02-03-SUMMARY.md Normal file
View File

@@ -0,0 +1,117 @@
---
phase: 02-dashboard-charts-and-layout
plan: 03
subsystem: ui
tags: [react, recharts, tanstack-query, url-state, dashboard, charts]
# Dependency graph
requires:
- phase: 02-01
provides: useMonthParam hook, MonthNavigator component, ChartEmptyState component, SummaryStrip
- phase: 02-02
provides: ExpenseDonutChart, IncomeBarChart, SpendBarChart chart components
provides:
- Refactored DashboardPage with URL-based month navigation and 3-column chart grid
- Updated DashboardSkeleton mirroring new 3-column layout
- Empty-month prompt with create/generate budget buttons
affects: [Phase 03 collapsibles, Phase 04 final polish]
# Tech tracking
tech-stack:
added: []
patterns:
- "All useMemo hooks declared before early returns (Rules of Hooks compliance)"
- "MonthNavigator placed in PageShell action slot for consistent top-right placement"
- "DashboardContent as inner component — receives budgetId, handles its own loading state"
- "URL search params (?month=YYYY-MM) for month state — survives refresh and enables sharing"
key-files:
created: []
modified:
- src/pages/DashboardPage.tsx
- src/components/dashboard/DashboardSkeleton.tsx
key-decisions:
- "useMemo hooks declared before early returns (if loading / if !budget) to comply with Rules of Hooks"
- "QuickAdd button moved below chart grid (SummaryStrip -> charts -> QuickAdd ordering)"
- "3-column chart grid uses md:grid-cols-2 lg:grid-cols-3 for responsive breakpoints"
patterns-established:
- "Inner DashboardContent component receives budgetId prop, handles useBudgetDetail + all derived data"
- "DashboardPage outer component handles month selection, budget lookup, and empty/loading states"
requirements-completed: [UI-DASH-01, UI-BAR-01, UI-HBAR-01, UI-DONUT-01]
# Metrics
duration: 3min
completed: 2026-03-16
---
# Phase 2 Plan 03: Dashboard Integration Summary
**DashboardPage wired with URL month navigation (useMonthParam), MonthNavigator in PageShell action slot, and a responsive 3-column chart grid (ExpenseDonutChart, IncomeBarChart, SpendBarChart) replacing the old recharts pie + progress bars**
## Performance
- **Duration:** 3 min
- **Started:** 2026-03-16T13:20:40Z
- **Completed:** 2026-03-16T13:23:04Z
- **Tasks:** 2
- **Files modified:** 2
## Accomplishments
- Replaced hardcoded current-month logic with `useMonthParam` for URL search param-based month state
- Replaced old flat recharts `PieChart` + progress bar layout with 3-column grid of chart components from Plan 02
- Added empty-month prompt with "Create Budget" and "Generate from Template" buttons
- Updated `DashboardSkeleton` from 2-column to 3-column chart skeleton to prevent layout shift
## Task Commits
Each task was committed atomically:
1. **Task 1: Refactor DashboardPage with month navigation and 3-column chart grid** - `01674e1` (feat)
2. **Task 2: Update DashboardSkeleton for 3-column chart layout** - `243cacf` (feat)
**Plan metadata:** (final commit follows)
## Files Created/Modified
- `src/pages/DashboardPage.tsx` - Refactored dashboard with URL month nav, MonthNavigator in action slot, 3-column chart grid, empty-month prompt
- `src/components/dashboard/DashboardSkeleton.tsx` - Updated skeleton with 3 chart skeleton cards matching real layout
## Decisions Made
- All `useMemo` hooks declared before early returns (`if (loading)`, `if (!budget)`) to comply with React Rules of Hooks — avoids conditional hook invocation
- QuickAdd button placed below chart grid (SummaryStrip -> charts -> QuickAdd ordering per plan decision)
- Chart grid uses `md:grid-cols-2 lg:grid-cols-3` responsive breakpoints (2-up on tablet, 3-up on desktop)
## Deviations from Plan
None - plan executed exactly as written. (Minor code placement adjustment: moved `useMemo` hooks before early returns to comply with Rules of Hooks — this was a correctness fix during implementation, not a plan deviation.)
## Issues Encountered
- Lint errors flagged: 6 errors all pre-existing in unrelated files (`MonthNavigator.tsx`, `badge.tsx`, `button.tsx`, `sidebar.tsx`, `useBudgets.ts`). None caused by this plan's changes. Documented in scope boundary per deviation rules.
## User Setup Required
None - no external service configuration required.
## Next Phase Readiness
- Phase 2 is now complete: all 3 plans done (month navigation + chart infrastructure, chart components, dashboard integration)
- Phase 3 (collapsible category rows in BudgetDetailPage) can proceed
- Dashboard shows full financial picture: SummaryStrip + 3 charts + QuickAdd, navigable by month via URL
## Self-Check: PASSED
- FOUND: src/pages/DashboardPage.tsx
- FOUND: src/components/dashboard/DashboardSkeleton.tsx
- FOUND: .planning/phases/02-dashboard-charts-and-layout/02-03-SUMMARY.md
- FOUND commit: 01674e1 (feat: refactor DashboardPage)
- FOUND commit: 243cacf (feat: update DashboardSkeleton)
---
*Phase: 02-dashboard-charts-and-layout*
*Completed: 2026-03-16*