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 */}
{pacientesFiltrados.length > 0 ? (
<Card>
<CardContent className="p-0">
<div className="overflow-x-auto">
<div className="grid grid-cols-1 w-full">
<div className="w-full overflow-x-auto rounded-md border bg-card text-card-foreground shadow-sm pb-2">
<Table className="w-full min-w-max text-sm">
<TableHeader>
<TableRow>
@@ -402,48 +401,48 @@ export function Pacientes({
{pacientesFiltrados.map((paciente) => {
const internado = estaInternado(paciente.id);
return (
<TableRow key={paciente.id}>
<TableCell className="font-medium text-gray-900 dark:text-white">
<TableRow key={paciente.id} className="hover:bg-muted/50">
<TableCell className="font-medium text-gray-900 dark:text-white whitespace-nowrap">
<div className="flex items-center gap-2">
<span>{paciente.apellido}</span>
{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" />
Alergia
</Badge>
)}
</div>
</TableCell>
<TableCell className="text-gray-700 dark:text-gray-300">
<TableCell className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
{paciente.nombre}
</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}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{getEdad(paciente.fechaNacimiento)}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{paciente.sexo}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{paciente.obraSocial || '-'}
</TableCell>
<TableCell className="text-gray-600 dark:text-gray-400">
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
{paciente.telefono || '-'}
</TableCell>
<TableCell>
<TableCell className="whitespace-nowrap">
{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">
<Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 border border-emerald-500 font-medium">
Ambulatorio
</Badge>
)}
</TableCell>
<TableCell>
<TableCell className="whitespace-nowrap">
<div className="flex items-center">
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -482,8 +481,7 @@ export function Pacientes({
</TableBody>
</Table>
</div>
</CardContent>
</Card>
</div>
) : (
<div className="text-center py-12 text-gray-400">
<Users className="h-16 w-16 mx-auto mb-4 opacity-50" />
@@ -567,7 +565,7 @@ export function Pacientes({
Internado
</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
</Badge>
)}