- Replace TierBadge and tier column with cleaner per-category grouping display
- Rewrite DifferenceCell with direction-aware diff logic (spending types: over when actual > budgeted; income/saving/investment: over when actual < budgeted)
- Replace text-green-600/text-red-600 with text-on-budget/text-over-budget semantic tokens
- Replace dot+h2 group headers with left-border accent headers matching dashboard style
- Fix headingLabel to use i18n.language via Intl.DateTimeFormat instead of hardcoded 'en'
- Wrap page in PageShell with locale-aware title and Add Item action button
- Add back-link as first child of PageShell with -mt-4 compensation
- Replace null loading state with PageShell + Skeleton groups
- Update group footer total label to use budgets.total i18n interpolation key
- Replace hardcoded MONTHS array with Intl.DateTimeFormat locale-aware monthItems useMemo
- Update budgetLabel helper to accept locale parameter and use Intl.DateTimeFormat
- Replace null loading state with PageShell + Skeleton rows
- Replace manual header with PageShell title and action prop
- Replace hardcoded 'Month'/'Year' Labels with t('budgets.month')/t('budgets.year')
- Add month/year/total keys to en.json and de.json budgets namespace
- CategoriesPage: adopt PageShell for header with title and Add Category button
- CategoriesPage: replace return null with skeleton loading state
- CategoriesPage: upgrade dot group headers to left-border accent style
- TemplatePage: mirror PageShell layout (flex-col gap-6) for inline-editable header
- TemplatePage: replace return null with skeleton loading state
- TemplatePage: upgrade dot group headers to left-border accent style
- TemplateName h1: add tracking-tight to match PageShell h1 style
- LoginPage and RegisterPage redesigned with muted bg, card accent, logo, subtitle
- Google and GitHub SVG provider icons added to OAuth buttons
- auth.loginSubtitle and auth.registerSubtitle keys in en.json and de.json
- STATE.md updated with position, decisions, metrics
- ROADMAP.md updated with Phase 4 progress (1/3 plans complete)
- Change background from bg-background to bg-muted/60
- Add border-t-4 border-t-primary shadow-lg card accent
- Add favicon.svg logo above CardTitle
- Add auth.registerSubtitle below title
- Add pb-4 to CardHeader for consistent spacing with LoginPage
- Change background from bg-background to bg-muted/60
- Add border-t-4 border-t-primary shadow-lg card accent
- Add favicon.svg logo above CardTitle
- Add auth.loginSubtitle below title
- Add Google SVG icon and GitHub SVG icon to OAuth buttons
- Add gap-2 to OAuth button className for icon/text spacing
- Add auth.loginSubtitle and auth.registerSubtitle to en.json and de.json
- Add CATEGORY_TYPES_ALL constant and isOverBudget direction-aware helper
- Derive groupedSections via useMemo (filters empty groups, computes totals)
- Initialize openSections state with smart defaults (over-budget expanded)
- State resets on month navigation via key={budgetId} on DashboardContent
- Insert CollapsibleSections between chart grid and QuickAdd
- Add skeleton placeholders for collapsible sections area in DashboardSkeleton
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add collapsible-open/close keyframes and CSS animation tokens to index.css
- Add dashboard.sections and dashboard.carryoverIncludes keys to en.json and de.json
- Add optional subtitle/subtitleClassName props to StatCard
- Extend SummaryStrip balance prop with carryoverSubtitle/carryoverIsNegative
- Compute and pass carryover subtitle from DashboardContent to SummaryStrip
- Replace hardcoded current month with useMonthParam (URL search params)
- Add MonthNavigator in PageShell action slot
- Replace old recharts pie + progress bars with ExpenseDonutChart, IncomeBarChart, SpendBarChart
- Add empty-month prompt with create/generate buttons
- Memoize all derived data with useMemo
- Move QuickAddPicker below chart grid per plan
- SUMMARY.md with task commits, deviations, and self-check
- STATE.md updated with phase 2 position and decisions
- ROADMAP.md updated with plan progress
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- IncomeBarChart: vertical grouped bars (budgeted muted, actual vivid)
- SpendBarChart: horizontal bars via layout="vertical" with swapped axes
- Both use per-cell conditional fill for over-budget red accent
- Both use ChartContainer + ChartConfig for CSS variable theming
- Both handle empty data with ChartEmptyState placeholder
- ChartLegend and ChartTooltip with formatted currency values
- Donut chart with innerRadius/outerRadius, center total label via formatCurrency
- Active sector expansion on hover via activeShape + Sector
- Custom legend below chart with color dots and formatted amounts
- CSS variable fills via ChartConfig (no hardcoded hex values)
- Empty state: ChartEmptyState placeholder when no data
- Zero-amount state: neutral muted ring with $0 center label
- ChartEmptyState shared component created (Rule 3: blocking dependency from Plan 01)
- useMonthParam reads/writes month URL search param with YYYY-MM fallback
- navigateMonth handles year rollover via Date constructor
- MonthNavigator renders prev/next arrows with Select dropdown
- Dropdown lists available budget months with locale-aware formatting
- Add 01-01-SUMMARY.md with execution results and self-check
- Update STATE.md with position, decisions, and metrics
- Update ROADMAP.md with plan progress
- Log pre-existing lint errors to deferred-items.md
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
