Add SeccionIndicaciones component
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
import { useState } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Plus, Pencil, Trash2, X } from 'lucide-react';
|
||||
import type { Indicacion, IndicacionTipo, ViaAdministracion, TipoPlanHidratacion } from '@/types';
|
||||
|
||||
export function SeccionIndicaciones({ recomendaciones, internacionId, add, update, del }: {
|
||||
recomendaciones: Indicacion[];
|
||||
internacionId: string;
|
||||
add: (i: Omit<Indicacion, 'id'>) => void;
|
||||
update: (id: string, datos: Partial<Indicacion>) => void;
|
||||
del: (id: string) => void;
|
||||
}) {
|
||||
const [dialog, setDialog] = useState(false);
|
||||
const [edit, setEdit] = useState<Indicacion | null>(null);
|
||||
const [tipo, setTipo] = useState<IndicacionTipo>('Farmacologica');
|
||||
const [droga, setDroga] = useState('');
|
||||
const [dosis, setDosis] = useState('');
|
||||
const [frecuenciaHoras, setFrecuenciaHoras] = useState<number | ''>('');
|
||||
const [via, setVia] = useState<ViaAdministracion>('EV');
|
||||
const [descripcion, setDescripcion] = useState('');
|
||||
const [tipoPlan, setTipoPlan] = useState<TipoPlanHidratacion>('SolucionFisiologica09');
|
||||
const [cantidadMl, setCantidadMl] = useState<number | ''>('');
|
||||
const [tiempoHoras, setTiempoHoras] = useState<number | ''>(24);
|
||||
const [medico, setMedico] = useState('');
|
||||
const [showHistorial, setShowHistorial] = useState(false);
|
||||
|
||||
const vias: ViaAdministracion[] = ['Oral', 'EV', 'IM', 'SC', 'PorGGT', 'PorSNG'];
|
||||
const planes: TipoPlanHidratacion[] = ['SolucionFisiologica09', 'Dextrosa5', 'Dextrosa10', 'Dextrosa25', 'RingerLactato'];
|
||||
const tipos: IndicacionTipo[] = ['Farmacologica', 'NoFarmacologica', 'Hidratacion'];
|
||||
|
||||
const reset = () => {
|
||||
setEdit(null);
|
||||
setTipo('Farmacologica');
|
||||
setDroga('');
|
||||
setDosis('');
|
||||
setFrecuenciaHoras('');
|
||||
setVia('EV');
|
||||
setDescripcion('');
|
||||
setTipoPlan('SolucionFisiologica09');
|
||||
setCantidadMl('');
|
||||
setTiempoHoras(24);
|
||||
setMedico('');
|
||||
};
|
||||
|
||||
const loadEdit = (i: Indicacion) => {
|
||||
setEdit(i);
|
||||
setTipo(i.tipo);
|
||||
setDroga(i.droga || '');
|
||||
setDosis(i.dosis || '');
|
||||
setFrecuenciaHoras(i.frecuenciaHoras || '');
|
||||
setVia(i.via || 'EV');
|
||||
setDescripcion(i.descripcion || '');
|
||||
setTipoPlan(i.tipoPlan || 'SolucionFisiologica09');
|
||||
setCantidadMl(i.cantidadMl || '');
|
||||
setTiempoHoras(i.tiempoHoras || 24);
|
||||
setMedico(i.medicoCrea);
|
||||
setDialog(true);
|
||||
};
|
||||
|
||||
const handleGuardar = () => {
|
||||
if (!medico.trim()) return;
|
||||
if (tipo === 'Farmacologica' && (!droga.trim() || !dosis.trim())) return;
|
||||
if (tipo === 'NoFarmacologica' && !descripcion.trim()) return;
|
||||
if (tipo === 'Hidratacion' && !cantidadMl) return;
|
||||
|
||||
const data: any = {
|
||||
internacionId,
|
||||
tipo,
|
||||
estado: 'Activa',
|
||||
medicoCrea: medico,
|
||||
fechaCrea: new Date().toISOString().split('T')[0],
|
||||
};
|
||||
|
||||
if (tipo === 'Farmacologica') {
|
||||
data.droga = droga;
|
||||
data.dosis = dosis;
|
||||
data.frecuenciaHoras = frecuenciaHoras || undefined;
|
||||
data.via = via;
|
||||
} else if (tipo === 'NoFarmacologica') {
|
||||
data.descripcion = descripcion;
|
||||
} else {
|
||||
data.tipoPlan = tipoPlan;
|
||||
data.cantidadMl = cantidadMl;
|
||||
data.tiempoHoras = tiempoHoras;
|
||||
}
|
||||
|
||||
if (edit) {
|
||||
update(edit.id, data);
|
||||
} else {
|
||||
add(data);
|
||||
}
|
||||
setDialog(false);
|
||||
reset();
|
||||
};
|
||||
|
||||
const handleSuspender = (i: Indicacion, suspendioMedico: string) => {
|
||||
update(i.id, {
|
||||
estado: 'Suspendida',
|
||||
medicoSuspende: suspendioMedico,
|
||||
fechaSuspension: new Date().toISOString().split('T')[0],
|
||||
});
|
||||
};
|
||||
|
||||
const indsFilter = (recomendaciones || []).filter(ind => ind.internacionId === internacionId);
|
||||
const activas = indsFilter.filter(ind => ind.estado === 'Activa');
|
||||
const historial = indsFilter.filter(ind => ind.estado === 'Suspendida');
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={() => { reset(); setDialog(true); }}>
|
||||
<Plus className="h-4 w-4 mr-2" />Nueva Indicación
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => setShowHistorial(!showHistorial)}>
|
||||
{showHistorial ? 'Ocultar Historial' : `Ver Historial (${historial.length})`}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Dialog open={dialog} onOpenChange={setDialog}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{edit ? 'Editar' : 'Nueva'} Indicación</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Tipo de Indicación</Label>
|
||||
<Select value={tipo} onValueChange={(v: IndicacionTipo) => setTipo(v)}>
|
||||
<SelectTrigger><SelectValue placeholder="Seleccionar tipo" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{tipos.map(t => <SelectItem key={t} value={t}>{t}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Médico *</Label>
|
||||
<Input value={medico} onChange={e => setMedico(e.target.value)} placeholder="Nombre del médico" />
|
||||
</div>
|
||||
|
||||
{tipo === 'Farmacologica' && (
|
||||
<>
|
||||
<div><Label>Droga *</Label><Input value={droga} onChange={e => setDroga(e.target.value)} placeholder="Nombre del medicamento" /></div>
|
||||
<div><Label>Dosis *</Label><Input value={dosis} onChange={e => setDosis(e.target.value)} placeholder="Ej: 500mg, 1g, 10ml" /></div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div><Label>Frecuencia (hs)</Label><Input type="number" value={frecuenciaHoras} onChange={e => setFrecuenciaHoras(e.target.value ? parseInt(e.target.value) : '')} placeholder="Cada X horas" /></div>
|
||||
<div><Label>Vía</Label><Select value={via} onValueChange={(v: ViaAdministracion) => setVia(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{vias.map(v => <SelectItem key={v} value={v}>{v}</SelectItem>)}</SelectContent></Select></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tipo === 'NoFarmacologica' && (
|
||||
<div><Label>Descripción *</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={descripcion} onChange={e => setDescripcion(e.target.value)} placeholder="Ej: Control de signos vitales cada 4hs, Dieta blanda, etc." /></div>
|
||||
)}
|
||||
|
||||
{tipo === 'Hidratacion' && (
|
||||
<>
|
||||
<div><Label>Tipo de Plan</Label><Select value={tipoPlan} onValueChange={(v: TipoPlanHidratacion) => setTipoPlan(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{planes.map(p => <SelectItem key={p} value={p}>{p}</SelectItem>)}</SelectContent></Select></div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div><Label>Cantidad (ml) *</Label><Input type="number" value={cantidadMl} onChange={e => setCantidadMl(e.target.value ? parseInt(e.target.value) : '')} placeholder="ml" /></div>
|
||||
<div><Label>Tiempo (hs)</Label><Input type="number" value={tiempoHoras} onChange={e => setTiempoHoras(e.target.value ? parseInt(e.target.value) : 24)} placeholder="24" /></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<Button variant="outline" onClick={() => setDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
|
||||
<Button onClick={handleGuardar} disabled={!medico.trim()}>Guardar</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{activas.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">No hay indicaciones activas</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{activas.map(ind => (
|
||||
<Card key={ind.id}>
|
||||
<CardContent className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Badge variant="outline">{ind.tipo}</Badge>
|
||||
{ind.medicoCrea && <span className="text-xs text-gray-500">Dr: {ind.medicoCrea}</span>}
|
||||
</div>
|
||||
{ind.tipo === 'Farmacologica' && (
|
||||
<div className="font-medium">{ind.droga} {ind.dosis} {ind.via && `(${ind.via})`} {ind.frecuenciaHoras && `c/${ind.frecuenciaHoras}hs`}</div>
|
||||
)}
|
||||
{ind.tipo === 'NoFarmacologica' && (
|
||||
<div className="font-medium">{ind.descripcion}</div>
|
||||
)}
|
||||
{ind.tipo === 'Hidratacion' && (
|
||||
<div className="font-medium">{ind.tipoPlan} {ind.cantidadMl}ml en {ind.tiempoHoras}hs</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button size="sm" variant="outline" className="text-orange-600" onClick={() => {
|
||||
const med = prompt('Médico que suspende:');
|
||||
if (med) handleSuspender(ind, med);
|
||||
}}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => loadEdit(ind)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="text-red-600" onClick={() => del(ind.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showHistorial && historial.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<h3 className="font-bold mb-2">Historial de Indicaciones</h3>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Fecha Indicación</TableHead>
|
||||
<TableHead>Fecha Suspensión</TableHead>
|
||||
<TableHead>Médico</TableHead>
|
||||
<TableHead>Suspenso Por</TableHead>
|
||||
<TableHead>Indicación</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{historial.map(ind => (
|
||||
<TableRow key={ind.id}>
|
||||
<TableCell>{ind.fechaCrea}</TableCell>
|
||||
<TableCell>{ind.fechaSuspension}</TableCell>
|
||||
<TableCell>{ind.medicoCrea}</TableCell>
|
||||
<TableCell>{ind.medicoSuspende}</TableCell>
|
||||
<TableCell>
|
||||
{ind.tipo === 'Farmacologica' && `${ind.droga} ${ind.dosis}`}
|
||||
{ind.tipo === 'NoFarmacologica' && ind.descripcion}
|
||||
{ind.tipo === 'Hidratacion' && `${ind.tipoPlan} ${ind.cantidadMl}ml`}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user