Update CLAUDE.md with theming, charts, and bill locking notes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-19 19:59:14 -04:00
parent 195a36c8a5
commit c132e1a5fe

View File

@@ -51,3 +51,9 @@ cd server && npm install && npm run dev
## Application Structure
The default route `/` renders the paycheck-centric main view (`client/src/pages/PaycheckView.jsx`). It shows the current month's two paychecks side-by-side with bills, paid status, one-time expenses, and remaining balance. Month navigation (prev/next) fetches data via `GET /api/paychecks?year=&month=`.
**Theming:** `client/src/ThemeContext.jsx` provides light/dark mode via CSS custom properties on `[data-theme]`. Preference persists in `localStorage` and defaults to `prefers-color-scheme`. All design tokens live in `client/src/index.css`.
**Charts:** Monthly Summary and Annual Overview use [Recharts](https://recharts.org) (SVG-based). Monthly Summary shows a spending breakdown donut and variable-by-category bar. Annual Overview shows income vs. spending, surplus/deficit trend, and stacked variable spending by category — all driven by the single `GET /api/summary/annual?year=` endpoint.
**Bill amount locking:** When a `paycheck_bill` is marked paid, `amount_override` is set to the bill's current amount, locking in the historical value. Unmarking clears the override.