## Sentry
- Issue: PHP-LARAVEL-1T
- URL: https://whisper-money.sentry.io/issues/PHP-LARAVEL-1T
## Root cause
Cashflow breakdown UI assumed every API row has a category object.
Production returned a breakdown row with `category: null`, so rendering
read `item.category.icon` and crashed.
## Fix
- Allow breakdown rows to carry nullable category/category_id.
- Render null categories as Uncategorized with HelpCircle/gray fallback.
- Add focused Vitest regression.
- Enable Wayfinder Vite plugin in Vitest so components importing
generated actions resolve in tests.
## Verification
- `npm test -- resources/js/components/cashflow/breakdown-card.test.tsx`
- `npx prettier --write
resources/js/components/cashflow/breakdown-card.tsx
resources/js/components/cashflow/breakdown-card.test.tsx
resources/js/hooks/use-cashflow-data.ts vitest.config.ts`
- `npx eslint resources/js/components/cashflow/breakdown-card.tsx
resources/js/components/cashflow/breakdown-card.test.tsx
resources/js/hooks/use-cashflow-data.ts vitest.config.ts --fix`
## Notes
- `npm run types` currently fails on existing unrelated TypeScript
errors across account, transaction, chart, auth, crypto, and dexie
files.
## Summary
- Add four view modes for net worth and account balance charts:
- **Stacked Accounts**: existing stacked bar chart showing balances by
account
- **Line**: net worth line chart with linear/log scale toggle
- **Change**: bar chart showing MoM%, YoY%, Rolling 12M changes
- **Waterfall**: bridge chart showing Start -> Change -> End transition
- Add Vitest for frontend unit testing with 52 tests covering all
calculation functions
- Proper sign handling for liabilities (credit cards and loans subtract
from net worth)
- Log scale disabled with warning when net worth includes zero or
negative values
- Shared components and logic between dashboard and account detail
charts
## New Files
- `vitest.config.ts` - Vitest configuration
- `resources/js/lib/chart-calculations.ts` - Pure computation functions
- `resources/js/lib/chart-calculations.test.ts` - 52 unit tests
- `resources/js/hooks/use-chart-views.ts` - Shared chart view state hook
- `resources/js/components/charts/` - Reusable chart components
## Test plan
- [x] Dashboard net worth chart shows view toggle and all four views
work
- [ ] Account detail page chart shows view toggle and three views work
(no stacked)
- [x] Line chart scale toggle works (log disabled with warning when
applicable)
- [x] Change chart series toggle (MoM, YoY, 12M EUR, 12M %) works
- [x] Waterfall chart month selector works
- [x] All 52 unit tests pass (`bun run test`)
- [x] Build succeeds (`bun run build`)
- [x] Dark mode styling correct
Víctor Falcón