Migrate all components and pages to shadcn/ui with DataTable

Replace custom markup across all pages and components with shadcn/ui
primitives (Dialog, Sheet, Select, Card, Tabs, etc.). Add reusable
DataTable component powered by @tanstack/react-table with sortable
column headers and client-side pagination. Introduce TransactionList
with responsive mobile cards and desktop DataTable, dashboard section
customization (DashboardSection, SectionConfigDialog), and settings
API types.

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

frontend/src/components/PasteImportModal.tsx

@@ -1,6 +1,24 @@
 import { useState } from 'react';
-import { X, ClipboardPaste, CheckCircle, AlertTriangle } from 'lucide-react';
+import { ClipboardPaste, CheckCircle, AlertTriangle } from 'lucide-react';
 import api, { type ImportResult } from '../api';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 interface Props {
   onClose: () => void;
@@ -28,114 +46,100 @@ export default function PasteImportModal({ onClose, onImported }: Props) {
     }
   };
 
-  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>
+    <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ClipboardPaste className="w-4 h-4 text-primary" />
+            Import Bank Statement
+          </DialogTitle>
+        </DialogHeader>
+
+        {!result ? (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Bank</Label>
+                <Select value={bank} onValueChange={setBank}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="BAC">BAC</SelectItem>
+                    <SelectItem value="BCR">BCR</SelectItem>
+                    <SelectItem value="DAVIVIENDA">Davivienda</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label>Source</Label>
+                <Select value={source} onValueChange={setSource}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="CREDIT_CARD">Credit Card</SelectItem>
+                    <SelectItem value="CASH">Cash</SelectItem>
+                    <SelectItem value="TRANSFER">Transfer</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Statement Text</Label>
+              <Textarea
+                className="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-muted-foreground">
+                One transaction per line. Tab-separated columns.
+              </p>
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button onClick={handleImport} disabled={importing || !text.trim()}>
+                {importing ? 'Importing...' : 'Import'}
+              </Button>
+            </DialogFooter>
           </div>
-          <button onClick={onClose} className="text-text-muted hover:text-text-primary transition-colors">
-            <X className="w-5 h-5" />
-          </button>
-        </div>
+        ) : (
+          <div className="space-y-4">
+            <Alert>
+              <CheckCircle className="h-4 w-4 text-primary" />
+              <AlertTitle className="text-primary">Import Complete</AlertTitle>
+              <AlertDescription>
+                {result.imported} imported
+                {result.duplicates > 0 && ` · ${result.duplicates} duplicates skipped`}
+              </AlertDescription>
+            </Alert>
 
-        <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.length > 0 && (
+              <Alert variant="destructive">
+                <AlertTriangle className="h-4 w-4" />
+                <AlertTitle>{result.errors.length} errors</AlertTitle>
+                <AlertDescription>
+                  <ul className="text-xs font-mono max-h-32 overflow-y-auto space-y-1 mt-1">
                     {result.errors.map((err, i) => (
                       <li key={i}>{err}</li>
                     ))}
                   </ul>
-                </div>
-              )}
+                </AlertDescription>
+              </Alert>
+            )}
 
-              <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>
+            <Button onClick={onClose} className="w-full">
+              Done
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
   );
 }