124 lines
5.5 KiB
Markdown
124 lines
5.5 KiB
Markdown
# 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
|
|
|
|
- [x] **DSGN-01**: All shadcn CSS variables (primary, accent, muted, sidebar, chart-1 through chart-5) use pastel oklch values instead of zero-chroma neutrals
|
|
- [x] **DSGN-02**: Semantic category color tokens defined in a single source of truth (`lib/palette.ts`) replacing scattered hardcoded hex and Tailwind classes
|
|
- [x] **DSGN-03**: Dashboard card header gradients unified to a single pastel palette family
|
|
- [x] **DSGN-04**: Typography hierarchy established — FinancialOverview and AvailableBalance sections are visually dominant hero elements
|
|
- [x] **DSGN-05**: Consistent positive/negative amount coloring across all tables and summaries (green for positive, destructive for negative, amber for over-budget)
|
|
|
|
### Auth Screens
|
|
|
|
- [x] **AUTH-01**: Login screen has a branded pastel gradient background (not plain white)
|
|
- [x] **AUTH-02**: Login screen displays a styled app wordmark/logo treatment
|
|
- [x] **AUTH-03**: Register screen matches login screen's branded look
|
|
- [x] **AUTH-04**: Auth form errors display with styled alert blocks and error icons
|
|
|
|
### Navigation & Layout
|
|
|
|
- [x] **NAV-01**: Sidebar has a pastel background color distinct from the main content area
|
|
- [x] **NAV-02**: Sidebar app name has a branded typographic treatment (not plain h2)
|
|
- [x] **NAV-03**: Active navigation item has a clearly visible color indicator using sidebar-primary token
|
|
- [x] **NAV-04**: Sidebar is collapsible via a toggle button for smaller screens
|
|
|
|
### Interaction Quality
|
|
|
|
- [x] **IXTN-01**: Form submit buttons show a spinner during async operations (login, register, budget create/edit)
|
|
- [x] **IXTN-02**: Inline-editable rows show a pencil icon on hover as an edit affordance
|
|
- [x] **IXTN-03**: Inline edit saves show a brief visual confirmation (row background flash)
|
|
- [x] **IXTN-04**: Chart tooltips display values formatted with the budget's currency
|
|
- [x] **IXTN-05**: Category deletion triggers a confirmation dialog before executing
|
|
|
|
### Empty & Loading States
|
|
|
|
- [x] **STATE-01**: Dashboard shows a designed empty state with CTA when user has no budgets
|
|
- [x] **STATE-02**: Categories page shows a designed empty state with create CTA when no categories exist
|
|
- [x] **STATE-03**: Loading skeletons are styled with pastel-tinted backgrounds matching section colors
|
|
|
|
### Bug Fixes
|
|
|
|
- [x] **FIX-01**: `formatCurrency` uses the user's locale preference instead of hardcoded `de-DE`
|
|
- [x] **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 | Complete |
|
|
| DSGN-02 | Phase 1 | Complete |
|
|
| DSGN-03 | Phase 1 | Complete |
|
|
| DSGN-04 | Phase 1 | Complete |
|
|
| DSGN-05 | Phase 1 | Complete |
|
|
| FIX-02 | Phase 1 | Complete |
|
|
| AUTH-01 | Phase 2 | Complete |
|
|
| AUTH-02 | Phase 2 | Complete |
|
|
| AUTH-03 | Phase 2 | Complete |
|
|
| AUTH-04 | Phase 2 | Complete |
|
|
| NAV-01 | Phase 2 | Complete |
|
|
| NAV-02 | Phase 2 | Complete |
|
|
| NAV-03 | Phase 2 | Complete |
|
|
| NAV-04 | Phase 2 | Complete |
|
|
| IXTN-01 | Phase 3 | Complete |
|
|
| IXTN-02 | Phase 3 | Complete |
|
|
| IXTN-03 | Phase 3 | Complete |
|
|
| IXTN-05 | Phase 3 | Complete |
|
|
| STATE-01 | Phase 3 | Complete |
|
|
| STATE-02 | Phase 3 | Complete |
|
|
| STATE-03 | Phase 3 | Complete |
|
|
| IXTN-04 | Phase 4 | Complete |
|
|
| FIX-01 | Phase 4 | Complete |
|
|
|
|
**Coverage:**
|
|
- v1 requirements: 23 total
|
|
- Mapped to phases: 23
|
|
- Unmapped: 0 ✓
|
|
|
|
---
|
|
*Requirements defined: 2026-03-11*
|
|
*Last updated: 2026-03-11 after roadmap creation*
|