Etapa completada (local) — widgets de Mirada Empresa

components/dashboard/prevalencia-cuidadores-card.tsx

@@ -0,0 +1,42 @@
+'use client'
+import { useEffect, useState } from 'react'
+import {
+  isSuppressed,
+  type PrevalenciaCuidadoresData,
+  type SuppressedPayload,
+  type DashboardFilters,
+} from '@/lib/dashboard-types'
+import { queries } from '@/lib/dashboard-queries'
+import { WidgetShell } from './widget-shell'
+
+export function PrevalenciaCuidadoresCard({ surveyId, filters }: { surveyId: string; filters: DashboardFilters }) {
+  const [data, setData] = useState<PrevalenciaCuidadoresData | SuppressedPayload | null>(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    setData(null); setError(false)
+    queries.mePrevalencia(surveyId, filters)
+      .then((d) => setData(d as PrevalenciaCuidadoresData | SuppressedPayload))
+      .catch(() => setError(true))
+  }, [surveyId, JSON.stringify(filters)])
+
+  const status = error ? 'error' : data === null ? 'loading' : isSuppressed(data) ? 'suppressed' : 'ok'
+  const ok = status === 'ok' ? (data as PrevalenciaCuidadoresData) : null
+
+  return (
+    <WidgetShell
+      title="Cuidadores en la plantilla"
+      subtitle="4.1 · vínculo de cuidado activo (incluye hijo/a menor sin discapacidad — criterio UNFPA)"
+      status={status}
+      n={ok?.n}
+      colSpan={4}
+    >
+      {ok && (
+        <>
+          <div className="db-big-stat">{ok.pct_cuidadores}%</div>
+          <p className="db-big-stat-sub">tiene algún rol de cuidado</p>
+        </>
+      )}
+    </WidgetShell>
+  )
+}