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

docs(03-01): complete collapsible sections foundations plan

Browse Source
This commit is contained in:
Jean-Luc Makiola
2026-03-17 15:10:12 +01:00
parent f30b846f04
commit 7d08da20ce
3 changed files with 138 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.planning/ROADMAP.md
View File

@@ -136,5 +136,5 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4
|-------|----------------|--------|-----------| |-------|----------------|--------|-----------|
| 1. Design Foundation and Primitives | 2/2 | Complete | 2026-03-16 | | 1. Design Foundation and Primitives | 2/2 | Complete | 2026-03-16 |
| 2. Dashboard Charts and Layout | 3/3 | Complete | 2026-03-16 | | 2. Dashboard Charts and Layout | 3/3 | Complete | 2026-03-16 |
| 3. Collapsible Dashboard Sections | 0/2 | Planning complete | - | | 3. Collapsible Dashboard Sections | 1/2 | In Progress| |
| 4. Full-App Design Consistency | 0/TBD | Not started | - | | 4. Full-App Design Consistency | 0/TBD | Not started | - |

22
.planning/STATE.md
View File

@@ -2,16 +2,16 @@
gsd_state_version: 1.0 gsd_state_version: 1.0
milestone: v1.0 milestone: v1.0
milestone_name: milestone milestone_name: milestone
status: executing status: planning
stopped_at: Completed 02-03-PLAN.md — Phase 2 complete stopped_at: Completed 03-01-PLAN.md — CategorySection, CollapsibleSections, carryover display built
last_updated: "2026-03-16T13:29:30.468Z" last_updated: "2026-03-17T14:09:55.087Z"
last_activity: 2026-03-16 — Completed 02-01 (Month Navigation and Chart Infrastructure) last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3
progress: progress:
total_phases: 4 total_phases: 4
completed_phases: 2 completed_phases: 2
total_plans: 5 total_plans: 7
completed_plans: 5 completed_plans: 6
percent: 80 percent: 100
--- ---
# Project State # Project State
@@ -55,6 +55,7 @@ Progress: [████████████████████] 5/5 pla
| Phase 02 P02 | 2min | 2 tasks | 4 files | | Phase 02 P02 | 2min | 2 tasks | 4 files |
| Phase 02 P01 | 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 02-dashboard-charts-and-layout P03 | 3min | 2 tasks | 2 files |
| Phase 03-collapsible-dashboard-sections P01 | 2min | 2 tasks | 8 files |
## Accumulated Context ## Accumulated Context
@@ -76,6 +77,9 @@ Recent decisions affecting current work:
- [Phase 02-03]: useMemo hooks declared before early returns (Rules of Hooks compliance) - [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]: 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 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
### Pending Todos ### Pending Todos
@@ -87,6 +91,6 @@ None yet.
## Session Continuity ## Session Continuity
Last session: 2026-03-16 Last session: 2026-03-17T14:09:55.085Z
Stopped at: Phase 2 complete, ready to plan Phase 3 Stopped at: Completed 03-01-PLAN.md — CategorySection, CollapsibleSections, carryover display built
Resume file: None Resume file: None

124
.planning/phases/03-collapsible-dashboard-sections/03-01-SUMMARY.md Normal file
View File

