Drop legacy pages, contexts, and dashboard widgets

Removes Dashboard / Transactions / Transfers pages, the section
configuration UI, the legacy useSettings hook, and the standalone
PrivacyContext/ThemeContext modules. Privacy/theme contexts now live
under src/contexts/ and the API helper / push-notifications module
move under src/lib/.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/PrivacyContext.tsx

@@ -1,27 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-
-const PrivacyContext = createContext<{
-  privacyMode: boolean;
-  togglePrivacy: () => void;
-}>({ privacyMode: false, togglePrivacy: () => {} });
-
-export function PrivacyProvider({ children }: { children: React.ReactNode }) {
-  const [privacyMode, setPrivacyMode] = useState<boolean>(() => {
-    return localStorage.getItem('privacyMode') === 'true';
-  });
-
-  useEffect(() => {
-    document.documentElement.classList.toggle('privacy', privacyMode);
-    localStorage.setItem('privacyMode', String(privacyMode));
-  }, [privacyMode]);
-
-  const togglePrivacy = () => setPrivacyMode((p) => !p);
-
-  return (
-    <PrivacyContext.Provider value={{ privacyMode, togglePrivacy }}>
-      {children}
-    </PrivacyContext.Provider>
-  );
-}
-
-export const usePrivacy = () => useContext(PrivacyContext);

frontend/src/ThemeContext.tsx

