43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
'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>
|
|
)
|
|
}
|