Fix responsive layout in Pacientes table and update Ambulatorio badge style
This commit is contained in:
+145
-147
@@ -336,154 +336,152 @@ export function Pacientes({
|
||||
|
||||
{/* Tabla de Pacientes */}
|
||||
{pacientesFiltrados.length > 0 ? (
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="w-full min-w-max text-sm">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Apellido</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Nombre</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>DNI</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Edad</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Sexo</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Obra Social</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Teléfono</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Estado</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="w-[80px]">
|
||||
<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" />
|
||||
<span className="sr-only">Acciones</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pacientesFiltrados.map((paciente) => {
|
||||
const internado = estaInternado(paciente.id);
|
||||
return (
|
||||
<TableRow key={paciente.id}>
|
||||
<TableCell className="font-medium text-gray-900 dark:text-white">
|
||||
<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">
|
||||
<AlertTriangle className="h-2.5 w-2.5 mr-0.5" />
|
||||
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
|
||||
<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>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Apellido</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Nombre</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>DNI</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Edad</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Sexo</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Obra Social</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Teléfono</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
<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" />
|
||||
<span>Estado</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="w-[80px]">
|
||||
<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" />
|
||||
<span className="sr-only">Acciones</span>
|
||||
</div>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pacientesFiltrados.map((paciente) => {
|
||||
const internado = estaInternado(paciente.id);
|
||||
return (
|
||||
<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 shrink-0">
|
||||
<AlertTriangle className="h-2.5 w-2.5 mr-0.5" />
|
||||
Alergia
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Acciones</DropdownMenuLabel>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TableCell>
|
||||
<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 whitespace-nowrap">
|
||||
{paciente.dni}
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
|
||||
{getEdad(paciente.fechaNacimiento)}
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
|
||||
{paciente.sexo}
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
|
||||
{paciente.obraSocial || '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-600 dark:text-gray-400 whitespace-nowrap">
|
||||
{paciente.telefono || '-'}
|
||||
</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 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 className="whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Acciones</DropdownMenuLabel>
|
||||
<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">
|
||||
<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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user