diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 8edb3e9..8778ba1 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -136,5 +136,5 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4 |-------|----------------|--------|-----------| | 1. Design Foundation and Primitives | 2/2 | 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 | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 1addde5..8286369 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -2,16 +2,16 @@ gsd_state_version: 1.0 milestone: v1.0 milestone_name: milestone -status: executing -stopped_at: Completed 02-03-PLAN.md — Phase 2 complete -last_updated: "2026-03-16T13:29:30.468Z" -last_activity: 2026-03-16 — Completed 02-01 (Month Navigation and Chart Infrastructure) +status: planning +stopped_at: Completed 03-01-PLAN.md — CategorySection, CollapsibleSections, carryover display built +last_updated: "2026-03-17T14:09:55.087Z" +last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3 progress: total_phases: 4 completed_phases: 2 - total_plans: 5 - completed_plans: 5 - percent: 80 + total_plans: 7 + completed_plans: 6 + percent: 100 --- # Project State @@ -55,6 +55,7 @@ Progress: [████████████████████] 5/5 pla | 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 | ## 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]: 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 ### Pending Todos @@ -87,6 +91,6 @@ None yet. ## Session Continuity -Last session: 2026-03-16 -Stopped at: Phase 2 complete, ready to plan Phase 3 +Last session: 2026-03-17T14:09:55.085Z +Stopped at: Completed 03-01-PLAN.md — CategorySection, CollapsibleSections, carryover display built Resume file: None diff --git a/.planning/phases/03-collapsible-dashboard-sections/03-01-SUMMARY.md b/.planning/phases/03-collapsible-dashboard-sections/03-01-SUMMARY.md new file mode 100644 index 0000000..0df1c4f --- /dev/null +++ b/.planning/phases/03-collapsible-dashboard-sections/03-01-SUMMARY.md @@ -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 + 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`, `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*