648 lines
30 KiB
TypeScript
648 lines
30 KiB
TypeScript
import { useState } from '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';
|
|
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 { 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 {
|
|
pacientes: Paciente[];
|
|
internaciones: { id: string; pacienteId: string; activa: boolean }[];
|
|
onAgregar: (paciente: Omit<Paciente, 'id' | 'fechaRegistro'>) => void;
|
|
onActualizar: (id: string, datos: Partial<Paciente>) => void;
|
|
onEliminar: (id: string) => void;
|
|
}
|
|
|
|
export function Pacientes({
|
|
pacientes,
|
|
internaciones,
|
|
onAgregar,
|
|
onActualizar,
|
|
onEliminar
|
|
}: PacientesProps) {
|
|
const [busqueda, setBusqueda] = useState('');
|
|
const [dialogoAbierto, setDialogoAbierto] = useState(false);
|
|
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
|
|
const [nombre, setNombre] = useState('');
|
|
const [apellido, setApellido] = useState('');
|
|
const [dni, setDni] = useState('');
|
|
const [fechaNacimiento, setFechaNacimiento] = useState('');
|
|
const [sexo, setSexo] = useState<'M' | 'F' | 'Otro'>('M');
|
|
const [telefono, setTelefono] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [direccion, setDireccion] = useState('');
|
|
const [grupoSanguineo, setGrupoSanguineo] = useState('');
|
|
const [alergias, setAlergias] = useState('');
|
|
const [antecedentes, setAntecedentes] = useState('');
|
|
const [obraSocial, setObraSocial] = useState('');
|
|
const [nacionalidad, setNacionalidad] = useState('');
|
|
const [medicacionHabitual, setMedicacionHabitual] = useState('');
|
|
const [historiaClinica, setHistoriaClinica] = useState('');
|
|
|
|
const resetFormulario = () => {
|
|
setNombre('');
|
|
setApellido('');
|
|
setDni('');
|
|
setFechaNacimiento('');
|
|
setSexo('M');
|
|
setTelefono('');
|
|
setEmail('');
|
|
setDireccion('');
|
|
setGrupoSanguineo('');
|
|
setAlergias('');
|
|
setAntecedentes('');
|
|
setObraSocial('');
|
|
setNacionalidad('');
|
|
setMedicacionHabitual('');
|
|
setHistoriaClinica('');
|
|
setPacienteEditando(null);
|
|
};
|
|
|
|
const handleEditar = (paciente: Paciente) => {
|
|
setPacienteEditando(paciente);
|
|
setNombre(paciente.nombre);
|
|
setApellido(paciente.apellido);
|
|
setDni(paciente.dni);
|
|
setFechaNacimiento(paciente.fechaNacimiento);
|
|
setSexo(paciente.sexo);
|
|
setTelefono(paciente.telefono);
|
|
setEmail(paciente.email || '');
|
|
setDireccion(paciente.direccion || '');
|
|
setGrupoSanguineo(paciente.grupoSanguineo || '');
|
|
setAlergias(paciente.alergias || '');
|
|
setAntecedentes(paciente.antecedentes || '');
|
|
setObraSocial(paciente.obraSocial || '');
|
|
setNacionalidad(paciente.nacionalidad || '');
|
|
setMedicacionHabitual(paciente.medicacionHabitual || '');
|
|
setHistoriaClinica(paciente.historiaClinica || '');
|
|
setDialogoAbierto(true);
|
|
};
|
|
|
|
const handleGuardar = () => {
|
|
if (!nombre || !apellido || !dni || !fechaNacimiento) return;
|
|
|
|
const datos = {
|
|
nombre,
|
|
apellido,
|
|
dni,
|
|
fechaNacimiento,
|
|
sexo,
|
|
telefono: telefono || undefined,
|
|
email: email || undefined,
|
|
direccion: direccion || undefined,
|
|
grupoSanguineo: grupoSanguineo || undefined,
|
|
alergias: alergias || undefined,
|
|
antecedentes: antecedentes || undefined,
|
|
obraSocial: obraSocial || undefined,
|
|
nacionalidad: nacionalidad || undefined,
|
|
medicacionHabitual: medicacionHabitual || undefined,
|
|
historiaClinica: historiaClinica || undefined,
|
|
};
|
|
|
|
if (pacienteEditando) {
|
|
onActualizar(pacienteEditando.id, datos);
|
|
} else {
|
|
onAgregar(datos);
|
|
}
|
|
|
|
resetFormulario();
|
|
setDialogoAbierto(false);
|
|
};
|
|
|
|
const pacientesFiltrados = pacientes.filter(p =>
|
|
p.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
|
|
p.apellido.toLowerCase().includes(busqueda.toLowerCase()) ||
|
|
p.dni.includes(busqueda)
|
|
);
|
|
|
|
const getEdad = (fechaNacimiento: string) => {
|
|
const hoy = new Date();
|
|
const nacimiento = new Date(fechaNacimiento);
|
|
let edad = hoy.getFullYear() - nacimiento.getFullYear();
|
|
const mes = hoy.getMonth() - nacimiento.getMonth();
|
|
if (mes < 0 || (mes === 0 && hoy.getDate() < nacimiento.getDate())) {
|
|
edad--;
|
|
}
|
|
return edad;
|
|
};
|
|
|
|
const estaInternado = (pacienteId: string) => {
|
|
return internaciones.some(i => i.pacienteId === pacienteId && i.activa);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 dark:text-white">
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2.5">
|
|
<Users className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
|
|
Pacientes
|
|
</h1>
|
|
<p className="text-gray-500 dark:text-gray-400">Gestión de pacientes del hospital</p>
|
|
</div>
|
|
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" onClick={resetFormulario}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Nuevo Paciente
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
{pacienteEditando ? <Edit2 className="h-5 w-5" /> : <Plus className="h-5 w-5" />}
|
|
{pacienteEditando ? 'Editar Paciente' : 'Nuevo Paciente'}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Nombre *</Label>
|
|
<Input
|
|
value={nombre}
|
|
onChange={(e) => setNombre(e.target.value)}
|
|
placeholder="Nombre del paciente"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Apellido *</Label>
|
|
<Input
|
|
value={apellido}
|
|
onChange={(e) => setApellido(e.target.value)}
|
|
placeholder="Apellido del paciente"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>DNI *</Label>
|
|
<Input
|
|
value={dni}
|
|
onChange={(e) => setDni(e.target.value)}
|
|
placeholder="Número de DNI"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Fecha de Nacimiento *</Label>
|
|
<Input
|
|
type="date"
|
|
value={fechaNacimiento}
|
|
onChange={(e) => setFechaNacimiento(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Sexo *</Label>
|
|
<Select value={sexo} onValueChange={(v: 'M' | 'F' | 'Otro') => setSexo(v)}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="M">Masculino</SelectItem>
|
|
<SelectItem value="F">Femenino</SelectItem>
|
|
<SelectItem value="Otro">Otro</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<Label>Historia Clínica</Label>
|
|
<Input
|
|
value={historiaClinica}
|
|
onChange={(e) => setHistoriaClinica(e.target.value)}
|
|
placeholder="Historia clínica..."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Obra Social</Label>
|
|
<Input
|
|
value={obraSocial}
|
|
onChange={(e) => setObraSocial(e.target.value)}
|
|
placeholder="Obra social del paciente"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Nacionalidad</Label>
|
|
<Input
|
|
value={nacionalidad}
|
|
onChange={(e) => setNacionalidad(e.target.value)}
|
|
placeholder="Nacionalidad del paciente"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Dirección</Label>
|
|
<Input
|
|
value={direccion}
|
|
onChange={(e) => setDireccion(e.target.value)}
|
|
placeholder="Dirección del paciente"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Grupo Sanguíneo</Label>
|
|
<Select value={grupoSanguineo} onValueChange={setGrupoSanguineo}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Seleccionar" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="A+">A+</SelectItem>
|
|
<SelectItem value="A-">A-</SelectItem>
|
|
<SelectItem value="B+">B+</SelectItem>
|
|
<SelectItem value="B-">B-</SelectItem>
|
|
<SelectItem value="AB+">AB+</SelectItem>
|
|
<SelectItem value="AB-">AB-</SelectItem>
|
|
<SelectItem value="O+">O+</SelectItem>
|
|
<SelectItem value="O-">O-</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<Label>Teléfono Contacto</Label>
|
|
<Input
|
|
value={telefono}
|
|
onChange={(e) => setTelefono(e.target.value)}
|
|
placeholder="Teléfono de contacto"
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<Label>Medicación Habitual</Label>
|
|
<textarea
|
|
className="w-full p-2 border rounded-md text-sm min-h-[60px]"
|
|
value={medicacionHabitual}
|
|
onChange={(e) => setMedicacionHabitual(e.target.value)}
|
|
placeholder="Medicación habitual del paciente..."
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<Label>Antecedentes Médicos</Label>
|
|
<textarea
|
|
className="w-full p-2 border rounded-md text-sm min-h-[60px]"
|
|
value={antecedentes}
|
|
onChange={(e) => setAntecedentes(e.target.value)}
|
|
placeholder="Antecedentes médicos relevantes..."
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<Label>Alergias</Label>
|
|
<textarea
|
|
className="w-full p-2 border rounded-md text-sm min-h-[60px]"
|
|
value={alergias}
|
|
onChange={(e) => setAlergias(e.target.value)}
|
|
placeholder="Alergias conocidas..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-4">
|
|
<Button variant="outline" onClick={() => {
|
|
resetFormulario();
|
|
setDialogoAbierto(false);
|
|
}}>
|
|
<X className="h-4 w-4 mr-2" />
|
|
Cancelar
|
|
</Button>
|
|
<Button variant="outline"
|
|
onClick={handleGuardar}
|
|
disabled={!nombre || !apellido || !dni || !fechaNacimiento}
|
|
>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
{pacienteEditando ? 'Guardar Cambios' : 'Crear Paciente'}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
{/* Búsqueda */}
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
className="pl-10"
|
|
placeholder="Buscar por nombre, apellido o DNI..."
|
|
value={busqueda}
|
|
onChange={(e) => setBusqueda(e.target.value)}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 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
|
|
</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">
|
|
<Users className="h-16 w-16 mx-auto mb-4 opacity-50" />
|
|
<p className="text-lg">
|
|
{busqueda ? 'No se encontraron pacientes con esa búsqueda' : 'No hay pacientes registrados'}
|
|
</p>
|
|
{!busqueda && (
|
|
<Button variant="outline" className="mt-4" onClick={() => setDialogoAbierto(true)}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Agregar primer paciente
|
|
</Button>
|
|
)}
|
|
</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>
|
|
);
|
|
}
|