Etapa completada (local) — widgets de Mirada Empresa

components/dashboard/talento-riesgo-card.tsx

@@ -0,0 +1,58 @@
+'use client'
+import { useEffect, useState } from 'react'
+import {
+  isSuppressed,
+  type TalentoRiesgoData,
+  type SuppressedPayload,
+  type DashboardFilters,
+} from '@/lib/dashboard-types'
+import { queries } from '@/lib/dashboard-queries'
+import { WidgetShell } from './widget-shell'
+
+// Umbrales de color SOLO visuales (no son la definición de la métrica, que
+// vive en la RPC vía p_umbral_senales) — afinar libremente si el director
+// prefiere otros cortes.
+function colorClass(pct: number): string {
+  if (pct >= 30) return ' db-big-stat-danger'
+  if (pct >= 15) return ' db-big-stat-warn'
+  return ''
+}
+
+export function TalentoRiesgoCard({ surveyId, filters }: { surveyId: string; filters: DashboardFilters }) {
+  const [data, setData] = useState<TalentoRiesgoData | SuppressedPayload | null>(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    setData(null); setError(false)
+    queries.meTalentoRiesgo(surveyId, filters)
+      .then((d) => setData(d as TalentoRiesgoData | 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 TalentoRiesgoData) : null
+
+  return (
+    <WidgetShell
+      title="Talento en riesgo"
+      subtitle="7.6 + 7.3 + 7.5 · métrica compuesta sobre la población cuidadora"
+      status={status}
+      n={ok?.n_cuidadores}
+      colSpan={4}
+      variant="star"
+    >
+      {ok && (
+        <>
+          <div className={`db-big-stat${colorClass(ok.pct_talento_riesgo)}`}>
+            {ok.pct_talento_riesgo}%
+          </div>
+          <p className="db-big-stat-sub">
+            de la plantilla cuidadora cumple al menos {ok.umbral_senales} de 3 señales de fuga
+            (riesgo de salida, ausentismo recurrente, carrera congelada). Promedio:{' '}
+            {ok.criterios_promedio} señales por persona.
+          </p>
+        </>
+      )}
+    </WidgetShell>
+  )
+}