refactor completo + truncate de base de datos + reingenieria dashboard

components/dashboard/tabla-saturacion.tsx

@@ -0,0 +1,67 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { isSuppressed, type SaturacionData } from '@/lib/dashboard-types'
+import { queries } from '@/lib/dashboard-queries'
+import type { DashboardFilters } from '@/lib/dashboard-types'
+import { WidgetShell } from './widget-shell'
+
+const SATURACION_COLOR: Record<string, string> = {
+  'Alta saturación':  '#ef4444',
+  'Saturación media': '#F8AD13',
+  'Baja saturación':  '#43BBC8',
+}
+
+export function TablaSaturacion({ surveyId, filters }: { surveyId: string; filters: DashboardFilters }) {
+  const [data, setData] = useState<SaturacionData | null>(null)
+  const [sup, setSup] = useState(false)
+
+  useEffect(() => {
+    setData(null); setSup(false)
+    queries.saturacion(surveyId, filters)
+      .then(d => { if (isSuppressed(d)) setSup(true); else setData(d as SaturacionData) })
+      .catch(() => {})
+  }, [surveyId, JSON.stringify(filters)])
+
+  const status = !data && !sup ? 'loading' : sup ? 'suppressed' : 'ok'
+
+  return (
+    <WidgetShell title="Saturación del cuidador" subtitle="4.3 + 5.1 + 5.2 · indicador compuesto de saturación (bienestar bajo + rendimiento afectado + ausentismo)" status={status} n={data?.n_total} colSpan={12}>
+      {data && (
+        <div className="db-table-wrapper">
+          <p className="db-table-note">
+            Alta: bienestar ≤2, rendimiento afectado casi todos los días y ausentismo frecuente.
+            Media: dos de los tres criterios. Baja: uno o ninguno.
+          </p>
+          <table className="db-table" aria-label="Tabla de saturación del cuidador">
+            <thead>
+              <tr>
+                <th>Segmento</th>
+                <th>N</th>
+                <th>% del total</th>
+                <th>Apoyo más demandado</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.segmentos.map(seg => (
+                <tr key={seg.segmento}>
+                  <td>
+                    <span className="db-risk-badge"
+                      style={{ background: SATURACION_COLOR[seg.segmento] ?? '#6b7280' }}>
+                      {seg.segmento}
+                    </span>
+                  </td>
+                  <td>{seg.suppressed ? '—' : seg.n}</td>
+                  <td>{seg.suppressed ? '—' : `${seg.pct}%`}</td>
+                  <td>{seg.suppressed
+                    ? <span className="db-suppressed-hint">Datos insuficientes (n&lt;5)</span>
+                    : seg.apoyo ?? '—'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </WidgetShell>
+  )
+}