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

Fix responsive layout in Pacientes table and update Ambulatorio badge style

Browse Source
This commit is contained in:
snlavaise
2026-08-11 15:05:30 +00:00
parent d6ac73f79f
commit d34c21fe60
1 changed files with 145 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/Pacientes.tsx
+145 -147
View File
@@ -336,154 +336,152 @@ export function Pacientes({
{/* Tabla de Pacientes */} {/* Tabla de Pacientes */}
{pacientesFiltrados.length > 0 ? ( {pacientesFiltrados.length > 0 ? (
<Card> <div className="grid grid-cols-1 w-full">
<CardContent className="p-0"> <div className="w-full overflow-x-auto rounded-md border bg-card text-card-foreground shadow-sm pb-2">
<div className="overflow-x-auto"> <Table className="w-full min-w-max text-sm">
<Table className="w-full min-w-max text-sm"> <TableHeader>
<TableHeader> <TableRow>
<TableRow> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>Apellido</span>
<span>Apellido</span> </div>
</div> </TableHead>
</TableHead> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>Nombre</span>
<span>Nombre</span> </div>
</div> </TableHead>
</TableHead> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <IdCard className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<IdCard className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>DNI</span>
<span>DNI</span> </div>
</div> </TableHead>
</TableHead> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <Calendar className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<Calendar className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>Edad</span>
<span>Edad</span> </div>
</div> </TableHead>
</TableHead> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <Users className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<Users className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>Sexo</span>
<span>Sexo</span> </div>
</div> </TableHead>
</TableHead> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <ShieldCheck className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<ShieldCheck className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>Obra Social</span>
<span>Obra Social</span> </div>
</div> </TableHead>
</TableHead> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <Phone className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<Phone className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>Teléfono</span>
<span>Teléfono</span> </div>
</div> </TableHead>
</TableHead> <TableHead>
<TableHead> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <Activity className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<Activity className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span>Estado</span>
<span>Estado</span> </div>
</div> </TableHead>
</TableHead> <TableHead className="w-[80px]">
<TableHead className="w-[80px]"> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <Settings className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<Settings className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" /> <span className="sr-only">Acciones</span>
<span className="sr-only">Acciones</span> </div>
</div> </TableHead>
</TableHead> </TableRow>
</TableRow> </TableHeader>
</TableHeader> <TableBody>
<TableBody> {pacientesFiltrados.map((paciente) => {
{pacientesFiltrados.map((paciente) => { const internado = estaInternado(paciente.id);
const internado = estaInternado(paciente.id); return (
return ( <TableRow key={paciente.id} className="hover:bg-muted/50">
<TableRow key={paciente.id}> <TableCell className="font-medium text-gray-900 dark:text-white whitespace-nowrap">
<TableCell className="font-medium text-gray-900 dark:text-white"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <span>{paciente.apellido}</span>
<span>{paciente.apellido}</span> {paciente.alergias && (
{paciente.alergias && ( <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs px-1.5 py-0 shrink-0">
<Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs px-1.5 py-0"> <AlertTriangle className="h-2.5 w-2.5 mr-0.5" />
<AlertTriangle className="h-2.5 w-2.5 mr-0.5" /> Alergia
Alergia
</Badge>
)}
</div>
</TableCell>
<TableCell className="text-gray-700 dark:text-gray-300">
{paciente.nombre}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400 font-mono">
{paciente.dni}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
{getEdad(paciente.fechaNacimiento)}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
{paciente.sexo}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
{paciente.obraSocial || '-'}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
{paciente.telefono || '-'}
</TableCell>
<TableCell>
{internado ? (
<Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200">
Internado
</Badge>
) : (
<Badge variant="outline" className="bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300">
Ambulatorio
</Badge> </Badge>
)} )}
</TableCell> </div>
<TableCell> </TableCell>
<div className="flex items-center"> <TableCell className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
<DropdownMenu> {paciente.nombre}
<DropdownMenuTrigger asChild> </TableCell>
<Button variant="ghost" size="icon" className="h-8 w-8 p-0"> <TableCell className="text-gray-600 dark:text-gray-400 font-mono whitespace-nowrap">
<MoreHorizontal className="h-4 w-4" /> {paciente.dni}
</Button> </TableCell>
</DropdownMenuTrigger> <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
<DropdownMenuContent align="end"> {getEdad(paciente.fechaNacimiento)}
<DropdownMenuLabel>Acciones</DropdownMenuLabel> </TableCell>
<DropdownMenuSeparator /> <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
<DropdownMenuItem onClick={() => setPacienteVerDetalle(paciente)}> {paciente.sexo}
<Eye className="h-4 w-4 mr-2 text-teal-600 dark:text-teal-400" /> </TableCell>
Detalles <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
</DropdownMenuItem> {paciente.obraSocial || '-'}
<DropdownMenuItem onClick={() => handleEditar(paciente)}> </TableCell>
<Edit2 className="h-4 w-4 mr-2 text-blue-600" /> <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
Editar paciente {paciente.telefono || '-'}
</DropdownMenuItem> </TableCell>
<DropdownMenuItem <TableCell className="whitespace-nowrap">
className="text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950/50" {internado ? (
onClick={() => { <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200">
setPacienteAEliminar(paciente); Internado
setDeleteDialogOpen(true); </Badge>
}} ) : (
> <Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 border border-emerald-500 font-medium">
<Trash2 className="h-4 w-4 mr-2" /> Ambulatorio
Eliminar </Badge>
</DropdownMenuItem> )}
</DropdownMenuContent> </TableCell>
</DropdownMenu> <TableCell className="whitespace-nowrap">
</div> <div className="flex items-center">
</TableCell> <DropdownMenu>
</TableRow> <DropdownMenuTrigger asChild>
); <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
})} <MoreHorizontal className="h-4 w-4" />
</TableBody> </Button>
</Table> </DropdownMenuTrigger>
</div> <DropdownMenuContent align="end">
</CardContent> <DropdownMenuLabel>Acciones</DropdownMenuLabel>
</Card> <DropdownMenuSeparator />
<DropdownMenuItem onClick={() => setPacienteVerDetalle(paciente)}>
<Eye className="h-4 w-4 mr-2 text-teal-600 dark:text-teal-400" />
Detalles
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleEditar(paciente)}>
<Edit2 className="h-4 w-4 mr-2 text-blue-600" />
Editar paciente
</DropdownMenuItem>
<DropdownMenuItem
className="text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950/50"
onClick={() => {
setPacienteAEliminar(paciente);
setDeleteDialogOpen(true);
}}
>
<Trash2 className="h-4 w-4 mr-2" />
Eliminar
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
</div>
) : ( ) : (
<div className="text-center py-12 text-gray-400"> <div className="text-center py-12 text-gray-400">
<Users className="h-16 w-16 mx-auto mb-4 opacity-50" /> <Users className="h-16 w-16 mx-auto mb-4 opacity-50" />
@@ -567,7 +565,7 @@ export function Pacientes({
Internado Internado
</Badge> </Badge>
) : ( ) : (
<Badge variant="outline" className="bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300 mt-0.5"> <Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 border border-emerald-500 font-medium mt-0.5">
Ambulatorio Ambulatorio
</Badge> </Badge>
)} )}