Add global multi-account filter to all reports with chart hover interaction

Move account selector to date range bar and apply filtering to all four
report types. Add bidirectional hover highlighting between spending donut
chart and category table. Fix donut data label readability with white text.

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

frontend/src/services/reports.ts

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