feat(HistoriaClinica): agregar opciones para editar y eliminar registros de Otros Laboratorios

src/sections/HistoriaClinica.tsx

@@ -251,7 +251,7 @@ export function HistoriaClinica({
 }: HistoriaClinicaProps) {
   const [tabActivo, setTabActivo] = useState('evoluciones');
   const [portalNode, setPortalNode] = useState<HTMLDivElement | null>(null);
-  const { pendientes, otrosLaboratorios, agregarOtroLaboratorio } = useHospitalStore();
+  const { pendientes, otrosLaboratorios, agregarOtroLaboratorio, actualizarOtroLaboratorio, eliminarOtroLaboratorio } = useHospitalStore();
   const indicacionesActivas = (indicadores || []).filter(i => i.estado === 'Activa');
   const pendientesActivos = (pendientes || []).filter(p => p.pacienteId === paciente.id && p.estado === 'pendiente');
 
@@ -579,6 +579,8 @@ export function HistoriaClinica({
                 del={onEliminarLaboratorio}
                 addAcidoBase={onAgregarAcidoBase}
                 addOtroLaboratorio={agregarOtroLaboratorio}
+                updateOtroLaboratorio={actualizarOtroLaboratorio}
+                delOtroLaboratorio={eliminarOtroLaboratorio}
                 canEdit={canEdit}
               />
             </TabsContent>
@@ -937,7 +939,7 @@ function SeccionGlucemias({ glucemias, patientId, internacionId, add, update, de
   );
 }
 
-function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internacionId, add, update, del, addAcidoBase, addOtroLaboratorio, canEdit, portalNode}: {
+function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internacionId, add, update, del, addAcidoBase, addOtroLaboratorio, updateOtroLaboratorio, delOtroLaboratorio, canEdit, portalNode}: {
   lab: Laboratorio[];
   otrosLaboratorios?: OtroLaboratorio[];
   patientId: string;
@@ -947,6 +949,8 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
   del: (id: string) => void;
   addAcidoBase?: (a: Omit<AcidoBase, 'id'>) => void;
   addOtroLaboratorio?: (o: Omit<OtroLaboratorio, 'id'>) => void;
+  updateOtroLaboratorio?: (id: string, data: Partial<OtroLaboratorio>) => void;
+  delOtroLaboratorio?: (id: string) => void;
   canEdit?: boolean;
   portalNode?: HTMLDivElement | null;
 }) {
@@ -957,6 +961,61 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
   const [nuevaObsFecha, setNuevaObsFecha] = useState(getLocalToday());
   const [nuevaObsTexto, setNuevaObsTexto] = useState('');
 
+  const [editOtrosDialog, setEditOtrosDialog] = useState(false);
+  const [editOtrosItem, setEditOtrosItem] = useState<{ id: string; fecha: string; hora: string; observaciones: string; source: 'lab' | 'otros' } | null>(null);
+  const [editOtrosFecha, setEditOtrosFecha] = useState('');
+  const [editOtrosHora, setEditOtrosHora] = useState('');
+  const [editOtrosTexto, setEditOtrosTexto] = useState('');
+
+  const handleStartEditOtros = (item: { id: string; fecha: string; hora?: string; observaciones?: string; source: 'lab' | 'otros' }) => {
+    setEditOtrosItem({ id: item.id, fecha: item.fecha, hora: item.hora || '00:00', observaciones: item.observaciones || '', source: item.source });
+    setEditOtrosFecha(item.fecha);
+    setEditOtrosHora(item.hora || '00:00');
+    setEditOtrosTexto(item.observaciones || '');
+    setEditOtrosDialog(true);
+  };
+
+  const handleSaveEditOtros = () => {
+    if (!editOtrosItem || !editOtrosTexto.trim()) return;
+    if (editOtrosItem.source === 'otros') {
+      if (updateOtroLaboratorio) {
+        updateOtroLaboratorio(editOtrosItem.id, {
+          fecha: editOtrosFecha,
+          hora: editOtrosHora,
+          observaciones: editOtrosTexto
+        });
+        toast.success('Registro de Otros Laboratorios actualizado');
+      }
+    } else if (editOtrosItem.source === 'lab') {
+      if (update) {
+        update(editOtrosItem.id, {
+          fecha: editOtrosFecha,
+          hora: editOtrosHora,
+          observaciones: editOtrosTexto
+        });
+        toast.success('Observación de laboratorio actualizada');
+      }
+    }
+    setEditOtrosDialog(false);
+    setEditOtrosItem(null);
+  };
+
+  const handleDeleteOtros = (item: { id: string; source: 'lab' | 'otros' }) => {
+    if (window.confirm('¿Está seguro de que desea eliminar este registro?')) {
+      if (item.source === 'otros') {
+        if (delOtroLaboratorio) {
+          delOtroLaboratorio(item.id);
+          toast.success('Registro eliminado');
+        }
+      } else if (item.source === 'lab') {
+        if (update) {
+          update(item.id, { observaciones: '' });
+          toast.success('Observación de laboratorio eliminada');
+        }
+      }
+    }
+  };
+
   const [evolDialog, setEvolDialog] = useState(false);
   const [edit, setEdit] = useState<Laboratorio | null>(null);
   const [obsLab, setObsLab] = useState<Laboratorio | null>(null);
@@ -1695,7 +1754,19 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
                   <div key={item.id + idx} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 space-y-2">
                     <div className="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 font-medium">
                       <span>{formatDateDDMMYYYY(item.fecha)} {item.hora || ''}</span>
+                      <div className="flex items-center gap-2">
                         <Badge variant="secondary" className="text-[10px] px-1.5 py-0.5">{item.source === 'lab' ? 'Obs. de Lab' : 'Otros'}</Badge>
+                        {canEdit && (
+                          <div className="flex items-center gap-1">
+                            <Button size="icon" variant="ghost" className="h-6 w-6 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700" onClick={() => handleStartEditOtros(item as any)} title="Editar">
+                              <Pencil className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button size="icon" variant="ghost" className="h-6 w-6 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/40" onClick={() => handleDeleteOtros(item as any)} title="Eliminar">
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        )}
+                      </div>
                     </div>
                     <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap font-sans">{item.observaciones}</p>
                   </div>
@@ -1714,6 +1785,41 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
         </DialogContent>
       </Dialog>
 
+      <Dialog open={editOtrosDialog} onOpenChange={setEditOtrosDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Editar Registro de Otros Laboratorios</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 my-2">
+            <div className="flex gap-3">
+              <div className="w-1/2">
+                <Label>Fecha</Label>
+                <Input type="date" value={editOtrosFecha} onChange={e => setEditOtrosFecha(e.target.value)} />
+              </div>
+              <div className="w-1/2">
+                <Label>Hora</Label>
+                <Input type="time" value={editOtrosHora} onChange={e => setEditOtrosHora(e.target.value)} />
+              </div>
+            </div>
+            <div>
+              <Label>Observaciones / Determinaciones</Label>
+              <Textarea 
+                placeholder="Ingrese los detalles, resultados, etc..." 
+                value={editOtrosTexto} 
+                onChange={e => setEditOtrosTexto(e.target.value)} 
+                className="min-h-[120px]"
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setEditOtrosDialog(false)}>Cancelar</Button>
+            <Button onClick={handleSaveEditOtros} disabled={!editOtrosTexto.trim()}>
+              <Save className="h-4 w-4 mr-2" /> Guardar Cambios
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <Dialog open={evolDialog} onOpenChange={setEvolDialog}>
         <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>