From 3fc9288c38f95dcadb253c1c0b519a6d8e6ee8c3 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Mon, 16 Mar 2026 11:30:39 +0100 Subject: [PATCH] docs: initialize project --- .planning/PROJECT.md | 82 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 .planning/PROJECT.md diff --git a/.planning/PROJECT.md b/.planning/PROJECT.md new file mode 100644 index 0000000..7f1e46b --- /dev/null +++ b/.planning/PROJECT.md @@ -0,0 +1,82 @@ +# SimpleFinanceDash + +## What This Is + +A personal finance dashboard web app that replaces a basic monthly budget spreadsheet. Users set up income, bills, expenses, debt, and savings categories, create monthly budgets from templates, and track budget vs actual spending with visual charts and summaries. Built as a React SPA with Supabase backend. + +## Core Value + +Users can see their full monthly financial picture at a glance — income, spending, and what's left — in a visually rich, easy-to-read dashboard. + +## Requirements + +### Validated + +- ✓ User can sign up with email/password — existing +- ✓ User can log in with email/password — existing +- ✓ User can log in with Google or GitHub OAuth — existing +- ✓ User can sign out from any page — existing +- ✓ User can create and manage expense categories (income, bill, variable expense, debt, saving, investment) — existing +- ✓ User can set up a monthly budget template with fixed/variable items — existing +- ✓ User can generate monthly budgets from template — existing +- ✓ User can track budgeted vs actual amounts per category item — existing +- ✓ User can add items quickly via quick-add library — existing +- ✓ User can set locale and currency in settings — existing +- ✓ App supports English and German — existing +- ✓ Dashboard shows summary cards (income, expenses, balance) — existing +- ✓ Dashboard shows expense breakdown pie chart — existing +- ✓ Dashboard shows category progress bars — existing + +### 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 + +### Out of Scope + +- New backend features or data model changes — this milestone is UI only +- Recurring transaction automation — no backend changes +- Spending alerts or notifications — no backend changes +- Trend charts over months — future feature, not part of UI overhaul +- Mobile-first optimization — desktop first, basic responsiveness only + +## Context + +- **Existing codebase:** React 19 + Vite 8 + Tailwind CSS 4 + Supabase + TanStack Query + Recharts + shadcn/ui (Radix) + i18next +- **Data model:** Profiles, Categories (6 types), Templates/TemplateItems, Budgets/BudgetItems, QuickAddItems +- **Architecture:** Three-tier SPA — Pages > Hooks > Supabase. TanStack Query for state. No Redux/Zustand. +- **Auth:** Supabase auth with RLS policies. Protected/public routes via React Router. +- **Current UI state:** Functional but basic. shadcn/ui cards and tables. Single pie chart and progress bars on dashboard. Other pages are simple CRUD forms/tables. +- **Reference image:** Monthly budget spreadsheet with income/bills/expenses/debt/savings sections, budget vs actual columns, bar charts, horizontal bars, and donut chart. Rich colors. + +## Constraints + +- **Tech stack**: Must use existing stack (React, Tailwind, Recharts, shadcn/ui) — no new frameworks or major dependencies +- **Backend**: No Supabase schema changes — UI-only modifications +- **Data model**: Existing types and hooks must be preserved — redesign the presentation layer only +- **i18n**: All new UI text must have translation keys in both en.json and de.json + +## Key Decisions + +| 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 | + +--- +*Last updated: 2026-03-16 after initialization*