253 lines
12 KiB
TypeScript
253 lines
12 KiB
TypeScript
import { useState } from 'react';
|
|
import { Microscope, Search, Calendar, AlertCircle, CheckCircle2 } from 'lucide-react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Input } from '@/components/ui/input';
|
|
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[];
|
|
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;
|
|
getInternacionActivaByPaciente?: (pacienteId: string) => Internacion | undefined;
|
|
canEdit?: boolean;
|
|
}
|
|
|
|
export function Cultivos({
|
|
cultivos,
|
|
pacientes = [],
|
|
internaciones = [],
|
|
camas = [],
|
|
patient,
|
|
getPacienteById,
|
|
}: CultivosProps) {
|
|
const [busqueda, setBusqueda] = useState('');
|
|
const [filtroEstado, setFiltroEstado] = useState<'todos' | 'NAF/Pendiente' | 'Parcial' | 'Positivo' | 'Negativo'>('todos');
|
|
|
|
const findPaciente = (pacienteId: string): Paciente | undefined => {
|
|
if (patient && patient.id === pacienteId) return patient;
|
|
if (getPacienteById) return getPacienteById(pacienteId);
|
|
return pacientes.find(p => p.id === pacienteId);
|
|
};
|
|
|
|
const getCamaNombreForPaciente = (pacienteId: string) => {
|
|
const inter = internaciones.find(i => i.pacienteId === pacienteId && i.activa);
|
|
if (!inter) return '';
|
|
const cama = camas.find(c => c.id === inter.camaId);
|
|
return cama ? `Cama ${cama.numero}` : '';
|
|
};
|
|
|
|
const cultivosFiltrados = cultivos.filter(c => {
|
|
if (filtroEstado !== 'todos' && c.estado !== filtroEstado) return false;
|
|
if (busqueda) {
|
|
const term = busqueda.toLowerCase();
|
|
const pac = findPaciente(c.pacienteId);
|
|
const nombrePac = pac ? `${pac.apellido} ${pac.nombre} ${pac.dni}`.toLowerCase() : '';
|
|
return (
|
|
c.protocolo?.toLowerCase().includes(term) ||
|
|
c.germen?.toLowerCase().includes(term) ||
|
|
c.tipoMuestra.toLowerCase().includes(term) ||
|
|
nombrePac.includes(term)
|
|
);
|
|
}
|
|
return true;
|
|
});
|
|
|
|
const getEstadoColor = (estado: string) => {
|
|
switch (estado) {
|
|
case 'NAF/Pendiente': return 'bg-amber-100 text-amber-800 dark:bg-amber-950/80 dark:text-amber-300 dark:border dark:border-amber-800';
|
|
case 'Parcial': return 'bg-orange-100 text-orange-800 dark:bg-orange-950/80 dark:text-orange-300 dark:border dark:border-orange-800';
|
|
case 'Positivo': return 'bg-red-100 text-red-800 dark:bg-red-950/80 dark:text-red-300 dark:border dark:border-red-800';
|
|
case 'Negativo': return 'bg-green-100 text-green-800 dark:bg-green-950/80 dark:text-green-300 dark:border dark:border-green-800';
|
|
default: return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
|
|
}
|
|
};
|
|
|
|
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;
|
|
}
|
|
};
|
|
|
|
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">
|
|
<Microscope className="h-7 w-7 text-blue-600 dark:text-blue-400 shrink-0" />
|
|
Cultivos
|
|
</h1>
|
|
<p className="text-gray-500 dark:text-gray-400">Informe y registro de cultivos y muestras</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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, paciente..."
|
|
value={busqueda}
|
|
onChange={(e) => setBusqueda(e.target.value)}
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
<Select value={filtroEstado} onValueChange={(v) => setFiltroEstado(v as Cultivo['estado'] | 'todos')}>
|
|
<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>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{cultivosFiltrados.map((cultivo) => {
|
|
const pac = findPaciente(cultivo.pacienteId);
|
|
const camaNombre = getCamaNombreForPaciente(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 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 dark:bg-amber-950/80' :
|
|
cultivo.estado === 'Parcial' ? 'bg-orange-100 dark:bg-orange-950/80' :
|
|
cultivo.estado === 'Positivo' ? 'bg-red-100 dark:bg-red-950/80' : 'bg-green-100 dark:bg-green-950/80'
|
|
}`}>
|
|
<Microscope className={`h-5 w-5 ${
|
|
cultivo.estado === 'NAF/Pendiente' ? 'text-amber-600 dark:text-amber-400' :
|
|
cultivo.estado === 'Parcial' ? 'text-orange-600 dark:text-orange-400' :
|
|
cultivo.estado === 'Positivo' ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'
|
|
}`} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{camaNombre && (
|
|
<Badge variant="outline" className="text-xs shrink-0 font-semibold bg-blue-50 text-blue-700 dark:bg-blue-950/80 dark:text-blue-300 dark:border-blue-800">
|
|
{camaNombre}
|
|
</Badge>
|
|
)}
|
|
<h3 className="font-bold text-sm sm:text-base truncate">
|
|
{pac ? `${pac.apellido}, ${pac.nombre}` : 'Paciente no encontrado'}
|
|
</h3>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm text-gray-500 mt-1">
|
|
<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>
|
|
|
|
{cultivo.protocolo && (
|
|
<p className="text-xs text-gray-500">
|
|
Protocolo: {cultivo.protocolo}
|
|
</p>
|
|
)}
|
|
{cultivo.observaciones && (
|
|
<p className="text-sm text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 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>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
|
|
{cultivosFiltrados.length === 0 && (
|
|
<p className="text-center text-gray-500 py-8">
|
|
No se encontraron cultivos con los filtros seleccionados
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|