@universe-platform/ui 0.1.0-beta.5 → 0.1.0-beta.6

package/dist/index.js

@@ -742,15 +742,19 @@ var FORM_INPUTS = {
   DATE: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DatePickerCell, { value, onChange, column }),
   CURRENCY: ({ value, column, onChange }) => {
     const symbol = getCurrencySymbol(column.currencySymbol);
+    const [isFocused, setIsFocused] = import_react5.default.useState(false);
+    const displayValue = !isFocused && value !== void 0 && value !== null && value !== "" && !isNaN(Number(value)) ? new Intl.NumberFormat("en-US").format(Number(value)) : value !== void 0 && value !== null ? value : "";
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full h-full", children: [
       symbol && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none text-sm", children: symbol }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
-          type: "number",
+          type: isFocused ? "number" : "text",
           step: "any",
           className: `w-full h-8 ${symbol ? "pl-6 pr-2" : "px-2"} bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm`,
-          value: value !== void 0 && value !== null ? value : "",
+          value: displayValue,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
           onChange: (e) => {
             const val = e.target.value;
             onChange(val === "" ? "" : Number(val));
@@ -901,6 +905,7 @@ var FORM_INPUTS = {
 };
 
 // src/components/TableBlock/TableBlockClient.tsx
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function TableBlockClient({
   data: initialRecords,
@@ -918,6 +923,68 @@ function TableBlockClient({
   "data-testid": dataTestId
 }) {
   const { showError, addToast } = useToast();
+  const [columnWidths, setColumnWidths] = (0, import_react6.useState)({});
+  const [isMounted, setIsMounted] = (0, import_react6.useState)(false);
+  const tableKey = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.name) || "default";
+  const [page, setPage] = (0, import_react6.useState)(1);
+  const [limit, setLimit] = (0, import_react6.useState)(50);
+  const [totalRecords, setTotalRecords] = (0, import_react6.useState)(0);
+  const [totalPages, setTotalPages] = (0, import_react6.useState)(1);
+  (0, import_react6.useEffect)(() => {
+    if (typeof window !== "undefined") {
+      const savedWidths = localStorage.getItem(`table_widths_${tableKey}`);
+      if (savedWidths) {
+        try {
+          setColumnWidths(JSON.parse(savedWidths));
+        } catch (e) {
+        }
+      }
+      const savedSummary = localStorage.getItem(`table_summary_${tableKey}`);
+      if (savedSummary !== null) {
+        setShowSummary(savedSummary === "true");
+      }
+      const savedLimit = localStorage.getItem(`table_limit_${tableKey}`);
+      if (savedLimit) {
+        const parsed = parseInt(savedLimit, 10);
+        if ([20, 50, 100].includes(parsed)) {
+          setLimit(parsed);
+        }
+      }
+    }
+    setIsMounted(true);
+  }, [tableKey]);
+  const [showSummary, setShowSummary] = (0, import_react6.useState)(false);
+  const toggleSummary = () => {
+    setShowSummary((prev) => {
+      const next = !prev;
+      const tableKey2 = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.name) || "default";
+      localStorage.setItem(`table_summary_${tableKey2}`, String(next));
+      return next;
+    });
+  };
+  const [resizingCol, setResizingCol] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    if (!resizingCol) return;
+    const handleMouseMove = (e) => {
+      const diffX = resizingCol.startX - e.clientX;
+      const newWidth = Math.max(100, Math.min(500, resizingCol.startWidth + diffX));
+      setColumnWidths((prev) => __spreadProps(__spreadValues({}, prev), { [resizingCol.name]: newWidth }));
+    };
+    const handleMouseUp = () => {
+      setResizingCol(null);
+      setColumnWidths((prev) => {
+        const tableKey2 = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.name) || "default";
+        localStorage.setItem(`table_widths_${tableKey2}`, JSON.stringify(prev));
+        return prev;
+      });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingCol, schema]);
   const normalizeRecords = (records) => {
     return (records || []).map((row) => {
       var _c;
@@ -943,12 +1010,32 @@ function TableBlockClient({
       return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
     });
   };
+  const mergeColumnDefs = (0, import_react6.useCallback)((existingCols, incomingCols) => {
+    if (!incomingCols || incomingCols.length === 0) return existingCols || [];
+    if (!existingCols || existingCols.length === 0) return incomingCols;
+    const existingMap = new Map(existingCols.map((c) => [c.name, c]));
+    const merged = incomingCols.map((inc) => {
+      const ext = existingMap.get(inc.name);
+      if (ext) {
+        existingMap.delete(inc.name);
+        return __spreadValues(__spreadValues({}, ext), inc);
+      }
+      return inc;
+    });
+    for (const [, extCol] of existingMap) {
+      merged.push(extCol);
+    }
+    return merged.sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    });
+  }, []);
   const [localColumns, setLocalColumns] = (0, import_react6.useState)(() => (schema == null ? void 0 : schema.columns) || []);
   (0, import_react6.useEffect)(() => {
     if ((schema == null ? void 0 : schema.columns) && schema.columns.length > 0) {
-      setLocalColumns(schema.columns);
+      setLocalColumns((prev) => mergeColumnDefs(prev, schema.columns));
     }
-  }, [schema == null ? void 0 : schema.columns]);
+  }, [schema == null ? void 0 : schema.columns, mergeColumnDefs]);
   const [dirty, setDirty] = (0, import_react6.useState)({ added: [], modified: {}, deleted: [] });
   const dirtyRef = (0, import_react6.useRef)(dirty);
   (0, import_react6.useEffect)(() => {
@@ -995,29 +1082,57 @@ function TableBlockClient({
       setBaseRecordsMap(map);
     }
   }, [initialRecords]);
-  (0, import_react6.useEffect)(() => {
+  const refetchTableData = (0, import_react6.useCallback)((targetPage) => {
     const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
-    if (!tableId || !executeAction) return;
-    if (!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0 || (!initialRecords || initialRecords.length === 0)) {
-      executeAction("FETCH_TABLE_DATA", { tableId }).then((res) => {
-        var _a;
-        if (res) {
-          if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
-            setLocalColumns(res.schema.columns);
-          }
-          if (res.records && Array.isArray(res.records)) {
-            const norm = normalizeRecords(res.records);
-            const map = /* @__PURE__ */ new Map();
-            norm.forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
-            setBaseRecordsMap(map);
-            setData(mergeWithDirty(norm));
+    if (!tableId || !executeAction) return Promise.resolve();
+    const activePage = targetPage !== void 0 ? targetPage : page;
+    const skip = (activePage - 1) * limit;
+    return executeAction("FETCH_TABLE_DATA", { tableId, page: activePage, limit, skip }).then((res) => {
+      var _a;
+      if (res) {
+        if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, res.schema.columns));
+        }
+        if (res.records && Array.isArray(res.records)) {
+          const norm = normalizeRecords(res.records);
+          const map = /* @__PURE__ */ new Map();
+          norm.forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
+          setBaseRecordsMap(map);
+          setData(norm);
+        }
+        if (res.meta) {
+          const total = typeof res.meta.totalRecords === "number" ? res.meta.totalRecords : 0;
+          const pages = typeof res.meta.totalPages === "number" ? res.meta.totalPages : Math.ceil(total / limit) || 1;
+          setTotalRecords(total);
+          setTotalPages(pages);
+          if (activePage > pages && pages >= 1) {
+            setPage(pages);
           }
+        } else if (res.records && Array.isArray(res.records)) {
+          setTotalRecords(res.records.length);
+          setTotalPages(Math.ceil(res.records.length / limit) || 1);
         }
-      }).catch((err) => {
-        console.error("[TableBlock] Failed to auto-fetch table data:", err);
-      });
+      }
+    }).catch((err) => {
+      console.error("[TableBlock] Failed to auto-fetch table data:", err);
+    });
+  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, page, limit, executeAction, mergeWithDirty, mergeColumnDefs]);
+  (0, import_react6.useEffect)(() => {
+    refetchTableData();
+  }, [refetchTableData]);
+  const handleLimitChange = (newLimit) => {
+    setLimit(newLimit);
+    setPage(1);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(`table_limit_${tableKey}`, String(newLimit));
     }
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, schema == null ? void 0 : schema.columns, initialRecords, executeAction, mergeWithDirty]);
+  };
+  const handlePrevPage = () => {
+    setPage((prev) => Math.max(1, prev - 1));
+  };
+  const handleNextPage = () => {
+    setPage((prev) => Math.min(totalPages, prev + 1));
+  };
   (0, import_react6.useEffect)(() => {
     if (error) {
       showError(error, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E8\u05DB\u05D9\u05D1");
@@ -1064,10 +1179,144 @@ function TableBlockClient({
       refetchRelation(col.name);
     });
   }, [schemaColsString, refetchRelation]);
+  const normalizedColumns = (0, import_react6.useMemo)(() => {
+    return (localColumns || []).map((col, idx) => {
+      const isRequired = col.isRequired === true || String(col.isRequired) === "true";
+      const isUnique = col.isUnique === true || String(col.isUnique) === "true";
+      const isProtected = isRequired || isUnique;
+      return __spreadProps(__spreadValues({}, col), {
+        order: typeof col.order === "number" ? col.order : idx,
+        isHidden: isProtected ? false : Boolean(col.isHidden)
+      });
+    }).sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    });
+  }, [localColumns]);
   const filteredColumns = (0, import_react6.useMemo)(() => {
     const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
-    return (localColumns || []).filter((col) => !systemFields.includes(col.name));
-  }, [localColumns]);
+    return normalizedColumns.filter((col) => !systemFields.includes(col.name) && !col.isHidden);
+  }, [normalizedColumns]);
+  const customizableColumns = (0, import_react6.useMemo)(() => {
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    return normalizedColumns.filter((col) => !systemFields.includes(col.name));
+  }, [normalizedColumns]);
+  const [isColumnsDropdownOpen, setIsColumnsDropdownOpen] = (0, import_react6.useState)(false);
+  const dropdownRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsColumnsDropdownOpen(false);
+      }
+    };
+    if (isColumnsDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isColumnsDropdownOpen]);
+  const handleShowAllColumns = async () => {
+    var _a;
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const updatedCustomCols = customizableColumns.map((col) => __spreadProps(__spreadValues({}, col), {
+      isHidden: false
+    }));
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save show all columns:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D4\u05E6\u05D2\u05EA \u05DB\u05DC \u05D4\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
+  const handleToggleColumnVisibility = async (colName, isVisible) => {
+    var _a;
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const updatedCustomCols = customizableColumns.map((col) => {
+      const isRequired = col.isRequired === true || String(col.isRequired) === "true";
+      const isUnique = col.isUnique === true || String(col.isUnique) === "true";
+      const isProtected = isRequired || isUnique;
+      if (col.name === colName) {
+        if (isProtected) {
+          return __spreadProps(__spreadValues({}, col), { isHidden: false });
+        }
+        return __spreadProps(__spreadValues({}, col), { isHidden: !isVisible });
+      }
+      return __spreadProps(__spreadValues({}, col), {
+        isHidden: isProtected ? false : Boolean(col.isHidden)
+      });
+    });
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save column visibility:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E2\u05D3\u05DB\u05D5\u05DF \u05D4\u05E1\u05EA\u05E8\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
+  const [draggedColName, setDraggedColName] = (0, import_react6.useState)(null);
+  const [dragOverColName, setDragOverColName] = (0, import_react6.useState)(null);
+  const handleColumnReorder = async (draggedName, dropTargetName) => {
+    var _a;
+    if (draggedName === dropTargetName) return;
+    const currentCustomCols = [...customizableColumns];
+    const fromIndex = currentCustomCols.findIndex((c) => c.name === draggedName);
+    const toIndex = currentCustomCols.findIndex((c) => c.name === dropTargetName);
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
+    const [draggedItem] = currentCustomCols.splice(fromIndex, 1);
+    currentCustomCols.splice(toIndex, 0, draggedItem);
+    const updatedCustomCols = currentCustomCols.map((col, idx) => __spreadProps(__spreadValues({}, col), {
+      order: idx
+    }));
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save column reorder:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E2\u05D3\u05DB\u05D5\u05DF \u05E1\u05D3\u05E8 \u05D4\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
   const generateTempId = () => `temp_${Math.random().toString(36).substr(2, 9)}`;
   const handleAddRow = () => {
     const defaultData = {};
@@ -1097,6 +1346,34 @@ function TableBlockClient({
     setData((prev) => [newRow, ...prev]);
     setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
   };
+  const handleDuplicateRow = () => {
+    if (selectedIds.size !== 1) return;
+    const targetId = Array.from(selectedIds)[0];
+    const sourceRow = data.find((r) => r.id === targetId);
+    if (!sourceRow) return;
+    const uniqueColNames = new Set(
+      (localColumns || []).filter((c) => c.isUnique === true || String(c.isUnique) === "true").map((c) => c.name)
+    );
+    const fieldsToScrub = /* @__PURE__ */ new Set(["id", "_id", "createdAt", "updatedAt", "created_at", "updated_at"]);
+    const clonedData = __spreadValues({}, sourceRow.data);
+    Object.keys(clonedData).forEach((key) => {
+      var _a;
+      if (fieldsToScrub.has(key) || uniqueColNames.has(key)) {
+        const col = (localColumns || []).find((c) => c.name === key);
+        const typeUpper = (_a = col == null ? void 0 : col.type) == null ? void 0 : _a.toUpperCase();
+        if (typeUpper === "NUMBER" || typeUpper === "CURRENCY") {
+          clonedData[key] = 0;
+        } else if (typeUpper === "BOOLEAN") {
+          clonedData[key] = false;
+        } else {
+          clonedData[key] = "";
+        }
+      }
+    });
+    const newRow = { id: generateTempId(), data: clonedData };
+    setData((prev) => [newRow, ...prev]);
+    setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
+  };
   const handleCellChange = (rowId, colName, value) => {
     setData((prev) => prev.map(
       (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
@@ -1317,6 +1594,7 @@ function TableBlockClient({
         return next;
       });
       setDirty({ added: [], modified: {}, deleted: [] });
+      await refetchTableData();
       setIsSaveSuccess(true);
       setTimeout(() => {
         setIsSaveSuccess(false);
@@ -1340,12 +1618,30 @@ function TableBlockClient({
   }, [data, searchQuery]);
   const isUpdatingActive = Boolean(isUpdating || isSaving);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
+  const columnTotals = (0, import_react6.useMemo)(() => {
+    const totals = {};
+    if (!showSummary) return totals;
+    filteredColumns.forEach((col) => {
+      var _a;
+      const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
+      if (typeUpper === "CURRENCY" || typeUpper === "NUMBER") {
+        const sum = filteredData.reduce((acc, row) => {
+          var _a2;
+          const val = (_a2 = row.data) == null ? void 0 : _a2[col.name];
+          const num = Number(val);
+          return acc + (isNaN(num) ? 0 : num);
+        }, 0);
+        totals[col.name] = sum;
+      }
+    });
+    return totals;
+  }, [filteredData, filteredColumns, showSummary]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       id: componentId,
       "data-testid": dataTestId || (componentId ? `table-block-${componentId}` : void 0),
-      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs overflow-hidden ${className}`,
+      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs min-h-[350px] overflow-hidden ${className}`,
       dir: "rtl",
       children: [
         errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -1365,6 +1661,16 @@ function TableBlockClient({
                 children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
               }
             ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: handleDuplicateRow,
+                disabled: isLoading || isUpdatingActive || selectedIds.size !== 1,
+                className: "w-9 h-9 bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-700 rounded-lg shadow-2xs flex items-center justify-center transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
+                title: "\u05E9\u05DB\u05E4\u05DC \u05E9\u05D5\u05E8\u05D4 \u05E0\u05D1\u05D7\u05E8\u05EA",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "button",
               {
@@ -1378,6 +1684,112 @@ function TableBlockClient({
                 ]
               }
             ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "button",
+              {
+                onClick: toggleSummary,
+                disabled: isLoading || isUpdatingActive,
+                className: `h-9 px-3 border font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer ${showSummary ? "bg-indigo-50 border-indigo-200 text-indigo-700 hover:bg-indigo-100" : "bg-white border-slate-300 text-slate-700 hover:bg-slate-100"}`,
+                title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E9\u05D5\u05E8\u05EA \u05E1\u05D9\u05DB\u05D5\u05DD",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hidden sm:inline", children: "\u05E1\u05DB\u05D9\u05DE\u05D4" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  onClick: () => setIsColumnsDropdownOpen((prev) => !prev),
+                  disabled: isLoading || isUpdatingActive,
+                  className: "h-9 px-3 bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
+                  title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 text-slate-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: `w-3.5 h-3.5 text-slate-500 transition-transform ${isColumnsDropdownOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+                  ]
+                }
+              ),
+              isColumnsDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-56 bg-white border border-slate-200 rounded-xl shadow-xl z-50 p-1.5 dir-rtl animate-in fade-in slide-in-from-top-2 duration-150", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-2 py-1.5 text-xs font-bold text-slate-500 border-b border-slate-100 mb-1 flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u05D4\u05E6\u05D2\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[10px] font-normal text-slate-400", children: [
+                      "(",
+                      customizableColumns.filter((c) => !c.isHidden).length,
+                      "/",
+                      customizableColumns.length,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleShowAllColumns,
+                      className: "text-xs text-brand hover:text-brand-hover font-semibold hover:underline cursor-pointer",
+                      children: "\u05D4\u05E6\u05D2 \u05D4\u05DB\u05DC"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-h-60 overflow-y-auto space-y-0.5", children: customizableColumns.map((col) => {
+                  const isRequired = col.isRequired === true || String(col.isRequired) === "true";
+                  const isUnique = col.isUnique === true || String(col.isUnique) === "true";
+                  const isProtected = isRequired || isUnique;
+                  const isVisible = !col.isHidden;
+                  let protectedExplanation = "";
+                  if (isRequired && isUnique) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 \u05D5\u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
+                  } else if (isRequired) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
+                  } else if (isUnique) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
+                  }
+                  const badgeLabel = isRequired && isUnique ? "\u05D7\u05D5\u05D1\u05D4 + \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" : isRequired ? "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4" : "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9";
+                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    "div",
+                    {
+                      onClick: () => {
+                        if (!isProtected) {
+                          handleToggleColumnVisibility(col.name, !isVisible);
+                        }
+                      },
+                      title: isProtected ? protectedExplanation : void 0,
+                      className: `group flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition-colors select-none ${isProtected ? "opacity-75 bg-slate-50 border border-slate-100/70 cursor-not-allowed" : "hover:bg-slate-100 active:bg-slate-200 cursor-pointer"}`,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                            "input",
+                            {
+                              type: "checkbox",
+                              checked: isVisible,
+                              disabled: isProtected,
+                              onChange: () => {
+                              },
+                              className: "w-3.5 h-3.5 rounded border-slate-300 text-brand focus:ring-brand/20 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
+                        ] }),
+                        isProtected && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                          "div",
+                          {
+                            className: "flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-50 text-amber-800 border border-amber-200/80 cursor-help",
+                            title: protectedExplanation,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3 text-amber-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2.2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: badgeLabel })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    col.name
+                  );
+                }) })
+              ] })
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1390,7 +1802,16 @@ function TableBlockClient({
                   className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 text-slate-400 absolute right-2.5 top-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
+              searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSearchQuery(""),
+                  className: "absolute right-2.5 top-2.5 text-slate-400 hover:text-slate-600 transition-colors p-0.5 rounded-full hover:bg-slate-100 cursor-pointer",
+                  title: "Clear search",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.X, { className: "w-3.5 h-3.5" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 text-slate-400 absolute right-2.5 top-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-3", children: [
@@ -1412,14 +1833,14 @@ function TableBlockClient({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "overflow-x-auto relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `overflow-x-auto relative min-h-[260px] flex-1 transition-opacity duration-200 ${isMounted ? "opacity-100" : "opacity-0"}`, children: [
           isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full text-sm text-right border-collapse", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full text-sm text-right border-collapse table-auto", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border-b border-l border-slate-200 p-2.5 w-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border-b border-l border-slate-200 p-2.5 w-10 text-center shrink-0", style: { width: 50, minWidth: 50, maxWidth: 50 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "input",
                 {
                   type: "checkbox",
@@ -1429,9 +1850,79 @@ function TableBlockClient({
                   className: "w-4 h-4 rounded border-slate-300 text-brand"
                 }
               ) }),
-              filteredColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap min-w-[140px]", children: col.name }, col.name))
+              filteredColumns.map((col) => {
+                const isDragging = draggedColName === col.name;
+                const isDragOver = dragOverColName === col.name;
+                const currentWidth = columnWidths[col.name] || 200;
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "th",
+                  {
+                    style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+                    draggable: !isLoading && !isUpdatingActive,
+                    onDragStart: (e) => {
+                      e.dataTransfer.setData("text/plain", col.name);
+                      e.dataTransfer.effectAllowed = "move";
+                      setDraggedColName(col.name);
+                    },
+                    onDragOver: (e) => {
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "move";
+                      if (dragOverColName !== col.name) {
+                        setDragOverColName(col.name);
+                      }
+                    },
+                    onDragLeave: () => {
+                      if (dragOverColName === col.name) {
+                        setDragOverColName(null);
+                      }
+                    },
+                    onDrop: (e) => {
+                      e.preventDefault();
+                      if (draggedColName && draggedColName !== col.name) {
+                        handleColumnReorder(draggedColName, col.name);
+                      }
+                      setDraggedColName(null);
+                      setDragOverColName(null);
+                    },
+                    onDragEnd: () => {
+                      setDraggedColName(null);
+                      setDragOverColName(null);
+                    },
+                    className: `relative border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap select-none cursor-grab active:cursor-grabbing transition-colors ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : "hover:bg-slate-200/60"}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "div",
+                        {
+                          onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setResizingCol({ name: col.name, startWidth: currentWidth, startX: e.clientX });
+                          },
+                          className: "absolute left-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-brand active:bg-brand-hover z-20",
+                          title: "\u05E9\u05E0\u05D4 \u05D2\u05D5\u05D3\u05DC \u05E2\u05DE\u05D5\u05D3\u05D4"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between gap-2 group overflow-hidden", title: "\u05D2\u05E8\u05D5\u05E8 \u05DC\u05E9\u05D9\u05E0\u05D5\u05D9 \u05E1\u05D3\u05E8 \u05D4\u05E2\u05DE\u05D5\u05D3\u05D4", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: col.name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "svg",
+                          {
+                            className: "w-3.5 h-3.5 text-slate-400 opacity-40 group-hover:opacity-100 transition-opacity shrink-0 cursor-grab",
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            stroke: "currentColor",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 9h.01M8 15h.01M16 9h.01M16 15h.01" })
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  col.name
+                );
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "w-full min-w-[50px] border-b border-slate-200 pointer-events-none" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: filteredColumns.length + 1, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: filteredColumns.length + 2, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
             ] }) }) }) : filteredData.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
@@ -1477,8 +1968,82 @@ function TableBlockClient({
                     }
                   }
                 ) }, col.name);
-              })
-            ] }, row.id)) })
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
+            ] }, row.id)) }),
+            showSummary && filteredData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tfoot", { className: "bg-slate-50 border-t-2 border-slate-300 sticky bottom-0 z-10 shadow-[0_-2px_4px_rgba(0,0,0,0.02)]", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center font-bold text-slate-600 text-xs", children: '\u05E1\u05D4"\u05DB' }),
+              filteredColumns.map((col) => {
+                var _a;
+                const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
+                const isNumeric = typeUpper === "CURRENCY" || typeUpper === "NUMBER";
+                const total = columnTotals[col.name];
+                let displayVal = "";
+                if (isNumeric && total !== void 0) {
+                  displayVal = new Intl.NumberFormat("en-US").format(total);
+                  if (typeUpper === "CURRENCY") {
+                    const symbol = getCurrencySymbol(col.currencySymbol);
+                    displayVal = symbol ? `${symbol} ${displayVal}` : displayVal;
+                  }
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-l border-slate-200 p-2 text-sm font-semibold text-slate-700 bg-slate-50 relative", children: isNumeric && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center text-right justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: displayVal }) }) }, col.name);
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-slate-200 bg-slate-50 pointer-events-none" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 bg-slate-50 border-t border-slate-200 text-xs text-slate-600 rounded-b-xl", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-medium text-slate-700", children: "\u05E9\u05D5\u05E8\u05D5\u05EA \u05DC\u05E2\u05DE\u05D5\u05D3:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "select",
+              {
+                value: limit,
+                onChange: (e) => handleLimitChange(Number(e.target.value)),
+                disabled: isLoading || isUpdatingActive,
+                className: "bg-white border border-slate-300 rounded-lg px-2.5 py-1 text-slate-700 font-semibold shadow-2xs cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand disabled:opacity-50",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 20, children: "20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 50, children: "50" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 100, children: "100" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-medium text-slate-600", children: [
+              "\u05E2\u05DE\u05D5\u05D3 ",
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "text-slate-900", children: page }),
+              " \u05DE\u05EA\u05D5\u05DA ",
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "text-slate-900", children: totalPages || 1 }),
+              totalRecords > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-slate-500 font-normal", children: [
+                " (",
+                totalRecords,
+                ' \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D1\u05E1\u05D4"\u05DB)'
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handlePrevPage,
+                  disabled: page <= 1 || isLoading || isUpdatingActive,
+                  className: "px-3 py-1.5 bg-white border border-slate-300 hover:bg-slate-100 font-semibold text-slate-700 rounded-lg shadow-2xs disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                  title: "\u05E2\u05DE\u05D5\u05D3 \u05E7\u05D5\u05D3\u05DD",
+                  children: "\u05D4\u05E7\u05D5\u05D3\u05DD"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleNextPage,
+                  disabled: page >= totalPages || isLoading || isUpdatingActive,
+                  className: "px-3 py-1.5 bg-white border border-slate-300 hover:bg-slate-100 font-semibold text-slate-700 rounded-lg shadow-2xs disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                  title: "\u05E2\u05DE\u05D5\u05D3 \u05D4\u05D1\u05D0",
+                  children: "\u05D4\u05D1\u05D0"
+                }
+              )
+            ] })
           ] })
         ] })
       ]