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

chore: complete v1.0 UI/UX Overhaul milestone

Browse Source
This commit is contained in:
Jean-Luc Makiola
2026-03-24 09:44:12 +01:00
parent 1d5e019839
commit 3a771ba7cd
5 changed files with 165 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.planning/MILESTONES.md Normal file
View File

@@ -0,0 +1,20 @@
# 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
---