2.0 KiB
2.0 KiB
Milestones
v1.0 UI/UX Overhaul (Shipped: 2026-03-24)
Phases completed: 4 phases, 10 plans, 19 tasks
Key accomplishments:
- shadcn chart/collapsible primitives with Recharts v3 patch, two-tier OKLCH category colors, semantic budget status tokens, and bilingual dashboard i18n keys
- PageShell, StatCard, SummaryStrip, and DashboardSkeleton components with semantic OKLCH color tokens replacing all hardcoded green/red values in DashboardPage
- useMonthParam hook and MonthNavigator component for URL-based month selection, plus 10 new chart/navigation i18n keys in EN and DE
- Three isolated chart components (expense donut, income vertical bars, spend horizontal bars) using Recharts + ChartContainer with CSS variable theming, active hover, and per-cell over-budget coloring
- 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
- 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
- Collapsible per-category sections wired into DashboardContent with direction-aware smart expand defaults, month-navigation state reset via key prop, and updated DashboardSkeleton.
- LoginPage and RegisterPage redesigned with muted background, primary-accent card border, favicon logo, subtitle text, and inline SVG OAuth provider icons
- PageShell adoption, skeleton loading states, and left-border accent group headers applied to all four CRUD/settings pages (Categories, Template, QuickAdd, Settings)
- 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