Add accounts expansion, analytics, exchange rates, API tokens, PWA support, and UI overhaul

- Expand Account model with account_type (pension, savings, liability, crypto), new banks/currencies (BTC, XMR, FCL, ROP, VOL, MEMP, MPAT, MORTGAGE), and next_payment field
- Add exchange rate endpoint (BCCR integration), analytics endpoint, paste-import for transactions, and API token management
- Add PWA manifest, service worker, and app icons
- Redesign dashboard, transactions, transfers, and login pages with theme support
- Add billing cycle selector, confirm dialog, and paste import modal components
- One-time DB reset in deploy workflow for schema migration

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

frontend/src/pages/Analytics.tsx

@@ -0,0 +1,273 @@
+import { useEffect, useState } from 'react';
+import {
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  LineChart,
+  Line,
+} from 'recharts';
+import { BarChart3 } from 'lucide-react';
+
+import api from '../api';
+import BillingCycleSelector from '../components/BillingCycleSelector';
+import { useTheme } from '../ThemeContext';
+
+interface CategorySpending {
+  category_id: number | null;
+  category_name: string;
+  total: number;
+  count: number;
+  percentage: number;
+}
+
+interface MonthlyTrend {
+  year: number;
+  month: number;
+  label: string;
+  total_crc: number;
+  total_usd: number;
+  count: number;
+}
+
+interface DailySpending {
+  date: string;
+  total: number;
+  count: number;
+}
+
+const COLORS = [
+  '#606C38', '#BC6C25', '#8b5cf6', '#DDA15E', '#ef4444',
+  '#ec4899', '#283618', '#f97316', '#6366f1', '#8a9462',
+  '#e879f9', '#c2c9a7', '#fb923c', '#a78bfa', '#7a8a4a',
+  '#fbbf24',
+];
+
+function formatCRC(value: number) {
+  return `₡${Math.round(value).toLocaleString('es-CR')}`;
+}
+
+export default function Analytics() {
+  const { theme } = useTheme();
+  const [cycle, setCycle] = useState<{ year: number; month: number } | null>(null);
+  const [byCategory, setByCategory] = useState<CategorySpending[]>([]);
+  const [trend, setTrend] = useState<MonthlyTrend[]>([]);
+  const [daily, setDaily] = useState<DailySpending[]>([]);
+
+  useEffect(() => {
+    const params: Record<string, string> = {};
+    if (cycle) {
+      params.cycle_year = String(cycle.year);
+      params.cycle_month = String(cycle.month);
+    }
+
+    Promise.all([
+      api.get('/analytics/by-category', { params }),
+      api.get('/analytics/monthly-trend'),
+      api.get('/analytics/daily-spending', { params }),
+    ])
+      .then(([catRes, trendRes, dailyRes]) => {
+        setByCategory(catRes.data);
+        setTrend(trendRes.data);
+        setDaily(dailyRes.data);
+      })
+      .catch(console.error);
+  }, [cycle]);
+
+  const tooltipStyle = {
+    background: theme === 'dark' ? '#1e293b' : '#FEFAE0',
+    border: `1px solid ${theme === 'dark' ? '#334155' : 'rgba(96,108,56,0.25)'}`,
+    borderRadius: '8px',
+    fontSize: '12px',
+    color: theme === 'dark' ? '#e2e8f0' : '#283618',
+  };
+
+  const tickColor = theme === 'dark' ? '#64748b' : '#8a9462';
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2">
+            <BarChart3 className="w-5 h-5 text-[#606C38] dark:text-[#7a8a4a]" />
+            <h1 className="text-2xl font-bold">Analytics</h1>
+          </div>
+          <p className="text-sm text-text-muted mt-1">Spending breakdown and trends</p>
+        </div>
+        <BillingCycleSelector value={cycle} onChange={setCycle} />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Spending by Category - Donut */}
+        <div className="bg-surface-card border border-border rounded-xl p-5">
+          <h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
+            Spending by Category
+          </h2>
+          {byCategory.length === 0 ? (
+            <div className="h-64 flex items-center justify-center text-text-faint text-sm">
+              No data for this period
+            </div>
+          ) : (
+            <div className="flex flex-col items-center">
+              <ResponsiveContainer width="100%" height={260}>
+                <PieChart>
+                  <Pie
+                    data={byCategory}
+                    dataKey="total"
+                    nameKey="category_name"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={60}
+                    outerRadius={100}
+                    paddingAngle={2}
+                    strokeWidth={0}
+                  >
+                    {byCategory.map((_, i) => (
+                      <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={tooltipStyle}
+                    formatter={(value: any) => formatCRC(Number(value))}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+
+              {/* Legend */}
+              <div className="grid grid-cols-2 gap-x-6 gap-y-1.5 mt-2 w-full max-w-md">
+                {byCategory.slice(0, 10).map((cat, i) => (
+                  <div key={cat.category_name} className="flex items-center gap-2 text-xs">
+                    <div
+                      className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+                      style={{ background: COLORS[i % COLORS.length] }}
+                    />
+                    <span className="text-text-secondary truncate">{cat.category_name}</span>
+                    <span className="text-text-faint ml-auto">{cat.percentage}%</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Monthly Trend - Bar */}
+        <div className="bg-surface-card border border-border rounded-xl p-5">
+          <h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
+            Monthly Spending (CRC)
+          </h2>
+          {trend.length === 0 ? (
+            <div className="h-64 flex items-center justify-center text-text-faint text-sm">
+              No data
+            </div>
+          ) : (
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={trend}>
+                <XAxis
+                  dataKey="label"
+                  tick={{ fill: tickColor, fontSize: 11 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fill: tickColor, fontSize: 11 }}
+                  axisLine={false}
+                  tickLine={false}
+                  tickFormatter={(v) => `₡${(v / 1000).toFixed(0)}k`}
+                />
+                <Tooltip
+                  contentStyle={tooltipStyle}
+                  formatter={(value: any) => formatCRC(Number(value))}
+                />
+                <Bar dataKey="total_crc" fill="#606C38" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          )}
+        </div>
+
+        {/* Daily Spending - Line */}
+        <div className="bg-surface-card border border-border rounded-xl p-5 lg:col-span-2">
+          <h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
+            Daily Spending
+          </h2>
+          {daily.length === 0 ? (
+            <div className="h-48 flex items-center justify-center text-text-faint text-sm">
+              No data for this period
+            </div>
+          ) : (
+            <ResponsiveContainer width="100%" height={240}>
+              <LineChart data={daily}>
+                <XAxis
+                  dataKey="date"
+                  tick={{ fill: tickColor, fontSize: 10 }}
+                  axisLine={false}
+                  tickLine={false}
+                  tickFormatter={(v) => {
+                    const d = new Date(v);
+                    return `${d.getMonth() + 1}/${d.getDate()}`;
+                  }}
+                />
+                <YAxis
+                  tick={{ fill: tickColor, fontSize: 11 }}
+                  axisLine={false}
+                  tickLine={false}
+                  tickFormatter={(v) => `₡${(v / 1000).toFixed(0)}k`}
+                />
+                <Tooltip
+                  contentStyle={tooltipStyle}
+                  formatter={(value: any) => formatCRC(Number(value))}
+                  labelFormatter={(label) => new Date(label).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="total"
+                  stroke="#BC6C25"
+                  strokeWidth={2}
+                  dot={{ fill: '#BC6C25', r: 3 }}
+                  activeDot={{ r: 5 }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          )}
+        </div>
+      </div>
+
+      {/* Top categories summary */}
+      {byCategory.length > 0 && (
+        <div className="bg-surface-card border border-border rounded-xl p-5">
+          <h2 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
+            Top Categories
+          </h2>
+          <div className="space-y-3">
+            {byCategory.slice(0, 8).map((cat, i) => (
+              <div key={cat.category_name} className="flex items-center gap-3">
+                <div
+                  className="w-3 h-3 rounded-full flex-shrink-0"
+                  style={{ background: COLORS[i % COLORS.length] }}
+                />
+                <span className="text-sm flex-1">{cat.category_name}</span>
+                <span className="text-xs text-text-muted">{cat.count} txns</span>
+                <span className="text-sm font-mono font-medium w-32 text-right">
+                  {formatCRC(cat.total)}
+                </span>
+                <div className="w-24 bg-surface-hover rounded-full h-1.5">
+                  <div
+                    className="h-1.5 rounded-full"
+                    style={{
+                      width: `${cat.percentage}%`,
+                      background: COLORS[i % COLORS.length],
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Dashboard.tsx

@@ -6,12 +6,17 @@ import {
   TrendingDown,
   RefreshCw,
   CreditCard,
+  Pencil,
+  Check,
+  X,
 } from 'lucide-react';
 
 import api, { type Account, type Transaction } from '../api';
 
 function formatAmount(amount: number, currency: string) {
   const abs = Math.abs(amount);
+  if (currency === 'BTC') return abs.toFixed(8);
+  if (currency === 'XMR') return abs.toFixed(4);
   if (currency === 'USD') {
     return `$${abs.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   }
@@ -19,16 +24,87 @@ function formatAmount(amount: number, currency: string) {
 }
 
 function formatDate(dateStr: string) {
-  return new Date(dateStr).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-  });
+  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+// --- Reusable card for an account balance ---
+function AccountCard({
+  account,
+  editingId,
+  editValue,
+  setEditValue,
+  startEditing,
+  saveBalance,
+  cancelEditing,
+}: {
+  account: Account;
+  editingId: number | null;
+  editValue: string;
+  setEditValue: (v: string) => void;
+  startEditing: (a: Account) => void;
+  saveBalance: (id: number) => void;
+  cancelEditing: () => void;
+}) {
+  const badgeLabel = account.account_type === 'CRYPTO' ? account.label : (account.bank === 'DAVIVIENDA' ? 'DAV' : account.bank);
+  const isEditing = editingId === account.id;
+
+  return (
+    <div className="group animate-fade-in bg-surface dark:bg-slate-900 border border-border dark:border-slate-700 rounded-xl p-5 shadow-sm dark:shadow-none hover:bg-surface-hover dark:hover:bg-slate-800/60 transition-colors h-[104px] flex flex-col justify-between">
+      <div className="flex items-center justify-end">
+        <span className="text-sm font-bold font-mono text-text-secondary dark:text-slate-300 bg-surface-secondary dark:bg-slate-800 px-2.5 py-0.5 rounded">
+          {badgeLabel}
+        </span>
+      </div>
+      {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="w-full text-2xl font-bold font-mono tracking-tight bg-input-bg border border-[#606C38]/40 rounded-lg px-2 py-1 focus:outline-none focus:border-[#606C38] transition-colors"
+          />
+          <button onClick={() => saveBalance(account.id)} className="p-1 text-[#606C38] dark:text-[#7a8a4a]">
+            <Check className="w-4 h-4" />
+          </button>
+          <button onClick={cancelEditing} className="p-1 text-text-muted hover:text-text-secondary">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 group/balance cursor-pointer" onClick={() => startEditing(account)}>
+          <p className="text-2xl font-bold font-mono tracking-tight">
+            {formatAmount(account.balance, account.currency)}
+          </p>
+          <Pencil className="w-3.5 h-3.5 text-text-faint opacity-0 group-hover/balance:opacity-100 hover:text-[#606C38] dark:hover:text-[#7a8a4a] transition-all" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Total card ---
+function TotalCard({ total, currency }: { total: number; currency: string }) {
+  return (
+    <div className="border rounded-xl p-5 shadow-sm dark:shadow-none h-[104px] flex flex-col justify-between bg-[#fdf3e3] dark:bg-[#BC6C25]/10 border-[#e8c08a] dark:border-[#BC6C25]/20 text-[#8a5218] dark:text-[#DDA15E]">
+      <span className="text-xs font-bold uppercase tracking-wider opacity-80">Total</span>
+      <p className="text-2xl font-bold font-mono tracking-tight">{formatAmount(total, currency)}</p>
+    </div>
+  );
 }
 
 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 fetchData = async () => {
     setLoading(true);
@@ -44,18 +120,41 @@ export default function Dashboard() {
     } finally {
       setLoading(false);
     }
+    api.get('/exchange-rate/').then((r) => setExchangeRate(r.data)).catch(() => {});
   };
 
-  useEffect(() => {
-    fetchData();
-  }, []);
+  useEffect(() => { fetchData(); }, []);
 
-  const totalCRC = accounts
-    .filter((a) => a.currency === 'CRC')
-    .reduce((s, a) => s + a.balance, 0);
-  const totalUSD = accounts
-    .filter((a) => a.currency === 'USD')
-    .reduce((s, a) => s + a.balance, 0);
+  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 cardProps = { editingId, editValue, setEditValue, startEditing, saveBalance, cancelEditing };
+
+  // Group accounts by type
+  const bankAccounts = accounts.filter((a) => a.account_type === 'BANK');
+  const pensionAccounts = accounts.filter((a) => a.account_type === 'PENSION');
+  const savingsAccounts = accounts.filter((a) => a.account_type === 'SAVINGS');
+  const liabilityAccounts = accounts.filter((a) => a.account_type === 'LIABILITY');
+  const cryptoAccounts = accounts.filter((a) => a.account_type === 'CRYPTO');
+
+  const bankOrder = ['BAC', 'BCR', 'DAVIVIENDA'];
+
+  // Bank totals for exchange rate combined total
+  const bankCRC = bankAccounts.filter((a) => a.currency === 'CRC').reduce((s, a) => s + a.balance, 0);
+  const bankUSD = bankAccounts.filter((a) => a.currency === 'USD').reduce((s, a) => s + a.balance, 0);
 
   return (
     <div className="space-y-6">
@@ -63,129 +162,195 @@ export default function Dashboard() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">Dashboard</h1>
-          <p className="text-sm text-slate-500 mt-1">Financial overview</p>
+          <p className="text-sm text-text-muted mt-1">Financial overview</p>
         </div>
         <button
           onClick={fetchData}
-          className="p-2 rounded-lg text-slate-500 hover:text-white hover:bg-slate-800/50 transition-colors"
+          className="p-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors"
         >
           <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
         </button>
       </div>
 
-      {/* Account balances */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {accounts.map((account, i) => (
-          <div
-            key={account.id}
-            className="relative group animate-fade-in"
-          >
-            <div className="absolute -inset-[1px] rounded-xl bg-gradient-to-br from-emerald-500/20 to-cyan-500/20 opacity-0 group-hover:opacity-100 transition-opacity" />
-            <div className="relative bg-slate-900/60 border border-slate-800/60 rounded-xl p-5">
-              <div className="flex items-center justify-between mb-3">
-                <span className="text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  {account.label}
-                </span>
-                <span className="text-[10px] font-mono text-slate-600 bg-slate-800/60 px-2 py-0.5 rounded">
-                  {account.bank}
-                </span>
-              </div>
-              <p className="text-2xl font-bold font-mono tracking-tight">
-                {formatAmount(account.balance, account.currency)}
-              </p>
+      {/* Bank accounts — grouped by currency */}
+      {(['CRC', 'USD'] as const).map((currency) => {
+        const accts = bankAccounts
+          .filter((a) => a.currency === currency)
+          .sort((a, b) => bankOrder.indexOf(a.bank) - bankOrder.indexOf(b.bank));
+        if (accts.length === 0) return null;
+        const total = accts.reduce((s, a) => s + a.balance, 0);
+
+        return (
+          <div key={currency} className="space-y-2">
+            <h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">{currency} Accounts</h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+              {accts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
+              <TotalCard total={total} currency={currency} />
             </div>
           </div>
-        ))}
+        );
+      })}
 
-        {/* Totals */}
-        {accounts.length > 0 && (
-          <>
-            <div
-              className="bg-gradient-to-br from-emerald-500/10 to-cyan-500/5 border border-emerald-500/20 rounded-xl p-5"
-            >
-              <span className="text-xs font-medium text-emerald-400/80 uppercase tracking-wider">
-                Total CRC
-              </span>
-              <p className="text-2xl font-bold font-mono tracking-tight text-emerald-400 mt-3">
-                {formatAmount(totalCRC, 'CRC')}
+      {/* Pension accounts */}
+      {pensionAccounts.length > 0 && (
+        <div className="space-y-2">
+          <h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Pension</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {pensionAccounts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
+            <TotalCard
+              total={pensionAccounts.reduce((s, a) => s + a.balance, 0)}
+              currency="CRC"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Savings accounts */}
+      {savingsAccounts.length > 0 && (
+        <div className="space-y-2">
+          <h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Savings</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {savingsAccounts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
+            <TotalCard
+              total={savingsAccounts.reduce((s, a) => s + a.balance, 0)}
+              currency="CRC"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Liabilities */}
+      {liabilityAccounts.length > 0 && (
+        <div className="space-y-2">
+          <h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Liabilities</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {liabilityAccounts.map((account) => {
+              const bankShort = account.bank === 'DAVIVIENDA' ? 'DAV' : account.bank;
+              return (
+                <div
+                  key={account.id}
+                  className="animate-fade-in bg-red-50 dark:bg-red-500/5 border border-red-200 dark:border-red-500/20 rounded-xl p-5 shadow-sm dark:shadow-none hover:bg-red-100/50 dark:hover:bg-red-500/10 transition-colors"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-xs font-bold text-red-700 dark:text-red-400/80 uppercase tracking-wider">
+                      Balance
+                    </span>
+                    <span className="text-sm font-bold font-mono text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-500/10 px-2.5 py-0.5 rounded">
+                      {bankShort}
+                    </span>
+                  </div>
+                  <p
+                    className="text-2xl font-bold font-mono tracking-tight text-red-700 dark:text-red-400 cursor-pointer group/balance"
+                    onClick={() => startEditing(account)}
+                  >
+                    {editingId === account.id ? (
+                      <span 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="w-full text-2xl font-bold font-mono tracking-tight bg-input-bg border border-red-500/40 rounded-lg px-2 py-1 focus:outline-none focus:border-red-500 transition-colors text-text-primary"
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                        <button onClick={(e) => { e.stopPropagation(); saveBalance(account.id); }} className="p-1 text-red-500">
+                          <Check className="w-4 h-4" />
+                        </button>
+                        <button onClick={(e) => { e.stopPropagation(); cancelEditing(); }} className="p-1 text-text-muted">
+                          <X className="w-4 h-4" />
+                        </button>
+                      </span>
+                    ) : (
+                      formatAmount(account.balance, account.currency)
+                    )}
+                  </p>
+                  {account.next_payment != null && (
+                    <p className="text-sm font-mono text-red-600/70 dark:text-red-400/60 mt-2">
+                      Next payment: {formatAmount(account.next_payment, account.currency)}
+                    </p>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Crypto */}
+      {cryptoAccounts.length > 0 && (
+        <div className="space-y-2">
+          <h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">Crypto</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {cryptoAccounts.map((a) => <AccountCard key={a.id} account={a} {...cardProps} />)}
+          </div>
+        </div>
+      )}
+
+      {/* Exchange rate + combined total */}
+      {exchangeRate && (
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="flex-1 bg-surface-card border border-border rounded-xl p-4">
+            <span className="text-xs font-medium text-text-muted uppercase tracking-wider">USD/CRC Exchange Rate</span>
+            <div className="flex items-baseline gap-3 mt-1">
+              <span className="text-lg font-bold font-mono">Buy: ₡{exchangeRate.buy_rate.toFixed(2)}</span>
+              <span className="text-lg font-bold font-mono text-text-secondary">Sell: ₡{exchangeRate.sell_rate.toFixed(2)}</span>
+            </div>
+          </div>
+          {accounts.length > 0 && (
+            <div className="flex-1 bg-gradient-to-br from-violet-500/10 to-[#606C38]/5 border border-violet-500/20 rounded-xl p-4">
+              <span className="text-xs font-medium text-violet-600 dark:text-violet-400/80 uppercase tracking-wider">Combined Total (CRC)</span>
+              <p className="text-2xl font-bold font-mono tracking-tight text-violet-600 dark:text-violet-400 mt-1">
+                {formatAmount(bankCRC + bankUSD * exchangeRate.sell_rate, 'CRC')}
               </p>
             </div>
-            <div
-              className="bg-gradient-to-br from-cyan-500/10 to-emerald-500/5 border border-cyan-500/20 rounded-xl p-5 animate-fade-in"
-            >
-              <span className="text-xs font-medium text-cyan-400/80 uppercase tracking-wider">
-                Total USD
-              </span>
-              <p className="text-2xl font-bold font-mono tracking-tight text-cyan-400 mt-3">
-                {formatAmount(totalUSD, 'USD')}
-              </p>
-            </div>
-          </>
-        )}
-      </div>
+          )}
+        </div>
+      )}
 
       {/* Recent transactions */}
-      <div className="bg-slate-900/40 border border-slate-800/60 rounded-xl">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-800/40">
+      <div className="bg-surface-card border border-border rounded-xl">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border-subtle">
           <div className="flex items-center gap-2">
-            <CreditCard className="w-4 h-4 text-slate-500" />
+            <CreditCard className="w-4 h-4 text-text-muted" />
             <h2 className="font-semibold text-sm">Recent Charges</h2>
           </div>
           <Link
             to="/transactions"
-            className="flex items-center gap-1 text-xs font-medium text-emerald-400 hover:text-emerald-300 transition-colors"
+            className="flex items-center gap-1 text-xs font-medium text-[#606C38] dark:text-[#7a8a4a] hover:text-[#4a5a2a] dark:hover:text-[#8a9462] transition-colors"
           >
             View all
             <ArrowRight className="w-3 h-3" />
           </Link>
         </div>
-
         {recent.length === 0 && !loading ? (
-          <div className="px-5 py-12 text-center text-slate-600 text-sm">
-            No transactions yet. Add your first one!
-          </div>
+          <div className="px-5 py-12 text-center text-text-faint text-sm">No transactions yet. Add your first one!</div>
         ) : (
-          <div className="divide-y divide-slate-800/40">
-            {recent.map((tx, i) => (
-              <div
-                key={tx.id}
-                className="flex items-center justify-between px-5 py-3.5 hover:bg-slate-800/20 transition-colors animate-fade-in"
-              >
+          <div className="divide-y divide-border-subtle">
+            {recent.map((tx) => (
+              <div key={tx.id} className="flex items-center justify-between px-5 py-3.5 hover:bg-surface-hover transition-colors animate-fade-in">
                 <div className="flex items-center gap-3 min-w-0">
-                  <div
-                    className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
-                      tx.transaction_type === 'DEVOLUCION'
-                        ? 'bg-emerald-500/10 text-emerald-400'
-                        : 'bg-red-500/10 text-red-400'
-                    }`}
-                  >
-                    {tx.transaction_type === 'DEVOLUCION' ? (
-                      <TrendingUp className="w-4 h-4" />
-                    ) : (
-                      <TrendingDown className="w-4 h-4" />
-                    )}
+                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                    tx.transaction_type === 'DEVOLUCION' ? 'bg-[#606C38]/10 text-[#606C38] dark:text-[#7a8a4a]' : 'bg-red-500/10 text-red-500 dark:text-red-400'
+                  }`}>
+                    {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-slate-500">
+                    <p className="text-xs text-text-muted">
                       {formatDate(tx.date)}
-                      {tx.category && (
-                        <span className="ml-2 text-slate-600">
-                          {tx.category.name}
-                        </span>
-                      )}
+                      {tx.category && <span className="ml-2 text-text-faint">{tx.category.name}</span>}
                     </p>
                   </div>
                 </div>
-                <span
-                  className={`font-mono text-sm font-medium flex-shrink-0 ml-4 ${
-                    tx.transaction_type === 'DEVOLUCION'
-                      ? 'text-emerald-400'
-                      : 'text-white'
-                  }`}
-                >
-                  {tx.transaction_type === 'DEVOLUCION' ? '+' : '-'}
-                  {formatAmount(tx.amount, tx.currency)}
+                <span className={`font-mono text-sm font-medium flex-shrink-0 ml-4 ${
+                  tx.transaction_type === 'DEVOLUCION' ? 'text-[#606C38] dark:text-[#7a8a4a]' : ''
+                }`}>
+                  {tx.transaction_type === 'DEVOLUCION' ? '+' : '-'}{formatAmount(tx.amount, tx.currency)}
                 </span>
               </div>
             ))}

frontend/src/pages/Login.tsx

@@ -29,46 +29,46 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen bg-slate-950 flex items-center justify-center px-4">
+    <div className="min-h-screen bg-surface flex items-center justify-center px-4">
       <div className="w-full max-w-sm animate-fade-in">
         <div className="flex items-center justify-center gap-2.5 mb-8">
-          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-400 to-cyan-400 flex items-center justify-center">
-            <Wallet className="w-6 h-6 text-slate-950" strokeWidth={2.5} />
+          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#606C38] to-[#DDA15E] flex items-center justify-center">
+            <Wallet className="w-6 h-6 text-[#FEFAE0]" strokeWidth={2.5} />
           </div>
-          <span className="text-2xl font-bold tracking-tight text-white">
-            Wealthy<span className="text-emerald-400">Smart</span>
+          <span className="text-2xl font-bold tracking-tight">
+            Wealthy<span className="text-[#606C38] dark:text-[#7a8a4a]">Smart</span>
           </span>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-xs font-medium text-slate-400 mb-1.5 uppercase tracking-wider">
+            <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
               Username
             </label>
             <input
               type="text"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
-              className="w-full bg-slate-900 border border-slate-800 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/20 transition-colors"
+              className="w-full bg-input-bg border border-border rounded-lg px-4 py-3 text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 focus:ring-1 focus:ring-[#606C38]/20 transition-colors"
               placeholder="Enter username"
               autoFocus
             />
           </div>
           <div>
-            <label className="block text-xs font-medium text-slate-400 mb-1.5 uppercase tracking-wider">
+            <label className="block text-xs font-medium text-text-muted mb-1.5 uppercase tracking-wider">
               Password
             </label>
             <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="w-full bg-slate-900 border border-slate-800 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/20 transition-colors"
+              className="w-full bg-input-bg border border-border rounded-lg px-4 py-3 text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 focus:ring-1 focus:ring-[#606C38]/20 transition-colors"
               placeholder="Enter password"
             />
           </div>
 
           {error && (
-            <div className="flex items-center gap-2 text-red-400 text-sm">
+            <div className="flex items-center gap-2 text-red-500 dark:text-red-400 text-sm">
               <AlertCircle className="w-4 h-4" />
               {error}
             </div>
@@ -77,7 +77,7 @@ export default function Login() {
           <button
             type="submit"
             disabled={loading}
-            className="w-full flex items-center justify-center gap-2 bg-emerald-500 hover:bg-emerald-400 disabled:opacity-50 text-slate-950 font-semibold px-6 py-3 rounded-lg transition-colors"
+            className="w-full flex items-center justify-center gap-2 bg-[#606C38] hover:bg-[#7a8a4a] disabled:opacity-50 text-white dark:text-[#FEFAE0] font-semibold px-6 py-3 rounded-lg transition-colors"
           >
             {loading ? 'Signing in...' : 'Sign in'}
             {!loading && <ArrowRight className="w-4 h-4" />}

frontend/src/pages/Transactions.tsx

@@ -7,10 +7,14 @@ import {
   TrendingUp,
   TrendingDown,
   ChevronDown,
+  ClipboardPaste,
 } from 'lucide-react';
 
 import api, { type Transaction, type Category } from '../api';
 import TransactionModal from '../components/TransactionModal';
+import PasteImportModal from '../components/PasteImportModal';
+import ConfirmDialog from '../components/ConfirmDialog';
+import BillingCycleSelector from '../components/BillingCycleSelector';
 
 function formatAmount(amount: number, currency: string) {
   const abs = Math.abs(amount);
@@ -27,7 +31,11 @@ export default function Transactions() {
   const [categoryFilter, setCategoryFilter] = useState('');
   const [loading, setLoading] = useState(true);
   const [modalOpen, setModalOpen] = useState(false);
+  const [importOpen, setImportOpen] = useState(false);
   const [editing, setEditing] = useState<Transaction | null>(null);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [cycle, setCycle] = useState<{ year: number; month: number } | null>(null);
 
   const fetchTransactions = useCallback(async () => {
     setLoading(true);
@@ -35,12 +43,16 @@ export default function Transactions() {
       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]);
+  }, [search, categoryFilter, cycle]);
 
   useEffect(() => {
     api.get('/categories/').then((r) => setCategories(r.data));
@@ -51,47 +63,72 @@ export default function Transactions() {
     return () => clearTimeout(timer);
   }, [fetchTransactions]);
 
-  const handleDelete = async (id: number) => {
-    if (!confirm('Delete this transaction?')) return;
-    await api.delete(`/transactions/${id}`);
-    fetchTransactions();
+  const handleDelete = async () => {
+    if (deleteId === null) return;
+    setDeleting(true);
+    try {
+      await api.delete(`/transactions/${deleteId}`);
+      setDeleteId(null);
+      fetchTransactions();
+    } finally {
+      setDeleting(false);
+    }
   };
 
-  const total = transactions.reduce((sum, tx) => {
-    const signed = tx.transaction_type === 'DEVOLUCION' ? -tx.amount : tx.amount;
-    return sum + signed;
-  }, 0);
+  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">Credit Card Transactions</h1>
-          <p className="text-sm text-slate-500 mt-1">
-            {transactions.length} transactions &middot; Total:{' '}
-            <span className="font-mono text-white">{formatAmount(total, 'CRC')}</span>
+          <p className="text-sm text-text-muted mt-1">
+            {transactions.length} transactions
+            {totalCRC !== 0 && (
+              <> &middot; <span className="font-mono text-text-primary">{formatAmount(totalCRC, 'CRC')}</span></>
+            )}
+            {totalUSD !== 0 && (
+              <> &middot; <span className="font-mono text-text-primary">{formatAmount(totalUSD, 'USD')}</span></>
+            )}
           </p>
         </div>
-        <button
-          onClick={() => {
-            setEditing(null);
-            setModalOpen(true);
-          }}
-          className="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold px-4 py-2.5 rounded-lg text-sm transition-colors"
-        >
-          <Plus className="w-4 h-4" />
-          Add Transaction
-        </button>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setImportOpen(true)}
+            className="flex items-center gap-2 border border-border hover:bg-surface-hover text-text-secondary font-semibold px-4 py-2.5 rounded-lg text-sm transition-colors"
+          >
+            <ClipboardPaste className="w-4 h-4" />
+            Import
+          </button>
+          <button
+            onClick={() => {
+              setEditing(null);
+              setModalOpen(true);
+            }}
+            className="flex items-center gap-2 bg-[#606C38] hover:bg-[#7a8a4a] text-white dark:text-[#FEFAE0] font-semibold px-4 py-2.5 rounded-lg text-sm transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            Add Transaction
+          </button>
+        </div>
       </div>
 
+      {/* Billing cycle */}
+      <BillingCycleSelector value={cycle} onChange={setCycle} />
+
       {/* Filters */}
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
           <input
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-full bg-slate-900/60 border border-slate-800/60 rounded-lg pl-10 pr-4 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 transition-colors"
+            className="w-full bg-input-bg border border-border rounded-lg pl-10 pr-4 py-2.5 text-sm text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 transition-colors"
             placeholder="Search merchants..."
           />
         </div>
@@ -99,7 +136,7 @@ export default function Transactions() {
           <select
             value={categoryFilter}
             onChange={(e) => setCategoryFilter(e.target.value)}
-            className="appearance-none bg-slate-900/60 border border-slate-800/60 rounded-lg pl-4 pr-10 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500/50 transition-colors"
+            className="appearance-none bg-input-bg border border-border rounded-lg pl-4 pr-10 py-2.5 text-sm text-text-primary focus:outline-none focus:border-[#606C38]/50 transition-colors"
           >
             <option value="">All Categories</option>
             {categories.map((c) => (
@@ -108,42 +145,42 @@ export default function Transactions() {
               </option>
             ))}
           </select>
-          <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none" />
+          <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted pointer-events-none" />
         </div>
       </div>
 
       {/* Table */}
-      <div className="bg-slate-900/40 border border-slate-800/60 rounded-xl overflow-hidden">
+      <div className="bg-surface-card border border-border rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-slate-800/40">
-                <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">
+              <tr className="border-b border-border-subtle">
+                <th className="text-left px-5 py-3 text-xs font-medium text-text-muted uppercase tracking-wider">
                   Date
                 </th>
-                <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">
+                <th className="text-left px-5 py-3 text-xs font-medium text-text-muted uppercase tracking-wider">
                   Merchant
                 </th>
-                <th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider hidden md:table-cell">
+                <th className="text-left px-5 py-3 text-xs font-medium text-text-muted uppercase tracking-wider hidden md:table-cell">
                   Category
                 </th>
-                <th className="text-right px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">
+                <th className="text-right px-5 py-3 text-xs font-medium text-text-muted uppercase tracking-wider">
                   Amount
                 </th>
-                <th className="text-right px-5 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider w-20">
+                <th className="text-right px-5 py-3 text-xs font-medium text-text-muted uppercase tracking-wider w-20">
                   Actions
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-slate-800/30">
+            <tbody className="divide-y divide-border-subtle">
 
                 {transactions.map((tx) => (
                   <tr
                     key={tx.id}
-                    className="hover:bg-slate-800/20 transition-colors group"
+                    className="hover:bg-surface-hover transition-colors group"
                   >
                     <td className="px-5 py-3 whitespace-nowrap">
-                      <span className="font-mono text-slate-400 text-xs">
+                      <span className="font-mono text-text-secondary text-xs">
                         {new Date(tx.date).toLocaleDateString('en-US', {
                           month: 'short',
                           day: 'numeric',
@@ -156,8 +193,8 @@ export default function Transactions() {
                         <div
                           className={`w-6 h-6 rounded flex items-center justify-center flex-shrink-0 ${
                             tx.transaction_type === 'DEVOLUCION'
-                              ? 'bg-emerald-500/10 text-emerald-400'
-                              : 'bg-red-500/10 text-red-400'
+                              ? 'bg-[#606C38]/10 text-[#606C38] dark:text-[#7a8a4a]'
+                              : 'bg-red-500/10 text-red-500 dark:text-red-400'
                           }`}
                         >
                           {tx.transaction_type === 'DEVOLUCION' ? (
@@ -171,19 +208,19 @@ export default function Transactions() {
                     </td>
                     <td className="px-5 py-3 hidden md:table-cell">
                       {tx.category ? (
-                        <span className="text-xs bg-slate-800/60 text-slate-400 px-2 py-1 rounded">
+                        <span className="text-xs bg-surface-hover text-text-secondary px-2 py-1 rounded">
                           {tx.category.name}
                         </span>
                       ) : (
-                        <span className="text-xs text-slate-600">—</span>
+                        <span className="text-xs text-text-faint">—</span>
                       )}
                     </td>
                     <td className="px-5 py-3 text-right whitespace-nowrap">
                       <span
                         className={`font-mono font-medium ${
                           tx.transaction_type === 'DEVOLUCION'
-                            ? 'text-emerald-400'
-                            : 'text-white'
+                            ? 'text-[#606C38] dark:text-[#7a8a4a]'
+                            : ''
                         }`}
                       >
                         {tx.transaction_type === 'DEVOLUCION' ? '+' : '-'}
@@ -197,13 +234,13 @@ export default function Transactions() {
                             setEditing(tx);
                             setModalOpen(true);
                           }}
-                          className="p-1.5 rounded hover:bg-slate-700/50 text-slate-500 hover:text-white transition-colors"
+                          className="p-1.5 rounded hover:bg-surface-hover text-text-muted hover:text-text-primary transition-colors"
                         >
                           <Pencil className="w-3.5 h-3.5" />
                         </button>
                         <button
-                          onClick={() => handleDelete(tx.id)}
-                          className="p-1.5 rounded hover:bg-red-500/10 text-slate-500 hover:text-red-400 transition-colors"
+                          onClick={() => setDeleteId(tx.id)}
+                          className="p-1.5 rounded hover:bg-red-500/10 text-text-muted hover:text-red-500 dark:hover:text-red-400 transition-colors"
                         >
                           <Trash2 className="w-3.5 h-3.5" />
                         </button>
@@ -216,7 +253,7 @@ export default function Transactions() {
         </div>
 
         {transactions.length === 0 && !loading && (
-          <div className="px-5 py-16 text-center text-slate-600 text-sm">
+          <div className="px-5 py-16 text-center text-text-faint text-sm">
             No transactions found
           </div>
         )}
@@ -230,6 +267,23 @@ export default function Transactions() {
           onSaved={fetchTransactions}
         />
       )}
+
+      {importOpen && (
+        <PasteImportModal
+          onClose={() => setImportOpen(false)}
+          onImported={fetchTransactions}
+        />
+      )}
+
+      {deleteId !== null && (
+        <ConfirmDialog
+          title="Delete Transaction"
+          message="This transaction will be permanently deleted. This action cannot be undone."
+          onConfirm={handleDelete}
+          onCancel={() => setDeleteId(null)}
+          loading={deleting}
+        />
+      )}
     </div>
   );
 }

frontend/src/pages/Transfers.tsx

@@ -3,6 +3,7 @@ import { Plus, Search, Pencil, Trash2, ArrowLeftRight } from 'lucide-react';
 
 import api, { type Transaction } from '../api';
 import TransactionModal from '../components/TransactionModal';
+import ConfirmDialog from '../components/ConfirmDialog';
 
 function formatAmount(amount: number, currency: string) {
   const abs = Math.abs(amount);
@@ -21,6 +22,8 @@ export default function Transfers() {
   const [loading, setLoading] = useState(true);
   const [modalOpen, setModalOpen] = useState(false);
   const [editing, setEditing] = useState<Transaction | null>(null);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [deleting, setDeleting] = useState(false);
 
   const fetchTransactions = useCallback(async () => {
     setLoading(true);
@@ -39,10 +42,16 @@ export default function Transfers() {
     return () => clearTimeout(timer);
   }, [fetchTransactions]);
 
-  const handleDelete = async (id: number) => {
-    if (!confirm('Delete this transaction?')) return;
-    await api.delete(`/transactions/${id}`);
-    fetchTransactions();
+  const handleDelete = async () => {
+    if (deleteId === null) return;
+    setDeleting(true);
+    try {
+      await api.delete(`/transactions/${deleteId}`);
+      setDeleteId(null);
+      fetchTransactions();
+    } finally {
+      setDeleting(false);
+    }
   };
 
   return (
@@ -50,7 +59,7 @@ export default function Transfers() {
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
         <div>
           <h1 className="text-2xl font-bold">Cash & Transfers</h1>
-          <p className="text-sm text-slate-500 mt-1">
+          <p className="text-sm text-text-muted mt-1">
             Track non-credit-card expenses
           </p>
         </div>
@@ -59,7 +68,7 @@ export default function Transfers() {
             setEditing(null);
             setModalOpen(true);
           }}
-          className="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold px-4 py-2.5 rounded-lg text-sm transition-colors"
+          className="flex items-center gap-2 bg-[#606C38] hover:bg-[#7a8a4a] text-white dark:text-[#FEFAE0] font-semibold px-4 py-2.5 rounded-lg text-sm transition-colors"
         >
           <Plus className="w-4 h-4" />
           Add {sourceTab === 'CASH' ? 'Cash Expense' : 'Transfer'}
@@ -67,15 +76,15 @@ export default function Transfers() {
       </div>
 
       {/* Source tabs */}
-      <div className="flex gap-1 bg-slate-900/40 border border-slate-800/60 rounded-lg p-1 w-fit">
+      <div className="flex gap-1 bg-surface-card border border-border rounded-lg p-1 w-fit">
         {(['CASH', 'TRANSFER'] as const).map((tab) => (
           <button
             key={tab}
             onClick={() => setSourceTab(tab)}
             className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
               sourceTab === tab
-                ? 'bg-emerald-500/10 text-emerald-400'
-                : 'text-slate-500 hover:text-white'
+                ? 'bg-[#606C38]/10 text-[#606C38] dark:text-[#7a8a4a]'
+                : 'text-text-muted hover:text-text-primary'
             }`}
           >
             {tab === 'CASH' ? 'Cash' : 'Transfers'}
@@ -85,20 +94,20 @@ export default function Transfers() {
 
       {/* Search */}
       <div className="relative max-w-sm">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
         <input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          className="w-full bg-slate-900/60 border border-slate-800/60 rounded-lg pl-10 pr-4 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 transition-colors"
+          className="w-full bg-input-bg border border-border rounded-lg pl-10 pr-4 py-2.5 text-sm text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 transition-colors"
           placeholder="Search..."
         />
       </div>
 
       {/* List */}
-      <div className="bg-slate-900/40 border border-slate-800/60 rounded-xl divide-y divide-slate-800/30">
+      <div className="bg-surface-card border border-border rounded-xl divide-y divide-border-subtle">
         {transactions.length === 0 && !loading ? (
-          <div className="px-5 py-16 text-center text-slate-600 text-sm">
-            <ArrowLeftRight className="w-8 h-8 mx-auto mb-3 text-slate-700" />
+          <div className="px-5 py-16 text-center text-text-faint text-sm">
+            <ArrowLeftRight className="w-8 h-8 mx-auto mb-3 text-text-faint" />
             No {sourceTab.toLowerCase()} transactions yet
           </div>
         ) : (
@@ -106,25 +115,25 @@ export default function Transfers() {
             {transactions.map((tx) => (
               <div
                 key={tx.id}
-                className="flex items-center justify-between px-5 py-4 hover:bg-slate-800/20 transition-colors group"
+                className="flex items-center justify-between px-5 py-4 hover:bg-surface-hover transition-colors group"
               >
                 <div className="min-w-0">
                   <p className="text-sm font-medium truncate">{tx.merchant}</p>
-                  <p className="text-xs text-slate-500 mt-0.5">
+                  <p className="text-xs text-text-muted mt-0.5">
                     {new Date(tx.date).toLocaleDateString('en-US', {
                       month: 'short',
                       day: 'numeric',
                       year: 'numeric',
                     })}
                     {tx.category && (
-                      <span className="ml-2 bg-slate-800/60 text-slate-400 px-2 py-0.5 rounded">
+                      <span className="ml-2 bg-surface-hover text-text-secondary px-2 py-0.5 rounded">
                         {tx.category.name}
                       </span>
                     )}
                   </p>
                 </div>
                 <div className="flex items-center gap-3 flex-shrink-0 ml-4">
-                  <span className="font-mono text-sm font-medium text-white">
+                  <span className="font-mono text-sm font-medium">
                     {formatAmount(tx.amount, tx.currency)}
                   </span>
                   <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -133,13 +142,13 @@ export default function Transfers() {
                         setEditing(tx);
                         setModalOpen(true);
                       }}
-                      className="p-1.5 rounded hover:bg-slate-700/50 text-slate-500 hover:text-white transition-colors"
+                      className="p-1.5 rounded hover:bg-surface-hover text-text-muted hover:text-text-primary transition-colors"
                     >
                       <Pencil className="w-3.5 h-3.5" />
                     </button>
                     <button
-                      onClick={() => handleDelete(tx.id)}
-                      className="p-1.5 rounded hover:bg-red-500/10 text-slate-500 hover:text-red-400 transition-colors"
+                      onClick={() => setDeleteId(tx.id)}
+                      className="p-1.5 rounded hover:bg-red-500/10 text-text-muted hover:text-red-500 dark:hover:text-red-400 transition-colors"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
                     </button>
@@ -159,6 +168,16 @@ export default function Transfers() {
           onSaved={fetchTransactions}
         />
       )}
+
+      {deleteId !== null && (
+        <ConfirmDialog
+          title="Delete Transaction"
+          message="This transaction will be permanently deleted. This action cannot be undone."
+          onConfirm={handleDelete}
+          onCancel={() => setDeleteId(null)}
+          loading={deleting}
+        />
+      )}
     </div>
   );
 }