feat: make side panel Cultivos section read-only and place bed badge on the left

2026-08-11 13:10:55 +00:00
commit a17deb815e
117 changed files with 32924 additions and 0 deletions
@@ -0,0 +1,550 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+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, TipoInsulina, ATB } from '@/types';
+import { useHospitalStore } from '@/hooks/useHospitalStore';
+import { getNombreProfesional } from '@/lib/utils';
+
+export function SeccionIndicaciones({ recomendaciones, internacionId, pacienteId, add, update, del, movimientos, onAgregarMovimiento, canEdit, atbList = [], addATB, updateATB }: {
+  recomendaciones: Indicacion[];
+  internacionId: string;
+  pacienteId?: string;
+  add: (i: Omit<Indicacion, 'id'>) => Promise<unknown>;
+  update: (id: string, datos: Partial<Indicacion>) => void;
+  del: (id: string) => void;
+  movimientos?: unknown[];
+  onAgregarMovimiento?: (m: unknown) => void;
+  canEdit?: boolean;
+  atbList?: ATB[];
+  addATB?: (a: Omit<ATB, 'id'>) => Promise<unknown>;
+  updateATB?: (id: string, datos: Partial<ATB>) => void;
+}) {
+  const { currentUser } = useHospitalStore();
+  const list: Indicacion[] = Array.isArray(recomendaciones) ? recomendaciones : [];
+  const movs = Array.isArray(movimientos) ? movimientos : [];
+  const [dialog, setDialog] = useState(false);
+  const [edit, setEdit] = useState<Indicacion | null>(null);
+  const [deleteConfirmInd, setDeleteConfirmInd] = useState<Indicacion | null>(null);
+  const effectiveDeleteMedico = getNombreProfesional(currentUser);
+
+  const formatIndicacion = (i: Indicacion): string => {
+    if (i.tipo === 'Farmacologica' || i.tipo === 'Farmacologica Profilactica' || i.tipo === 'Farmacologica Antibiótico') return `${i.droga || ''} ${i.dosis || ''} ${i.frecuenciaHoras ? `c/${i.frecuenciaHoras}hs` : ''} ${i.via || ''}`.trim();
+    if (i.tipo === 'Farmacologica Insulina') return `${i.tipoInsulina || ''}${i.unidadesDesayuno ? ` - PreDesayuno: ${i.unidadesDesayuno}U` : ''}${i.unidadesAlmuerzo ? ` - PreAlmuerzo: ${i.unidadesAlmuerzo}U` : ''}${i.unidadesNoche ? ` - 23hs: ${i.unidadesNoche}U` : ''}`.trim();
+    if (i.tipo === 'No Farmacologica') return i.indicacionNoFco || '';
+    if (i.tipo === 'PHP' || i.tipo === 'PHP Paralelo') return `${i.tipoPlan || ''} ${i.cantidadMl || ''}ml en ${i.tiempoHoras || ''}hs`;
+    if (i.tipo === 'PHP Alterno') return `${i.tipoPlan || ''} ${i.cantidadMl || ''}ml + ${i.tipoPlan2 || ''} ${i.cantidadMl2 || ''}ml en ${i.tiempoHoras || ''}hs`;
+    return '';
+  };
+  const [tipo, setTipo] = useState<IndicacionTipo>('Farmacologica');
+  const [sortField, setSortField] = useState<'fecha' | 'profesional' | 'tipo'>('fecha');
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
+
+  const handleSort = (field: 'fecha' | 'profesional' | 'tipo') => {
+    if (sortField === field) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortDir('desc');
+    }
+  };
+
+  const sortedMovs = [...movs].sort((a, b) => {
+    const recordA = a as Record<string, unknown>;
+    const recordB = b as Record<string, unknown>;
+    const aVal = String(recordA[sortField] || '');
+    const bVal = String(recordB[sortField] || '');
+    if (sortField === 'fecha') {
+      const timeA = new Date(aVal.replace(' ', 'T')).getTime();
+      const timeB = new Date(bVal.replace(' ', 'T')).getTime();
+      return sortDir === 'asc' ? timeA - timeB : timeB - timeA;
+    }
+    return sortDir === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+  });
+  const [droga, setDroga] = useState('');
+  const [dosis, setDosis] = useState('');
+  const [frecuenciaHoras, setFrecuenciaHoras] = useState<number | ''>('');
+  const [via, setVia] = useState<ViaAdministracion>('EV');
+  const [indicacionNoFco, setIndicacionNoFco] = useState('');
+  const [tipoPlan, setTipoPlan] = useState<TipoPlanHidratacion>('SF 0.9%');
+  const [tipoPlan2, setTipoPlan2] = useState<TipoPlanHidratacion>('Ringer Lactato');
+  const [cantidadMl, setCantidadMl] = useState<number | ''>('');
+  const [cantidadMl2, setCantidadMl2] = useState<number | ''>('');
+  const [tiempoHoras, setTiempoHoras] = useState<number | ''>(24);
+  const [tipoInsulina, setTipoInsulina] = useState<TipoInsulina>('NPH');
+  const [unidadesDesayuno, setUnidadesDesayuno] = useState<number | ''>('');
+  const [unidadesAlmuerzo, setUnidadesAlmuerzo] = useState<number | ''>('');
+  const [unidadesNoche, setUnidadesNoche] = useState<number | ''>('');
+  const effectiveMedico = getNombreProfesional(currentUser);
+  const [showHistorial, setShowHistorial] = useState(false);
+
+  const vias: ViaAdministracion[] = ['Via Oral', 'EV', 'IM', 'SC', 'Por GGT', 'Por SNG'];
+  const planes: TipoPlanHidratacion[] = ['SF 0.9%', 'Dextrosa 5%', 'Dextrosa 10%', 'Dextrosa 25%', 'Ringer Lactato'];
+  const tiposInsulina: TipoInsulina[] = ['NPH', 'Glargina'];
+  const tipos: IndicacionTipo[] = ['Farmacologica', 'Farmacologica Antibiótico', 'Farmacologica Profilactica', 'Farmacologica Insulina', 'No Farmacologica', 'PHP', 'PHP Paralelo', 'PHP Alterno'];
+
+  const reset = () => {
+    setEdit(null);
+    setTipo('Farmacologica');
+    setDroga('');
+    setDosis('');
+    setFrecuenciaHoras('');
+    setVia('EV');
+    setIndicacionNoFco('');
+    setTipoPlan('SF 0.9%');
+    setTipoPlan2('Ringer Lactato');
+    setCantidadMl('');
+    setCantidadMl2('');
+    setTiempoHoras(24);
+    setTipoInsulina('NPH');
+    setUnidadesDesayuno('');
+    setUnidadesAlmuerzo('');
+    setUnidadesNoche('');
+  };
+
+  const loadEdit = (i: Indicacion) => {
+    setEdit(i);
+    setTipo(i.tipo);
+    setDroga(i.droga || '');
+    setDosis(i.dosis || '');
+    setFrecuenciaHoras(i.frecuenciaHoras || '');
+    setVia(i.via || 'EV');
+    setIndicacionNoFco(i.indicacionNoFco || '');
+    setTipoPlan(i.tipoPlan || 'SF 0.9%');
+    setTipoPlan2(i.tipoPlan2 || 'Ringer Lactato');
+    setCantidadMl(i.cantidadMl || '');
+    setCantidadMl2(i.cantidadMl2 || '');
+    setTiempoHoras(i.tiempoHoras || 24);
+    setTipoInsulina(i.tipoInsulina || 'NPH');
+    setUnidadesDesayuno(i.unidadesDesayuno || '');
+    setUnidadesAlmuerzo(i.unidadesAlmuerzo || '');
+    setUnidadesNoche(i.unidadesNoche || '');
+    setDialog(true);
+  };
+
+  const handleGuardar = async () => {
+    if (!effectiveMedico.trim()) return;
+    if ((tipo === 'Farmacologica' || tipo === 'Farmacologica Profilactica' || tipo === 'Farmacologica Antibiótico') && (!droga.trim() || !dosis.trim())) return;
+    if (tipo === 'Farmacologica Insulina' && (!unidadesDesayuno && !unidadesAlmuerzo && !unidadesNoche)) return;
+    if (tipo === 'No Farmacologica' && !indicacionNoFco.trim()) return;
+    if ((tipo === 'PHP' || tipo === 'PHP Paralelo') && !cantidadMl) return;
+    if (tipo === 'PHP Alterno' && (!cantidadMl || !cantidadMl2)) return;
+
+    const data: Partial<Indicacion> = {
+      internacionId,
+      tipo,
+      estado: 'Activa',
+      medicoCrea: effectiveMedico,
+      fechaCrea: new Date().toISOString().split('T')[0],
+    };
+
+    if (tipo === 'Farmacologica' || tipo === 'Farmacologica Profilactica' || tipo === 'Farmacologica Antibiótico') {
+      data.droga = droga;
+      data.dosis = dosis;
+      data.frecuenciaHoras = frecuenciaHoras || undefined;
+      data.via = via;
+    } else if (tipo === 'Farmacologica Insulina') {
+      data.tipoInsulina = tipoInsulina;
+      data.unidadesDesayuno = unidadesDesayuno || undefined;
+      data.unidadesAlmuerzo = unidadesAlmuerzo || undefined;
+      data.unidadesNoche = unidadesNoche || undefined;
+    } else if (tipo === 'No Farmacologica') {
+      data.indicacionNoFco = indicacionNoFco;
+    } else if (tipo === 'PHP' || tipo === 'PHP Paralelo') {
+      data.tipoPlan = tipoPlan;
+      data.cantidadMl = cantidadMl;
+      data.tiempoHoras = tiempoHoras;
+    } else if (tipo === 'PHP Alterno') {
+      data.tipoPlan = tipoPlan;
+      data.cantidadMl = cantidadMl;
+      data.tipoPlan2 = tipoPlan2;
+      data.cantidadMl2 = cantidadMl2;
+      data.tiempoHoras = tiempoHoras;
+    }
+
+    const now = new Date();
+    const fecha = now.toISOString().split('T')[0] + ' ' + now.toTimeString().split(' ')[0].substring(0, 5);
+    if (edit) {
+      if (edit.tipo === 'Farmacologica Antibiótico' && updateATB && addATB && atbList && pacienteId) {
+        const oldDrug = edit.droga || '';
+        const newDrug = droga || '';
+        if (oldDrug.toLowerCase() !== newDrug.toLowerCase()) {
+          const activeATB = atbList.find(a => 
+            a.internacionId === internacionId && 
+            a.antibiotico.toLowerCase() === oldDrug.toLowerCase() && 
+            !a.fechaFinalizacion
+          );
+          if (activeATB) {
+            const todayStr = now.toISOString().split('T')[0];
+            try {
+              await updateATB(activeATB.id, { fechaFinalizacion: todayStr });
+              await addATB({
+                pacienteId,
+                internacionId,
+                antibiotico: newDrug,
+                fechaInicio: todayStr,
+              });
+            } catch (atbErr) {
+              console.error('Error al actualizar ATB en modificación de indicación:', atbErr);
+            }
+          }
+        }
+      }
+
+      if (onAgregarMovimiento) {
+        await onAgregarMovimiento({
+          indicacionId: edit.id,
+          internacionId,
+          tipo: 'Modificacion',
+          fecha,
+          profesional: effectiveMedico,
+          indicacionPrevia: formatIndicacion(edit),
+          indicacionNueva: formatIndicacion({ ...edit, ...data } as Indicacion),
+        });
+      }
+      await update(edit.id, data);
+    } else {
+      const newId = await add(data);
+      if (tipo === 'Farmacologica Antibiótico' && addATB && pacienteId) {
+        try {
+          await addATB({
+            pacienteId,
+            internacionId,
+            antibiotico: droga,
+            fechaInicio: data.fechaCrea,
+          });
+        } catch (atbErr) {
+          console.error('Error al agregar ATB automáticamente:', atbErr);
+        }
+      }
+      if (onAgregarMovimiento) {
+        await onAgregarMovimiento({
+          indicacionId: typeof newId === 'string' ? newId : '',
+          internacionId,
+          tipo: 'Nueva',
+          fecha,
+          profesional: effectiveMedico,
+          indicacionNueva: formatIndicacion({ ...data, id: newId } as Indicacion),
+        });
+      }
+    }
+    setDialog(false);
+    reset();
+  };
+
+  const handleSuspender = async (i: Indicacion, suspendioMedico: string) => {
+    const now = new Date();
+    const fecha = now.toISOString().split('T')[0] + ' ' + now.toTimeString().split(' ')[0].substring(0, 5);
+    try {
+      if (onAgregarMovimiento) {
+        await onAgregarMovimiento({
+          indicacionId: i.id,
+          internacionId,
+          tipo: 'Suspencion',
+          fecha,
+          profesional: suspendioMedico,
+          indicacionPrevia: formatIndicacion(i),
+        });
+      }
+
+      if (i.tipo === 'Farmacologica Antibiótico' && updateATB && atbList) {
+        const fechaFin = now.toISOString().split('T')[0];
+        const activeATB = atbList.find(a => 
+          a.internacionId === internacionId && 
+          a.antibiotico.toLowerCase() === (i.droga || '').toLowerCase() && 
+          !a.fechaFinalizacion
+        );
+        if (activeATB) {
+          try {
+            await updateATB(activeATB.id, { fechaFinalizacion: fechaFin });
+          } catch (atbErr) {
+            console.error('Error al finalizar ATB automáticamente:', atbErr);
+          }
+        }
+      }
+
+      await del(i.id);
+      toast.success('Indicación eliminada correctamente');
+    } catch (err) {
+      console.error('Error al eliminar indicación:', err);
+      toast.error('Error al eliminar la indicación');
+    }
+  };
+
+  const indsFilter = list.filter(ind => ind.internacionId === internacionId);
+  const activas = indsFilter.filter(ind => ind.estado === 'Activa');
+
+  return (
+    <div className="space-y-2.5">
+      <div className="flex justify-between items-center">
+        {canEdit && <Button size="sm" variant="outline" onClick={() => { reset(); setDialog(true); }}>
+          <Plus className="h-4 w-4 mr-1.5" />Nueva Indicación
+        </Button>}
+        <Button size="sm" variant="ghost" onClick={() => setShowHistorial(!showHistorial)}>
+          {showHistorial ? 'Ocultar Historial' : `Ver Historial (${movs.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={getNombreProfesional(currentUser)} disabled placeholder="Nombre del médico" />
+            </div>
+
+            {(tipo === 'Farmacologica' || tipo === 'Farmacologica Antibiótico') && (
+              <>
+                <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 === 'Farmacologica Profilactica' && (
+              <>
+                <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 === 'Farmacologica Insulina' && (
+              <>
+                <div><Label>Tipo de Insulina</Label><Select value={tipoInsulina} onValueChange={(v: TipoInsulina) => setTipoInsulina(v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{tiposInsulina.map(t => <SelectItem key={t} value={t}>{t}</SelectItem>)}</SelectContent></Select></div>
+                <div className="grid grid-cols-3 gap-2">
+                  <div className="flex flex-col justify-end space-y-1.5">
+                    <Label className="text-xs sm:text-sm">Pre Desayuno (U)</Label>
+                    <Input type="number" value={unidadesDesayuno} onChange={e => setUnidadesDesayuno(e.target.value ? parseInt(e.target.value) : '')} placeholder="U" />
+                  </div>
+                  <div className="flex flex-col justify-end space-y-1.5">
+                    <Label className="text-xs sm:text-sm">Pre Almuerzo (U)</Label>
+                    <Input type="number" value={unidadesAlmuerzo} onChange={e => setUnidadesAlmuerzo(e.target.value ? parseInt(e.target.value) : '')} placeholder="U" />
+                  </div>
+                  <div className="flex flex-col justify-end space-y-1.5">
+                    <Label className="text-xs sm:text-sm">23hs (U)</Label>
+                    <Input type="number" value={unidadesNoche} onChange={e => setUnidadesNoche(e.target.value ? parseInt(e.target.value) : '')} placeholder="U" />
+                  </div>
+                </div>
+              </>
+            )}
+
+            {tipo === 'No Farmacologica' && (
+              <div><Label>Indicacionión *</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={indicacionNoFco} onChange={e => setIndicacionNoFco(e.target.value)} placeholder="Ej: Control de signos vitales, Dieta, etc." /></div>
+            )}
+
+            {(tipo === 'PHP' || tipo === 'PHP Paralelo') && (
+              <>
+                <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>
+              </>
+            )}
+
+            {tipo === 'PHP Alterno' && (
+              <>
+                <div><Label>Plan 1</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 Plan 1 (ml) *</Label><Input type="number" value={cantidadMl} onChange={e => setCantidadMl(e.target.value ? parseInt(e.target.value) : '')} placeholder="ml" /></div>
+                </div>
+                <div><Label>Plan 2</Label><Select value={tipoPlan2} onValueChange={(v: TipoPlanHidratacion) => setTipoPlan2(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 Plan 2 (ml) *</Label><Input type="number" value={cantidadMl2} onChange={e => setCantidadMl2(e.target.value ? parseInt(e.target.value) : '')} placeholder="ml" /></div>
+                  <div><Label>Tiempo Total (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={!effectiveMedico.trim()}>Guardar</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {activas.length === 0 ? (
+        <div className="text-center py-6 text-gray-500 text-sm">No hay indicaciones activas</div>
+      ) : (
+        <div className="space-y-1.5">
+          {activas.map(ind => (
+            <Card key={ind.id}>
+              <CardContent className="py-2 px-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1.5 mb-0.5">
+                    <Badge variant="outline" className="text-xs py-0 px-1.5 h-5">{ind.tipo}</Badge>
+                    {ind.medicoCrea && <span className="text-xs text-muted-foreground">Dr: {ind.medicoCrea}</span>}
+                  </div>
+                  {ind.tipo === 'Farmacologica' && (
+                    <div className="font-medium text-sm leading-tight">{ind.droga} {ind.dosis} {ind.frecuenciaHoras ? `c/${ind.frecuenciaHoras}hs` : ''} {ind.via}</div>
+                  )}
+                  {ind.tipo === 'Farmacologica Antibiótico' && (
+                    <div className="font-medium text-sm leading-tight">{ind.droga} {ind.dosis} {ind.frecuenciaHoras ? `c/${ind.frecuenciaHoras}hs` : ''} {ind.via} <Badge className="ml-1.5 py-0 px-1.5 h-5 text-xs bg-purple-100 text-purple-800 dark:bg-purple-950 dark:text-purple-300 hover:bg-purple-100">Antibiótico</Badge></div>
+                  )}
+                  {ind.tipo === 'Farmacologica Profilactica' && (
+                    <div className="font-medium text-sm leading-tight">{ind.droga} {ind.dosis} {ind.frecuenciaHoras ? `c/${ind.frecuenciaHoras}hs` : ''} {ind.via}</div>
+                  )}
+                  {ind.tipo === 'Farmacologica Insulina' && (
+                    <div className="font-medium text-sm leading-tight">{ind.tipoInsulina}
+                      {ind.unidadesDesayuno && ` - PreDesayuno: ${ind.unidadesDesayuno}U`}
+                      {ind.unidadesAlmuerzo && ` - PreAlmuerzo: ${ind.unidadesAlmuerzo}U`}
+                      {ind.unidadesNoche && ` - 23hs: ${ind.unidadesNoche}U`}
+                    </div>
+                  )}
+                  {ind.tipo === 'No Farmacologica' && (
+                    <div className="font-medium text-sm leading-tight">{ind.indicacionNoFco}</div>
+                  )}
+                  {(ind.tipo === 'PHP' || ind.tipo === 'PHP Paralelo') && (
+                    <div className="font-medium text-sm leading-tight">{ind.tipoPlan} {ind.cantidadMl}ml en {ind.tiempoHoras}hs</div>
+                  )}
+                  {ind.tipo === 'PHP Alterno' && (
+                    <div className="font-medium text-sm leading-tight">{ind.tipoPlan} {ind.cantidadMl}ml + {ind.tipoPlan2} {ind.cantidadMl2}ml en {ind.tiempoHoras}hs</div>
+                  )}
+                </div>
+                <div className="flex gap-1 shrink-0">
+                  {canEdit && <Button size="sm" variant="outline" className="h-7 w-7 p-0" title="Editar" onClick={() => loadEdit(ind)}>
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>}
+                  {canEdit && <Button size="sm" variant="outline" className="h-7 w-7 p-0 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30" title="Eliminar" onClick={() => {
+                    setDeleteConfirmInd(ind);
+                  }}>
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {deleteConfirmInd && (
+        <Dialog open={!!deleteConfirmInd} onOpenChange={(open) => { if (!open) setDeleteConfirmInd(null); }}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle className="text-red-600 flex items-center gap-2">
+                <Trash2 className="h-5 w-5" />
+                Confirmar eliminación de indicación
+              </DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-2">
+              <p className="text-sm text-muted-foreground">
+                ¿Está seguro de que desea suspender/eliminar esta indicación? Se registrará la baja en el historial.
+              </p>
+              <div className="p-3 bg-muted rounded-md text-sm font-medium">
+                <span className="text-xs text-muted-foreground block mb-1">Indicación:</span>
+                {formatIndicacion(deleteConfirmInd)}
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="delete-medico">Médico que suspende / elimina *</Label>
+                <Input
+                  id="delete-medico"
+                  value={getNombreProfesional(currentUser)}
+                  disabled
+                  placeholder="Nombre del profesional..."
+                />
+              </div>
+            </div>
+            <div className="flex justify-end gap-2 mt-2">
+              <Button variant="outline" onClick={() => setDeleteConfirmInd(null)}>
+                Cancelar
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={async () => {
+                  const med = effectiveDeleteMedico.trim() || deleteConfirmInd.medicoCrea || 'Médico';
+                  const indToDel = deleteConfirmInd;
+                  setDeleteConfirmInd(null);
+                  await handleSuspender(indToDel, med);
+                }}
+              >
+                Eliminar
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {showHistorial && (
+        <Dialog open={showHistorial} onOpenChange={setShowHistorial}>
+          <DialogContent className="max-w-4xl max-h-[80vh] overflow-auto">
+            <DialogHeader>
+              <DialogTitle>Historial de Indicaciones</DialogTitle>
+            </DialogHeader>
+            {movs.length === 0 ? (
+              <p className="text-gray-500 py-4">Sin movimientos registrados</p>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => handleSort('fecha')}>
+                      Fecha {sortField === 'fecha' && (sortDir === 'asc' ? '↑' : '↓')}
+                    </TableHead>
+                    <TableHead className="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => handleSort('profesional')}>
+                      Profesional {sortField === 'profesional' && (sortDir === 'asc' ? '↑' : '↓')}
+                    </TableHead>
+                    <TableHead className="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => handleSort('tipo')}>
+                      Tipo {sortField === 'tipo' && (sortDir === 'asc' ? '↑' : '↓')}
+                    </TableHead>
+                    <TableHead>Indicación</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {sortedMovs.map(mov => (
+                    <TableRow key={mov.id}>
+                      <TableCell>{mov.fecha}</TableCell>
+                      <TableCell>{mov.profesional}</TableCell>
+                      <TableCell>
+                        <Badge className={
+                          mov.tipo === 'Nueva' || mov.tipo === 'Indicacion'
+                            ? 'bg-green-600 hover:bg-green-700 text-white'
+                            : mov.tipo === 'Suspencion' || mov.tipo === 'Suspensión' || mov.tipo === 'Eliminacion'
+                            ? 'bg-red-600 hover:bg-red-700 text-white'
+                            : 'bg-orange-500 hover:bg-orange-600 text-white'
+                        }>
+                          {mov.tipo === 'Nueva' || mov.tipo === 'Indicacion' ? 'Nueva' : mov.tipo === 'Suspencion' || mov.tipo === 'Suspensión' || mov.tipo === 'Eliminacion' ? 'Suspensión' : 'Modificación'}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        {mov.tipo === 'Modificacion' ? (
+                          <div className="text-sm">
+                            <div className="text-red-500 line-through">{mov.indicacionPrevia}</div>
+                            <div className="text-green-500">{mov.indicacionNueva}</div>
+                          </div>
+                        ) : (mov.tipo === 'Suspencion' || mov.tipo === 'Suspensión' || mov.tipo === 'Eliminacion') ? mov.indicacionPrevia : mov.indicacionNueva || mov.indicacionPrevia}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}