Initial commit: Sistema de Gestión Hospitalaria

This commit is contained in:
2026-04-12 20:52:43 -03:00
commit 714a43fd38
93 changed files with 24674 additions and 0 deletions
+540
View File
@@ -0,0 +1,540 @@
import { useState } from 'react';
import { FileText, Plus, Search, Calendar, Clock, Thermometer, Heart, Activity, Wind, Droplets, Pencil, Trash2, ChevronDown, ChevronUp } 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 type { Evolucion, Internacion, Paciente, SignosVitales, ExamenFisico } from '@/types';
interface EvolucionesProps {
evoluciones: Evolucion[];
internaciones: Internacion[];
pacientes: Paciente[];
onAgregarEvolucion: (evolucion: Omit<Evolucion, 'id'>) => void;
onActualizarEvolucion?: (id: string, datos: Partial<Evolucion>) => void;
onEliminarEvolucion: (id: string) => void;
getPacienteById: (id: string) => Paciente | undefined;
getInternacionActivaByPaciente: (pacienteId: string) => Internacion | undefined;
}
export function Evoluciones({
evoluciones,
internaciones,
pacientes,
onAgregarEvolucion,
onActualizarEvolucion,
onEliminarEvolucion,
getPacienteById,
getInternacionActivaByPaciente
}: EvolucionesProps) {
const [busqueda, setBusqueda] = useState('');
const [pacienteSeleccionado, setPacienteSeleccionado] = useState<string>('');
const [dialogoAbierto, setDialogoAbierto] = useState(false);
const [evolucionExpandida, setEvolucionExpandida] = useState<string | null>(null);
const [evolucionEditando, setEvolucionEditando] = useState<Evolucion | null>(null);
const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
const [hora, setHora] = useState(new Date().toTimeString().slice(0, 5));
const [medico, setMedico] = useState('');
const [temperatura, setTemperatura] = useState('');
const [presionSistolica, setPresionSistolica] = useState('');
const [presionDiastolica, setPresionDiastolica] = useState('');
const [frecuenciaCardiaca, setFrecuenciaCardiaca] = useState('');
const [frecuenciaRespiratoria, setFrecuenciaRespiratoria] = useState('');
const [saturacionO2, setSaturacionO2] = useState('');
const [snc, setSnc] = useState('');
const [cardiovascular, setCardiovascular] = useState('');
const [respiratorio, setRespiratorio] = useState('');
const [abdominal, setAbdominal] = useState('');
const [genitourinario, setGenitourinario] = useState('');
const [pielAnexos, setPielAnexos] = useState('');
const [soma, setSoma] = useState('');
const [novedades, setNovedades] = useState('');
const [comentario, setComentario] = useState('');
const [pendientes, setPendientes] = useState('');
const resetFormulario = () => {
setFecha(new Date().toISOString().split('T')[0]);
setHora(new Date().toTimeString().slice(0, 5));
setMedico('');
setTemperatura('');
setPresionSistolica('');
setPresionDiastolica('');
setFrecuenciaCardiaca('');
setFrecuenciaRespiratoria('');
setSaturacionO2('');
setSnc('');
setCardiovascular('');
setRespiratorio('');
setAbdominal('');
setGenitourinario('');
setPielAnexos('');
setSoma('');
setNovedades('');
setComentario('');
setPendientes('');
setEvolucionEditando(null);
};
const abrirEditar = (evo: Evolucion) => {
setEvolucionEditando(evo);
setFecha(evo.fecha);
setHora(evo.hora);
setMedico(evo.medico);
setTemperatura(evo.signosVitales?.temperatura?.toString() || '');
setPresionSistolica(evo.signosVitales?.presionSistolica?.toString() || '');
setPresionDiastolica(evo.signosVitales?.presionDiastolica?.toString() || '');
setFrecuenciaCardiaca(evo.signosVitales?.frecuenciaCardiaca?.toString() || '');
setFrecuenciaRespiratoria(evo.signosVitales?.frecuenciaRespiratoria?.toString() || '');
setSaturacionO2(evo.signosVitales?.saturacionO2?.toString() || '');
setSnc(evo.examenFisico?.SNC || '');
setCardiovascular(evo.examenFisico?.Cardiovascular || '');
setRespiratorio(evo.examenFisico?.Respiratorio || '');
setAbdominal(evo.examenFisico?.Abdominal || '');
setGenitourinario(evo.examenFisico?.Genitourinario || '');
setPielAnexos(evo.examenFisico?.PielAnexos || '');
setSoma(evo.examenFisico?.SOMA || '');
setNovedades(evo.novedades || '');
setComentario(evo.comentario || '');
setPendientes(evo.pendientes || '');
setDialogoAbierto(true);
};
const handleGuardar = () => {
const internacion = getInternacionActivaByPaciente(pacienteSeleccionado);
if (!internacion || !medico) return;
const signosVitales: SignosVitales | undefined =
temperatura || presionSistolica || frecuenciaCardiaca
? {
temperatura: temperatura ? parseFloat(temperatura) : undefined,
presionSistolica: presionSistolica ? parseInt(presionSistolica) : undefined,
presionDiastolica: presionDiastolica ? parseInt(presionDiastolica) : undefined,
frecuenciaCardiaca: frecuenciaCardiaca ? parseInt(frecuenciaCardiaca) : undefined,
frecuenciaRespiratoria: frecuenciaRespiratoria ? parseInt(frecuenciaRespiratoria) : undefined,
saturacionO2: saturacionO2 ? parseInt(saturacionO2) : undefined,
}
: undefined;
const examenFisico: ExamenFisico | undefined =
snc || cardiovascular || respiratorio || abdominal || genitourinario || pielAnexos || soma
? {
SNC: snc || undefined,
Cardiovascular: cardiovascular || undefined,
Respiratorio: respiratorio || undefined,
Abdominal: abdominal || undefined,
Genitourinario: genitourinario || undefined,
PielAnexos: pielAnexos || undefined,
SOMA: soma || undefined,
}
: undefined;
const evolucionData = {
fecha,
hora,
medico,
signosVitales,
examenFisico,
novedades: novedades || undefined,
comentario: comentario || undefined,
pendientes: pendientes || undefined,
};
if (evolucionEditando && onActualizarEvolucion) {
onActualizarEvolucion(evolucionEditando.id, evolucionData);
} else {
onAgregarEvolucion({ ...evolucionData, internacionId: internacion.id });
}
resetFormulario();
setDialogoAbierto(false);
};
const pacientesInternados = pacientes.filter(p => {
const internacion = getInternacionActivaByPaciente(p.id);
return internacion !== undefined;
});
const evolucionesFiltradas = evoluciones
.filter(e => {
const internacion = internaciones.find(i => i.id === e.internacionId);
if (!internacion) return false;
const paciente = getPacienteById(internacion.pacienteId);
if (!paciente) return false;
return !busqueda ||
paciente.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
paciente.apellido.toLowerCase().includes(busqueda.toLowerCase()) ||
paciente.dni.includes(busqueda);
})
.sort((a, b) => new Date(b.fecha + 'T' + b.hora).getTime() - new Date(a.fecha + 'T' + a.hora).getTime());
const getSignosVitalesTexto = (sv: SignosVitales | undefined) => {
if (!sv) return null;
const partes: string[] = [];
if (sv.presionSistolica && sv.presionDiastolica) partes.push(`PA: ${sv.presionSistolica}/${sv.presionDiastolica}`);
if (sv.frecuenciaCardiaca) partes.push(`FC: ${sv.frecuenciaCardiaca}`);
if (sv.frecuenciaRespiratoria) partes.push(`FR: ${sv.frecuenciaRespiratoria}`);
if (sv.temperatura) partes.push(`T: ${sv.temperatura}°C`);
if (sv.saturacionO2) partes.push(`SatO2: ${sv.saturacionO2}%`);
return partes.join(' | ');
};
return (
<div className="space-y-6">
<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">Evoluciones Diarias</h1>
<p className="text-gray-500">Registro de evoluciones y signos vitales</p>
</div>
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
<DialogTrigger asChild>
<Button onClick={resetFormulario}>
<Plus className="h-4 w-4 mr-2" />
Nueva Evolución
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>
{evolucionEditando ? 'Editar Evolución' : 'Nueva Evolución'}
</DialogTitle>
</DialogHeader>
<div className="space-y-4">
{!evolucionEditando && (
<div>
<Label>Paciente *</Label>
<Select value={pacienteSeleccionado} onValueChange={setPacienteSeleccionado}>
<SelectTrigger>
<SelectValue placeholder="Seleccionar paciente internado" />
</SelectTrigger>
<SelectContent>
{pacientesInternados.map(p => (
<SelectItem key={p.id} value={p.id}>
{p.apellido}, {p.nombre} - DNI: {p.dni}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div>
<Label>Fecha *</Label>
<Input type="date" value={fecha} onChange={(e) => setFecha(e.target.value)} />
</div>
<div>
<Label>Hora *</Label>
<Input type="time" value={hora} onChange={(e) => setHora(e.target.value)} />
</div>
</div>
<div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
<p className="text-sm font-bold text-blue-800 mb-3 flex items-center gap-2">
<Activity className="h-4 w-4" />
Signos Vitales
</p>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div>
<Label className="flex items-center gap-1">
<Heart className="h-4 w-4" />TAS
</Label>
<Input
type="number"
value={presionSistolica}
onChange={(e) => setPresionSistolica(e.target.value)}
placeholder="120"
/>
</div>
<div>
<Label className="flex items-center gap-1">
<Heart className="h-4 w-4" />TAD
</Label>
<Input
type="number"
value={presionDiastolica}
onChange={(e) => setPresionDiastolica(e.target.value)}
placeholder="80"
/>
</div>
<div>
<Label className="flex items-center gap-1">
<Activity className="h-4 w-4" />FC
</Label>
<Input
type="number"
value={frecuenciaCardiaca}
onChange={(e) => setFrecuenciaCardiaca(e.target.value)}
placeholder="72"
/>
</div>
<div>
<Label className="flex items-center gap-1">
<Wind className="h-4 w-4" />FR
</Label>
<Input
type="number"
value={frecuenciaRespiratoria}
onChange={(e) => setFrecuenciaRespiratoria(e.target.value)}
placeholder="16"
/>
</div>
<div>
<Label className="flex items-center gap-1">
<Thermometer className="h-4 w-4" />T°
</Label>
<Input
type="number"
step="0.1"
value={temperatura}
onChange={(e) => setTemperatura(e.target.value)}
placeholder="36.5"
/>
</div>
<div>
<Label className="flex items-center gap-1">
<Droplets className="h-4 w-4" />SatO2
</Label>
<Input
type="number"
value={saturacionO2}
onChange={(e) => setSaturacionO2(e.target.value)}
placeholder="98"
/>
</div>
</div>
</div>
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<p className="text-sm font-bold text-green-800 mb-3 flex items-center gap-2">
<FileText className="h-4 w-4" />
Examen Físico
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<Label>SNC</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={snc} onChange={(e) => setSnc(e.target.value)} placeholder="Estado neurológico" />
</div>
<div>
<Label>Cardiovascular</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={cardiovascular} onChange={(e) => setCardiovascular(e.target.value)} placeholder="Hallazgos cardiovasculares" />
</div>
<div>
<Label>Respiratorio</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={respiratorio} onChange={(e) => setRespiratorio(e.target.value)} placeholder="Hallazgos respiratorios" />
</div>
<div>
<Label>Abdominal</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={abdominal} onChange={(e) => setAbdominal(e.target.value)} placeholder="Hallazgos abdominales" />
</div>
<div>
<Label>Genitourinario</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={genitourinario} onChange={(e) => setGenitourinario(e.target.value)} placeholder="Hallazgos genitourinarios" />
</div>
<div>
<Label>Piel y anexos</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={pielAnexos} onChange={(e) => setPielAnexos(e.target.value)} placeholder="Estado de piel y anexos" />
</div>
<div>
<Label>SOMA</Label>
<Input value={soma} onChange={(e) => setSoma(e.target.value)} placeholder="Estado SOMA" />
</div>
</div>
</div>
<div>
<Label>Novedades</Label>
<textarea
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
value={novedades}
onChange={(e) => setNovedades(e.target.value)}
placeholder="Novedades..."
/>
</div>
<div>
<Label>Comentario</Label>
<textarea
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
value={comentario}
onChange={(e) => setComentario(e.target.value)}
placeholder="Comentarios adicionales..."
/>
</div>
<div>
<Label>Pendientes</Label>
<textarea
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
value={pendientes}
onChange={(e) => setPendientes(e.target.value)}
placeholder="Pendientes..."
/>
</div>
<div>
<Label>Médico *</Label>
<Input
value={medico}
onChange={(e) => setMedico(e.target.value)}
placeholder="Nombre del médico"
/>
</div>
</div>
<div className="flex justify-end gap-2 mt-4">
<Button variant="outline" onClick={() => { resetFormulario(); setDialogoAbierto(false); }}>
Cancelar
</Button>
<Button
onClick={handleGuardar}
disabled={!medico || (!evolucionEditando && !pacienteSeleccionado)}
>
<Plus className="h-4 w-4 mr-2" />
Guardar Evolución
</Button>
</div>
</DialogContent>
</Dialog>
</div>
<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 paciente..."
value={busqueda}
onChange={(e) => setBusqueda(e.target.value)}
/>
</div>
</CardContent>
</Card>
<div className="space-y-4">
{evolucionesFiltradas.map((evolucion) => {
const internacion = internaciones.find(i => i.id === evolucion.internacionId);
const paciente = internacion ? getPacienteById(internacion.pacienteId) : null;
const signosTexto = getSignosVitalesTexto(evolucion.signosVitales);
const estaExpandida = evolucionExpandida === evolucion.id;
return (
<Card key={evolucion.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4">
<div className="flex flex-col gap-3">
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
<FileText className="h-5 w-5 text-blue-600" />
</div>
<div>
<h3 className="font-bold">
{paciente ? `${paciente.apellido}, ${paciente.nombre}` : 'Paciente no encontrado'}
</h3>
<div className="flex items-center gap-3 text-sm text-gray-500">
<span className="flex items-center gap-1">
<Calendar className="h-3 w-3" />
{evolucion.fecha}
</span>
<span className="flex items-center gap-1">
<Clock className="h-3 w-3" />
{evolucion.hora}
</span>
<Badge variant="outline">{evolucion.medico}</Badge>
</div>
</div>
</div>
<div className="flex items-center gap-2">
<Button
size="sm"
variant="outline"
onClick={() => setEvolucionExpandida(estaExpandida ? null : evolucion.id)}
>
{estaExpandida ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</Button>
{onActualizarEvolucion && (
<Button size="sm" variant="outline" onClick={() => abrirEditar(evolucion)}>
<Pencil className="h-4 w-4" />
</Button>
)}
<Button
variant="ghost"
size="sm"
className="text-red-600 hover:bg-red-50"
onClick={() => onEliminarEvolucion(evolucion.id)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
{signosTexto && (
<div className="bg-blue-50 p-2 rounded-lg">
<p className="text-sm font-medium text-blue-800 flex items-center gap-2">
<Activity className="h-4 w-4" />
Signos Vitales: {signosTexto}
</p>
</div>
)}
{estaExpandida && (
<>
{evolucion.examenFisico && (
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
{evolucion.examenFisico.SNC && <div><span className="font-medium">SNC:</span> {evolucion.examenFisico.SNC}</div>}
{evolucion.examenFisico.Cardiovascular && <div><span className="font-medium">CV:</span> {evolucion.examenFisico.Cardiovascular}</div>}
{evolucion.examenFisico.Respiratorio && <div><span className="font-medium">Resp:</span> {evolucion.examenFisico.Respiratorio}</div>}
{evolucion.examenFisico.Abdominal && <div><span className="font-medium">Abd:</span> {evolucion.examenFisico.Abdominal}</div>}
{evolucion.examenFisico.Genitourinario && <div><span className="font-medium">GU:</span> {evolucion.examenFisico.Genitourinario}</div>}
{evolucion.examenFisico.PielAnexos && <div><span className="font-medium">Piel:</span> {evolucion.examenFisico.PielAnexos}</div>}
{evolucion.examenFisico.SOMA && <div><span className="font-medium">SOMA:</span> {evolucion.examenFisico.SOMA}</div>}
</div>
</div>
)}
{evolucion.novedades && (
<div className="bg-red-50 p-3 rounded-lg border border-red-200 mt-3">
<p className="text-sm font-medium text-red-800 mb-1">Novedades:</p>
<p className="text-sm text-gray-800 whitespace-pre-wrap">{evolucion.novedades}</p>
</div>
)}
{evolucion.comentario && (
<div>
<p className="text-sm font-medium text-gray-700">Comentario:</p>
<p className="text-sm text-gray-600 whitespace-pre-wrap">{evolucion.comentario}</p>
</div>
)}
{evolucion.pendientes && (
<div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
<p className="text-sm font-medium text-amber-800 mb-1">Pendientes:</p>
<p className="text-sm text-amber-700 whitespace-pre-wrap">{evolucion.pendientes}</p>
</div>
)}
</>
)}
</div>
</CardContent>
</Card>
);
})}
</div>
{evolucionesFiltradas.length === 0 && (
<div className="text-center py-12 text-gray-400">
<FileText className="h-16 w-16 mx-auto mb-4 opacity-50" />
<p className="text-lg">
{busqueda ? 'No se encontraron evoluciones con esa búsqueda' : 'No hay evoluciones registradas'}
</p>
</div>
)}
</div>
);
}