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
+565
View File
@@ -0,0 +1,565 @@
import { useState } from 'react';
import { Microscope, Plus, Search, Calendar, AlertCircle, Trash2, CheckCircle2, Save, X, Pencil } 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 { Cultivo, Paciente, Cama, Internacion } from '@/types';
interface CultivosProps {
cultivos: Cultivo[];
pacientes: Paciente[];
internaciones: Internacion[];
camas: Cama[];
onAgregarCultivo: (cultivo: Omit<Cultivo, 'id'>) => void;
onActualizarCultivo?: (id: string, datos: Partial<Cultivo>) => void;
onEliminarCultivo: (id: string) => void;
getPacienteById: (id: string) => Paciente | undefined;
getCamaById: (id: string) => Cama | undefined;
getInternacionActivaByPaciente: (pacienteId: string) => Internacion | undefined;
}
export function Cultivos({
cultivos,
pacientes,
internaciones,
camas,
onAgregarCultivo,
onActualizarCultivo,
onEliminarCultivo,
getPacienteById,
getCamaById,
getInternacionActivaByPaciente,
}: CultivosProps) {
const [busqueda, setBusqueda] = useState('');
const [filtroEstado, setFiltroEstado] = useState<'todos' | 'NAF/Pendiente' | 'Parcial' | 'Positivo' | 'Negativo'>('todos');
const [dialogoNuevoAbierto, setDialogoNuevoAbierto] = useState(false);
const [dialogoParcialAbierto, setDialogoParcialAbierto] = useState(false);
const [dialogoDefinitivoAbierto, setDialogoDefinitivoAbierto] = useState(false);
const [cultivoSeleccionado, setCultivoSeleccionado] = useState<Cultivo | null>(null);
const [pacienteSeleccionado, setPacienteSeleccionado] = useState('');
const [busquedaPaciente, setBusquedaPaciente] = useState('');
const [fechaToma, setFechaToma] = useState(new Date().toISOString().split('T')[0]);
const [protocolo, setProtocolo] = useState('');
const [tipoMuestra, setTipoMuestra] = useState<Cultivo['tipoMuestra']>('HMCx2');
const [observaciones, setObservaciones] = useState('');
const [fechaResultado, setFechaResultado] = useState(new Date().toISOString().split('T')[0]);
const [estadoResultado, setEstadoResultado] = useState<Cultivo['estado']>('Positivo');
const [germen, setGermen] = useState('');
const [sensible, setSensible] = useState('');
const [resistente, setResistente] = useState('');
const resetFormularioNuevo = () => {
setPacienteSeleccionado('');
setBusquedaPaciente('');
setFechaToma(new Date().toISOString().split('T')[0]);
setProtocolo('');
setTipoMuestra('HMCx2');
setObservaciones('');
};
const pacientesFiltrados = pacientes.filter(p => {
if (!busquedaPaciente) return true;
const texto = `${p.apellido} ${p.nombre} ${p.dni}`.toLowerCase();
return texto.includes(busquedaPaciente.toLowerCase());
});
const resetFormularioResultado = () => {
setFechaResultado(new Date().toISOString().split('T')[0]);
setEstadoResultado('Positivo');
setGermen('');
setSensible('');
setResistente('');
setCultivoSeleccionado(null);
};
const handleAgregar = () => {
if (pacienteSeleccionado && fechaToma && tipoMuestra) {
onAgregarCultivo({
pacienteId: pacienteSeleccionado,
fechaToma,
protocolo: protocolo || undefined,
tipoMuestra,
observaciones: observaciones || undefined,
estado: 'NAF/Pendiente',
});
resetFormularioNuevo();
setDialogoNuevoAbierto(false);
}
};
const handleParcial = () => {
if (cultivoSeleccionado && onActualizarCultivo && germen) {
onActualizarCultivo(cultivoSeleccionado.id, {
estado: 'Parcial',
germen: germen || undefined,
sensible: sensible || undefined,
resistente: resistente || undefined,
});
resetFormularioResultado();
setDialogoParcialAbierto(false);
}
};
const handleDefinitivo = () => {
if (cultivoSeleccionado && onActualizarCultivo) {
onActualizarCultivo(cultivoSeleccionado.id, {
fechaResultado,
estado: estadoResultado,
germen: germen || undefined,
sensible: sensible || undefined,
resistente: resistente || undefined,
});
resetFormularioResultado();
setDialogoDefinitivoAbierto(false);
}
};
const abrirParcial = (cultivo: Cultivo) => {
setCultivoSeleccionado(cultivo);
setGermen(cultivo.germen || '');
setSensible(cultivo.sensible || '');
setResistente(cultivo.resistente || '');
setDialogoParcialAbierto(true);
};
const abrirDefinitivo = (cultivo: Cultivo) => {
setCultivoSeleccionado(cultivo);
setFechaResultado(cultivo.fechaResultado || new Date().toISOString().split('T')[0]);
setEstadoResultado(cultivo.estado === 'Parcial' || cultivo.estado === 'Positivo' ? 'Positivo' : cultivo.estado);
setGermen(cultivo.germen || '');
setSensible(cultivo.sensible || '');
setResistente(cultivo.resistente || '');
setDialogoDefinitivoAbierto(true);
};
const getEstadoColor = (estado: Cultivo['estado']) => {
switch (estado) {
case 'NAF/Pendiente': return 'bg-amber-100 text-amber-800';
case 'Parcial': return 'bg-orange-100 text-orange-800';
case 'Positivo': return 'bg-red-100 text-red-800';
case 'Negativo': return 'bg-green-100 text-green-800';
}
};
const getEstadoLabel = (estado: Cultivo['estado']) => {
switch (estado) {
case 'NAF/Pendiente': return 'NAF/Pendiente';
case 'Parcial': return 'Parcial';
case 'Positivo': return 'Positivo';
case 'Negativo': return 'Negativo Final';
}
};
const getNumeroCama = (pacienteId: string): string | null => {
const internacion = getInternacionActivaByPaciente(pacienteId);
if (!internacion) return null;
const cama = getCamaById(internacion.camaId);
return cama ? cama.numero : null;
};
const cultivosFiltrados = cultivos.filter(c => {
const paciente = getPacienteById(c.pacienteId);
const textoBusqueda = paciente ? `${paciente.apellido} ${paciente.nombre} ${paciente.dni}`.toLowerCase() : '';
const coincideBusqueda = !busqueda || textoBusqueda.includes(busqueda.toLowerCase());
const coincideEstado = filtroEstado === 'todos' || c.estado === filtroEstado;
return coincideBusqueda && coincideEstado;
}).sort((a, b) => new Date(b.fechaToma).getTime() - new Date(a.fechaToma).getTime());
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">Cultivos</h1>
<p className="text-gray-500">Gestión de cultivos microbiológicos y antibiogramas</p>
</div>
<Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
<DialogTrigger asChild>
<Button onClick={resetFormularioNuevo}>
<Plus className="h-4 w-4 mr-2" />
Nuevo Cultivo
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Nuevo Cultivo</DialogTitle>
</DialogHeader>
<div className="space-y-4">
{!pacienteSeleccionado ? (
<div>
<Label>Buscar Paciente *</Label>
<Input
value={busquedaPaciente}
onChange={(e) => setBusquedaPaciente(e.target.value)}
placeholder="Ingrese apellido, nombre o DNI..."
autoFocus
/>
{busquedaPaciente && (
<div className="mt-2 border rounded-md max-h-48 overflow-y-auto">
{pacientesFiltrados.length === 0 ? (
<p className="p-3 text-sm text-gray-500">No se encontraron pacientes</p>
) : (
pacientesFiltrados.map(p => (
<button
key={p.id}
type="button"
onClick={() => setPacienteSeleccionado(p.id)}
className="w-full text-left p-3 hover:bg-gray-50 border-b last:border-b-0"
>
{p.apellido}, {p.nombre} - DNI: {p.dni}
</button>
))
)}
</div>
)}
</div>
) : (
<div className="flex items-center gap-2">
<Badge className="bg-gray-100 text-gray-800 px-3 py-1">
{(() => {
const p = pacientes.find(x => x.id === pacienteSeleccionado);
return p ? `${p.apellido}, ${p.nombre} - DNI: ${p.dni}` : '';
})()}
</Badge>
<Button size="sm" variant="ghost" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button>
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div>
<Label>Fecha de Toma *</Label>
<Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} />
</div>
<div>
<Label>Protocolo</Label>
<Input value={protocolo} onChange={(e) => setProtocolo(e.target.value)} placeholder="N° Protocolo" />
</div>
</div>
<div>
<Label>Tipo de Muestra *</Label>
<Select value={tipoMuestra} onValueChange={(v: Cultivo['tipoMuestra']) => setTipoMuestra(v)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="HMCx2">HMCx2</SelectItem>
<SelectItem value="RC">RC</SelectItem>
<SelectItem value="PC">PC</SelectItem>
<SelectItem value="UC">UC</SelectItem>
<SelectItem value="LCR">LCR</SelectItem>
<SelectItem value="LP">LP</SelectItem>
<SelectItem value="LAsc">LAsc</SelectItem>
<SelectItem value="LAbd">LAbd</SelectItem>
<SelectItem value="Coleccion">Coleccion</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label>Observaciones</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={observaciones} onChange={(e) => setObservaciones(e.target.value)} />
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}>Cancelar</Button>
<Button onClick={handleAgregar} disabled={!pacienteSeleccionado || !fechaToma || !tipoMuestra}>
<Plus className="h-4 w-4 mr-2" />
Guardar
</Button>
</div>
</div>
</DialogContent>
</Dialog>
</div>
<Dialog open={dialogoParcialAbierto} onOpenChange={setDialogoParcialAbierto}>
<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Cargar Resultado Parcial</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="bg-orange-50 border border-orange-200 p-3 rounded-lg">
<p className="text-sm font-medium text-orange-800">Resultado Parcial - Sujeto a modificación</p>
<p className="text-xs text-orange-600 mt-1">Ingrese el germen crecido para tomar conducta. Podrá editarse posteriormente.</p>
</div>
<div>
<Label>Germen *</Label>
<Input value={germen} onChange={(e) => setGermen(e.target.value)} placeholder="Ej: Staphylococcus aureus" />
</div>
<div>
<Label>Sensible a:</Label>
<Input value={sensible} onChange={(e) => setSensible(e.target.value)} placeholder="Ej: Amikacina, Vancomicina" />
</div>
<div>
<Label>Resistente a:</Label>
<Input value={resistente} onChange={(e) => setResistente(e.target.value)} placeholder="Ej: Oxacilina" />
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => { resetFormularioResultado(); setDialogoParcialAbierto(false); }}>
<X className="h-4 w-4 mr-2" />
Cancelar
</Button>
<Button onClick={handleParcial} disabled={!germen}>
<Save className="h-4 w-4 mr-2" />
Guardar Parcial
</Button>
</div>
</div>
</DialogContent>
</Dialog>
<Dialog open={dialogoDefinitivoAbierto} onOpenChange={setDialogoDefinitivoAbierto}>
<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Cargar Resultado Definitivo</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<Label>Fecha de Resultado *</Label>
<Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} />
</div>
<div>
<Label>Resultado *</Label>
<Select value={estadoResultado} onValueChange={(v: Cultivo['estado']) => setEstadoResultado(v)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="Positivo">Positivo</SelectItem>
<SelectItem value="Negativo">Negativo Final</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{estadoResultado === 'Positivo' && (
<>
<div>
<Label>Germen *</Label>
<Input value={germen} onChange={(e) => setGermen(e.target.value)} placeholder="Ej: Staphylococcus aureus" />
</div>
<div>
<Label>Sensible a:</Label>
<Input value={sensible} onChange={(e) => setSensible(e.target.value)} placeholder="Ej: Amikacina, Gentamicina" />
</div>
<div>
<Label>Resistente a:</Label>
<Input value={resistente} onChange={(e) => setResistente(e.target.value)} placeholder="Ej: Ampicilina, Cefazolina" />
</div>
</>
)}
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => { resetFormularioResultado(); setDialogoDefinitivoAbierto(false); }}>
<X className="h-4 w-4 mr-2" />
Cancelar
</Button>
<Button onClick={handleDefinitivo} disabled={estadoResultado === 'Positivo' && !germen}>
<Save className="h-4 w-4 mr-2" />
Guardar Definitivo
</Button>
</div>
</div>
</DialogContent>
</Dialog>
<Card>
<CardContent className="p-4">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div className="relative sm:col-span-2">
<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>
<Select value={filtroEstado} onValueChange={(v: typeof filtroEstado) => setFiltroEstado(v)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="todos">Todos los estados</SelectItem>
<SelectItem value="Pendiente">Pendiente</SelectItem>
<SelectItem value="Parcial">Parcial</SelectItem>
<SelectItem value="Positivo">Positivo</SelectItem>
<SelectItem value="Negativo">Negativo Final</SelectItem>
</SelectContent>
</Select>
</div>
</CardContent>
</Card>
<div className="gap-4 flex flex-col">
{cultivosFiltrados.map((cultivo) => {
const paciente = getPacienteById(cultivo.pacienteId);
return (
<Card key={cultivo.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 rounded-full flex items-center justify-center ${
cultivo.estado === 'NAF/Pendiente' ? 'bg-amber-100' :
cultivo.estado === 'Parcial' ? 'bg-orange-100' :
cultivo.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'
}`}>
<Microscope className={`h-5 w-5 ${
cultivo.estado === 'NAF/Pendiente' ? 'text-amber-600' :
cultivo.estado === 'Parcial' ? 'text-orange-600' :
cultivo.estado === 'Positivo' ? 'text-red-600' : 'text-green-600'
}`} />
</div>
<div>
<h3 className="font-bold">
{paciente ? (
<>
{(() => {
const numCama = getNumeroCama(paciente.id);
return numCama ? `Cama ${numCama} - ${paciente.apellido}, ${paciente.nombre}` : `${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" />
Toma: {cultivo.fechaToma}
</span>
<Badge variant="outline">{cultivo.tipoMuestra}</Badge>
<Badge className={getEstadoColor(cultivo.estado)}>
{getEstadoLabel(cultivo.estado)}
</Badge>
</div>
</div>
</div>
<div className="flex items-center gap-2">
{onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && (
<>
<Button size="sm" onClick={() => abrirParcial(cultivo)}>
<AlertCircle className="h-4 w-4 mr-1" />
Parcial
</Button>
<Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-4 w-4 mr-1" />
Definitivo
</Button>
</>
)}
{onActualizarCultivo && cultivo.estado === 'Parcial' && (
<>
<Button size="sm" variant="outline" onClick={() => abrirParcial(cultivo)}>
<Pencil className="h-4 w-4 mr-1" />
Editar Parcial
</Button>
<Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-4 w-4 mr-1" />
Definitivo
</Button>
</>
)}
{onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
<Button size="sm" variant="outline" onClick={() => abrirDefinitivo(cultivo)}>
<Pencil className="h-4 w-4" />
</Button>
)}
<Button size="sm" variant="ghost" className="text-red-600" onClick={() => onEliminarCultivo(cultivo.id)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
{cultivo.protocolo && (
<p className="text-xs text-gray-500">
Protocolo: {cultivo.protocolo}
</p>
)}
{cultivo.observaciones && (
<p className="text-sm text-gray-600 bg-gray-50 p-2 rounded">
{cultivo.observaciones}
</p>
)}
{cultivo.estado === 'Parcial' && cultivo.germen && (
<div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
<p className="text-sm font-medium text-orange-800 flex items-center gap-2">
<AlertCircle className="h-4 w-4" />
PARCIAL - Germen: {cultivo.germen}
</p>
{(cultivo.sensible || cultivo.resistente) && (
<div className="mt-2 space-y-1">
{cultivo.sensible && <p className="text-xs text-orange-700">Sensible: {cultivo.sensible}</p>}
{cultivo.resistente && <p className="text-xs text-orange-700">Resistente: {cultivo.resistente}</p>}
</div>
)}
</div>
)}
{cultivo.estado === 'Positivo' && cultivo.germen && (
<div className="bg-red-50 p-3 rounded-lg border border-red-200">
<p className="text-sm font-medium text-red-800 flex items-center gap-2">
<AlertCircle className="h-4 w-4" />
Germen: {cultivo.germen}
</p>
{cultivo.fechaResultado && (
<p className="text-xs text-red-600 mt-1">
Resultado: {cultivo.fechaResultado}
</p>
)}
{(cultivo.sensible || cultivo.resistente) && (
<div className="mt-2 space-y-2">
{cultivo.sensible && (
<div>
<p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p>
<p className="text-sm text-green-800">{cultivo.sensible}</p>
</div>
)}
{cultivo.resistente && (
<div>
<p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p>
<p className="text-sm text-red-800">{cultivo.resistente}</p>
</div>
)}
</div>
)}
</div>
)}
{cultivo.estado === 'Negativo' && (
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<p className="text-sm font-medium text-green-800 flex items-center gap-2">
<CheckCircle2 className="h-4 w-4" />
Sin crecimiento de microorganismos
</p>
{cultivo.fechaResultado && (
<p className="text-xs text-green-600 mt-1">
Resultado: {cultivo.fechaResultado}
</p>
)}
</div>
)}
</div>
</CardContent>
</Card>
);
})}
</div>
{cultivosFiltrados.length === 0 && (
<div className="text-center py-12 text-gray-400">
<Microscope className="h-16 w-16 mx-auto mb-4 opacity-50" />
<p className="text-lg">
{busqueda || filtroEstado !== 'todos'
? 'No se encontraron cultivos con esos filtros'
: 'No hay cultivos registrados'}
</p>
</div>
)}
</div>
);
}