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

@@ -1,6 +1,13 @@
 import { useEffect, useState } from 'react';
-import { Calendar, ChevronDown } from 'lucide-react';
+import { Calendar } from 'lucide-react';
 import api from '../api';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 export interface CycleOption {
   year: number;
@@ -22,33 +29,34 @@ export default function BillingCycleSelector({ value, onChange }: Props) {
     api.get('/transactions/cycles').then((r) => setCycles(r.data));
   }, []);
 
-  const selectedKey = value ? `${value.year}-${value.month}` : '';
+  const selectedKey = value ? `${value.year}-${value.month}` : 'all';
 
   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>
+      <Calendar className="w-4 h-4 text-muted-foreground" />
+      <Select
+        value={selectedKey}
+        onValueChange={(val) => {
+          if (val === 'all') {
+            onChange(null);
+          } else {
+            const [y, m] = val.split('-').map(Number);
+            onChange({ year: y, month: m });
+          }
+        }}
+      >
+        <SelectTrigger className="w-[180px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All time</SelectItem>
           {cycles.map((c) => (
-            <option key={`${c.year}-${c.month}`} value={`${c.year}-${c.month}`}>
+            <SelectItem key={`${c.year}-${c.month}`} value={`${c.year}-${c.month}`}>
               {c.label} ({c.count})
-            </option>
+            </SelectItem>
           ))}
-        </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>
+        </SelectContent>
+      </Select>
     </div>
   );
 }