Implement Phase 4: reports & investments frontend

Add interactive reports dashboard with 4 chart types (spending by
category donut, income vs expense bar, net worth area, cash flow bar)
using ApexCharts, date range presets, and account filtering. Add
investment portfolio view with holdings table, allocation chart, and
gain/loss color coding. Includes TypeScript types and API services.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/services/investments.ts

@@ -0,0 +1,10 @@
+import api from './api'
+import type { InvestmentHolding, InvestmentPerformance } from '@/types'
+
+export const investmentsApi = {
+  getHoldings: (accountId: string) =>
+    api.get<InvestmentHolding[]>(`/investments/${accountId}/holdings`),
+
+  getPerformance: (accountId: string) =>
+    api.get<InvestmentPerformance>(`/investments/${accountId}/performance`),
+}

frontend/src/services/reports.ts

@@ -0,0 +1,24 @@
+import api from './api'
+import type { SpendingByCategoryReport, IncomeVsExpenseReport, NetWorthReport, CashFlowReport } from '@/types'
+
+export const reportsApi = {
+  spendingByCategory: (startDate: string, endDate: string, accountId?: string) =>
+    api.get<SpendingByCategoryReport>('/reports/spending-by-category', {
+      params: { startDate, endDate, accountId },
+    }),
+
+  incomeVsExpense: (startDate: string, endDate: string) =>
+    api.get<IncomeVsExpenseReport>('/reports/income-vs-expense', {
+      params: { startDate, endDate },
+    }),
+
+  netWorth: (startDate: string, endDate: string) =>
+    api.get<NetWorthReport>('/reports/net-worth', {
+      params: { startDate, endDate },
+    }),
+
+  cashFlow: (startDate: string, endDate: string) =>
+    api.get<CashFlowReport>('/reports/cash-flow', {
+      params: { startDate, endDate },
+    }),
+}