@@ -0,0 +1,124 @@
---
phase: 03-collapsible-dashboard-sections
plan: 01
subsystem: ui
tags: [react, tailwind, radix-ui, i18n, collapsible, dashboard]
# Dependency graph
requires:
- phase: 02-dashboard-charts-and-layout
provides: StatCard, SummaryStrip, DashboardPage foundation
provides:
- CSS animation tokens for collapsible-open/close (index.css)
- i18n keys for sections and carryover in en.json and de.json
- StatCard with optional subtitle/subtitleClassName props
- SummaryStrip with carryoverSubtitle/carryoverIsNegative on balance
- DashboardPage carryover subtitle computed and threaded to SummaryStrip
- CategorySection presentational collapsible component with header badges and 4-column table
- CollapsibleSections container rendering ordered CategorySection list
affects:
- 03-02 (Plan 02 will wire CollapsibleSections into DashboardContent)
# Tech tracking
tech-stack:
added: []
patterns:
- "Presentational components accept t() as prop for i18n decoupling"
- "Direction-aware difference logic: spending types over when actual > budget; income/saving/investment over when actual < budget"
- "Controlled open state pattern: openSections Record<string,boolean> + onToggleSection callback"
key-files:
created:
- src/components/dashboard/CategorySection.tsx
- src/components/dashboard/CollapsibleSections.tsx
modified:
- src/index.css
- src/i18n/en.json
- src/i18n/de.json
- src/components/dashboard/StatCard.tsx
- src/components/dashboard/SummaryStrip.tsx
- src/pages/DashboardPage.tsx
key-decisions:
- "CategorySection accepts controlled open/onOpenChange for external state management (Plan 02 will own state)"
- "Spending types (bill, variable_expense, debt): diff = budgeted - actual, over when actual > budgeted"
- "Income/saving/investment: diff = actual - budgeted, over when actual < budgeted"
- "CollapsibleContent uses data-[state=open]:animate-collapsible-open Tailwind variant tied to CSS keyframes"
patterns-established:
- "Collapsible animation: data-[state=open]:animate-collapsible-open / data-[state=closed]:animate-collapsible-close"
- "Category color accent: borderLeftColor via categoryColors[type] inline style"
requirements-completed: [UI-DASH-01, UI-COLLAPSE-01]
# Metrics
duration: 2min
completed: 2026-03-17
---
# Phase 3 Plan 01: Collapsible Dashboard Sections (Foundations) Summary
**Carryover display wired from DashboardPage through SummaryStrip to StatCard; CategorySection and CollapsibleSections built as pure presentational components with direction-aware difference logic and CSS animation tokens**
## Performance
- **Duration:** 2 min
- **Started:** 2026-03-17T14:05:37Z
- **Completed:** 2026-03-17T14:07:32Z
- **Tasks:** 2
- **Files modified:** 8 (6 modified, 2 created)
## Accomplishments
- CSS animation tokens (`collapsible-open` / `collapsible-close`) and keyframes added to `index.css`
- i18n keys for `dashboard.sections` and `dashboard.carryoverIncludes` added to both `en.json` and `de.json`
- `StatCard` extended with optional `subtitle` / `subtitleClassName` props rendered below the value
- `SummaryStrip` balance prop extended with `carryoverSubtitle` / `carryoverIsNegative`; threaded to `StatCard`
- `DashboardPage` computes carryover subtitle from `budget.carryover_amount` and passes to `SummaryStrip`
- `CategorySection` built: left border accent, chevron rotation, budgeted/actual badges, 4-column line-item table with footer totals, direction-aware color coding
- `CollapsibleSections` built: thin container with controlled open state, renders ordered `CategorySection` list
## Task Commits
Each task was committed atomically:
1. **Task 1: Add CSS animation tokens, i18n keys, and carryover display** - `21ce6d8` (feat)
2. **Task 2: Build CategorySection and CollapsibleSections components** - `f30b846` (feat)
**Plan metadata:** (docs commit — see below)
## Files Created/Modified
- `src/index.css` - Added collapsible keyframes and animation CSS tokens
- `src/i18n/en.json` - Added `dashboard.sections` and `dashboard.carryoverIncludes` keys
- `src/i18n/de.json` - Added German equivalents for sections and carryover keys
- `src/components/dashboard/StatCard.tsx` - Added optional `subtitle` / `subtitleClassName` props
- `src/components/dashboard/SummaryStrip.tsx` - Extended `balance` type with carryover fields
- `src/pages/DashboardPage.tsx` - Computed `carryoverSubtitle` / `carryoverIsNegative` and passed to `SummaryStrip`
- `src/components/dashboard/CategorySection.tsx` - New: presentational collapsible section component
- `src/components/dashboard/CollapsibleSections.tsx` - New: container rendering ordered CategorySection list
## Decisions Made
- `CategorySection` uses controlled `open`/`onOpenChange` pattern — Plan 02 will own the open state in `DashboardContent`
- Spending types (`bill`, `variable_expense`, `debt`): over-budget when `actual > budgeted`
- Income/saving/investment types: over-budget when `actual < budgeted` (under-earning is the "over" condition)
- `CollapsibleContent` wired to CSS keyframes via `data-[state=open]:animate-collapsible-open` Tailwind variant
## Deviations from Plan
None - plan executed exactly as written.
## Issues Encountered
None. Build passed cleanly. The 6 pre-existing lint errors (MonthNavigator, badge, button, sidebar, useBudgets) were present before this plan and are unchanged — documented in STATE.md as a known concern.
## User Setup Required
None - no external service configuration required.
## Next Phase Readiness
- All presentational building blocks are ready for Plan 02 to wire into `DashboardContent`
- `CollapsibleSections` expects: `groups[]`, `currency`, `openSections: Record<string,boolean>`, `onToggleSection`, `t`
- Plan 02 needs to: group `items` by `CategoryType`, compute per-group totals, manage `openSections` state in `DashboardContent`
---
*Phase: 03-collapsible-dashboard-sections*
*Completed: 2026-03-17*