54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|