@@ -1,31 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-
-type Theme = 'light' | 'dark';
-
-const ThemeContext = createContext<{
-  theme: Theme;
-  toggleTheme: () => void;
-}>({ theme: 'dark', toggleTheme: () => {} });
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>(() => {
-    const saved = localStorage.getItem('theme') as Theme;
-    if (saved) return saved;
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  });
-
-  useEffect(() => {
-    document.documentElement.classList.toggle('dark', theme === 'dark');
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useTheme = () => useContext(ThemeContext);

frontend/src/components/DashboardSection.tsx

@@ -1,76 +0,0 @@
-import { Settings } from 'lucide-react';
-import type { SectionSettings } from '../api';
-import { formatAmount } from '@/lib/format';
-import { Card } from '@/components/ui/card';
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from '@/components/ui/accordion';
-import { getColorClasses } from '@/lib/colors';
-import { cn } from '@/lib/utils';
-
-interface Props {
-  sectionId: string;
-  settings: SectionSettings;
-  total?: number;
-  totalCurrency?: string;
-  onToggleExpanded: (expanded: boolean) => void;
-  onOpenConfig: () => void;
-  children: React.ReactNode;
-}
-
-export default function DashboardSection({
-  sectionId,
-  settings,
-  total,
-  totalCurrency,
-  onToggleExpanded,
-  onOpenConfig,
-  children,
-}: Props) {
-  const colors = getColorClasses(settings.color);
-
-  return (
-    <Card className={cn('relative overflow-hidden border-l-4', colors.borderLeft)}>
-      {/* Settings icon — outside accordion trigger to avoid button-in-button */}
-      <button
-        onClick={onOpenConfig}
-        className="absolute top-2.5 right-3 z-10 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
-        title="Section settings"
-        aria-label="Section settings"
-      >
-        <Settings className="w-3.5 h-3.5" />
-      </button>
-
-      <Accordion
-        value={settings.expanded ? [sectionId] : []}
-        onValueChange={(value: string[]) => onToggleExpanded(value.includes(sectionId))}
-      >
-        <AccordionItem value={sectionId} className="border-none">
-          <AccordionTrigger
-            className="px-4 py-3 hover:no-underline cursor-pointer"
-            aria-label={`Expand ${settings.label}`}
-          >
-            <div className="flex items-center justify-between w-full pr-8">
-              <span className="text-sm font-semibold text-foreground">
-                {settings.label}
-              </span>
-              {total != null && totalCurrency && (
-                <span data-sensitive className="text-sm font-bold font-mono text-foreground">
-                  {formatAmount(total, totalCurrency)}
-                </span>
-              )}
-            </div>
-          </AccordionTrigger>
-          <AccordionContent>
-            <div className="divide-y divide-border mx-4 mb-4 rounded-lg overflow-hidden">
-              {children}
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </Card>
-  );
-}

frontend/src/components/SectionConfigDialog.tsx

@@ -1,137 +0,0 @@
-import { useState } from 'react';
-import type { SectionSettings } from '../api';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from '@/components/ui/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { COLOR_OPTIONS, getColorClasses } from '@/lib/colors';
-import { cn } from '@/lib/utils';
-
-interface Props {
-  sectionId: string;
-  settings: SectionSettings;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSave: (sectionId: string, updated: Partial<SectionSettings>) => void;
-}
-
-function ColorSwatch({ color }: { color: string }) {
-  const classes = getColorClasses(color);
-  return (
-    <span className="flex items-center gap-2">
-      <span className={cn('w-3 h-3 rounded-full', classes.bg, classes.ring, 'ring-1')} />
-      {color}
-    </span>
-  );
-}
-
-export default function SectionConfigDialog({ sectionId, settings, open, onOpenChange, onSave }: Props) {
-  const [label, setLabel] = useState(settings.label);
-  const [color, setColor] = useState(settings.color);
-  const [cardColor, setCardColor] = useState(settings.cardColor);
-  const [visible, setVisible] = useState(settings.visible);
-  const [order, setOrder] = useState(String(settings.order));
-
-  const handleSave = () => {
-    onSave(sectionId, {
-      label,
-      color,
-      cardColor,
-      visible,
-      order: parseInt(order) || 0,
-    });
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Configure Section</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label>Label</Label>
-            <Input value={label} onChange={(e) => setLabel(e.target.value)} />
-          </div>
-
-          <div className="space-y-2">
-            <Label>Section Color</Label>
-            <Select value={color} onValueChange={setColor}>
-              <SelectTrigger className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {COLOR_OPTIONS.map((c) => (
-                  <SelectItem key={c} value={c}>
-                    <ColorSwatch color={c} />
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-2">
-            <Label>Card Color</Label>
-            <Select value={cardColor} onValueChange={setCardColor}>
-              <SelectTrigger className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {COLOR_OPTIONS.map((c) => (
-                  <SelectItem key={c} value={c}>
-                    <ColorSwatch color={c} />
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <Label htmlFor={`visible-${sectionId}`}>Visible</Label>
-            <input
-              id={`visible-${sectionId}`}
-              type="checkbox"
-              checked={visible}
-              onChange={(e) => setVisible(e.target.checked)}
-              className="h-4 w-4 rounded border-input accent-primary cursor-pointer"
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label>Order</Label>
-            <Input
-              type="number"
-              min="0"
-              max="10"
-              value={order}
-              onChange={(e) => setOrder(e.target.value)}
-              className="w-20"
-            />
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave}>Save</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

frontend/src/contexts/privacy-context.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+const PrivacyContext = createContext<{
+  privacyMode: boolean;
+  togglePrivacy: () => void;
+}>({ privacyMode: false, togglePrivacy: () => {} });
+
+export function PrivacyProvider({ children }: { children: ReactNode }) {
+  const [privacyMode, setPrivacyMode] = useState<boolean>(false);
+
+  useEffect(() => {
+    setPrivacyMode(localStorage.getItem("privacyMode") === "true");
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("privacy", privacyMode);
+    localStorage.setItem("privacyMode", String(privacyMode));
+  }, [privacyMode]);
+
+  const togglePrivacy = () => setPrivacyMode((p) => !p);
+
+  return (
+    <PrivacyContext.Provider value={{ privacyMode, togglePrivacy }}>
+      {children}
+    </PrivacyContext.Provider>
+  );
+}
+
+export const usePrivacy = () => useContext(PrivacyContext);

frontend/src/contexts/theme-context.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+type Theme = "light" | "dark";
+
+const ThemeContext = createContext<{
+  theme: Theme;
+  toggleTheme: () => void;
+}>({ theme: "dark", toggleTheme: () => {} });
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("dark");
+
+  // Initialize once on mount (localStorage + prefers-color-scheme).
+  useEffect(() => {
+    const saved = localStorage.getItem("theme") as Theme | null;
+    const initial: Theme = saved
+      ? saved
+      : window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    setTheme(initial);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);

frontend/src/hooks/useSettings.ts

@@ -1,55 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import {
-  getSettings,
-  updateSettings,
-  type UserSettingsData,
-  type SectionSettings,
-} from '../api';
-
-const DEFAULT_SETTINGS: UserSettingsData = {
-  dashboard: {
-    sections: {
-      crc_accounts: { label: 'CRC Accounts', color: 'primary', cardColor: 'primary', visible: true, order: 0, expanded: false },
-      usd_accounts: { label: 'USD Accounts', color: 'chart-1', cardColor: 'chart-1', visible: true, order: 1, expanded: false },
-      pension: { label: 'Pension', color: 'chart-2', cardColor: 'chart-2', visible: true, order: 2, expanded: false },
-      savings: { label: 'Savings', color: 'chart-3', cardColor: 'chart-3', visible: true, order: 3, expanded: false },
-      liabilities: { label: 'Liabilities', color: 'destructive', cardColor: 'destructive', visible: true, order: 4, expanded: false },
-      crypto: { label: 'Crypto', color: 'chart-4', cardColor: 'chart-4', visible: true, order: 5, expanded: false },
-    },
-  },
-};
-
-export function useSettings() {
-  const [settings, setSettings] = useState<UserSettingsData>(DEFAULT_SETTINGS);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    getSettings()
-      .then((r) => setSettings(r.data.data))
-      .catch(() => {}) // use defaults on error
-      .finally(() => setLoading(false));
-  }, []);
-
-  const patchSection = useCallback(
-    async (sectionId: string, partial: Partial<SectionSettings>) => {
-      setSettings((prev) => {
-        const updated = {
-          ...prev,
-          dashboard: {
-            ...prev.dashboard,
-            sections: {
-              ...prev.dashboard.sections,
-              [sectionId]: { ...prev.dashboard.sections[sectionId], ...partial },
-            },
-          },
-        };
-        // Fire-and-forget save
-        updateSettings(updated).catch(console.error);
-        return updated;
-      });
-    },
-    []
-  );
-
-  return { settings, loading, patchSection };
-}

frontend/src/lib/api.ts

@@ -1,4 +1,4 @@
-const BASE_URL = import.meta.env.VITE_API_URL || '/api/v1';
+const BASE_URL = "/api/v1";
 
 class ApiError extends Error {
   response: { status: number; data: unknown };
@@ -12,7 +12,12 @@ interface RequestConfig {
   params?: Record<string, string | number | boolean | undefined>;
 }
 
-async function request<T>(method: string, url: string, body?: unknown, config?: RequestConfig): Promise<{ data: T }> {
+async function request<T>(
+  method: string,
+  url: string,
+  body?: unknown,
+  config?: RequestConfig,
+): Promise<{ data: T }> {
   let fullUrl = `${BASE_URL}${url}`;
 
   if (config?.params) {
@@ -25,28 +30,32 @@ async function request<T>(method: string, url: string, body?: unknown, config?:
   }
 
   const headers: Record<string, string> = {};
-  const token = localStorage.getItem('token');
-  if (token) headers['Authorization'] = `Bearer ${token}`;
-
   let fetchBody: BodyInit | undefined;
   if (body instanceof FormData || body instanceof URLSearchParams) {
     fetchBody = body;
   } else if (body !== undefined) {
-    headers['Content-Type'] = 'application/json';
+    headers["Content-Type"] = "application/json";
     fetchBody = JSON.stringify(body);
   }
 
-  const res = await fetch(fullUrl, { method, headers, body: fetchBody });
+  const res = await fetch(fullUrl, {
+    method,
+    headers,
+    body: fetchBody,
+    credentials: "same-origin",
+  });
 
   if (res.status === 401) {
-    localStorage.removeItem('token');
+    await fetch("/api/auth/logout", { method: "POST" }).catch(() => {});
-    window.location.href = '/login';
+    if (typeof window !== "undefined") window.location.replace("/login");
     throw new ApiError(401, null);
   }
 
   if (!res.ok) {
     let data: unknown = null;
-    try { data = await res.json(); } catch {}
+    try {
+      data = await res.json();
+    } catch {}
     throw new ApiError(res.status, data);
   }
 
@@ -57,33 +66,47 @@ async function request<T>(method: string, url: string, body?: unknown, config?:
 }
 
 const api = {
-  get<T = any>(url: string, config?: RequestConfig) {
+  get<T = unknown>(url: string, config?: RequestConfig) {
-    return request<T>('GET', url, undefined, config);
+    return request<T>("GET", url, undefined, config);
   },
-  post<T = any>(url: string, body?: unknown, config?: RequestConfig) {
+  post<T = unknown>(url: string, body?: unknown, config?: RequestConfig) {
-    return request<T>('POST', url, body, config);
+    return request<T>("POST", url, body, config);
   },
-  patch<T = any>(url: string, body?: unknown, config?: RequestConfig) {
+  patch<T = unknown>(url: string, body?: unknown, config?: RequestConfig) {
-    return request<T>('PATCH', url, body, config);
+    return request<T>("PATCH", url, body, config);
   },
-  put<T = any>(url: string, body?: unknown, config?: RequestConfig) {
+  put<T = unknown>(url: string, body?: unknown, config?: RequestConfig) {
-    return request<T>('PUT', url, body, config);
+    return request<T>("PUT", url, body, config);
   },
-  delete<T = any>(url: string, config?: RequestConfig) {
+  delete<T = unknown>(url: string, config?: RequestConfig) {
-    return request<T>('DELETE', url, undefined, config);
+    return request<T>("DELETE", url, undefined, config);
   },
 };
 
 export default api;
 
 export async function login(username: string, password: string) {
-  const form = new URLSearchParams();
+  const res = await fetch("/api/auth/login", {
-  form.append('username', username);
+    method: "POST",
-  form.append('password', password);
+    headers: { "Content-Type": "application/json" },
-  const { data } = await api.post('/auth/login', form);
+    body: JSON.stringify({ username, password }),
-  localStorage.setItem('token', data.access_token);
+    credentials: "same-origin",
-  return data;
+  });
+  if (!res.ok) {
+    let data: unknown = null;
+    try {
+      data = await res.json();
+    } catch {}
+    throw new ApiError(res.status, data);
   }
+  return res.json();
+}
+
+export async function logout() {
+  await fetch("/api/auth/logout", { method: "POST", credentials: "same-origin" });
+}
+
+// ─── Types ──────────────────────────────────────────────────────────────────
 
 export interface Account {
   id: number;
@@ -109,34 +132,6 @@ export interface ImportResult {
   errors: string[];
 }
 
-// --- User Settings ---
-
-export interface SectionSettings {
-  label: string;
-  color: string;
-  cardColor: string;
-  visible: boolean;
-  order: number;
-  expanded: boolean;
-}
-
-export interface DashboardSettings {
-  sections: Record<string, SectionSettings>;
-}
-
-export interface UserSettingsData {
-  dashboard: DashboardSettings;
-}
-
-export interface UserSettingsResponse {
-  key: string;
-  data: UserSettingsData;
-  updated_at: string;
-}
-
-export const getSettings = () => api.get<UserSettingsResponse>('/settings/');
-export const updateSettings = (data: UserSettingsData) => api.patch<UserSettingsResponse>('/settings/', { data });
-
 export interface Transaction {
   id: number;
   amount: number;
@@ -160,8 +155,13 @@ export interface Transaction {
 
 // --- Budget / Recurring Items ---
 
-export type RecurringItemType = 'INCOME' | 'EXPENSE';
+export type RecurringItemType = "INCOME" | "EXPENSE";
-export type RecurringFrequency = 'WEEKLY' | 'MONTHLY' | 'QUARTERLY' | 'BIANNUAL' | 'YEARLY';
+export type RecurringFrequency =
+  | "WEEKLY"
+  | "MONTHLY"
+  | "QUARTERLY"
+  | "BIANNUAL"
+  | "YEARLY";
 
 export interface RecurringItem {
   id: number;
@@ -295,19 +295,22 @@ export interface SavingsAccrualUpdate {
 }
 
 export const getSavingsAccruals = () =>
-  api.get<SavingsAccrual[]>('/savings-accrual/');
+  api.get<SavingsAccrual[]>("/savings-accrual/");
 export const createSavingsAccrual = (data: SavingsAccrualCreate) =>
-  api.post<SavingsAccrual>('/savings-accrual/', data);
+  api.post<SavingsAccrual>("/savings-accrual/", data);
 export const updateSavingsAccrual = (id: number, data: SavingsAccrualUpdate) =>
   api.patch<SavingsAccrual>(`/savings-accrual/${id}`, data);
 export const deleteSavingsAccrual = (id: number) =>
   api.delete(`/savings-accrual/${id}`);
 
-// Budget API functions
+// --- Budget ---
-export const getRecurringItems = (params?: { item_type?: string; is_active?: boolean }) =>
+
-  api.get<RecurringItem[]>('/budget/recurring', { params });
+export const getRecurringItems = (params?: {
+  item_type?: string;
+  is_active?: boolean;
+}) => api.get<RecurringItem[]>("/budget/recurring", { params });
 export const createRecurringItem = (data: RecurringItemCreate) =>
-  api.post<RecurringItem>('/budget/recurring', data);
+  api.post<RecurringItem>("/budget/recurring", data);
 export const updateRecurringItem = (id: number, data: RecurringItemUpdate) =>
   api.patch<RecurringItem>(`/budget/recurring/${id}`, data);
 export const deleteRecurringItem = (id: number) =>
@@ -316,7 +319,11 @@ export const getYearlyProjection = (year: number) =>
   api.get<YearlyProjection>(`/budget/projection/${year}`);
 export const getMonthlyDetail = (year: number, month: number) =>
   api.get<MonthlyDetail>(`/budget/month/${year}/${month}`);
-export const upsertBalanceOverride = (year: number, month: number, override_balance: number) =>
+export const upsertBalanceOverride = (
+  year: number,
+  month: number,
+  override_balance: number,
+) =>
   api.put(`/budget/balance-override/${year}/${month}`, { override_balance });
 export const deleteBalanceOverride = (year: number, month: number) =>
   api.delete(`/budget/balance-override/${year}/${month}`);
@@ -330,9 +337,9 @@ export interface SalariosSummary {
 }
 
 export const getSalarios = (params?: { limit?: number; offset?: number }) =>
-  api.get<Transaction[]>('/salarios/', { params });
+  api.get<Transaction[]>("/salarios/", { params });
 export const getSalariosSummary = () =>
-  api.get<SalariosSummary>('/salarios/summary');
+  api.get<SalariosSummary>("/salarios/summary");
 
 // --- Pensions ---
 
@@ -380,18 +387,16 @@ export interface PensionManualEntry {
 
 export const uploadPensionPDFs = (files: File[]) => {
   const form = new FormData();
-  files.forEach((f) => form.append('files', f));
+  files.forEach((f) => form.append("files", f));
-  return api.post<PensionUploadResult>('/pensions/upload', form);
+  return api.post<PensionUploadResult>("/pensions/upload", form);
 };
 
 export const getPensionSnapshots = () =>
-  api.get<PensionSnapshot[]>('/pensions/snapshots');
+  api.get<PensionSnapshot[]>("/pensions/snapshots");
-
 export const getPensionFundSummary = () =>
-  api.get<PensionSnapshot[]>('/pensions/fund-summary');
+  api.get<PensionSnapshot[]>("/pensions/fund-summary");
-
 export const submitPensionManualEntries = (entries: PensionManualEntry[]) =>
-  api.post<PensionUploadResult>('/pensions/manual', { entries });
+  api.post<PensionUploadResult>("/pensions/manual", { entries });
 
 // --- Municipal Receipts ---
 
@@ -448,17 +453,18 @@ export interface MunicipalReceiptUploadResult {
 
 export const uploadMunicipalReceipt = (file: File) => {
   const form = new FormData();
-  form.append('file', file);
+  form.append("file", file);
-  return api.post<MunicipalReceiptUploadResult>('/municipal-receipts/upload', form);
+  return api.post<MunicipalReceiptUploadResult>(
+    "/municipal-receipts/upload",
+    form,
+  );
 };
 
 export const getMunicipalReceipts = () =>
-  api.get<MunicipalReceipt[]>('/municipal-receipts/');
+  api.get<MunicipalReceipt[]>("/municipal-receipts/");
-
 export const getMunicipalReceiptDetail = (id: number) =>
   api.get<MunicipalReceiptDetail>(`/municipal-receipts/${id}`);
-
 export const getWaterConsumption = (months?: number) =>
-  api.get<WaterMeterReading[]>('/municipal-receipts/water-consumption', {
+  api.get<WaterMeterReading[]>("/municipal-receipts/water-consumption", {
     params: months ? { months } : undefined,
   });

frontend/src/pages/Dashboard.tsx

@@ -1,376 +0,0 @@
-import { useEffect, useState, useMemo } from 'react';
-import { Link } from 'react-router-dom';
-import {
-  ArrowRight,
-  TrendingUp,
-  TrendingDown,
-  RefreshCw,
-  CreditCard,
-  Pencil,
-  Check,
-  X,
-  BellRing,
-  Landmark,
-} from 'lucide-react';
-
-import api, { type Account, type Transaction } from '../api';
-import { useSettings } from '@/hooks/useSettings';
-import { formatAmount, formatDate, formatLocalDatetime } from '@/lib/format';
-import DashboardSection from '@/components/DashboardSection';
-import SectionConfigDialog from '@/components/SectionConfigDialog';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { cn } from '@/lib/utils';
-
-// --- Section definitions ---
-
-interface SectionDef {
-  filterFn: (a: Account) => boolean;
-  totalCurrency: string; // empty string = no total
-}
-
-const SECTION_DEFS: Record<string, SectionDef> = {
-  crc_accounts: { filterFn: (a) => a.account_type === 'BANK' && a.currency === 'CRC', totalCurrency: 'CRC' },
-  usd_accounts: { filterFn: (a) => a.account_type === 'BANK' && a.currency === 'USD', totalCurrency: 'USD' },
-  pension:      { filterFn: (a) => a.account_type === 'PENSION', totalCurrency: 'CRC' },
-  savings:      { filterFn: (a) => a.account_type === 'SAVINGS', totalCurrency: 'CRC' },
-  liabilities:  { filterFn: (a) => a.account_type === 'LIABILITY', totalCurrency: '' },
-  crypto:       { filterFn: (a) => a.account_type === 'CRYPTO', totalCurrency: '' },
-};
-
-const BANK_ORDER = ['BAC', 'BCR', 'DAVIVIENDA'];
-
-// --- AccountRow ---
-
-interface AccountRowProps {
-  account: Account;
-  editingId: number | null;
-  editValue: string;
-  setEditValue: (v: string) => void;
-  startEditing: (a: Account) => void;
-  saveBalance: (id: number) => void;
-  cancelEditing: () => void;
-}
-
-function AccountRow({
-  account,
-  editingId,
-  editValue,
-  setEditValue,
-  startEditing,
-  saveBalance,
-  cancelEditing,
-}: AccountRowProps) {
-  const isLiability = account.account_type === 'LIABILITY';
-  const isCrypto = account.account_type === 'CRYPTO';
-  const label = isCrypto ? account.label : (account.bank === 'DAVIVIENDA' ? 'DAV' : account.bank);
-  const isEditing = editingId === account.id;
-
-  return (
-    <div className="flex items-center justify-between px-3 py-2.5 hover:bg-muted/30 transition-colors group">
-      <span className="text-sm font-medium text-muted-foreground">{label}</span>
-
-      {isEditing ? (
-        <div className="flex items-center gap-2">
-          <Input
-            type="number"
-            step="0.01"
-            value={editValue}
-            onChange={(e) => setEditValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') saveBalance(account.id);
-              if (e.key === 'Escape') cancelEditing();
-            }}
-            autoFocus
-            className="text-sm font-bold font-mono tracking-tight h-auto py-1 w-40"
-          />
-          <Button variant="ghost" size="icon-xs" onClick={() => saveBalance(account.id)} title="Save" aria-label="Save balance">
-            <Check className="w-3.5 h-3.5" />
-          </Button>
-          <Button variant="ghost" size="icon-xs" onClick={cancelEditing} title="Cancel" aria-label="Cancel editing">
-            <X className="w-3.5 h-3.5" />
-          </Button>
-        </div>
-      ) : (
-        <div className="flex items-center gap-1.5">
-          <span data-sensitive className={cn('text-lg font-bold font-mono tracking-tight', isLiability && 'text-destructive')}>
-            {formatAmount(account.balance, account.currency)}
-          </span>
-          <button
-            onClick={() => startEditing(account)}
-            className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground cursor-pointer"
-            title="Edit balance"
-            aria-label="Edit balance"
-          >
-            <Pencil className="w-3.5 h-3.5" />
-          </button>
-          {isLiability && account.next_payment != null && (
-            <span data-sensitive className="text-xs font-mono text-destructive/60 ml-2">
-              Next: {formatAmount(account.next_payment, account.currency)}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// --- Dashboard ---
-
-export default function Dashboard() {
-  const [accounts, setAccounts] = useState<Account[]>([]);
-  const [recent, setRecent] = useState<Transaction[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [editingId, setEditingId] = useState<number | null>(null);
-  const [editValue, setEditValue] = useState('');
-  const [exchangeRate, setExchangeRate] = useState<{ buy_rate: number; sell_rate: number } | null>(null);
-  const [configSection, setConfigSection] = useState<string | null>(null);
-  const [testingPush, setTestingPush] = useState(false);
-
-  const { settings, patchSection } = useSettings();
-
-  const fetchData = async () => {
-    setLoading(true);
-    try {
-      const [accRes, txRes] = await Promise.all([
-        api.get('/accounts/'),
-        api.get('/transactions/recent?limit=5'),
-      ]);
-      setAccounts(accRes.data);
-      setRecent(txRes.data);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-    api.get('/exchange-rate/').then((r) => setExchangeRate(r.data)).catch(() => {});
-  };
-
-  useEffect(() => { fetchData(); }, []);
-
-  const startEditing = (account: Account) => {
-    setEditingId(account.id);
-    setEditValue(String(account.balance));
-  };
-  const cancelEditing = () => { setEditingId(null); setEditValue(''); };
-  const saveBalance = async (accountId: number) => {
-    const parsed = parseFloat(editValue);
-    if (isNaN(parsed)) return cancelEditing();
-    try {
-      await api.patch(`/accounts/${accountId}`, { balance: parsed });
-      setEditingId(null);
-      setEditValue('');
-      fetchData();
-    } catch (e) { console.error(e); }
-  };
-
-  const rowProps = { editingId, editValue, setEditValue, startEditing, saveBalance, cancelEditing };
-
-  // Sort sections by order, filter by visible
-  const sortedSections = useMemo(() => {
-    const sections = settings.dashboard.sections;
-    return Object.entries(sections)
-      .filter(([, s]) => s.visible)
-      .sort(([, a], [, b]) => a.order - b.order);
-  }, [settings]);
-
-  // Net worth calculation
-  const netWorthBreakdown = useMemo(() => {
-    if (accounts.length === 0) return null;
-    let assets = 0;
-    let liabilities = 0;
-    for (const a of accounts) {
-      const isLiability = a.account_type === 'LIABILITY';
-      let crcValue = 0;
-      if (a.currency === 'USD') {
-        crcValue = Math.abs(a.balance) * (exchangeRate?.sell_rate ?? 0);
-      } else if (a.currency === 'CRC') {
-        crcValue = Math.abs(a.balance);
-      }
-      if (isLiability) {
-        liabilities += crcValue;
-      } else {
-        assets += crcValue;
-      }
-    }
-    return { assets, liabilities, net: assets - liabilities };
-  }, [accounts, exchangeRate]);
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold font-heading">Dashboard</h1>
-          <p className="text-sm text-muted-foreground mt-1">Financial overview</p>
-        </div>
-        <Button variant="ghost" size="icon" onClick={fetchData} title="Refresh" aria-label="Refresh">
-          <RefreshCw className={cn('w-4 h-4', loading && 'animate-spin')} />
-        </Button>
-      </div>
-
-      {/* Net Worth */}
-      {netWorthBreakdown != null && (
-        <Card>
-          <CardContent className="px-4 py-3">
-            <div className="flex items-center justify-between text-sm font-mono text-muted-foreground">
-              <span>Net <span data-sensitive className="text-foreground font-bold">{netWorthBreakdown.net < 0 ? '-' : ''}{formatAmount(netWorthBreakdown.net, 'CRC')}</span></span>
-              <div className="flex gap-4">
-                <span>Assets <span data-sensitive className="text-foreground">{formatAmount(netWorthBreakdown.assets, 'CRC')}</span></span>
-                <span>Liabilities <span data-sensitive className="text-foreground">{formatAmount(netWorthBreakdown.liabilities, 'CRC')}</span></span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Account sections */}
-      {sortedSections.map(([sectionId, sectionSettings]) => {
-        const def = SECTION_DEFS[sectionId];
-        if (!def) return null;
-        let accts = accounts.filter(def.filterFn);
-        if (accts.length === 0) return null;
-
-        // Sort bank accounts by bank order
-        if (sectionId === 'crc_accounts' || sectionId === 'usd_accounts') {
-          accts = accts.sort((a, b) => BANK_ORDER.indexOf(a.bank) - BANK_ORDER.indexOf(b.bank));
-        }
-
-        const total = accts.reduce((s, a) => s + a.balance, 0);
-
-        return (
-          <DashboardSection
-            key={sectionId}
-            sectionId={sectionId}
-            settings={sectionSettings}
-            total={def.totalCurrency ? total : undefined}
-            totalCurrency={def.totalCurrency || undefined}
-            onToggleExpanded={(expanded) => patchSection(sectionId, { expanded })}
-            onOpenConfig={() => setConfigSection(sectionId)}
-          >
-            {accts.map((a) => (
-              <AccountRow key={a.id} account={a} {...rowProps} />
-            ))}
-          </DashboardSection>
-        );
-      })}
-
-      {/* Exchange rate */}
-      {exchangeRate && (
-        <Card>
-          <CardContent className="p-4">
-            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">USD/CRC Exchange Rate</span>
-            <div className="flex items-baseline gap-3 mt-1">
-              <span data-sensitive className="text-lg font-bold font-mono">Buy: ₡{exchangeRate.buy_rate.toFixed(2)}</span>
-              <span data-sensitive className="text-lg font-bold font-mono text-muted-foreground">Sell: ₡{exchangeRate.sell_rate.toFixed(2)}</span>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Recent transactions */}
-      <Card>
-        <CardHeader className="border-b flex-row items-center justify-between">
-          <div className="flex items-center gap-2">
-            <CreditCard className="w-4 h-4 text-muted-foreground" />
-            <CardTitle className="text-sm">Recent Charges</CardTitle>
-          </div>
-          <Link
-            to="/transactions"
-            className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
-          >
-            View all
-            <ArrowRight className="w-3 h-3" />
-          </Link>
-        </CardHeader>
-        <CardContent className="p-0">
-          {recent.length === 0 && !loading ? (
-            <div className="px-5 py-12 text-center text-muted-foreground text-sm">No transactions yet. Add your first one!</div>
-          ) : (
-            <div className="divide-y divide-border">
-              {recent.map((tx) => (
-                <div key={tx.id} className="flex items-center justify-between px-5 py-3.5 hover:bg-muted/50 transition-colors">
-                  <div className="flex items-center gap-3 min-w-0">
-                    <div className={cn(
-                      'w-8 h-8 rounded-lg flex items-center justify-center shrink-0',
-                      tx.transaction_type === 'COMPRA' ? 'bg-destructive/10 text-destructive' : 'bg-primary/10 text-primary'
-                    )}>
-                      {tx.transaction_type === 'DEPOSITO' ? <Landmark className="w-4 h-4" /> : tx.transaction_type === 'DEVOLUCION' ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
-                    </div>
-                    <div className="min-w-0">
-                      <p className="text-sm font-medium truncate">{tx.merchant}</p>
-                      <p className="text-xs text-muted-foreground">
-                        {formatDate(tx.date)}
-                        {tx.category && <span className="ml-2 text-muted-foreground/60">{tx.category.name}</span>}
-                      </p>
-                    </div>
-                  </div>
-                  <span data-sensitive className={cn(
-                    'font-mono text-sm font-medium shrink-0 ml-4',
-                    tx.transaction_type !== 'COMPRA' && 'text-primary'
-                  )}>
-                    {tx.transaction_type === 'COMPRA' ? '-' : '+'}{formatAmount(tx.amount, tx.currency)}
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Test push notification */}
-      <Card className="border-dashed border-yellow-500/50">
-        <CardContent className="p-4 flex items-center justify-between">
-          <div>
-            <p className="text-sm font-medium">Test Push Notification</p>
-            <p className="text-xs text-muted-foreground">Creates a mock transaction to trigger a push notification</p>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={testingPush}
-            onClick={async () => {
-              setTestingPush(true);
-              try {
-                const merchants = ['Walmart', 'AutoMercado', 'Uber Eats', 'Amazon', 'PriceSmart'];
-                const amounts = [4500, 12350, 8900, 25000, 67800];
-                const i = Math.floor(Math.random() * merchants.length);
-                await api.post('/transactions/', {
-                  merchant: merchants[i],
-                  amount: amounts[i],
-                  currency: 'CRC',
-                  date: formatLocalDatetime(new Date()),
-                  bank: 'BAC',
-                  source: 'CREDIT_CARD',
-                  transaction_type: 'COMPRA',
-                  reference: `test-push-${Date.now()}`,
-                  notes: '[TEST] Push notification test — safe to delete',
-                });
-                fetchData();
-              } catch (e) {
-                console.error('Test push failed:', e);
-              } finally {
-                setTestingPush(false);
-              }
-            }}
-          >
-            <BellRing className="w-4 h-4 mr-2" />
-            {testingPush ? 'Sending...' : 'Send test'}
-          </Button>
-        </CardContent>
-      </Card>
-
-      {/* Section config dialog */}
-      {configSection && settings.dashboard.sections[configSection] && (
-        <SectionConfigDialog
-          sectionId={configSection}
-          settings={settings.dashboard.sections[configSection]}
-          open={!!configSection}
-          onOpenChange={(open) => { if (!open) setConfigSection(null); }}
-          onSave={(id, partial) => patchSection(id, partial)}
-        />
-      )}
-    </div>
-  );
-}

frontend/src/pages/Transactions.tsx

@@ -1,131 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import { Plus, ClipboardPaste } from 'lucide-react';
-
-import api, { type Transaction, type Category } from '../api';
-import PasteImportModal from '../components/PasteImportModal';
-import BillingCycleSelector from '../components/BillingCycleSelector';
-import TransactionList from '../components/TransactionList';
-import { Button } from '@/components/ui/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-
-function formatAmount(amount: number, currency: string) {
-  const abs = Math.abs(amount);
-  if (currency === 'USD') {
-    return `$${abs.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-  }
-  return `₡${abs.toLocaleString('es-CR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-}
-
-export default function Transactions() {
-  const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const [categories, setCategories] = useState<Category[]>([]);
-  const [search, setSearch] = useState('');
-  const [categoryFilter, setCategoryFilter] = useState('');
-  const [loading, setLoading] = useState(true);
-  const [importOpen, setImportOpen] = useState(false);
-  const [cycle, setCycle] = useState<{ year: number; month: number } | null>(null);
-
-  const fetchTransactions = useCallback(async () => {
-    setLoading(true);
-    try {
-      const params: Record<string, string> = { source: 'CREDIT_CARD', limit: '200' };
-      if (search) params.search = search;
-      if (categoryFilter) params.category_id = categoryFilter;
-      if (cycle) {
-        params.cycle_year = String(cycle.year);
-        params.cycle_month = String(cycle.month);
-      }
-      const { data } = await api.get('/transactions/', { params });
-      setTransactions(data);
-    } finally {
-      setLoading(false);
-    }
-  }, [search, categoryFilter, cycle]);
-
-  useEffect(() => {
-    api.get('/categories/').then((r) => setCategories(r.data));
-  }, []);
-
-  useEffect(() => {
-    const timer = setTimeout(fetchTransactions, 300);
-    return () => clearTimeout(timer);
-  }, [fetchTransactions]);
-
-  const totalCRC = transactions
-    .filter((tx) => tx.currency === 'CRC')
-    .reduce((sum, tx) => sum + (tx.transaction_type === 'DEVOLUCION' ? -tx.amount : tx.amount), 0);
-  const totalUSD = transactions
-    .filter((tx) => tx.currency === 'USD')
-    .reduce((sum, tx) => sum + (tx.transaction_type === 'DEVOLUCION' ? -tx.amount : tx.amount), 0);
-
-  return (
-    <div className="space-y-5">
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div>
-          <h1 className="text-2xl font-bold font-heading">Credit Card Transactions</h1>
-          <p className="text-sm text-muted-foreground mt-1">
-            {transactions.length} transactions
-            {totalCRC !== 0 && (
-              <> &middot; <span data-sensitive className="font-mono text-foreground">{formatAmount(totalCRC, 'CRC')}</span></>
-            )}
-            {totalUSD !== 0 && (
-              <> &middot; <span data-sensitive className="font-mono text-foreground">{formatAmount(totalUSD, 'USD')}</span></>
-            )}
-          </p>
-        </div>
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={() => setImportOpen(true)}>
-            <ClipboardPaste className="w-4 h-4" />
-            Import
-          </Button>
-        </div>
-      </div>
-
-      {/* Billing cycle */}
-      <BillingCycleSelector value={cycle} onChange={setCycle} />
-
-      {/* Category filter */}
-      <div className="flex items-center gap-3">
-        <Select
-          value={categoryFilter || 'all'}
-          onValueChange={(v) => setCategoryFilter(v === 'all' ? '' : v)}
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All Categories</SelectItem>
-            {categories.map((c) => (
-              <SelectItem key={c.id} value={String(c.id)}>
-                {c.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <TransactionList
-        transactions={transactions}
-        loading={loading}
-        source="CREDIT_CARD"
-        search={search}
-        onSearchChange={setSearch}
-        onRefresh={fetchTransactions}
-        showCategory
-      />
-
-      {importOpen && (
-        <PasteImportModal
-          onClose={() => setImportOpen(false)}
-          onImported={fetchTransactions}
-        />
-      )}
-    </div>
-  );
-}

frontend/src/pages/Transfers.tsx

@@ -1,65 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import { ArrowLeftRight } from 'lucide-react';
-
-import api, { type Transaction } from '../api';
-import TransactionList from '../components/TransactionList';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
-
-type SourceTab = 'CASH' | 'TRANSFER';
-
-export default function Transfers() {
-  const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const [search, setSearch] = useState('');
-  const [sourceTab, setSourceTab] = useState<SourceTab>('CASH');
-  const [loading, setLoading] = useState(true);
-
-  const fetchTransactions = useCallback(async () => {
-    setLoading(true);
-    try {
-      const params: Record<string, string> = { source: sourceTab, limit: '200' };
-      if (search) params.search = search;
-      const { data } = await api.get('/transactions/', { params });
-      setTransactions(data);
-    } finally {
-      setLoading(false);
-    }
-  }, [search, sourceTab]);
-
-  useEffect(() => {
-    const timer = setTimeout(fetchTransactions, 300);
-    return () => clearTimeout(timer);
-  }, [fetchTransactions]);
-
-  return (
-    <div className="space-y-5">
-      <div>
-        <h1 className="text-2xl font-bold font-heading">Cash & Transfers</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          Track non-credit-card expenses
-        </p>
-      </div>
-
-      <Tabs value={sourceTab} onValueChange={(v) => setSourceTab(v as SourceTab)}>
-        <TabsList>
-          <TabsTrigger value="CASH">Cash</TabsTrigger>
-          <TabsTrigger value="TRANSFER">Transfers</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value={sourceTab} className="mt-5 space-y-5">
-          <TransactionList
-            transactions={transactions}
-            loading={loading}
-            source={sourceTab}
-            search={search}
-            onSearchChange={setSearch}
-            onRefresh={fetchTransactions}
-            showCategory={false}
-            addLabel={sourceTab === 'CASH' ? 'Add Cash Expense' : 'Add Transfer'}
-            emptyIcon={<ArrowLeftRight className="w-8 h-8 mx-auto mb-3 text-muted-foreground/50" />}
-            emptyMessage={`No ${sourceTab.toLowerCase()} transactions yet`}
-          />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}