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

docs: create UI/UX overhaul roadmap with 4-phase structure

Browse Source 
Map all 13 active requirements to a foundation-first delivery
sequence: design primitives, dashboard charts, collapsible
sections, then full-app consistency.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-03-16 11:48:16 +01:00
parent b830d381db
commit 4387795947
3 changed files with 238 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
.planning/PROJECT.md
View File

@@ -29,19 +29,19 @@ Users can see their full monthly financial picture at a glance — income, spend
### Active
- [ ] Redesign dashboard with hybrid layout — summary cards, charts, and collapsible category sections (income, bills, expenses, debt, savings) with budget/actual columns
- [ ] Add bar chart comparing income budget vs actual
- [ ] Add horizontal bar chart comparing spend budget vs actual by category type
- [ ] Improve donut chart for expense category breakdown with richer styling
- [ ] Add collapsible inline sections on dashboard for each category group showing individual line items
- [ ] Redesign all pages with rich, colorful visual style — consistent design language across the app
- [ ] Refresh login and register pages
- [ ] Refresh categories page
- [ ] Refresh template page
- [ ] Refresh budget list and budget detail pages
- [ ] Refresh quick-add page
- [ ] Refresh settings page
- [ ] Desktop-first responsive layout across all pages
- [ ] UI-DASH-01: Redesign dashboard with hybrid layout — summary cards, charts, and collapsible category sections (income, bills, expenses, debt, savings) with budget/actual columns
- [ ] UI-BAR-01: Add bar chart comparing income budget vs actual
- [ ] UI-HBAR-01: Add horizontal bar chart comparing spend budget vs actual by category type
- [ ] UI-DONUT-01: Improve donut chart for expense category breakdown with richer styling
- [ ] UI-COLLAPSE-01: Add collapsible inline sections on dashboard for each category group showing individual line items
- [ ] UI-DESIGN-01: Redesign all pages with rich, colorful visual style — consistent design language across the app
- [ ] UI-AUTH-01: Refresh login and register pages
- [ ] UI-CATEGORIES-01: Refresh categories page
- [ ] UI-TEMPLATE-01: Refresh template page
- [ ] UI-BUDGETS-01: Refresh budget list and budget detail pages
- [ ] UI-QUICKADD-01: Refresh quick-add page
- [ ] UI-SETTINGS-01: Refresh settings page
- [ ] UI-RESPONSIVE-01: Desktop-first responsive layout across all pages
### Out of Scope
@@ -71,12 +71,31 @@ Users can see their full monthly financial picture at a glance — income, spend
| Decision | Rationale | Outcome |
|----------|-----------|---------|
| UI overhaul only, no backend changes | Keep scope focused, ship faster, reduce risk | — Pending |
| Desktop-first layout | Primary use case is desktop; basic responsive for mobile | — Pending |
| Rich & colorful visual style | Match the visual density and appeal of the spreadsheet reference | — Pending |
| Hybrid dashboard (summary + collapsible sections) | Best of both: quick overview with drill-down capability inline | — Pending |
| All three chart types (bar, horizontal bar, donut) | Comprehensive financial visualization like the reference | — Pending |
| Refresh all pages, not just dashboard | Consistent design language throughout the app | — Pending |
| UI overhaul only, no backend changes | Keep scope focused, ship faster, reduce risk | Pending |
| Desktop-first layout | Primary use case is desktop; basic responsive for mobile | Pending |
| Rich & colorful visual style | Match the visual density and appeal of the spreadsheet reference | Pending |
| Hybrid dashboard (summary + collapsible sections) | Best of both: quick overview with drill-down capability inline | Pending |
| All three chart types (bar, horizontal bar, donut) | Comprehensive financial visualization like the reference | Pending |
| Refresh all pages, not just dashboard | Consistent design language throughout the app | Pending |
| 4-phase roadmap: Foundation > Charts > Collapsibles > Full-app | Build dependency chain from research; design tokens before components, dashboard before other pages | Pending |
## Traceability
| Requirement | Phase | Status |
|-------------|-------|--------|
| UI-DASH-01 | Phase 1, 2, 3 | Pending |
| UI-BAR-01 | Phase 2 | Pending |
| UI-HBAR-01 | Phase 2 | Pending |
| UI-DONUT-01 | Phase 2 | Pending |
| UI-COLLAPSE-01 | Phase 3 | Pending |
| UI-DESIGN-01 | Phase 1, 4 | Pending |
| UI-AUTH-01 | Phase 4 | Pending |
| UI-CATEGORIES-01 | Phase 4 | Pending |
| UI-TEMPLATE-01 | Phase 4 | Pending |
| UI-BUDGETS-01 | Phase 4 | Pending |
| UI-QUICKADD-01 | Phase 4 | Pending |
| UI-SETTINGS-01 | Phase 4 | Pending |
| UI-RESPONSIVE-01 | Phase 1, 4 | Pending |
---
*Last updated: 2026-03-16 after initialization*
*Last updated: 2026-03-16 after roadmap creation*