Files

Jean-Luc Makiola 439d0e950d chore: archive v1.0 phase directories

2026-03-24 09:46:00 +01:00

6.8 KiB

Raw Permalink Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed

phase

plan

subsystem

tags

requires

provides

affects

tech-stack

key-files

key-decisions

patterns-established

requirements-completed

duration

completed

03-collapsible-dashboard-sections

react

typescript

tailwind

radix-ui

collapsible

dashboard

state

phase	provides
03-collapsible-dashboard-sections/03-01	CollapsibleSections component, CategorySection component, carryover display

phase	provides
02-dashboard-charts-and-layout	DashboardContent structure, useBudgetDetail hook, chart layout

groupedSections useMemo deriving non-empty category groups from budget items

openSections state with direction-aware smart defaults (over-budget expanded)

Month-navigation state reset via key={budgetId} on DashboardContent

CollapsibleSections integrated between chart grid and QuickAdd button

DashboardSkeleton updated with section header placeholders

Phase 04 (any further dashboard enhancements will build on this layout)

added

patterns

key prop state reset: DashboardContent keyed by budgetId to reset all local state on month navigation

direction-aware budget logic: income/saving/investment over-budget when actual < budgeted; bill/variable_expense/debt over when actual > budgeted

lazy useState initializer: groupedSections-derived open state initialized once via () => callback

created

modified

src/pages/DashboardPage.tsx

src/components/dashboard/DashboardSkeleton.tsx

key prop state reset over useEffect: keying DashboardContent by budgetId causes full remount on month change, cleanly resetting openSections without violating react-hooks/set-state-in-effect or react-hooks/refs lint rules

isOverBudget placed at module level as pure helper for reuse in useState initializer and documentation clarity

CATEGORY_TYPES_ALL includes income first (income -> bill -> variable_expense -> debt -> saving -> investment) to match logical reading order in the dashboard sections area

key prop state reset: use key={derivedId} on inner content components to reset all local state on ID change — avoids useEffect+setState pattern flagged by strict linters

UI-DASH-01

UI-COLLAPSE-01

2min

2026-03-17

Phase 3 Plan 02: Dashboard Collapsible Sections Integration Summary

Collapsible per-category sections wired into DashboardContent with direction-aware smart expand defaults, month-navigation state reset via key prop, and updated DashboardSkeleton.

Performance

Duration: 2 min
Started: 2026-03-17T14:11:14Z
Completed: 2026-03-17T14:13:56Z
Tasks: 1 auto (1 checkpoint auto-approved)
Files modified: 2

Accomplishments

Integrated CollapsibleSections between chart grid and QuickAdd in DashboardContent
groupedSections useMemo filters empty category groups and computes budgeted/actual totals per group
Direction-aware isOverBudget helper correctly expands overspent expense sections and under-earned income/saving/investment sections on load
State resets cleanly on month navigation using key={budgetId} on DashboardContent (avoids useEffect+setState lint violations)
DashboardSkeleton updated with 3 section header placeholders matching real CategorySection header structure

Task Commits

Each task was committed atomically:

Task 1: Wire collapsible sections into DashboardContent with smart defaults - 9a8d13f (feat)
Task 2: Verify collapsible sections and carryover display - checkpoint:human-verify (auto-approved, no commit)

Plan metadata: (docs commit — see final commit)

Files Created/Modified

/home/jlmak/Projects/jlmak/SimpleFinanceDash/src/pages/DashboardPage.tsx - Added CATEGORY_TYPES_ALL, isOverBudget helper, groupedSections useMemo, openSections useState, handleToggleSection callback, CollapsibleSections JSX insertion, key={budgetId} on DashboardContent
/home/jlmak/Projects/jlmak/SimpleFinanceDash/src/components/dashboard/DashboardSkeleton.tsx - Added 3 skeleton section header rows after chart grid skeleton

Decisions Made

key prop state reset over useEffect: The plan specified useEffect(() => { setOpenSections(...) }, [budgetId]) for month navigation reset. This triggered react-hooks/set-state-in-effect and react-hooks/refs errors with the strict linter. Used key={currentBudget.id} on DashboardContent instead — causes full remount on month change, cleanly resetting all local state without effect side effects.
isOverBudget at module level: Placed as pure function alongside constants for clarity and to enable reuse in the useState lazy initializer.
CATEGORY_TYPES_ALL order: income first, then expense types, matching the logical top-to-bottom financial reading order (income earned → bills → variable → debt → savings → investments).

Deviations from Plan

Auto-fixed Issues

1. [Rule 1 - Bug] Replaced useEffect+setState with key prop state reset

Found during: Task 1 (lint verification step)
Issue: Plan-specified useEffect(() => setOpenSections(...), [budgetId]) triggered react-hooks/set-state-in-effect error. Attempted useRef comparison during render — triggered react-hooks/refs error. Both patterns rejected by the project's strict linter.
Fix: Removed useEffect entirely. Added key={currentBudget.id} to <DashboardContent> in DashboardPage. When budgetId changes, React unmounts and remounts DashboardContent, resetting all local state including openSections (which re-initializes from groupedSections via the lazy useState initializer).
Files modified: src/pages/DashboardPage.tsx
Verification: npx eslint src/pages/DashboardPage.tsx — no errors. bun run build passes.
Committed in: 9a8d13f (Task 1 commit)

Total deviations: 1 auto-fixed (1 bug — lint-incompatible pattern replaced with idiomatic React) Impact on plan: Fix improves code quality. key-prop reset is the canonical React pattern for this use case. Functional behavior is identical: openSections resets to smart defaults on month navigation.

Issues Encountered

Strict linter (react-hooks/set-state-in-effect, react-hooks/refs) rejected two approaches before key-prop solution was used. All pre-existing lint errors (MonthNavigator, badge.tsx, button.tsx, sidebar.tsx, useBudgets.ts) remain as documented in STATE.md — not caused by this plan.

User Setup Required

None - no external service configuration required.

Next Phase Readiness

Phase 3 is now complete: CollapsibleSections fully integrated into the live dashboard with all state management
Dashboard hybrid view delivers the full financial picture: SummaryStrip -> charts -> collapsible category sections -> QuickAdd
Phase 4 can build additional features on this complete dashboard foundation

Phase: 03-collapsible-dashboard-sections Completed: 2026-03-17

6.8 KiB Raw Permalink Blame History