From f0b995f046caa80a9abee434cf0fd657db9a0dc6 Mon Sep 17 00:00:00 2001 From: snlavaise Date: Tue, 11 Aug 2026 14:52:44 +0000 Subject: [PATCH] Alinear tabla de pacientes, agregar modal de detalles completo y actualizar estilo de badge ambulatorio --- src/sections/Internaciones.tsx | 65 +++++- src/sections/Pacientes.tsx | 403 ++++++++++++++++++++++++--------- 2 files changed, 352 insertions(+), 116 deletions(-) diff --git a/src/sections/Internaciones.tsx b/src/sections/Internaciones.tsx index 76f7161..bba192d 100644 --- a/src/sections/Internaciones.tsx +++ b/src/sections/Internaciones.tsx @@ -1,5 +1,5 @@ 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 { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; @@ -415,15 +415,60 @@ export function Internaciones({ - Cama - Apellido - Nombre - Edad - DNI - Estado - Fecha Ingreso - Duración - Acciones + +
+ + Cama +
+ + +
+ + Apellido +
+ + +
+ + Nombre +
+ + +
+ + Edad +
+ + +
+ + DNI +
+ + +
+ + Estado +
+ + +
+ + Fecha Ingreso +
+ + +
+ + Duración +
+ + +
+ + Acciones +
+ diff --git a/src/sections/Pacientes.tsx b/src/sections/Pacientes.tsx index dbd3ca9..9438c92 100644 --- a/src/sections/Pacientes.tsx +++ b/src/sections/Pacientes.tsx @@ -1,5 +1,5 @@ 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 { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; @@ -7,7 +7,9 @@ import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; 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'; interface PacientesProps { @@ -28,6 +30,9 @@ export function Pacientes({ const [busqueda, setBusqueda] = useState(''); const [dialogoAbierto, setDialogoAbierto] = useState(false); const [pacienteEditando, setPacienteEditando] = useState(null); + const [pacienteAEliminar, setPacienteAEliminar] = useState(null); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [pacienteVerDetalle, setPacienteVerDetalle] = useState(null); // Formulario const [nombre, setNombre] = useState(''); @@ -329,115 +334,157 @@ export function Pacientes({ - {/* Lista de Pacientes */} -
- {pacientesFiltrados.map((paciente) => ( - - -
-
-
- -
-
-
-

- {paciente.apellido}, {paciente.nombre} -

- {estaInternado(paciente.id) && ( - - Internado - - )} -
-
-
- DNI: {paciente.dni} + {/* Tabla de Pacientes */} + {pacientesFiltrados.length > 0 ? ( + + +
+
+ + + +
+ + Apellido
-
- - {getEdad(paciente.fechaNacimiento)} años + + +
+ + Nombre
-
- Sexo: {paciente.sexo} + + +
+ + DNI
- {paciente.grupoSanguineo && ( -
- - {paciente.grupoSanguineo} -
- )} -
-
-
- - {paciente.telefono} + + +
+ + Edad
- {paciente.email && ( -
- - {paciente.email} -
- )} -
- {(paciente.alergias || paciente.antecedentes) && ( -
- {paciente.alergias && ( - - - Alergias - - )} - {paciente.antecedentes && ( - - Antecedentes - - )} + + +
+ + Sexo
- )} -
-
-
- - - - - - - - ¿Eliminar paciente? - - Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '} - {paciente.apellido}, {paciente.nombre}. - - - - Cancelar - onEliminar(paciente.id)} - className="bg-red-600 hover:bg-red-700" - > - Eliminar - - - - -
-
- - - ))} - - - {pacientesFiltrados.length === 0 && ( + + +
+ + Obra Social +
+ + +
+ + Teléfono +
+ + +
+ + Estado +
+ + +
+ + Acciones +
+ + + + + {pacientesFiltrados.map((paciente) => { + const internado = estaInternado(paciente.id); + return ( + + +
+ {paciente.apellido} + {paciente.alergias && ( + + + Alergia + + )} +
+ + + {paciente.nombre} + + + {paciente.dni} + + + {getEdad(paciente.fechaNacimiento)} + + + {paciente.sexo} + + + {paciente.obraSocial || '-'} + + + {paciente.telefono || '-'} + + + {internado ? ( + + Internado + + ) : ( + + Ambulatorio + + )} + + +
+ + + + + + Acciones + + setPacienteVerDetalle(paciente)}> + + Detalles + + handleEditar(paciente)}> + + Editar paciente + + { + setPacienteAEliminar(paciente); + setDeleteDialogOpen(true); + }} + > + + Eliminar + + + +
+ + + ); + })} + +
+ + + + ) : (

@@ -451,6 +498,150 @@ export function Pacientes({ )}

)} + + {/* Dialogo de confirmacion de eliminacion */} + + + + ¿Eliminar paciente? + + Esta acción no se puede deshacer. Se eliminará permanentemente el paciente{' '} + {pacienteAEliminar?.apellido}, {pacienteAEliminar?.nombre}. + + + + setPacienteAEliminar(null)}>Cancelar + { + if (pacienteAEliminar) { + onEliminar(pacienteAEliminar.id); + setPacienteAEliminar(null); + } + }} + className="bg-red-600 hover:bg-red-700" + > + Eliminar + + + + + + {/* Dialogo de detalles del paciente */} + { if (!open) setPacienteVerDetalle(null); }}> + + + + + Detalles del Paciente + + + {pacienteVerDetalle && ( +
+
+
+ {pacienteVerDetalle.apellido || '—'}, {pacienteVerDetalle.nombre || '—'} +
+
+
+ DNI + {pacienteVerDetalle.dni || 'Sin especificar'} +
+
+ Sexo + {pacienteVerDetalle.sexo || 'Sin especificar'} +
+
+ Fecha de Nacimiento + + {pacienteVerDetalle.fechaNacimiento ? `${pacienteVerDetalle.fechaNacimiento} (${getEdad(pacienteVerDetalle.fechaNacimiento)})` : 'Sin especificar'} + +
+
+ Grupo Sanguíneo + {pacienteVerDetalle.grupoSanguineo || 'Sin especificar'} +
+
+ Estado Actual + {internaciones.some(i => i.pacienteId === pacienteVerDetalle.id && i.activa) ? ( + + Internado + + ) : ( + + Ambulatorio + + )} +
+
+
+ + {/* Informacion de contacto, filiación y cobertura */} +
+
+ Historia Clínica: + {pacienteVerDetalle.historiaClinica || 'Sin especificar'} +
+
+ Obra Social: + {pacienteVerDetalle.obraSocial || 'Sin especificar'} +
+
+ Nacionalidad: + {pacienteVerDetalle.nacionalidad || 'Sin especificar'} +
+
+ Teléfono: + {pacienteVerDetalle.telefono || 'Sin especificar'} +
+
+ Email: + {pacienteVerDetalle.email || 'Sin especificar'} +
+
+ Dirección: + {pacienteVerDetalle.direccion || 'Sin especificar'} +
+
+ + {/* Sección Clínica */} +
+

+ Información Clínica +

+
+ + Medicación Habitual + +

+ {pacienteVerDetalle.medicacionHabitual || 'Sin medicación habitual registrada'} +

+
+
+ + Antecedentes Médicos + +

+ {pacienteVerDetalle.antecedentes || 'Sin antecedentes registrados'} +

+
+
+ + + Alergias + +

+ {pacienteVerDetalle.alergias || 'Sin alergias registradas'} +

+
+
+
+ )} + + ); }