Agregar indicador/badge amarillo con el recuento de camas Fuera de Área

This commit is contained in:
2026-08-11 23:20:46 +00:00
parent 42cbe02861
commit 857ce09797
+5 -2
View File
@@ -187,14 +187,17 @@ export function MapaCamas({
</h1> </h1>
<p className="text-gray-500 dark:text-gray-400">Gestión de camas del servicio</p> <p className="text-gray-500 dark:text-gray-400">Gestión de camas del servicio</p>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 flex-wrap">
<Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300 dark:border-green-700"> <Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
{camas.filter(c => c.estado === 'Disponible' && !isCamaFueraDeGrupo(c, grupos)).length} Disponibles {camas.filter(c => c.estado === 'Disponible' && !isCamaFueraDeGrupo(c, grupos)).length} Disponibles
</Badge> </Badge>
<Badge variant="outline" className="bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300 dark:border-red-700"> <Badge variant="outline" className="bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300 dark:border-red-700">
{camas.filter(c => c.estado === 'Ocupada' && !isCamaFueraDeGrupo(c, grupos)).length} Ocupadas {camas.filter(c => c.estado === 'Ocupada' && !isCamaFueraDeGrupo(c, grupos)).length} Ocupadas
</Badge> </Badge>
<div className="ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap"> <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-800">
{camas.filter(c => isCamaFueraDeGrupo(c)).length} Fuera de Área
</Badge>
<div className="ml-0 sm:ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
<Button variant="outline" onClick={() => { <Button variant="outline" onClick={() => {
setEditingGrupoId(null); setEditingGrupoId(null);
setGrupoNombre(''); setGrupoNombre('');