Etapa completada (local) — widgets de Mirada Empresa

components/dashboard/disposicion-red-card.tsx

@@ -0,0 +1,53 @@
+'use client'
+import { useEffect, useState } from 'react'
+import {
+  isSuppressed,
+  type DisposicionRedData,
+  type SuppressedPayload,
+  type DashboardFilters,
+} from '@/lib/dashboard-types'
+import { queries } from '@/lib/dashboard-queries'
+import { WidgetShell } from './widget-shell'
+
+export function DisposicionRedCard({ surveyId, filters }: { surveyId: string; filters: DashboardFilters }) {
+  const [data, setData] = useState<DisposicionRedData | SuppressedPayload | null>(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    setData(null); setError(false)
+    queries.meDisposicionRed(surveyId, filters)
+      .then((d) => setData(d as DisposicionRedData | SuppressedPayload))
+      .catch(() => setError(true))
+  }, [surveyId, JSON.stringify(filters)])
+
+  // Esta RPC tiene su propio shape de "suppressed" (n_grupo_apoyo/n_voluntariado,
+  // no min_n/n genérico) — isSuppressed() solo mira `status`, sigue funcionando.
+  const status = error ? 'error' : data === null ? 'loading' : isSuppressed(data) ? 'suppressed' : 'ok'
+  const ok = status === 'ok' ? (data as DisposicionRedData) : null
+
+  return (
+    <WidgetShell
+      title="Disposición a red de apoyo"
+      subtitle="9.3 (grupo de apoyo) + 9.4 (voluntariado)"
+      status={status}
+      colSpan={4}
+    >
+      {ok && (
+        <div style={{ display: 'flex', gap: 20 }}>
+          <div style={{ flex: 1, textAlign: 'center' }}>
+            <div className="db-big-stat" style={{ fontSize: '1.625rem' }}>
+              {ok.pct_grupo_apoyo !== null ? `${ok.pct_grupo_apoyo}%` : 'n<5'}
+            </div>
+            <p className="db-big-stat-sub">grupo de apoyo (n={ok.n_grupo_apoyo})</p>
+          </div>
+          <div style={{ flex: 1, textAlign: 'center' }}>
+            <div className="db-big-stat" style={{ fontSize: '1.625rem' }}>
+              {ok.pct_voluntariado !== null ? `${ok.pct_voluntariado}%` : 'n<5'}
+            </div>
+            <p className="db-big-stat-sub">voluntariado (n={ok.n_voluntariado})</p>
+          </div>
+        </div>
+      )}
+    </WidgetShell>
+  )
+}