Fix: corregir permisos en Cultivos y limpiar código
- Agregar canEdit prop a Cultivos.tsx para controlar botones - Reescribir Cultivos.tsx eliminando código duplicado - Corregir App.tsx para que cultivos case funcione correctamente - Hacer patient prop opcional en Cultivos.tsx
This commit is contained in:
Binary file not shown.
+16
-8
@@ -113,21 +113,29 @@ function AppContent() {
|
||||
getPacienteById={store.getPacienteById}
|
||||
/>
|
||||
);
|
||||
case 'cultivos':
|
||||
case 'cultivos': {
|
||||
const internacion = store.getInternacionById(store.currentInternacionId || '');
|
||||
const paciente = internacion ? store.getPacienteById(internacion.pacienteId) : undefined;
|
||||
if (!internacion || !paciente) {
|
||||
return (
|
||||
<div className="p-4 text-center">
|
||||
<p className="text-gray-500 dark:text-gray-400">Internación no encontrada</p>
|
||||
<Button onClick={() => store.setVista('internaciones')}>Volver a Internaciones</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Cultivos
|
||||
cultivos={store.cultivos}
|
||||
pacientes={store.pacientes}
|
||||
internaciones={store.internaciones}
|
||||
camas={store.camas}
|
||||
cultivos={store.cultivos.filter(c => c.pacienteId === paciente.id)}
|
||||
patient={paciente}
|
||||
internacionId={internacion.id}
|
||||
onAgregarCultivo={store.agregarCultivo}
|
||||
onActualizarCultivo={store.actualizarCultivo}
|
||||
onEliminarCultivo={store.eliminarCultivo}
|
||||
getPacienteById={store.getPacienteById}
|
||||
getCamaById={store.getCamaById}
|
||||
getInternacionActivaByPaciente={store.getInternacionActivaByPaciente}
|
||||
canEdit={store.canEditInternacion(internacion.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'historiaclinica': {
|
||||
const internacion = store.getInternacionById(store.currentInternacionId || '');
|
||||
const paciente = internacion ? store.getPacienteById(internacion.pacienteId) : undefined;
|
||||
|
||||
+328
-470
@@ -11,28 +11,22 @@ import type { Cultivo, Paciente, Cama, Internacion } from '@/types';
|
||||
|
||||
interface CultivosProps {
|
||||
cultivos: Cultivo[];
|
||||
pacientes: Paciente[];
|
||||
internaciones: Internacion[];
|
||||
camas: Cama[];
|
||||
patient?: Paciente;
|
||||
internacionId: string;
|
||||
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;
|
||||
canEdit: boolean;
|
||||
}
|
||||
|
||||
export function Cultivos({
|
||||
cultivos,
|
||||
pacientes,
|
||||
internaciones,
|
||||
camas,
|
||||
patient,
|
||||
internacionId,
|
||||
onAgregarCultivo,
|
||||
onActualizarCultivo,
|
||||
onEliminarCultivo,
|
||||
getPacienteById,
|
||||
getCamaById,
|
||||
getInternacionActivaByPaciente,
|
||||
canEdit,
|
||||
}: CultivosProps) {
|
||||
const [busqueda, setBusqueda] = useState('');
|
||||
const [filtroEstado, setFiltroEstado] = useState<'todos' | 'NAF/Pendiente' | 'Parcial' | 'Positivo' | 'Negativo'>('todos');
|
||||
@@ -40,91 +34,62 @@ export function Cultivos({
|
||||
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('');
|
||||
const cultivosFiltrados = cultivos.filter(c => {
|
||||
if (filtroEstado !== 'todos' && c.estado !== filtroEstado) return false;
|
||||
if (busqueda) {
|
||||
const term = busqueda.toLowerCase();
|
||||
return (
|
||||
c.protocolo?.toLowerCase().includes(term) ||
|
||||
c.germen?.toLowerCase().includes(term) ||
|
||||
c.tipoMuestra.toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const getEstadoColor = (estado: string) => {
|
||||
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';
|
||||
default: return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getEstadoLabel = (estado: string) => {
|
||||
switch (estado) {
|
||||
case 'NAF/Pendiente': return 'NAF';
|
||||
case 'Parcial': return 'Parcial';
|
||||
case 'Positivo': return 'Positivo';
|
||||
case 'Negativo': return 'Negativo';
|
||||
default: return estado;
|
||||
}
|
||||
};
|
||||
|
||||
const abrirNuevo = () => {
|
||||
setCultivoSeleccionado(null);
|
||||
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',
|
||||
protocolo: protocolo || undefined,
|
||||
germen: germen || undefined,
|
||||
sensible: sensible || undefined,
|
||||
resistente: resistente || undefined,
|
||||
});
|
||||
resetFormularioResultado();
|
||||
setDialogoParcialAbierto(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDefinitivo = () => {
|
||||
if (cultivoSeleccionado && onActualizarCultivo) {
|
||||
onActualizarCultivo(cultivoSeleccionado.id, {
|
||||
fechaResultado,
|
||||
protocolo: protocolo || undefined,
|
||||
estado: estadoResultado,
|
||||
germen: germen || undefined,
|
||||
sensible: sensible || undefined,
|
||||
resistente: resistente || undefined,
|
||||
});
|
||||
resetFormularioResultado();
|
||||
setDialogoDefinitivoAbierto(false);
|
||||
}
|
||||
setDialogoNuevoAbierto(true);
|
||||
};
|
||||
|
||||
const abrirParcial = (cultivo: Cultivo) => {
|
||||
setCultivoSeleccionado(cultivo);
|
||||
setProtocolo(cultivo.protocolo || '');
|
||||
setGermen(cultivo.germen || '');
|
||||
setSensible(cultivo.sensible || '');
|
||||
setResistente(cultivo.resistente || '');
|
||||
@@ -133,446 +98,339 @@ export function Cultivos({
|
||||
|
||||
const abrirDefinitivo = (cultivo: Cultivo) => {
|
||||
setCultivoSeleccionado(cultivo);
|
||||
setProtocolo(cultivo.protocolo || '');
|
||||
setFechaResultado(cultivo.fechaResultado || new Date().toISOString().split('T')[0]);
|
||||
setEstadoResultado(cultivo.estado === 'Parcial' || cultivo.estado === 'Positivo' ? 'Positivo' : cultivo.estado);
|
||||
setFechaResultado(new Date().toISOString().split('T')[0]);
|
||||
setEstadoResultado(cultivo.estado === 'Parcial' ? '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 guardarNuevo = () => {
|
||||
if (!protocolo.trim()) return;
|
||||
onAgregarCultivo({
|
||||
pacienteId: patient.id,
|
||||
internacionId,
|
||||
fechaToma,
|
||||
protocolo,
|
||||
tipoMuestra,
|
||||
observaciones: observaciones || undefined,
|
||||
estado: 'NAF/Pendiente',
|
||||
});
|
||||
setDialogoNuevoAbierto(false);
|
||||
};
|
||||
|
||||
const guardarParcial = () => {
|
||||
if (!cultivoSeleccionado || !germen.trim()) return;
|
||||
if (onActualizarCultivo) {
|
||||
onActualizarCultivo(cultivoSeleccionado.id, {
|
||||
estado: 'Parcial',
|
||||
germen,
|
||||
sensible: sensible || undefined,
|
||||
resistente: resistente || undefined,
|
||||
});
|
||||
}
|
||||
setDialogoParcialAbierto(false);
|
||||
};
|
||||
|
||||
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 guardarDefinitivo = () => {
|
||||
if (!cultivoSeleccionado) return;
|
||||
if (onActualizarCultivo) {
|
||||
onActualizarCultivo(cultivoSeleccionado.id, {
|
||||
estado: estadoResultado,
|
||||
fechaResultado,
|
||||
germen: cultivoSeleccionado.germen,
|
||||
sensible: cultivoSeleccionado.sensible,
|
||||
resistente: cultivoSeleccionado.resistente,
|
||||
});
|
||||
}
|
||||
setDialogoDefinitivoAbierto(false);
|
||||
};
|
||||
|
||||
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 getNumeroCama = (pacienteId: string) => {
|
||||
return '';
|
||||
};
|
||||
|
||||
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 dark:text-white">
|
||||
<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">Cultivos</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">Gestión de cultivos microbiológicos y antibiogramas</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
||||
<div className="flex-1 flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
|
||||
<Input
|
||||
placeholder="Buscar por protocolo, germen..."
|
||||
value={busqueda}
|
||||
onChange={(e) => setBusqueda(e.target.value)}
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
<Select value={filtroEstado} onValueChange={(v) => setFiltroEstado(v as any)}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todos">Todos</SelectItem>
|
||||
<SelectItem value="NAF/Pendiente">NAF/Pendiente</SelectItem>
|
||||
<SelectItem value="Parcial">Parcial</SelectItem>
|
||||
<SelectItem value="Positivo">Positivo</SelectItem>
|
||||
<SelectItem value="Negativo">Negativo</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" onClick={resetFormularioNuevo} className="w-full sm:w-auto">
|
||||
<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>
|
||||
))
|
||||
)}
|
||||
{canEdit && (
|
||||
<Button onClick={abrirNuevo} size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nuevo Cultivo
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{cultivosFiltrados.map((cultivo) => (
|
||||
<Card key={cultivo.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`h-10 w-10 rounded-full flex items-center justify-center shrink-0 ${
|
||||
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>
|
||||
) : (
|
||||
<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="outline" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 sm: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 className="min-w-0">
|
||||
<h3 className="font-bold text-sm sm:text-base truncate">
|
||||
{patient ? `${patient.apellido}, ${patient.nombre}` : 'Paciente no encontrado'}
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{cultivo.fechaToma}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs">{cultivo.tipoMuestra}</Badge>
|
||||
<Badge className={`text-xs ${getEstadoColor(cultivo.estado)}`}>
|
||||
{getEstadoLabel(cultivo.estado)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-1 sm:gap-2 ml-auto sm:ml-0">
|
||||
{canEdit && onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && (
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
|
||||
<CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
|
||||
<span className="hidden sm:inline">Definitivo</span>
|
||||
</Button>
|
||||
)}
|
||||
{canEdit && onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
|
||||
<Pencil className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{canEdit && onActualizarCultivo && cultivo.estado === 'Parcial' && (
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
|
||||
<Pencil className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
|
||||
<span className="hidden sm:inline">Editar</span>
|
||||
</Button>
|
||||
)}
|
||||
{canEdit && (
|
||||
<Button size="sm" variant="outline" className="text-red-600 text-xs px-2 py-1" onClick={() => onEliminarCultivo(cultivo.id)}>
|
||||
<Trash2 className="h-3 w-3 sm:h-4 sm: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" />
|
||||
Cultivo Negativo
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label>Tipo de Muestra *</Label>
|
||||
<Select value={tipoMuestra} onValueChange={(v: Cultivo['tipoMuestra']) => setTipoMuestra(v)}>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{cultivosFiltrados.length === 0 && (
|
||||
<p className="text-center text-gray-500 py-8">
|
||||
No se encontraron cultivos con los filtros seleccionados
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dialog Nuevo Cultivo */}
|
||||
<Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Nuevo Cultivo</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Fecha de Toma</Label>
|
||||
<Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Tipo de Muestra</Label>
|
||||
<Select value={tipoMuestra} onValueChange={(v) => setTipoMuestra(v as any)}>
|
||||
<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="HMCx1">HMCx1</SelectItem>
|
||||
<SelectItem value="Plaq.File">Plaq. File</SelectItem>
|
||||
<SelectItem value="Orina">Orina</SelectItem>
|
||||
<SelectItem value="Cateter">Cateter</SelectItem>
|
||||
<SelectItem value="Esputo">Esputo</SelectItem>
|
||||
<SelectItem value="LCR">LCR</SelectItem>
|
||||
<SelectItem value="LP">LP</SelectItem>
|
||||
<SelectItem value="LAsc">LAsc</SelectItem>
|
||||
<SelectItem value="LAbd">LAbd</SelectItem>
|
||||
<SelectItem value="Hueso Rem">Hueso Rem</SelectItem>
|
||||
<SelectItem value="Coleccion">Coleccion</SelectItem>
|
||||
<SelectItem value="Sangre">Sangre</SelectItem>
|
||||
<SelectItem value="Tejido">Tejido</SelectItem>
|
||||
<SelectItem value="Otro">Otro</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)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
|
||||
<Button variant="outline" 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 resultado parcial. Esto puede modificarse posteriormente.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="space-y-2">
|
||||
<Label>Protocolo</Label>
|
||||
<Input value={protocolo} onChange={(e) => setProtocolo(e.target.value)} placeholder="N° Protocolo" />
|
||||
<Input value={protocolo} onChange={(e) => setProtocolo(e.target.value)} placeholder="Ej: P-2024-001" />
|
||||
</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 className="space-y-2">
|
||||
<Label>Observaciones</Label>
|
||||
<Input value={observaciones} onChange={(e) => setObservaciones(e.target.value)} />
|
||||
</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 variant="outline" onClick={handleParcial} disabled={!germen}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Guardar Parcial
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}>Cancelar</Button>
|
||||
<Button onClick={guardarNuevo}>Guardar</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={dialogoDefinitivoAbierto} onOpenChange={setDialogoDefinitivoAbierto}>
|
||||
<DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto">
|
||||
{/* Dialog Parcial */}
|
||||
<Dialog open={dialogoParcialAbierto} onOpenChange={setDialogoParcialAbierto}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cargar Resultado Definitivo</DialogTitle>
|
||||
<DialogTitle>Resultado Parcial</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm: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 className="sm:col-span-2">
|
||||
<Label>Protocolo</Label>
|
||||
<Input value={protocolo} onChange={(e) => setProtocolo(e.target.value)} placeholder="N° Protocolo" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Germen</Label>
|
||||
<Input value={germen} onChange={(e) => setGermen(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Sensible a</Label>
|
||||
<Input value={sensible} onChange={(e) => setSensible(e.target.value)} placeholder="Ej: Ampicilina" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Resistente a</Label>
|
||||
<Input value={resistente} onChange={(e) => setResistente(e.target.value)} placeholder="Ej: Cefalosporinas" />
|
||||
</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 variant="outline" onClick={handleDefinitivo} disabled={estadoResultado === 'Positivo' && !germen}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Guardar Definitivo
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setDialogoParcialAbierto(false)}>Cancelar</Button>
|
||||
<Button onClick={guardarParcial}>Guardar</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)}
|
||||
/>
|
||||
{/* Dialog Definitivo */}
|
||||
<Dialog open={dialogoDefinitivoAbierto} onOpenChange={setDialogoDefinitivoAbierto}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Resultado Definitivo</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Fecha de Resultado</Label>
|
||||
<Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Estado</Label>
|
||||
<Select value={estadoResultado} onValueChange={(v) => setEstadoResultado(v as any)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Positivo">Positivo</SelectItem>
|
||||
<SelectItem value="Negativo">Negativo</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setDialogoDefinitivoAbierto(false)}>Cancelar</Button>
|
||||
<Button onClick={guardarDefinitivo}>Guardar</Button>
|
||||
</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 w-full">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`h-10 w-10 rounded-full flex items-center justify-center shrink-0 ${
|
||||
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 className="min-w-0">
|
||||
<h3 className="font-bold text-sm sm:text-base truncate">
|
||||
{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 flex-wrap items-center gap-2 text-xs sm:text-sm text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{cultivo.fechaToma}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs">{cultivo.tipoMuestra}</Badge>
|
||||
<Badge className={`text-xs ${getEstadoColor(cultivo.estado)}`}>
|
||||
{getEstadoLabel(cultivo.estado)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-1 sm:gap-2 ml-auto sm:ml-0">
|
||||
{onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && (
|
||||
<>
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
|
||||
<AlertCircle className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
|
||||
<span className="hidden sm:inline">Parcial</span>
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
|
||||
<CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
|
||||
<span className="hidden sm:inline">Definitivo</span>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{onActualizarCultivo && cultivo.estado === 'Parcial' && (
|
||||
<>
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
|
||||
<Pencil className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
|
||||
<span className="hidden sm:inline">Editar</span>
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
|
||||
<CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
|
||||
<span className="hidden sm:inline">Definitivo</span>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
|
||||
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
|
||||
<Pencil className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="outline" className="text-red-600 text-xs px-2 py-1" onClick={() => onEliminarCultivo(cultivo.id)}>
|
||||
<Trash2 className="h-3 w-3 sm:h-4 sm: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>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user