snlavaise/administracionHospital
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Responsive mejorado en Mapa de Camas para celulares

Browse Source
This commit is contained in:
snlavaise
2026-04-14 21:28:53 -03:00
parent e3eecc6942
commit 9121a1b123
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/MapaCamas.tsx
+13 -12
View File
@@ -188,12 +188,12 @@ export function MapaCamas({
<Badge variant="outline" className="bg-red-50 text-red-700"> <Badge variant="outline" className="bg-red-50 text-red-700">
{camas.filter(c => c.estado === 'Ocupada').length} Ocupadas {camas.filter(c => c.estado === 'Ocupada').length} Ocupadas
</Badge> </Badge>
<div className="ml-4 flex items-center gap-2"> <div className="ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
<Button onClick={() => { <Button onClick={() => {
setEditingAreaId(null); setEditingAreaId(null);
setAreaNombre(''); setAreaNombre('');
setAreaDialogOpen(true); setAreaDialogOpen(true);
}}> }} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
Administrar Áreas Administrar Áreas
</Button> </Button>
<Button onClick={() => { <Button onClick={() => {
@@ -202,8 +202,9 @@ export function MapaCamas({
setBedTipo('General'); setBedTipo('General');
setBedAreaId(areas?.[0]?.id); setBedAreaId(areas?.[0]?.id);
setBedDialogOpen(true); setBedDialogOpen(true);
}}> }} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
<Plus className="h-4 w-4 mr-1" />Agregar Cama <Plus className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
<span className="hidden sm:inline">Agregar Cama</span>
</Button> </Button>
</div> </div>
</div> </div>
@@ -270,21 +271,21 @@ export function MapaCamas({
<Dialog key={cama.id}> <Dialog key={cama.id}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Card <Card
className={`cursor-pointer hover:shadow-md transition-shadow border-2 ${getEstadoColor(cama)}`} className={`cursor-pointer hover:shadow-md transition-shadow border-2 w-full ${getEstadoColor(cama)}`}
onClick={() => setCamaSeleccionada(cama)} onClick={() => setCamaSeleccionada(cama)}
> >
<CardContent className="p-4"> <CardContent className="p-2 sm:p-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-1 sm:mb-2">
<Bed className="h-6 w-6" /> <Bed className="h-4 w-4 sm:h-6 sm:w-6" />
{getEstadoIcono(cama)} {getEstadoIcono(cama)}
</div> </div>
<p className="font-bold text-lg">{cama.numero}</p> <p className="font-bold text-sm sm:text-lg">{cama.numero}</p>
<p className="text-xs opacity-75">{cama.areaId ? areaById[cama.areaId] ?? 'Área desconocida' : 'Sin área'}</p> <p className="text-xs opacity-75 truncate">{cama.areaId ? areaById[cama.areaId] ?? 'Área desconocida' : 'Sin área'}</p>
<Badge variant="outline" className="mt-2 text-xs bg-white/50"> <Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50">
{cama.tipo} {cama.tipo}
</Badge> </Badge>
{cama.estado === 'Ocupada' && paciente && ( {cama.estado === 'Ocupada' && paciente && (
<div className="mt-2 pt-2 border-t border-current/20"> <div className="mt-1 sm:mt-2 pt-1 sm:pt-2 border-t border-current/20">
<p className="text-xs font-medium truncate"> <p className="text-xs font-medium truncate">
{paciente.apellido}, {paciente.nombre} {paciente.apellido}, {paciente.nombre}
</p> </p>