refactor: migrate frontend from shadcn/Tailwind to Mantine v9

Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

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

frontend/functions/ui/area_chart.tsx

@@ -1,9 +1,6 @@
-import {
-  AreaChart as RechartsAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
-} from 'recharts'
-import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'
-
-interface GradientConfig { from: string; to: string }
+import { AreaChart as MantineAreaChart } from '@mantine/charts'
+import { Paper } from '@mantine/core'
+import { type Series, getSeriesColor } from './chart_container'
 
 interface AreaChartProps {
   data: Record<string, unknown>[]
@@ -11,11 +8,10 @@ interface AreaChartProps {
   yKey?: string
   series?: Series[]
   stacked?: boolean
-  gradient?: GradientConfig | boolean
+  gradient?: boolean
   showGrid?: boolean
   showLegend?: boolean
-  height?: number | string
-  className?: string
+  height?: number
   xAxisFormatter?: (value: unknown) => string
   yAxisFormatter?: (value: unknown) => string
   valueFormatter?: (value: number) => string
@@ -23,40 +19,36 @@ interface AreaChartProps {
 
 function AreaChartComponent({
   data, xKey, yKey, series, stacked = false, gradient = true, showGrid = true,
-  showLegend = false, height = 300, className, xAxisFormatter, yAxisFormatter,
+  showLegend = false, height = 300, xAxisFormatter, yAxisFormatter,
   valueFormatter = (v) => v.toLocaleString(),
 }: AreaChartProps) {
-  const areas = series
-    ? series.map((s, i) => ({ dataKey: s.key, name: s.name, color: getSeriesColor(i, s.color) }))
-    : yKey ? [{ dataKey: yKey, name: yKey, color: getSeriesColor(0) }] : []
-
-  const gradientConfig: GradientConfig | null = gradient
-    ? typeof gradient === 'object' ? gradient : { from: '', to: 'transparent' }
-    : null
+  const chartSeries = series
+    ? series.map((s, i) => ({ name: s.key, label: s.name, color: getSeriesColor(i, s.color) }))
+    : yKey ? [{ name: yKey, label: yKey, color: getSeriesColor(0) }] : []
 
   return (
-    <ChartContainer className={className} height={height}>
-      <RechartsAreaChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
-        <defs>
-          {areas.map((area) => (
-            <linearGradient key={area.dataKey} id={`gradient-${area.dataKey}`} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor={gradientConfig?.from || area.color} stopOpacity={0.8} />
-              <stop offset="95%" stopColor={gradientConfig?.to || area.color} stopOpacity={0.1} />
-            </linearGradient>
-          ))}
-        </defs>
-        {showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
-        <XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
-        <YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
-        <Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }} />
-        {showLegend && <Legend />}
-        {areas.map((area) => (
-          <Area key={area.dataKey} type="monotone" dataKey={area.dataKey} name={area.name} stroke={area.color} strokeWidth={2} fill={gradient ? `url(#gradient-${area.dataKey})` : area.color} fillOpacity={gradient ? 1 : 0.3} stackId={stacked ? 'stack' : undefined} />
-        ))}
-      </RechartsAreaChart>
-    </ChartContainer>
+    <Paper p="md">
+      <MantineAreaChart
+        h={height}
+        data={data}
+        dataKey={xKey}
+        series={chartSeries}
+        type={stacked ? 'stacked' : 'default'}
+        curveType="monotone"
+        withGradient={gradient}
+        gridAxis={showGrid ? 'xy' : 'none'}
+        withLegend={showLegend}
+        withTooltip
+        valueFormatter={valueFormatter}
+        xAxisProps={xAxisFormatter ? { tickFormatter: xAxisFormatter } : undefined}
+        yAxisProps={yAxisFormatter ? { tickFormatter: yAxisFormatter } : undefined}
+      />
+    </Paper>
   )
 }
 
+/** @deprecated Gradient is handled by Mantine's withGradient prop */
+type GradientConfig = { from: string; to: string }
+
 export const AreaChart = AreaChartComponent
 export type { AreaChartProps, GradientConfig }