diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md new file mode 100644 index 0000000..8d3978e --- /dev/null +++ b/.planning/REQUIREMENTS.md @@ -0,0 +1,123 @@ +# Requirements: SimpleFinanceDash UI Polish + +**Defined:** 2026-03-11 +**Core Value:** Opening the app should feel like opening a beautifully designed personal spreadsheet — clean pastel colors, clear data layout, approachable and visually delightful. + +## v1 Requirements + +Requirements for this milestone. Each maps to roadmap phases. + +### Design System + +- [ ] **DSGN-01**: All shadcn CSS variables (primary, accent, muted, sidebar, chart-1 through chart-5) use pastel oklch values instead of zero-chroma neutrals +- [ ] **DSGN-02**: Semantic category color tokens defined in a single source of truth (`lib/palette.ts`) replacing scattered hardcoded hex and Tailwind classes +- [ ] **DSGN-03**: Dashboard card header gradients unified to a single pastel palette family +- [ ] **DSGN-04**: Typography hierarchy established — FinancialOverview and AvailableBalance sections are visually dominant hero elements +- [ ] **DSGN-05**: Consistent positive/negative amount coloring across all tables and summaries (green for positive, destructive for negative, amber for over-budget) + +### Auth Screens + +- [ ] **AUTH-01**: Login screen has a branded pastel gradient background (not plain white) +- [ ] **AUTH-02**: Login screen displays a styled app wordmark/logo treatment +- [ ] **AUTH-03**: Register screen matches login screen's branded look +- [ ] **AUTH-04**: Auth form errors display with styled alert blocks and error icons + +### Navigation & Layout + +- [ ] **NAV-01**: Sidebar has a pastel background color distinct from the main content area +- [ ] **NAV-02**: Sidebar app name has a branded typographic treatment (not plain h2) +- [ ] **NAV-03**: Active navigation item has a clearly visible color indicator using sidebar-primary token +- [ ] **NAV-04**: Sidebar is collapsible via a toggle button for smaller screens + +### Interaction Quality + +- [ ] **IXTN-01**: Form submit buttons show a spinner during async operations (login, register, budget create/edit) +- [ ] **IXTN-02**: Inline-editable rows show a pencil icon on hover as an edit affordance +- [ ] **IXTN-03**: Inline edit saves show a brief visual confirmation (row background flash) +- [ ] **IXTN-04**: Chart tooltips display values formatted with the budget's currency +- [ ] **IXTN-05**: Category deletion triggers a confirmation dialog before executing + +### Empty & Loading States + +- [ ] **STATE-01**: Dashboard shows a designed empty state with CTA when user has no budgets +- [ ] **STATE-02**: Categories page shows a designed empty state with create CTA when no categories exist +- [ ] **STATE-03**: Loading skeletons are styled with pastel-tinted backgrounds matching section colors + +### Bug Fixes + +- [ ] **FIX-01**: `formatCurrency` uses the user's locale preference instead of hardcoded `de-DE` +- [ ] **FIX-02**: `InlineEditRow` extracted into a shared component (currently duplicated in BillsTracker, VariableExpenses, DebtTracker) + +## v2 Requirements + +Deferred to future release. Tracked but not in current roadmap. + +### Visual Enhancements + +- **VIS-01**: Budget health indicator badge (green/amber/red) next to budget selector +- **VIS-02**: Progress bars in BillsTracker showing actual vs budget ratio per row +- **VIS-03**: Animated number transitions when totals recompute after inline edits +- **VIS-04**: Month navigator with prev/next arrows beside budget selector +- **VIS-05**: Savings/investments progress arcs per item + +### Dark Mode + +- **DARK-01**: Pastel dark mode color system (distinct from light pastels) +- **DARK-02**: Dark mode toggle in settings + +### Advanced UX + +- **UX-01**: Category creation inline from budget item add flow +- **UX-02**: Keyboard shortcuts / command palette +- **UX-03**: Drag-to-reorder categories + +## Out of Scope + +| Feature | Reason | +|---------|--------| +| Dark mode toggle | Light mode pastel system must be right first; dark pastels are a separate design problem | +| Custom color picker / theme selector | Explicitly excluded per PROJECT.md; tokens are centralized for future theming | +| Animated page transitions (Framer Motion) | JS weight unjustified for data-first app; tw-animate-css covers needed animations | +| Toast notifications for every action | Row-level flash feedback is more contextual; toasts only for errors/destructive actions | +| Onboarding wizard | Improved empty states with CTAs are sufficient for single-user self-hosted app | +| New chart types (trend lines, sparklines) | Polish existing charts, don't add new data views | +| CSV import / recurring transactions | Backend features, not UI polish scope | + +## Traceability + +Which phases cover which requirements. Updated during roadmap creation. + +| Requirement | Phase | Status | +|-------------|-------|--------| +| DSGN-01 | Phase 1 | Pending | +| DSGN-02 | Phase 1 | Pending | +| DSGN-03 | Phase 1 | Pending | +| DSGN-04 | Phase 1 | Pending | +| DSGN-05 | Phase 1 | Pending | +| AUTH-01 | Phase 2 | Pending | +| AUTH-02 | Phase 2 | Pending | +| AUTH-03 | Phase 2 | Pending | +| AUTH-04 | Phase 2 | Pending | +| NAV-01 | Phase 2 | Pending | +| NAV-02 | Phase 2 | Pending | +| NAV-03 | Phase 2 | Pending | +| NAV-04 | Phase 2 | Pending | +| IXTN-01 | Phase 3 | Pending | +| IXTN-02 | Phase 3 | Pending | +| IXTN-03 | Phase 3 | Pending | +| IXTN-04 | Phase 3 | Pending | +| IXTN-05 | Phase 3 | Pending | +| STATE-01 | Phase 3 | Pending | +| STATE-02 | Phase 3 | Pending | +| STATE-03 | Phase 3 | Pending | +| FIX-01 | Phase 3 | Pending | +| FIX-02 | Phase 3 | Pending | + +**Coverage:** +- v1 requirements: 23 total +- Mapped to phases: 23 +- Unmapped: 0 ✓ + +--- +*Requirements defined: 2026-03-11* +*Last updated: 2026-03-11 after initial definition*