## 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
## Summary
Refactored all places using TrendingUp/TrendingDown icons directly to
use the shared `AmountTrendIndicator` and `PercentageTrendIndicator`
components.
<img width="1113" height="799" alt="image"
src="https://github.com/user-attachments/assets/8a635d23-3c14-48b6-80d0-b5641af93024"
/>
## Changes
- **AmountTrendIndicator**: Now shows percentage diff on hover via
tooltip
- **PercentageTrendIndicator**: Now shows amount diff on hover via
tooltip
- Added `invertColors` prop to `PercentageTrendIndicator` for spending
categories (where spending less is good)
- Added `className` prop to both components for flexibility
## Files refactored
- `account-list-card.tsx` - Now uses `AmountTrendIndicator`
- `top-categories-card.tsx` - Now uses `PercentageTrendIndicator`
- `account-balance-chart.tsx` - Removed local `TrendIndicator` function,
now uses shared `PercentageTrendIndicator`
- `account-balance-card.tsx` - Updated to pass new props
- `net-worth-chart.tsx` - Updated to pass new props
## Testing
- All existing tests pass
- Hover over any trend indicator to see the alternate metric (percentage
or amount)
Add click handlers to balance displays in account chart and list card components, allowing users to quickly update account balances by clicking on the displayed balance amount.
Víctor Falcón