feat: reestructuracion para easypanel y variables de entorno

frontend/src/lib/useColumnasAjustables.jsx

@@ -0,0 +1,56 @@
+// src/lib/useColumnasAjustables.jsx
+// Hook para columnas redimensionables (arrastrar el borde, estilo Excel).
+import { useState, useEffect } from "react";
+
+export function useColumnasAjustables(anchosIniciales) {
+  const [anchos, setAnchos] = useState(anchosIniciales);
+
+  useEffect(() => {
+    if (anchos.length !== anchosIniciales.length) {
+      setAnchos(anchosIniciales);
+    }
+  }, [anchosIniciales.length]);
+
+  function iniciarResize(e, i) {
+    e.preventDefault();
+    e.stopPropagation();
+    const xInicial = e.clientX;
+    const anchoInicial = anchos[i];
+    function onMove(ev) {
+      const nuevo = Math.max(50, anchoInicial + (ev.clientX - xInicial));
+      setAnchos((prev) => { const c = [...prev]; c[i] = nuevo; return c; });
+    }
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    }
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+
+  function ColGroup() {
+    return (
+      <colgroup>
+        {anchos.map((w, i) => <col key={i} style={{ width: w, minWidth: w }} />)}
+      </colgroup>
+    );
+  }
+
+  function Resizer({ index }) {
+    return (
+      <span
+        onMouseDown={(e) => iniciarResize(e, index)}
+        className="col-resizer"
+        style={{ position: "absolute", top: 0, right: 0, width: 8, height: "100%",
+          cursor: "col-resize", userSelect: "none", zIndex: 5 }}
+      />
+    );
+  }
+
+  const anchoTotal = anchos.reduce((a, b) => a + b, 0);
+  const tableProps = {
+    style: { tableLayout: "fixed", width: "100%", minWidth: anchoTotal },
+  };
+
+  return { anchos, ColGroup, Resizer, anchoTotal, tableProps };
+}