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

Alinear tabla de pacientes, agregar modal de detalles completo y actualizar estilo de badge ambulatorio

Browse Source
This commit is contained in:
snlavaise
2026-08-11 14:52:44 +00:00
parent d17ba39b2d
commit f0b995f046
2 changed files with 352 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/Internaciones.tsx
+55 -10
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { ClipboardList, Plus, Search, LogOut, CheckCircle2, MoreHorizontal, FileText, Trash2 } from 'lucide-react'; import { ClipboardList, Plus, Search, LogOut, CheckCircle2, MoreHorizontal, FileText, Trash2, Bed, User, Calendar, IdCard, Activity, CalendarDays, Clock, Settings } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -415,15 +415,60 @@ export function Internaciones({
<Table className="w-full min-w-max text-sm"> <Table className="w-full min-w-max text-sm">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Cama</TableHead> <TableHead>
<TableHead>Apellido</TableHead> <div className="flex items-center gap-1.5">
<TableHead>Nombre</TableHead> <Bed className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<TableHead className="text-center">Edad</TableHead> <span>Cama</span>
<TableHead className="text-center">DNI</TableHead> </div>
<TableHead className="text-center">Estado</TableHead> </TableHead>
<TableHead className="text-center">Fecha Ingreso</TableHead> <TableHead>
<TableHead className="text-center">Duración</TableHead> <div className="flex items-center gap-1.5">
<TableHead className="text-center w-[60px]">Acciones</TableHead> <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 className="text-center">
<div className="flex items-center justify-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 className="text-center">
<div className="flex items-center justify-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 className="text-center">
<div className="flex items-center justify-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="text-center">
<div className="flex items-center justify-center gap-1.5">
<CalendarDays className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<span>Fecha Ingreso</span>
</div>
</TableHead>
<TableHead className="text-center">
<div className="flex items-center justify-center gap-1.5">
<Clock className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<span>Duración</span>
</div>
</TableHead>
<TableHead className="text-center w-[60px]">
<div className="flex items-center justify-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> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
src/sections/Pacientes.tsx
+297 -106
View File
@@ -1,5 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { Users, Plus, Search, Edit2, Trash2, User, Calendar, Phone, Mail, Droplet, AlertTriangle, X, Save } from 'lucide-react'; import { Users, Plus, Search, Edit2, Trash2, User, Calendar, Phone, AlertTriangle, X, Save, IdCard, Activity, Settings, ShieldCheck, MoreHorizontal, Eye } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -7,7 +7,9 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import type { Paciente } from '@/types'; import type { Paciente } from '@/types';
interface PacientesProps { interface PacientesProps {
@@ -28,6 +30,9 @@ export function Pacientes({
const [busqueda, setBusqueda] = useState(''); const [busqueda, setBusqueda] = useState('');
const [dialogoAbierto, setDialogoAbierto] = useState(false); const [dialogoAbierto, setDialogoAbierto] = useState(false);
const [pacienteEditando, setPacienteEditando] = useState<Paciente | null>(null); const [pacienteEditando, setPacienteEditando] = useState<Paciente | null>(null);
const [pacienteAEliminar, setPacienteAEliminar] = useState<Paciente | null>(null);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [pacienteVerDetalle, setPacienteVerDetalle] = useState<Paciente | null>(null);
// Formulario // Formulario
const [nombre, setNombre] = useState(''); const [nombre, setNombre] = useState('');
@@ -329,115 +334,157 @@ export function Pacientes({
</CardContent> </CardContent>
</Card> </Card>
{/* Lista de Pacientes */} {/* Tabla de Pacientes */}
<div className="grid grid-cols-1 gap-4"> {pacientesFiltrados.length > 0 ? (
{pacientesFiltrados.map((paciente) => ( <Card>
<Card key={paciente.id} className="hover:shadow-md transition-shadow"> <CardContent className="p-0">
<CardContent className="p-4"> <div className="overflow-x-auto">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4"> <Table className="w-full min-w-max text-sm">
<div className="flex items-start gap-4"> <TableHeader>
<div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0"> <TableRow>
<User className="h-6 w-6 text-blue-600" /> <TableHead>
</div> <div className="flex items-center gap-1.5">
<div> <User className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<div className="flex items-center gap-2 flex-wrap"> <span>Apellido</span>
<h3 className="font-bold text-lg">
{paciente.apellido}, {paciente.nombre}
</h3>
{estaInternado(paciente.id) && (
<Badge className="bg-purple-100 text-purple-800">
Internado
</Badge>
)}
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-1 mt-2 text-sm text-gray-500">
<div className="flex items-center gap-1">
<span className="font-medium">DNI:</span> {paciente.dni}
</div> </div>
<div className="flex items-center gap-1"> </TableHead>
<Calendar className="h-3 w-3" /> <TableHead>
{getEdad(paciente.fechaNacimiento)} años <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> </div>
<div className="flex items-center gap-1"> </TableHead>
<span className="font-medium">Sexo:</span> {paciente.sexo} <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> </div>
{paciente.grupoSanguineo && ( </TableHead>
<div className="flex items-center gap-1"> <TableHead>
<Droplet className="h-3 w-3" /> <div className="flex items-center gap-1.5">
{paciente.grupoSanguineo} <Calendar className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
</div> <span>Edad</span>
)}
</div>
<div className="flex flex-wrap gap-3 mt-2 text-sm text-gray-500">
<div className="flex items-center gap-1">
<Phone className="h-3 w-3" />
{paciente.telefono}
</div> </div>
{paciente.email && ( </TableHead>
<div className="flex items-center gap-1"> <TableHead>
<Mail className="h-3 w-3" /> <div className="flex items-center gap-1.5">
{paciente.email} <Users className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
</div> <span>Sexo</span>
)}
</div>
{(paciente.alergias || paciente.antecedentes) && (
<div className="mt-2 flex flex-wrap gap-2">
{paciente.alergias && (
<Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
<AlertTriangle className="h-3 w-3 mr-1" />
Alergias
</Badge>
)}
{paciente.antecedentes && (
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
Antecedentes
</Badge>
)}
</div> </div>
)} </TableHead>
</div> <TableHead>
</div> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-2"> <ShieldCheck className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<Button <span>Obra Social</span>
variant="outline" </div>
size="sm" </TableHead>
onClick={() => handleEditar(paciente)} <TableHead>
> <div className="flex items-center gap-1.5">
<Edit2 className="h-4 w-4" /> <Phone className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
</Button> <span>Teléfono</span>
<AlertDialog> </div>
<AlertDialogTrigger asChild> </TableHead>
<Button variant="outline" size="sm" className="text-red-600 hover:bg-red-50"> <TableHead>
<Trash2 className="h-4 w-4" /> <div className="flex items-center gap-1.5">
</Button> <Activity className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
</AlertDialogTrigger> <span>Estado</span>
<AlertDialogContent> </div>
<AlertDialogHeader> </TableHead>
<AlertDialogTitle>¿Eliminar paciente?</AlertDialogTitle> <TableHead className="w-[80px]">
<AlertDialogDescription> <div className="flex items-center gap-1.5">
Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '} <Settings className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
<strong>{paciente.apellido}, {paciente.nombre}</strong>. <span className="sr-only">Acciones</span>
</AlertDialogDescription> </div>
</AlertDialogHeader> </TableHead>
<AlertDialogFooter> </TableRow>
<AlertDialogCancel>Cancelar</AlertDialogCancel> </TableHeader>
<AlertDialogAction <TableBody>
onClick={() => onEliminar(paciente.id)} {pacientesFiltrados.map((paciente) => {
className="bg-red-600 hover:bg-red-700" const internado = estaInternado(paciente.id);
> return (
Eliminar <TableRow key={paciente.id}>
</AlertDialogAction> <TableCell className="font-medium text-gray-900 dark:text-white">
</AlertDialogFooter> <div className="flex items-center gap-2">
</AlertDialogContent> <span>{paciente.apellido}</span>
</AlertDialog> {paciente.alergias && (
</div> <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-xs px-1.5 py-0">
</div> <AlertTriangle className="h-2.5 w-2.5 mr-0.5" />
</CardContent> Alergia
</Card> </Badge>
))} )}
</div> </div>
</TableCell>
{pacientesFiltrados.length === 0 && ( <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>
)}
</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 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" />
<p className="text-lg"> <p className="text-lg">
@@ -451,6 +498,150 @@ export function Pacientes({
)} )}
</div> </div>
)} )}
{/* Dialogo de confirmacion de eliminacion */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>¿Eliminar paciente?</AlertDialogTitle>
<AlertDialogDescription>
Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '}
<strong>{pacienteAEliminar?.apellido}, {pacienteAEliminar?.nombre}</strong>.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={() => setPacienteAEliminar(null)}>Cancelar</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
if (pacienteAEliminar) {
onEliminar(pacienteAEliminar.id);
setPacienteAEliminar(null);
}
}}
className="bg-red-600 hover:bg-red-700"
>
Eliminar
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* Dialogo de detalles del paciente */}
<Dialog open={!!pacienteVerDetalle} onOpenChange={(open) => { if (!open) setPacienteVerDetalle(null); }}>
<DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="flex items-center gap-2 text-xl">
<User className="h-5 w-5 text-teal-600 dark:text-teal-400" />
Detalles del Paciente
</DialogTitle>
</DialogHeader>
{pacienteVerDetalle && (
<div className="space-y-4 pt-1">
<div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg space-y-3 border border-gray-100 dark:border-gray-800">
<div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
{pacienteVerDetalle.apellido || '—'}, {pacienteVerDetalle.nombre || '—'}
</div>
<div className="grid grid-cols-2 gap-3 text-sm">
<div>
<span className="text-gray-500 dark:text-gray-400 block text-xs">DNI</span>
<span className="font-mono font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.dni || 'Sin especificar'}</span>
</div>
<div>
<span className="text-gray-500 dark:text-gray-400 block text-xs">Sexo</span>
<span className="font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.sexo || 'Sin especificar'}</span>
</div>
<div>
<span className="text-gray-500 dark:text-gray-400 block text-xs">Fecha de Nacimiento</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
{pacienteVerDetalle.fechaNacimiento ? `${pacienteVerDetalle.fechaNacimiento} (${getEdad(pacienteVerDetalle.fechaNacimiento)})` : 'Sin especificar'}
</span>
</div>
<div>
<span className="text-gray-500 dark:text-gray-400 block text-xs">Grupo Sanguíneo</span>
<span className="font-medium text-gray-800 dark:text-gray-200">{pacienteVerDetalle.grupoSanguineo || 'Sin especificar'}</span>
</div>
<div className="col-span-2">
<span className="text-gray-500 dark:text-gray-400 block text-xs">Estado Actual</span>
{internaciones.some(i => i.pacienteId === pacienteVerDetalle.id && i.activa) ? (
<Badge className="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-purple-200 mt-0.5">
Internado
</Badge>
) : (
<Badge variant="outline" className="bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300 mt-0.5">
Ambulatorio
</Badge>
)}
</div>
</div>
</div>
{/* Informacion de contacto, filiación y cobertura */}
<div className="space-y-2 text-sm text-gray-700 dark:text-gray-300 px-1">
<div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
<span className="text-gray-500 dark:text-gray-400">Historia Clínica:</span>
<span className="font-mono font-medium">{pacienteVerDetalle.historiaClinica || 'Sin especificar'}</span>
</div>
<div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
<span className="text-gray-500 dark:text-gray-400">Obra Social:</span>
<span className="font-medium">{pacienteVerDetalle.obraSocial || 'Sin especificar'}</span>
</div>
<div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
<span className="text-gray-500 dark:text-gray-400">Nacionalidad:</span>
<span>{pacienteVerDetalle.nacionalidad || 'Sin especificar'}</span>
</div>
<div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
<span className="text-gray-500 dark:text-gray-400">Teléfono:</span>
<span>{pacienteVerDetalle.telefono || 'Sin especificar'}</span>
</div>
<div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
<span className="text-gray-500 dark:text-gray-400">Email:</span>
<span>{pacienteVerDetalle.email || 'Sin especificar'}</span>
</div>
<div className="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
<span className="text-gray-500 dark:text-gray-400">Dirección:</span>
<span>{pacienteVerDetalle.direccion || 'Sin especificar'}</span>
</div>
</div>
{/* Sección Clínica */}
<div className="space-y-3 pt-2">
<h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Información Clínica
</h4>
<div>
<span className="text-xs text-gray-500 dark:text-gray-400 block mb-1 font-medium">
Medicación Habitual
</span>
<p className="bg-gray-50 dark:bg-gray-800/60 p-2.5 rounded border border-gray-100 dark:border-gray-800 text-xs text-gray-800 dark:text-gray-200 min-h-[38px] whitespace-pre-wrap">
{pacienteVerDetalle.medicacionHabitual || 'Sin medicación habitual registrada'}
</p>
</div>
<div>
<span className="text-xs text-gray-500 dark:text-gray-400 block mb-1 font-medium">
Antecedentes Médicos
</span>
<p className="bg-gray-50 dark:bg-gray-800/60 p-2.5 rounded border border-gray-100 dark:border-gray-800 text-xs text-gray-800 dark:text-gray-200 min-h-[38px] whitespace-pre-wrap">
{pacienteVerDetalle.antecedentes || 'Sin antecedentes registrados'}
</p>
</div>
<div>
<span className="text-xs text-red-600 dark:text-red-400 block mb-1 font-medium flex items-center gap-1">
<AlertTriangle className="h-3 w-3" />
Alergias
</span>
<p className={`p-2.5 rounded border text-xs min-h-[38px] whitespace-pre-wrap ${
pacienteVerDetalle.alergias
? 'bg-red-50 dark:bg-red-950/30 border-red-200/60 dark:border-red-800/40 text-red-900 dark:text-red-200'
: 'bg-gray-50 dark:bg-gray-800/60 border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-400'
}`}>
{pacienteVerDetalle.alergias || 'Sin alergias registradas'}
</p>
</div>
</div>
</div>
)}
</DialogContent>
</Dialog>
</div> </div>
); );
} }