68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
'use client'
|
|
import { useEffect, useState } from 'react'
|
|
import { isSuppressed, type SaturacionData } from '@/lib/dashboard-types'
|
|
import { queries } from '@/lib/dashboard-queries'
|
|
import type { DashboardFilters } from '@/lib/dashboard-types'
|
|
import { WidgetShell } from './widget-shell'
|
|
|
|
const SATURACION_COLOR: Record<string, string> = {
|
|
'Alta saturación': '#ef4444',
|
|
'Saturación media': '#F8AD13',
|
|
'Baja saturación': '#43BBC8',
|
|
}
|
|
|
|
export function TablaSaturacion({ surveyId, filters }: { surveyId: string; filters: DashboardFilters }) {
|
|
const [data, setData] = useState<SaturacionData | null>(null)
|
|
const [sup, setSup] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setData(null); setSup(false)
|
|
queries.saturacion(surveyId, filters)
|
|
.then(d => { if (isSuppressed(d)) setSup(true); else setData(d as SaturacionData) })
|
|
.catch(() => {})
|
|
}, [surveyId, JSON.stringify(filters)])
|
|
|
|
const status = !data && !sup ? 'loading' : sup ? 'suppressed' : 'ok'
|
|
|
|
return (
|
|
<WidgetShell title="Saturación del cuidador" subtitle="4.3 + 5.1 + 5.2 · indicador compuesto de saturación (bienestar bajo + rendimiento afectado + ausentismo)" status={status} n={data?.n_total} colSpan={12}>
|
|
{data && (
|
|
<div className="db-table-wrapper">
|
|
<p className="db-table-note">
|
|
Alta: bienestar ≤2, rendimiento afectado casi todos los días y ausentismo frecuente.
|
|
Media: dos de los tres criterios. Baja: uno o ninguno.
|
|
</p>
|
|
<table className="db-table" aria-label="Tabla de saturación del cuidador">
|
|
<thead>
|
|
<tr>
|
|
<th>Segmento</th>
|
|
<th>N</th>
|
|
<th>% del total</th>
|
|
<th>Apoyo más demandado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.segmentos.map(seg => (
|
|
<tr key={seg.segmento}>
|
|
<td>
|
|
<span className="db-risk-badge"
|
|
style={{ background: SATURACION_COLOR[seg.segmento] ?? '#6b7280' }}>
|
|
{seg.segmento}
|
|
</span>
|
|
</td>
|
|
<td>{seg.suppressed ? '—' : seg.n}</td>
|
|
<td>{seg.suppressed ? '—' : `${seg.pct}%`}</td>
|
|
<td>{seg.suppressed
|
|
? <span className="db-suppressed-hint">Datos insuficientes (n<5)</span>
|
|
: seg.apoyo ?? '—'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</WidgetShell>
|
|
)
|
|
}
|