docs(04-03): complete budget pages design consistency plan
- BudgetListPage: PageShell, locale-aware months via Intl.DateTimeFormat, skeleton, i18n month/year/total labels - BudgetDetailPage: semantic tokens, direction-aware diff, group headers, skeleton, PageShell, locale heading - STATE.md: advance plan, record metrics, add decisions, update session - ROADMAP.md: phase 04 marked 3/3 plans complete
This commit is contained in:
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
|
|||||||
milestone: v1.0
|
milestone: v1.0
|
||||||
milestone_name: milestone
|
milestone_name: milestone
|
||||||
status: planning
|
status: planning
|
||||||
stopped_at: Completed 04-02-PLAN.md
|
stopped_at: Completed 04-03-PLAN.md
|
||||||
last_updated: "2026-03-17T15:17:56.263Z"
|
last_updated: "2026-03-17T15:23:32.631Z"
|
||||||
last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3
|
last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3
|
||||||
progress:
|
progress:
|
||||||
total_phases: 4
|
total_phases: 4
|
||||||
completed_phases: 3
|
completed_phases: 4
|
||||||
total_plans: 10
|
total_plans: 10
|
||||||
completed_plans: 9
|
completed_plans: 10
|
||||||
percent: 100
|
percent: 100
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -59,6 +59,7 @@ Progress: [████████████████████] 5/5 pla
|
|||||||
| Phase 03-collapsible-dashboard-sections P02 | 2min | 1 tasks | 2 files |
|
| Phase 03-collapsible-dashboard-sections P02 | 2min | 1 tasks | 2 files |
|
||||||
| Phase 04-full-app-design-consistency P01 | 2min | 2 tasks | 4 files |
|
| Phase 04-full-app-design-consistency P01 | 2min | 2 tasks | 4 files |
|
||||||
| Phase 04-full-app-design-consistency P02 | 3min | 2 tasks | 4 files |
|
| Phase 04-full-app-design-consistency P02 | 3min | 2 tasks | 4 files |
|
||||||
|
| Phase 04-full-app-design-consistency P03 | 2min | 2 tasks | 4 files |
|
||||||
|
|
||||||
## Accumulated Context
|
## Accumulated Context
|
||||||
|
|
||||||
@@ -88,6 +89,9 @@ Recent decisions affecting current work:
|
|||||||
- [Phase 04-full-app-design-consistency]: Auth card accent pattern established: border-t-4 border-t-primary shadow-lg on Card with bg-muted/60 background and favicon.svg logo
|
- [Phase 04-full-app-design-consistency]: Auth card accent pattern established: border-t-4 border-t-primary shadow-lg on Card with bg-muted/60 background and favicon.svg logo
|
||||||
- [Phase 04-full-app-design-consistency]: TemplatePage uses manual PageShell-mirrored layout (flex flex-col gap-6) instead of PageShell directly — preserves inline-editable TemplateName component
|
- [Phase 04-full-app-design-consistency]: TemplatePage uses manual PageShell-mirrored layout (flex flex-col gap-6) instead of PageShell directly — preserves inline-editable TemplateName component
|
||||||
- [Phase 04-full-app-design-consistency]: SettingsPage CardHeader and CardTitle removed — PageShell provides page-level title, CardContent gets pt-6 to compensate
|
- [Phase 04-full-app-design-consistency]: SettingsPage CardHeader and CardTitle removed — PageShell provides page-level title, CardContent gets pt-6 to compensate
|
||||||
|
- [Phase 04-full-app-design-consistency]: Direction-aware diff pattern replicated from CategorySection: SPENDING_TYPES array + isSpendingType() covers all 6 category types correctly
|
||||||
|
- [Phase 04-full-app-design-consistency]: TierBadge column removed from BudgetDetailPage to reduce visual noise and align with CategorySection display style
|
||||||
|
- [Phase 04-full-app-design-consistency]: budgets.month/year/total keys added to en.json and de.json — i18next interpolation pattern for translated total labels
|
||||||
|
|
||||||
### Pending Todos
|
### Pending Todos
|
||||||
|
|
||||||
@@ -99,6 +103,6 @@ None yet.
|
|||||||
|
|
||||||
## Session Continuity
|
## Session Continuity
|
||||||
|
|
||||||
Last session: 2026-03-17T15:17:56.261Z
|
Last session: 2026-03-17T15:23:32.629Z
|
||||||
Stopped at: Completed 04-02-PLAN.md
|
Stopped at: Completed 04-03-PLAN.md
|
||||||
Resume file: None
|
Resume file: None
|
||||||
|
|||||||
113
.planning/phases/04-full-app-design-consistency/04-03-SUMMARY.md
Normal file
113
.planning/phases/04-full-app-design-consistency/04-03-SUMMARY.md
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
phase: 04-full-app-design-consistency
|
||||||
|
plan: "03"
|
||||||
|
subsystem: ui
|
||||||
|
tags: [react, i18n, react-i18next, tailwind, typescript, design-system]
|
||||||
|
|
||||||
|
# Dependency graph
|
||||||
|
requires:
|
||||||
|
- phase: 04-full-app-design-consistency
|
||||||
|
provides: PageShell component, semantic CSS tokens (text-over-budget/text-on-budget), categoryColors palette
|
||||||
|
|
||||||
|
provides:
|
||||||
|
- BudgetListPage upgraded with PageShell, locale-aware Intl.DateTimeFormat month names, skeleton loading, i18n labels
|
||||||
|
- BudgetDetailPage upgraded with semantic color tokens, direction-aware diff, left-border group headers, PageShell, skeleton
|
||||||
|
- budgets.month/year/total i18n keys in en.json and de.json
|
||||||
|
|
||||||
|
affects: [budget pages, design system completeness, i18n coverage]
|
||||||
|
|
||||||
|
# Tech tracking
|
||||||
|
tech-stack:
|
||||||
|
added: []
|
||||||
|
patterns:
|
||||||
|
- Intl.DateTimeFormat locale-aware month generation via useMemo with i18n.language dependency
|
||||||
|
- Direction-aware diff logic: SPENDING_TYPES array + isSpendingType() helper replaces isIncome boolean
|
||||||
|
- Semantic color tokens (text-over-budget/text-on-budget) replacing hardcoded Tailwind color classes
|
||||||
|
|
||||||
|
key-files:
|
||||||
|
created: []
|
||||||
|
modified:
|
||||||
|
- src/pages/BudgetListPage.tsx
|
||||||
|
- src/pages/BudgetDetailPage.tsx
|
||||||
|
- src/i18n/en.json
|
||||||
|
- src/i18n/de.json
|
||||||
|
|
||||||
|
key-decisions:
|
||||||
|
- "Direction-aware diff pattern replicated from CategorySection: SPENDING_TYPES array + isSpendingType() covers all 6 category types correctly"
|
||||||
|
- "TierBadge column removed from BudgetDetailPage to reduce visual noise and align with CategorySection display style"
|
||||||
|
- "budgets.month/year/total keys added to both en.json and de.json to eliminate all hardcoded English labels in dialogs"
|
||||||
|
- "return null loading state in BudgetListPage placed after useMemo hooks to satisfy Rules of Hooks - hooks declared before early return"
|
||||||
|
|
||||||
|
patterns-established:
|
||||||
|
- "Locale-aware months: useMemo + Array.from(12) + Intl.DateTimeFormat(locale, {month:'long'}) replacing hardcoded MONTHS arrays"
|
||||||
|
- "Budget heading with locale: Intl.DateTimeFormat(i18n.language, {month:'long', year:'numeric'}) replacing toLocaleDateString('en')"
|
||||||
|
- "Skeleton loading in PageShell: replaces return null with typed skeleton rows matching page structure"
|
||||||
|
|
||||||
|
requirements-completed: [UI-BUDGETS-01, UI-RESPONSIVE-01, UI-DESIGN-01]
|
||||||
|
|
||||||
|
# Metrics
|
||||||
|
duration: 2min
|
||||||
|
completed: 2026-03-17
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 4 Plan 03: Budget Pages Design Consistency Summary
|
||||||
|
|
||||||
|
**BudgetListPage and BudgetDetailPage upgraded with PageShell, locale-aware Intl.DateTimeFormat month names, semantic color tokens (text-over-budget/text-on-budget), direction-aware diff for all 6 category types, left-border accent group headers, skeleton loading, and i18n translations for month/year/total labels**
|
||||||
|
|
||||||
|
## Performance
|
||||||
|
|
||||||
|
- **Duration:** 2 min
|
||||||
|
- **Started:** 2026-03-17T15:19:03Z
|
||||||
|
- **Completed:** 2026-03-17T15:21:00Z
|
||||||
|
- **Tasks:** 2
|
||||||
|
- **Files modified:** 4
|
||||||
|
|
||||||
|
## Accomplishments
|
||||||
|
|
||||||
|
- Eliminated hardcoded English `MONTHS` array and `toLocaleDateString("en")` — both pages now use `Intl.DateTimeFormat(locale)` fed by `i18n.language`
|
||||||
|
- Replaced `text-green-600`/`text-red-600`/`text-green-400`/`text-red-400` with `text-on-budget`/`text-over-budget` semantic tokens — zero hardcoded color classes remain
|
||||||
|
- Rewrote `DifferenceCell` with `SPENDING_TYPES` + `isSpendingType()` direction-aware logic covering all 6 category types (spending over when actual > budgeted; income/saving/investment over when actual < budgeted)
|
||||||
|
- Both pages wrapped in `PageShell` — completing consistent header layout across all 9 app pages
|
||||||
|
- `return null` loading states replaced with `PageShell + Skeleton` — no blank screen flash during data load
|
||||||
|
|
||||||
|
## Task Commits
|
||||||
|
|
||||||
|
Each task was committed atomically:
|
||||||
|
|
||||||
|
1. **Task 1: Upgrade BudgetListPage with PageShell, locale-aware months, skeleton, and i18n labels** - `89dd3de` (feat)
|
||||||
|
2. **Task 2: Upgrade BudgetDetailPage with semantic tokens, direction-aware diff, PageShell, group headers, and skeleton** - `24d071c` (feat)
|
||||||
|
|
||||||
|
**Plan metadata:** _(pending final commit)_
|
||||||
|
|
||||||
|
## Files Created/Modified
|
||||||
|
|
||||||
|
- `src/pages/BudgetListPage.tsx` - PageShell, locale-aware monthItems useMemo, Skeleton loading, i18n month/year Labels, budgetLabel accepts locale param
|
||||||
|
- `src/pages/BudgetDetailPage.tsx` - PageShell, semantic tokens, direction-aware DifferenceCell, left-border group headers, locale-aware headingLabel, Skeleton loading, TierBadge removed, budgets.total i18n
|
||||||
|
- `src/i18n/en.json` - Added budgets.month, budgets.year, budgets.total keys
|
||||||
|
- `src/i18n/de.json` - Added budgets.month (Monat), budgets.year (Jahr), budgets.total (Gesamt)
|
||||||
|
|
||||||
|
## Decisions Made
|
||||||
|
|
||||||
|
- **Direction-aware diff replicated from CategorySection:** Same `SPENDING_TYPES` array pattern as `CategorySection.tsx` ensures consistent diff direction across dashboard and budget detail views
|
||||||
|
- **TierBadge column removed:** Plan specification to remove tier column for cleaner display — reduces visual noise, aligns with CategorySection which doesn't show tier badges
|
||||||
|
- **i18n keys added for month/year/total:** Enables full German locale support in budget dialogs and footer totals; `{{label}} Total` / `{{label}} Gesamt` pattern uses i18next interpolation
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
None - plan executed exactly as written.
|
||||||
|
|
||||||
|
## Issues Encountered
|
||||||
|
|
||||||
|
- 6 pre-existing lint errors in unrelated files (MonthNavigator.tsx, badge.tsx, button.tsx, sidebar.tsx, useBudgets.ts) — pre-existing, documented in STATE.md, not caused by this plan's changes
|
||||||
|
- `return null` in BudgetDetailPage.tsx line 492 is inside a JSX render callback (`CATEGORY_TYPES.map()`), not a loading state — plan's verification intent (no loading-state nulls) is fully satisfied
|
||||||
|
|
||||||
|
## Next Phase Readiness
|
||||||
|
|
||||||
|
- All 4 phases of the design consistency roadmap are complete
|
||||||
|
- All 9 pages use consistent PageShell layout
|
||||||
|
- All semantic color tokens applied throughout the app
|
||||||
|
- German locale fully supported on all pages including budget dialogs
|
||||||
|
|
||||||
|
---
|
||||||
|
*Phase: 04-full-app-design-consistency*
|
||||||
|
*Completed: 2026-03-17*
|
||||||
Reference in New Issue
Block a user