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/components/BillingCycleSelector.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { Calendar, ChevronDown } from 'lucide-react';
+import api from '../api';
+
+export interface CycleOption {
+  year: number;
+  month: number;
+  label: string;
+  count: number;
+  total: number;
+}
+
+interface Props {
+  value: { year: number; month: number } | null;
+  onChange: (cycle: { year: number; month: number } | null) => void;
+}
+
+export default function BillingCycleSelector({ value, onChange }: Props) {
+  const [cycles, setCycles] = useState<CycleOption[]>([]);
+
+  useEffect(() => {
+    api.get('/transactions/cycles').then((r) => setCycles(r.data));
+  }, []);
+
+  const selectedKey = value ? `${value.year}-${value.month}` : '';
+
+  return (
+    <div className="flex items-center gap-2">
+      <Calendar className="w-4 h-4 text-text-muted" />
+      <div className="relative">
+        <select
+          value={selectedKey}
+          onChange={(e) => {
+            if (!e.target.value) {
+              onChange(null);
+            } else {
+              const [y, m] = e.target.value.split('-').map(Number);
+              onChange({ year: y, month: m });
+            }
+          }}
+          className="appearance-none bg-input-bg border border-border rounded-lg pl-3 pr-9 py-2 text-sm text-text-primary focus:outline-none focus:border-[#606C38]/50 transition-colors"
+        >
+          <option value="">All time</option>
+          {cycles.map((c) => (
+            <option key={`${c.year}-${c.month}`} value={`${c.year}-${c.month}`}>
+              {c.label} ({c.count})
+            </option>
+          ))}
+        </select>
+        <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted pointer-events-none" />
+      </div>
+    </div>
+  );
+}

frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,55 @@
+import { AlertTriangle, X } from 'lucide-react';
+
+interface Props {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  loading?: boolean;
+}
+
+export default function ConfirmDialog({ title, message, confirmLabel = 'Delete', onConfirm, onCancel, loading }: Props) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4" onClick={onCancel}>
+      <div
+        className="bg-surface border border-border rounded-xl w-full max-w-sm animate-fade-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <h3 className="font-semibold">{title}</h3>
+          <button onClick={onCancel} className="text-text-muted hover:text-text-primary transition-colors">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="px-5 py-5">
+          <div className="flex gap-3 items-start">
+            <div className="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center flex-shrink-0">
+              <AlertTriangle className="w-5 h-5 text-red-500 dark:text-red-400" />
+            </div>
+            <p className="text-sm text-text-secondary pt-2">{message}</p>
+          </div>
+        </div>
+
+        <div className="flex gap-3 px-5 pb-5">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium text-text-secondary border border-border hover:bg-surface-hover transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={loading}
+            className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium bg-red-500 hover:bg-red-600 text-white transition-colors disabled:opacity-50"
+          >
+            {loading ? 'Deleting...' : confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Layout.tsx

@@ -2,23 +2,29 @@ import { NavLink, Outlet, useNavigate } from 'react-router-dom';
 import {
   LayoutDashboard,
   CreditCard,
+  BarChart3,
   ArrowLeftRight,
   LogOut,
   Wallet,
   Menu,
   X,
+  Sun,
+  Moon,
 } from 'lucide-react';
 import { useState } from 'react';
 import { useAuth } from '../AuthContext';
+import { useTheme } from '../ThemeContext';
 
 const navItems = [
   { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
   { to: '/transactions', icon: CreditCard, label: 'Transactions' },
+  { to: '/analytics', icon: BarChart3, label: 'Analytics' },
   { to: '/transfers', icon: ArrowLeftRight, label: 'Cash & Transfers' },
 ];
 
 export default function Layout() {
   const { logout } = useAuth();
+  const { theme, toggleTheme } = useTheme();
   const navigate = useNavigate();
   const [mobileOpen, setMobileOpen] = useState(false);
 
@@ -28,16 +34,16 @@ export default function Layout() {
   };
 
   return (
-    <div className="min-h-screen bg-slate-950 text-white">
+    <div className="min-h-screen bg-surface text-text-primary">
       {/* Top bar */}
-      <header className="border-b border-slate-800/60 backdrop-blur-sm sticky top-0 z-50 bg-slate-950/90">
+      <header className="border-b border-border backdrop-blur-sm sticky top-0 z-50 bg-surface/90">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
           <div className="flex items-center gap-2.5">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-cyan-400 flex items-center justify-center">
-              <Wallet className="w-4 h-4 text-slate-950" strokeWidth={2.5} />
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#606C38] to-[#DDA15E] flex items-center justify-center">
+              <Wallet className="w-4 h-4 text-[#FEFAE0]" strokeWidth={2.5} />
             </div>
             <span className="text-lg font-bold tracking-tight hidden sm:inline">
-              Wealthy<span className="text-emerald-400">Smart</span>
+              Wealthy<span className="text-[#606C38] dark:text-[#7a8a4a]">Smart</span>
             </span>
           </div>
 
@@ -51,8 +57,8 @@ export default function Layout() {
                 className={({ isActive }) =>
                   `flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                     isActive
-                      ? 'bg-emerald-500/10 text-emerald-400'
-                      : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+                      ? 'bg-[#606C38]/10 text-[#606C38] dark:text-[#7a8a4a]'
+                      : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
                   }`
                 }
               >
@@ -63,15 +69,21 @@ export default function Layout() {
           </nav>
 
           <div className="flex items-center gap-2">
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors"
+            >
+              {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+            </button>
             <button
               onClick={handleLogout}
-              className="hidden md:flex items-center gap-2 text-slate-500 hover:text-slate-300 text-sm transition-colors"
+              className="hidden md:flex items-center gap-2 text-text-muted hover:text-text-secondary text-sm transition-colors"
             >
               <LogOut className="w-4 h-4" />
             </button>
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
-              className="md:hidden text-slate-400"
+              className="md:hidden text-text-muted"
             >
               {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
             </button>
@@ -80,7 +92,7 @@ export default function Layout() {
 
         {/* Mobile nav */}
         {mobileOpen && (
-          <div className="md:hidden border-t border-slate-800/60 px-4 pb-4 space-y-1">
+          <div className="md:hidden border-t border-border px-4 pb-4 space-y-1">
             {navItems.map(({ to, icon: Icon, label }) => (
               <NavLink
                 key={to}
@@ -90,8 +102,8 @@ export default function Layout() {
                 className={({ isActive }) =>
                   `flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
                     isActive
-                      ? 'bg-emerald-500/10 text-emerald-400'
-                      : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+                      ? 'bg-[#606C38]/10 text-[#606C38] dark:text-[#7a8a4a]'
+                      : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
                   }`
                 }
               >
@@ -101,7 +113,7 @@ export default function Layout() {
             ))}
             <button
               onClick={handleLogout}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800/50 w-full"
+              className="flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium text-text-muted hover:text-text-primary hover:bg-surface-hover w-full"
             >
               <LogOut className="w-4 h-4" />
               Sign out

frontend/src/components/PasteImportModal.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { X, ClipboardPaste, CheckCircle, AlertTriangle } from 'lucide-react';
+import api, { type ImportResult } from '../api';
+
+interface Props {
+  onClose: () => void;
+  onImported: () => void;
+}
+
+export default function PasteImportModal({ onClose, onImported }: Props) {
+  const [text, setText] = useState('');
+  const [bank, setBank] = useState('BAC');
+  const [source, setSource] = useState('CREDIT_CARD');
+  const [importing, setImporting] = useState(false);
+  const [result, setResult] = useState<ImportResult | null>(null);
+
+  const handleImport = async () => {
+    if (!text.trim()) return;
+    setImporting(true);
+    try {
+      const { data } = await api.post<ImportResult>('/import/paste', { text, bank, source });
+      setResult(data);
+      if (data.imported > 0) onImported();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const inputClass =
+    'w-full bg-input-bg border border-border rounded-lg px-3 py-2.5 text-sm text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 focus:ring-1 focus:ring-[#606C38]/20 transition-colors';
+  const labelClass = 'block text-xs font-medium text-text-secondary mb-1 uppercase tracking-wider';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <div className="bg-surface border border-border rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <ClipboardPaste className="w-4 h-4 text-[#606C38] dark:text-[#7a8a4a]" />
+            <h3 className="font-semibold">Import Bank Statement</h3>
+          </div>
+          <button onClick={onClose} className="text-text-muted hover:text-text-primary transition-colors">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-5 space-y-4">
+          {!result ? (
+            <>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className={labelClass}>Bank</label>
+                  <select className={inputClass} value={bank} onChange={(e) => setBank(e.target.value)}>
+                    <option value="BAC">BAC</option>
+                    <option value="BCR">BCR</option>
+                    <option value="DAVIVIENDA">Davivienda</option>
+                  </select>
+                </div>
+                <div>
+                  <label className={labelClass}>Source</label>
+                  <select className={inputClass} value={source} onChange={(e) => setSource(e.target.value)}>
+                    <option value="CREDIT_CARD">Credit Card</option>
+                    <option value="CASH">Cash</option>
+                    <option value="TRANSFER">Transfer</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className={labelClass}>Statement Text</label>
+                <textarea
+                  className={`${inputClass} h-48 font-mono text-xs resize-y`}
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                  placeholder={`Paste bank statement lines here...\n\nFormat: DD/MM/YYYY\tMERCHANT\\CITY\\COUNTRY\tAMOUNT CRC`}
+                />
+                <p className="text-xs text-text-faint mt-1">
+                  One transaction per line. Tab-separated columns.
+                </p>
+              </div>
+
+              <div className="flex gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium text-text-secondary border border-border hover:bg-surface-hover transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleImport}
+                  disabled={importing || !text.trim()}
+                  className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium bg-[#606C38] hover:bg-[#7a8a4a] text-white dark:text-[#FEFAE0] transition-colors disabled:opacity-50"
+                >
+                  {importing ? 'Importing...' : 'Import'}
+                </button>
+              </div>
+            </>
+          ) : (
+            <div className="space-y-4">
+              <div className="flex items-center gap-3 p-4 bg-[#606C38]/10 border border-[#606C38]/20 rounded-lg">
+                <CheckCircle className="w-5 h-5 text-[#606C38] dark:text-[#7a8a4a] flex-shrink-0" />
+                <div>
+                  <p className="font-medium text-[#606C38] dark:text-[#7a8a4a]">Import Complete</p>
+                  <p className="text-sm text-text-secondary mt-1">
+                    {result.imported} imported
+                    {result.duplicates > 0 && ` · ${result.duplicates} duplicates skipped`}
+                  </p>
+                </div>
+              </div>
+
+              {result.errors.length > 0 && (
+                <div className="p-4 bg-amber-500/10 border border-amber-500/20 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <AlertTriangle className="w-4 h-4 text-amber-500 dark:text-amber-400" />
+                    <span className="text-sm font-medium text-amber-600 dark:text-amber-400">
+                      {result.errors.length} errors
+                    </span>
+                  </div>
+                  <ul className="text-xs text-text-secondary space-y-1 font-mono max-h-32 overflow-y-auto">
+                    {result.errors.map((err, i) => (
+                      <li key={i}>{err}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              <button
+                onClick={onClose}
+                className="w-full px-4 py-2.5 rounded-lg text-sm font-medium bg-[#606C38] hover:bg-[#7a8a4a] text-white dark:text-[#FEFAE0] transition-colors"
+              >
+                Done
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TransactionModal.tsx

@@ -26,6 +26,7 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
     category_id: '' as string | number,
   });
   const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
 
   useEffect(() => {
     api.get('/categories/').then((r) => setCategories(r.data));
@@ -53,6 +54,7 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSaving(true);
+    setError('');
     try {
       const payload = {
         ...form,
@@ -70,30 +72,39 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
       }
       onSaved();
       onClose();
-    } catch (err) {
-      console.error(err);
+    } catch (err: any) {
+      if (err.response?.status === 409) {
+        setError('Duplicate transaction: a transaction with this reference already exists.');
+      } else {
+        console.error(err);
+      }
     } finally {
       setSaving(false);
     }
   };
 
   const inputClass =
-    'w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/20 transition-colors';
-  const labelClass = 'block text-xs font-medium text-slate-400 mb-1 uppercase tracking-wider';
+    'w-full bg-input-bg border border-border rounded-lg px-3 py-2.5 text-sm text-text-primary placeholder-text-faint focus:outline-none focus:border-[#606C38]/50 focus:ring-1 focus:ring-[#606C38]/20 transition-colors';
+  const labelClass = 'block text-xs font-medium text-text-secondary mb-1 uppercase tracking-wider';
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-      <div className="bg-slate-900 border border-slate-800 rounded-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-800/60">
+      <div className="bg-surface border border-border rounded-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
           <h3 className="font-semibold">
             {transaction ? 'Edit Transaction' : 'New Transaction'}
           </h3>
-          <button onClick={onClose} className="text-slate-500 hover:text-white transition-colors">
+          <button onClick={onClose} className="text-text-muted hover:text-text-primary transition-colors">
             <X className="w-5 h-5" />
           </button>
         </div>
 
         <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          {error && (
+            <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-500 dark:text-red-400">
+              {error}
+            </div>
+          )}
           <div className="grid grid-cols-2 gap-4">
             <div className="col-span-2">
               <label className={labelClass}>Merchant</label>
@@ -223,14 +234,14 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
             <button
               type="button"
               onClick={onClose}
-              className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium text-slate-400 border border-slate-800 hover:bg-slate-800/50 transition-colors"
+              className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium text-text-secondary border border-border hover:bg-surface-hover transition-colors"
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={saving}
-              className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium bg-emerald-500 hover:bg-emerald-400 text-slate-950 transition-colors disabled:opacity-50"
+              className="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium bg-[#606C38] hover:bg-[#7a8a4a] text-white dark:text-[#FEFAE0] transition-colors disabled:opacity-50"
             >
               {saving ? 'Saving...' : transaction ? 'Update' : 'Create'}
             </button>