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