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
+16 -18
View File
@@ -336,9 +336,8 @@ 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>
@@ -402,48 +401,48 @@ export function Pacientes({
{pacientesFiltrados.map((paciente) => { {pacientesFiltrados.map((paciente) => {
const internado = estaInternado(paciente.id); const internado = estaInternado(paciente.id);
return ( return (
<TableRow key={paciente.id}> <TableRow key={paciente.id} className="hover:bg-muted/50">
<TableCell className="font-medium text-gray-900 dark:text-white"> <TableCell className="font-medium text-gray-900 dark:text-white whitespace-nowrap">
<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"> <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs px-1.5 py-0 shrink-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> </Badge>
)} )}
</div> </div>
</TableCell> </TableCell>
<TableCell className="text-gray-700 dark:text-gray-300"> <TableCell className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
{paciente.nombre} {paciente.nombre}
</TableCell> </TableCell>
<TableCell className="text-gray-600 dark:text-gray-400 font-mono"> <TableCell className="text-gray-600 dark:text-gray-400 font-mono whitespace-nowrap">
{paciente.dni} {paciente.dni}
</TableCell> </TableCell>
<TableCell className="text-gray-600 dark:text-gray-400"> <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{getEdad(paciente.fechaNacimiento)} {getEdad(paciente.fechaNacimiento)}
</TableCell> </TableCell>
<TableCell className="text-gray-600 dark:text-gray-400"> <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{paciente.sexo} {paciente.sexo}
</TableCell> </TableCell>
<TableCell className="text-gray-600 dark:text-gray-400"> <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{paciente.obraSocial || '-'} {paciente.obraSocial || '-'}
</TableCell> </TableCell>
<TableCell className="text-gray-600 dark:text-gray-400"> <TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{paciente.telefono || '-'} {paciente.telefono || '-'}
</TableCell> </TableCell>
<TableCell> <TableCell className="whitespace-nowrap">
{internado ? ( {internado ? (
<Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200"> <Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200">
Internado Internado
</Badge> </Badge>
) : ( ) : (
<Badge variant="outline" className="bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300"> <Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 border border-emerald-500 font-medium">
Ambulatorio Ambulatorio
</Badge> </Badge>
)} )}
</TableCell> </TableCell>
<TableCell> <TableCell className="whitespace-nowrap">
<div className="flex items-center"> <div className="flex items-center">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
@@ -482,8 +481,7 @@ export function Pacientes({
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</CardContent> </div>
</Card>
) : ( ) : (
<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>
)} )}