7.7 KiB
7.7 KiB
Requirements: SimpleFinanceDash
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.0 Requirements (Complete)
All shipped in v1.0 UI Polish milestone.
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:
formatCurrencyuses the user's locale preference instead of hardcodedde-DE - FIX-02:
InlineEditRowextracted into a shared component (currently duplicated in BillsTracker, VariableExpenses, DebtTracker)
v1.1 Requirements
Requirements for this milestone. Each maps to roadmap phases.
Template System
- TMPL-01: User can tag a budget item as fixed, variable, or one-off when creating or editing it
- TMPL-02: User can define a monthly budget template containing fixed items (with amounts) and variable items (category only)
- TMPL-03: Navigating to a month with no budget auto-generates one from the user's template (fixed items with amounts, variable items with blank amounts)
- TMPL-04: One-off items are not carried forward to new months
- TMPL-05: User can manage their template on a dedicated page — add, remove, reorder fixed and variable items
- TMPL-06: The "copy from previous month" feature is replaced by template-based generation
Quick-Add Library
- QADD-01: User can save a one-off expense category with an icon to their quick-add library
- QADD-02: User can browse and select from their quick-add library when adding a one-off item to a month
- QADD-03: User can manage their quick-add library — add, edit, remove saved categories
Layout & Density
- LYOT-01: Dashboard sections use flatter, lighter containers instead of heavy bordered cards
- LYOT-02: Table rows are tighter with reduced padding for higher data density
- LYOT-03: Card top padding above colored headers is eliminated
- LYOT-04: Dashboard grid layout is optimized for desktop — maximizes visible data without scrolling
- LYOT-05: Overall visual feel leans toward clean spreadsheet aesthetic — less chrome, more data
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 |
| Mobile/tablet responsiveness | Desktop web is the only target for now |
| CSV import / recurring transactions | Backend features, separate milestone |
| Shared/household budgets | Future feature |
Traceability
Which phases cover which requirements. Updated during roadmap creation.
| Requirement | Phase | Status |
|---|---|---|
| DSGN-01 | Phase 1 (v1.0) | Complete |
| DSGN-02 | Phase 1 (v1.0) | Complete |
| DSGN-03 | Phase 1 (v1.0) | Complete |
| DSGN-04 | Phase 1 (v1.0) | Complete |
| DSGN-05 | Phase 1 (v1.0) | Complete |
| FIX-02 | Phase 1 (v1.0) | Complete |
| AUTH-01 | Phase 2 (v1.0) | Complete |
| AUTH-02 | Phase 2 (v1.0) | Complete |
| AUTH-03 | Phase 2 (v1.0) | Complete |
| AUTH-04 | Phase 2 (v1.0) | Complete |
| NAV-01 | Phase 2 (v1.0) | Complete |
| NAV-02 | Phase 2 (v1.0) | Complete |
| NAV-03 | Phase 2 (v1.0) | Complete |
| NAV-04 | Phase 2 (v1.0) | Complete |
| IXTN-01 | Phase 3 (v1.0) | Complete |
| IXTN-02 | Phase 3 (v1.0) | Complete |
| IXTN-03 | Phase 3 (v1.0) | Complete |
| IXTN-05 | Phase 3 (v1.0) | Complete |
| STATE-01 | Phase 3 (v1.0) | Complete |
| STATE-02 | Phase 3 (v1.0) | Complete |
| STATE-03 | Phase 3 (v1.0) | Complete |
| IXTN-04 | Phase 4 (v1.0) | Complete |
| FIX-01 | Phase 4 (v1.0) | Complete |
| TMPL-01 | Phase 5 (v1.1) | Pending |
| TMPL-02 | Phase 5 (v1.1) | Pending |
| TMPL-04 | Phase 5 (v1.1) | Pending |
| TMPL-03 | Phase 6 (v1.1) | Pending |
| TMPL-05 | Phase 6 (v1.1) | Pending |
| TMPL-06 | Phase 6 (v1.1) | Pending |
| QADD-01 | Phase 7 (v1.1) | Pending |
| QADD-02 | Phase 7 (v1.1) | Pending |
| QADD-03 | Phase 7 (v1.1) | Pending |
| LYOT-01 | Phase 8 (v1.1) | Pending |
| LYOT-02 | Phase 8 (v1.1) | Pending |
| LYOT-03 | Phase 8 (v1.1) | Pending |
| LYOT-04 | Phase 8 (v1.1) | Pending |
| LYOT-05 | Phase 8 (v1.1) | Pending |
Coverage:
- v1.0 requirements: 23 total (all complete)
- v1.1 requirements: 14 total
- Mapped to phases: 14
- Unmapped: 0
Requirements defined: 2026-03-11 Last updated: 2026-03-12 after v1.1 roadmap creation