Commit Graph

11 Commits

Author SHA1 Message Date
Víctor Falcón c5df59c285 feat: add multiple chart view modes for net worth evolution (#37)
## 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
2025-12-30 07:22:19 +01:00
Víctor Falcón 4c26c7588d
Amount display format (#29) 2025-12-15 10:44:13 +01:00
Víctor Falcón 8811afbad8
feat: Add privacy mode to hide monetary amounts (#28)
## Summary
This PR implements a global privacy mode feature that allows users to
hide all monetary amounts throughout the application.

## Changes
- **Created PrivacyModeContext**: New context provider with localStorage
persistence for privacy mode state
- **Created AmountDisplay component**: Centralized component for
displaying monetary amounts with blur effect when privacy mode is
enabled
- **Updated app logo logic**: Logo now shows birdhouse icon when privacy
mode is enabled or encryption key is not set
- **Added privacy mode toggle**: New toggle in user menu to
enable/disable privacy mode
- **Replaced inline amount formatting**: All monetary amounts now use
the AmountDisplay component
- **Updated trend indicators**: AmountTrendIndicator and
PercentageTrendIndicator now use AmountDisplay
- **Added animated transitions**: Smooth transitions when toggling
privacy mode

## Features
- Privacy mode state persists across sessions (localStorage)
- Amounts display as `$•••.••` with blur effect when privacy mode is
enabled
- Animated transitions (300ms) when toggling privacy mode
- App logo changes to birdhouse when privacy mode is on
- Toggle accessible from user menu at the top

## Testing
- Tested privacy mode toggle functionality
- Verified amounts are hidden/shown correctly across all pages
- Confirmed logo animation works properly
- Verified localStorage persistence

## Screenshots
Privacy mode can be toggled from the user menu, and all amounts
throughout the application will be hidden with a blur effect.
2025-12-14 16:03:02 +01:00
Víctor Falcón 30d64f8249
refactor: use shared trend indicator components with hover tooltips (#18)
## 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)
2025-12-08 17:31:22 +01:00
Víctor Falcón 753b87baf2 Fix net-worth chart on desktop 2025-12-08 16:19:37 +01:00
Víctor Falcón 0272e6e3fb
Mobile design (#17)
<img width="993" height="1066" alt="image"
src="https://github.com/user-attachments/assets/e784bcd3-29bf-454c-b2b4-5edfe7281889"
/>
2025-12-08 15:43:09 +01:00
Víctor Falcón 2065ea4921
Dashboard: Top spending categories (#9)
## New
<img width="1123" height="685" alt="image"
src="https://github.com/user-attachments/assets/567dcb0f-ab18-4c4c-9d85-e26b05754740"
/>

## Old
<img width="1127" height="290" alt="image"
src="https://github.com/user-attachments/assets/bd0181a3-befd-485d-8b99-ae0164a4ef0c"
/>
2025-12-03 16:34:13 +01:00
Víctor Falcón 5f149b4bae
feat: Add account balance chart improvements and icons (#5)
## New
<img width="1123" height="195" alt="image"
src="https://github.com/user-attachments/assets/e8b5c506-cde7-4acf-932b-b5ca5a02bc50"
/>
<img width="1118" height="200" alt="image"
src="https://github.com/user-attachments/assets/482f8af7-4ec0-460c-8fe9-d30f5f5e5365"
/>

## Before
<img width="1125" height="194" alt="image"
src="https://github.com/user-attachments/assets/dd7de6d6-e428-4df4-8f7f-988701c6ed22"
/>
2025-12-03 09:31:32 +01:00
Víctor Falcón a0f44a9144
Dashboard: Net worth Chart (#3)
* Improve net worth chart

* feat: Add current net worth display to dashboard chart

* Handle different currencies

* Add account balance sync service and update SyncProvider

* Remove redundant transaction filters in DashboardAnalyticsController
2025-12-03 08:53:28 +01:00
Víctor Falcón 2fefb64710 Fix CI: Update bun.lock and fix linting errors 2025-12-01 15:16:06 +01:00
Víctor Falcón a826182d47 Add dashboard analytics frontend
- Create reusable dashboard components:
  - StatCard with loading states and trend indicators
  - NetWorthCard with period comparison
  - SpendingSummaryCard with trend visualization
  - CashFlowCard showing income vs expenses
  - NetWorthChart with area chart visualization
  - AccountBalanceCard with sparkline charts
  - TopCategoriesCard with category breakdown
- Add useDashboardData hook for fetching analytics
- Update dashboard page with complete analytics UI
- Include date range selector and responsive grid layout
2025-12-01 10:30:46 +01:00