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/DashboardSection.tsx

@@ -0,0 +1,76 @@
+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 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>
+  );
+}