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/pages/Analytics.tsx

@@ -7,8 +7,6 @@ import {
   Bar,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
   LineChart,
   Line,
 } from 'recharts';
@@ -16,7 +14,13 @@ import { BarChart3 } from 'lucide-react';
 
 import api from '../api';
 import BillingCycleSelector from '../components/BillingCycleSelector';
-import { useTheme } from '../ThemeContext';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
 
 interface CategorySpending {
   category_id: number | null;
@@ -42,18 +46,30 @@ interface DailySpending {
 }
 
 const COLORS = [
-  '#606C38', '#BC6C25', '#8b5cf6', '#DDA15E', '#ef4444',
-  '#ec4899', '#283618', '#f97316', '#6366f1', '#8a9462',
-  '#e879f9', '#c2c9a7', '#fb923c', '#a78bfa', '#7a8a4a',
-  '#fbbf24',
+  'var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)',
+  'oklch(0.7 0.15 30)', 'oklch(0.65 0.2 300)', 'oklch(0.6 0.15 150)',
+  'oklch(0.75 0.12 60)', 'oklch(0.55 0.18 250)',
 ];
 
 function formatCRC(value: number) {
   return `₡${Math.round(value).toLocaleString('es-CR')}`;
 }
 
+const trendChartConfig = {
+  total_crc: {
+    label: 'Total CRC',
+    color: 'var(--chart-1)',
+  },
+} satisfies ChartConfig;
+
+const dailyChartConfig = {
+  total: {
+    label: 'Daily Spending',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
 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[]>([]);
@@ -79,194 +95,216 @@ export default function Analytics() {
       .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';
+  // Build dynamic chart config for pie chart
+  const pieChartConfig = byCategory.reduce<ChartConfig>((acc, cat, i) => {
+    acc[cat.category_name] = {
+      label: cat.category_name,
+      color: COLORS[i % COLORS.length],
+    };
+    return acc;
+  }, {});
 
   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>
+            <BarChart3 className="w-5 h-5 text-primary" />
+            <h1 className="text-2xl font-bold font-heading">Analytics</h1>
           </div>
-          <p className="text-sm text-text-muted mt-1">Spending breakdown and trends</p>
+          <p className="text-sm text-muted-foreground 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>
-                ))}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm uppercase tracking-wider text-muted-foreground">
+              Spending by Category
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {byCategory.length === 0 ? (
+              <div className="h-64 flex items-center justify-center text-muted-foreground text-sm">
+                No data for this period
               </div>
-            </div>
-          )}
-        </div>
+            ) : (
+              <div className="flex flex-col items-center">
+                <ChartContainer config={pieChartConfig} className="h-[260px] w-full">
+                  <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>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          formatter={(value) => formatCRC(Number(value))}
+                        />
+                      }
+                    />
+                  </PieChart>
+                </ChartContainer>
+
+                {/* 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-muted-foreground truncate">{cat.category_name}</span>
+                      <span className="text-muted-foreground/60 ml-auto">{cat.percentage}%</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
 
         {/* 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>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm uppercase tracking-wider text-muted-foreground">
+              Monthly Spending (CRC)
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {trend.length === 0 ? (
+              <div className="h-64 flex items-center justify-center text-muted-foreground text-sm">
+                No data
+              </div>
+            ) : (
+              <ChartContainer config={trendChartConfig} className="h-[300px] w-full">
+                <BarChart data={trend}>
+                  <XAxis
+                    dataKey="label"
+                    axisLine={false}
+                    tickLine={false}
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickFormatter={(v) => `₡${(v / 1000).toFixed(0)}k`}
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) => formatCRC(Number(value))}
+                      />
+                    }
+                  />
+                  <Bar dataKey="total_crc" fill="var(--color-total_crc)" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ChartContainer>
+            )}
+          </CardContent>
+        </Card>
 
         {/* 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>
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle className="text-sm uppercase tracking-wider text-muted-foreground">
+              Daily Spending
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {daily.length === 0 ? (
+              <div className="h-48 flex items-center justify-center text-muted-foreground text-sm">
+                No data for this period
+              </div>
+            ) : (
+              <ChartContainer config={dailyChartConfig} className="h-[240px] w-full">
+                <LineChart data={daily}>
+                  <XAxis
+                    dataKey="date"
+                    axisLine={false}
+                    tickLine={false}
+                    tickFormatter={(v) => {
+                      const d = new Date(v);
+                      return `${d.getMonth() + 1}/${d.getDate()}`;
+                    }}
+                  />
+                  <YAxis
+                    axisLine={false}
+                    tickLine={false}
+                    tickFormatter={(v) => `₡${(v / 1000).toFixed(0)}k`}
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value) => formatCRC(Number(value))}
+                        labelFormatter={(label) =>
+                          new Date(label).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+                        }
+                      />
+                    }
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="total"
+                    stroke="var(--color-total)"
+                    strokeWidth={2}
+                    dot={{ fill: 'var(--color-total)', r: 3 }}
+                    activeDot={{ r: 5 }}
+                  />
+                </LineChart>
+              </ChartContainer>
+            )}
+          </CardContent>
+        </Card>
       </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">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm uppercase tracking-wider text-muted-foreground">
+              Top Categories
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <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="h-1.5 rounded-full"
-                    style={{
-                      width: `${cat.percentage}%`,
-                      background: COLORS[i % COLORS.length],
-                    }}
+                    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-muted-foreground">{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-muted 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>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
       )}
     </div>
   );