456 lines
18 KiB
TypeScript
456 lines
18 KiB
TypeScript
import { useState } from 'react';
|
|
import { Activity, Plus, Search, Calendar, Clock } 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 type { AcidoBase, Paciente } from '@/types';
|
|
|
|
interface AcidoBaseProps {
|
|
acidosBase: AcidoBase[];
|
|
pacientes: Paciente[];
|
|
onAgregarAcidoBase: (acidoBase: Omit<AcidoBase, 'id'>) => void;
|
|
onEliminarAcidoBase: (id: string) => void;
|
|
getPacienteById: (id: string) => Paciente | undefined;
|
|
}
|
|
|
|
const REFERENCIAS = {
|
|
ph: { min: 7.35, max: 7.45, unidad: '' },
|
|
pco2: { min: 35, max: 45, unidad: 'mmHg' },
|
|
po2: { min: 80, max: 100, unidad: 'mmHg' },
|
|
hco3: { min: 22, max: 26, unidad: 'mEq/L' },
|
|
be: { min: -2, max: 2, unidad: 'mEq/L' },
|
|
sato2: { min: 95, max: 100, unidad: '%' },
|
|
lactato: { min: 0.5, max: 2.2, unidad: 'mmol/L' },
|
|
};
|
|
|
|
export function AcidoBaseSection({
|
|
acidosBase,
|
|
pacientes,
|
|
onAgregarAcidoBase,
|
|
onEliminarAcidoBase,
|
|
getPacienteById,
|
|
}: AcidoBaseProps) {
|
|
const [busqueda, setBusqueda] = useState('');
|
|
const [dialogoAbierto, setDialogoAbierto] = useState(false);
|
|
|
|
// Formulario
|
|
const [pacienteSeleccionado, setPacienteSeleccionado] = useState('');
|
|
const [busquedaPaciente, setBusquedaPaciente] = useState('');
|
|
const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
|
|
const [hora, setHora] = useState(new Date().toTimeString().slice(0, 5));
|
|
const [ph, setPh] = useState('');
|
|
const [pco2, setPco2] = useState('');
|
|
const [po2, setPo2] = useState('');
|
|
const [hco3, setHco3] = useState('');
|
|
const [be, setBe] = useState('');
|
|
const [sato2, setSato2] = useState('');
|
|
const [lactato, setLactato] = useState('');
|
|
const [interpretacion, setInterpretacion] = useState('');
|
|
|
|
const resetFormulario = () => {
|
|
setPacienteSeleccionado('');
|
|
setBusquedaPaciente('');
|
|
setFecha(new Date().toISOString().split('T')[0]);
|
|
setHora(new Date().toTimeString().slice(0, 5));
|
|
setPh('');
|
|
setPco2('');
|
|
setPo2('');
|
|
setHco3('');
|
|
setBe('');
|
|
setSato2('');
|
|
setLactato('');
|
|
setInterpretacion('');
|
|
};
|
|
|
|
const getEstadoParametro = (parametro: keyof typeof REFERENCIAS, valor: number) => {
|
|
const ref = REFERENCIAS[parametro];
|
|
if (valor < ref.min) return { estado: 'Bajo', color: 'text-blue-600' };
|
|
if (valor > ref.max) return { estado: 'Alto', color: 'text-red-600' };
|
|
return { estado: 'Normal', color: 'text-green-600' };
|
|
};
|
|
|
|
const pacientesFiltrados = pacientes.filter(p => {
|
|
if (!busquedaPaciente) return true;
|
|
const texto = `${p.apellido} ${p.nombre} ${p.dni}`.toLowerCase();
|
|
return texto.includes(busquedaPaciente.toLowerCase());
|
|
});
|
|
|
|
const interpretarGasometria = () => {
|
|
const phVal = parseFloat(ph);
|
|
const pco2Val = parseFloat(pco2);
|
|
const hco3Val = parseFloat(hco3);
|
|
const beVal = parseFloat(be);
|
|
|
|
if (!phVal || !pco2Val || !hco3Val) return '';
|
|
|
|
let interpretacion = '';
|
|
|
|
// Determinar acidosis o alcalosis
|
|
if (phVal < 7.35) {
|
|
interpretacion += 'Acidemia - ';
|
|
if (pco2Val > 45) interpretacion += 'Acidosis Respiratoria';
|
|
else if (hco3Val < 22) interpretacion += 'Acidosis Metabólica';
|
|
else interpretacion += 'Acidosis Mixta';
|
|
} else if (phVal > 7.45) {
|
|
interpretacion += 'Alcalemia - ';
|
|
if (pco2Val < 35) interpretacion += 'Alcalosis Respiratoria';
|
|
else if (hco3Val > 26) interpretacion += 'Alcalosis Metabólica';
|
|
else interpretacion += 'Alcalosis Mixta';
|
|
} else {
|
|
interpretacion += 'pH Normal - ';
|
|
if (pco2Val > 45 || hco3Val < 22) interpretacion += 'Compensación en curso';
|
|
else interpretacion += 'Equilibrio Ácido-Base';
|
|
}
|
|
|
|
// Agregar información sobre compensación
|
|
if (beVal && Math.abs(beVal) > 2) {
|
|
interpretacion += beVal > 0 ? ' (Exceso de bases elevado)' : ' (Déficit de bases)';
|
|
}
|
|
|
|
return interpretacion;
|
|
};
|
|
|
|
const handleGuardar = () => {
|
|
if (!pacienteSeleccionado || !ph || !pco2 || !po2 || !hco3 || !be || !sato2) return;
|
|
|
|
const interpretacionAuto = interpretarGasometria();
|
|
|
|
onAgregarAcidoBase({
|
|
pacienteId: pacienteSeleccionado,
|
|
fecha,
|
|
hora,
|
|
ph: parseFloat(ph),
|
|
pco2: parseFloat(pco2),
|
|
po2: parseFloat(po2),
|
|
hco3: parseFloat(hco3),
|
|
be: parseFloat(be),
|
|
sato2: parseFloat(sato2),
|
|
lactato: lactato ? parseFloat(lactato) : undefined,
|
|
interpretacion: interpretacion || interpretacionAuto,
|
|
});
|
|
|
|
resetFormulario();
|
|
setDialogoAbierto(false);
|
|
};
|
|
|
|
const acidosBaseFiltrados = acidosBase
|
|
.filter(ab => {
|
|
const paciente = getPacienteById(ab.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 getColorPh = (ph: number) => {
|
|
if (ph < 7.2 || ph > 7.6) return 'bg-red-100 text-red-800';
|
|
if (ph < 7.35 || ph > 7.45) return 'bg-amber-100 text-amber-800';
|
|
return 'bg-green-100 text-green-800';
|
|
};
|
|
|
|
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">Estados Ácido-Base</h1>
|
|
<p className="text-gray-500 dark:text-gray-400">Gasometrías y análisis de equilibrio ácido-base</p>
|
|
</div>
|
|
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
|
|
<DialogTrigger asChild>
|
|
<Button onClick={resetFormulario}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Nueva Gasometría
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>Nueva Gasometría Arterial</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div className="sm:col-span-3">
|
|
{!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 flex-wrap">
|
|
<Badge className="bg-green-100 text-green-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>
|
|
<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="grid grid-cols-7 gap-2">
|
|
<div>
|
|
<Label>pH *</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
value={ph}
|
|
onChange={(e) => setPh(e.target.value)}
|
|
placeholder="7.40"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>pCO2 *</Label>
|
|
<Input
|
|
type="number"
|
|
value={pco2}
|
|
onChange={(e) => setPco2(e.target.value)}
|
|
placeholder="40"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>pO2 *</Label>
|
|
<Input
|
|
type="number"
|
|
value={po2}
|
|
onChange={(e) => setPo2(e.target.value)}
|
|
placeholder="85"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>HCO3- *</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.1"
|
|
value={hco3}
|
|
onChange={(e) => setHco3(e.target.value)}
|
|
placeholder="24"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>BE *</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.1"
|
|
value={be}
|
|
onChange={(e) => setBe(e.target.value)}
|
|
placeholder="0"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>SatO2 *</Label>
|
|
<Input
|
|
type="number"
|
|
value={sato2}
|
|
onChange={(e) => setSato2(e.target.value)}
|
|
placeholder="97"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label>Lactato</Label>
|
|
<Input
|
|
type="number"
|
|
step="0.1"
|
|
value={lactato}
|
|
onChange={(e) => setLactato(e.target.value)}
|
|
placeholder="1.0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{ph && pco2 && hco3 && (
|
|
<div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
|
|
<p className="text-sm font-medium text-blue-800 flex items-center gap-2">
|
|
<Activity className="h-4 w-4" />
|
|
Interpretación automática: {interpretarGasometria()}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<Label>Interpretación / Comentarios</Label>
|
|
<textarea
|
|
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
|
value={interpretacion}
|
|
onChange={(e) => setInterpretacion(e.target.value)}
|
|
placeholder="Interpretación clínica..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-4">
|
|
<Button variant="outline" onClick={() => {
|
|
resetFormulario();
|
|
setDialogoAbierto(false);
|
|
}}>
|
|
Cancelar
|
|
</Button>
|
|
<Button
|
|
onClick={handleGuardar}
|
|
disabled={!pacienteSeleccionado || !ph || !pco2 || !po2 || !hco3 || !be || !sato2}
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Guardar Gasometría
|
|
</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 paciente..."
|
|
value={busqueda}
|
|
onChange={(e) => setBusqueda(e.target.value)}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Lista de Gasometrías */}
|
|
<div className="space-y-4">
|
|
{acidosBaseFiltrados.map((ab) => {
|
|
const paciente = getPacienteById(ab.pacienteId);
|
|
const phEstado = getEstadoParametro('ph', ab.ph);
|
|
|
|
return (
|
|
<Card key={ab.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-teal-100 rounded-full flex items-center justify-center">
|
|
<Activity className="h-5 w-5 text-teal-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" />
|
|
{ab.fecha}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="h-3 w-3" />
|
|
{ab.hora}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge className={getColorPh(ab.ph)}>
|
|
pH: {ab.ph}
|
|
</Badge>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-red-600 hover:bg-red-50"
|
|
onClick={() => onEliminarAcidoBase(ab.id)}
|
|
>
|
|
Eliminar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 sm:grid-cols-7 gap-2">
|
|
<div className="bg-gray-50 p-2 rounded text-center">
|
|
<p className="text-xs text-gray-500">pH</p>
|
|
<p className={`font-bold ${phEstado.color}`}>{ab.ph}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded text-center">
|
|
<p className="text-xs text-gray-500">pCO2</p>
|
|
<p className="font-bold">{ab.pco2}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded text-center">
|
|
<p className="text-xs text-gray-500">pO2</p>
|
|
<p className="font-bold">{ab.po2}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded text-center">
|
|
<p className="text-xs text-gray-500">HCO3</p>
|
|
<p className="font-bold">{ab.hco3}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded text-center">
|
|
<p className="text-xs text-gray-500">BE</p>
|
|
<p className="font-bold">{ab.be}</p>
|
|
</div>
|
|
<div className="bg-gray-50 p-2 rounded text-center">
|
|
<p className="text-xs text-gray-500">SatO2</p>
|
|
<p className="font-bold">{ab.sato2}%</p>
|
|
</div>
|
|
{ab.lactato && (
|
|
<div className="bg-gray-50 p-2 rounded text-center">
|
|
<p className="text-xs text-gray-500">Lactato</p>
|
|
<p className="font-bold">{ab.lactato}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{ab.interpretacion && (
|
|
<div className="bg-teal-50 p-3 rounded-lg border border-teal-200">
|
|
<p className="text-sm font-medium text-teal-800 flex items-center gap-2">
|
|
Interpretación: {ab.interpretacion}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{acidosBaseFiltrados.length === 0 && (
|
|
<div className="text-center py-12 text-gray-400">
|
|
<Activity className="h-16 w-16 mx-auto mb-4 opacity-50" />
|
|
<p className="text-lg">
|
|
{busqueda ? 'No se encontraron gasometrías con esa búsqueda' : 'No hay gasometrías registradas'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|