Initial commit: Sistema de Gestión Hospitalaria
This commit is contained in:
@@ -0,0 +1,455 @@
|
||||
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">
|
||||
{/* 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">Estados Ácido-Base</h1>
|
||||
<p className="text-gray-500">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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user