@algorithm-shift/design-system 1.3.107 → 1.3.108

package/dist/index.js

@@ -3665,6 +3665,7 @@ var React11 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_react_table2 = require("@tanstack/react-table");
+var import_axios3 = __toESM(require("axios"));
 var import_lucide_react12 = require("lucide-react");
 
 // src/components/ui/table.tsx
@@ -4101,13 +4102,153 @@ function DataTable({
   onDeleteRow,
   rowActions,
   enableRowSelection = false,
-  getRowSelection
+  getRowSelection,
+  tableId,
+  manageColumns = false,
+  preferenceUrl,
+  axiosInstance
 }) {
   const [columnFilters, setColumnFilters] = React11.useState([]);
   const [columnVisibility, setColumnVisibility] = React11.useState({});
+  const hasLoadedInitialState = React11.useRef(false);
+  const isSavingRef = React11.useRef(false);
+  const isFetchingRef = React11.useRef(false);
+  const transformApiToFrontend = React11.useCallback((apiSettings, allColumnIds) => {
+    if (!apiSettings || !apiSettings.columns || !apiSettings.columns.visible) {
+      return {};
+    }
+    const visibleColumns = apiSettings.columns.visible;
+    const result = {};
+    allColumnIds.forEach((colId) => {
+      result[colId] = visibleColumns.includes(colId);
+    });
+    return result;
+  }, []);
+  const transformFrontendToApi = React11.useCallback((visibility) => {
+    const visibleColumns = Object.keys(visibility).filter((colId) => visibility[colId] === true);
+    return {
+      columns: {
+        visible: visibleColumns
+      }
+    };
+  }, []);
+  const fetchColumnPreferences = React11.useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    if (!tableId || !manageColumns) {
+      hasLoadedInitialState.current = true;
+      return;
+    }
+    isFetchingRef.current = true;
+    try {
+      const entityKey = `table:${tableId}`;
+      const apiUrl = `${preferenceUrl}/${encodeURIComponent(entityKey)}`;
+      const axiosClient = axiosInstance ?? import_axios3.default;
+      const response = await axiosClient.get(apiUrl, {
+        withCredentials: true
+      });
+      if (response) {
+        const data2 = response.data;
+        if (data2.success && data2.data && data2.data.exists && data2.data.settings) {
+          let allColumnIds = [];
+          if (tableRef.current) {
+            allColumnIds = tableRef.current.getAllLeafColumns().map((col) => col.id).filter(Boolean);
+          } else {
+            allColumnIds = columns.map((col) => {
+              if (typeof col.id === "string") {
+                return col.id;
+              }
+              if (col.accessorKey) {
+                return col.accessorKey;
+              }
+              return null;
+            }).filter((id) => !!id);
+            if (enableRowSelection && !allColumnIds.includes("__select__")) {
+              allColumnIds.unshift("__select__");
+            }
+          }
+          if (allColumnIds.length > 0) {
+            const transformed = transformApiToFrontend(data2.data.settings, allColumnIds);
+            console.log("[DataTable] Loaded column preferences:", {
+              visibleColumns: data2.data.settings.columns?.visible,
+              allColumnIds,
+              transformed
+            });
+            if (Object.keys(transformed).length > 0) {
+              setColumnVisibility(transformed);
+            }
+          }
+        } else {
+          console.log("[DataTable] No saved preferences found, using default visibility");
+        }
+      } else {
+        console.warn("Failed to fetch column preferences:", response);
+      }
+    } catch (error) {
+      console.error("Error fetching column preferences:", error);
+    } finally {
+      hasLoadedInitialState.current = true;
+      isFetchingRef.current = false;
+    }
+  }, [tableId, transformApiToFrontend, manageColumns]);
+  const saveColumnPreferences = React11.useCallback(async (visibility) => {
+    if (!tableId || isSavingRef.current || !manageColumns) {
+      return;
+    }
+    isSavingRef.current = true;
+    try {
+      const entityKey = `table:${tableId}`;
+      const apiUrl = `${preferenceUrl}/${encodeURIComponent(entityKey)}`;
+      const settings = transformFrontendToApi(visibility);
+      const requestBody = {
+        settings,
+        is_default: true
+      };
+      const axiosClient = axiosInstance ?? import_axios3.default;
+      const response = await axiosClient.post(apiUrl, requestBody, {
+        withCredentials: true
+      });
+      if (!response) {
+        console.error("Failed to save column preferences:", response);
+      }
+    } catch (error) {
+      console.error("Error saving column preferences:", error);
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [tableId, transformFrontendToApi, manageColumns]);
+  React11.useEffect(() => {
+    if (hasLoadedInitialState.current || isFetchingRef.current) {
+      return;
+    }
+    if (!tableId) {
+      return;
+    }
+    if (manageColumns) {
+      fetchColumnPreferences();
+    }
+  }, [tableId, manageColumns]);
   const [manualSort, setManualSort] = React11.useState(null);
   const [searchTerm, setSearchTerm] = React11.useState("");
   const tableData = Array.isArray(data) ? data : [];
+  const filteredData = React11.useMemo(() => {
+    if (paginationMode === "client" && globalSearch && searchTerm.trim()) {
+      const searchLower = searchTerm.toLowerCase().trim();
+      return tableData.filter((row) => {
+        return columns.some((column) => {
+          const columnId = typeof column.id === "string" ? column.id : column.accessorKey;
+          if (!columnId) return false;
+          const accessorFn = column.accessorFn;
+          const cellValue = accessorFn ? accessorFn(row, 0) : row[columnId];
+          const cellValueStr = cellValue != null ? String(cellValue).toLowerCase() : "";
+          return cellValueStr.includes(searchLower);
+        });
+      });
+    }
+    return tableData;
+  }, [tableData, searchTerm, paginationMode, globalSearch, columns]);
+  const finalData = paginationMode === "client" && globalSearch ? filteredData : tableData;
   const finalCols = [...columns];
   if (enableRowSelection) {
     finalCols.unshift({
@@ -4134,44 +4275,89 @@ function DataTable({
   const dynamicCols = useDynamicColumns({ columns: finalCols, enableRowSelection });
   const [rowSelection, setRowSelection] = React11.useState({});
   const [localPageSize, setLocalPageSize] = React11.useState(pageSize);
+  const [localPageIndex, setLocalPageIndex] = React11.useState(0);
+  const isUpdatingPageSizeRef = React11.useRef(false);
+  const tableRef = React11.useRef(null);
+  React11.useEffect(() => {
+    if (paginationMode === "client") {
+      setLocalPageSize(pageSize);
+    }
+  }, [pageSize, paginationMode]);
   const table = (0, import_react_table2.useReactTable)({
-    data: tableData,
+    data: finalData,
     columns: dynamicCols,
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize
+      }
+    },
     state: {
       columnFilters,
       columnVisibility,
       rowSelection,
-      ...paginationMode === "server" ? {
-        pagination: {
-          pageIndex: controlledPageIndex ?? 0,
-          pageSize: localPageSize
-        }
-      } : {}
+      pagination: {
+        pageIndex: paginationMode === "server" ? controlledPageIndex ?? 0 : localPageIndex,
+        pageSize: localPageSize
+      }
     },
     enableRowSelection: !!enableRowSelection,
     onRowSelectionChange: (updater) => {
       setRowSelection((old) => {
         const newState = typeof updater === "function" ? updater(old) : updater;
-        const selectedData = Object.keys(newState).filter((key) => newState[key]).map((rowId) => tableData[Number(rowId)]);
+        const selectedData = Object.keys(newState).filter((key) => newState[key]).map((rowId) => finalData[Number(rowId)]);
         getRowSelection?.({ rows: selectedData });
         return newState;
       });
     },
     onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
+    onColumnVisibilityChange: (updater) => {
+      setColumnVisibility((old) => {
+        const newState = typeof updater === "function" ? updater(old) : updater;
+        setTimeout(() => {
+          if (tableRef.current && tableId && hasLoadedInitialState.current) {
+            try {
+              const completeVisibility = {};
+              tableRef.current.getAllLeafColumns().forEach((column) => {
+                completeVisibility[column.id] = column.getIsVisible();
+              });
+              if (Object.keys(completeVisibility).length > 0) {
+                saveColumnPreferences(completeVisibility);
+              }
+            } catch (error) {
+              console.error("Error saving column visibility to API:", error);
+            }
+          }
+        }, 0);
+        return newState;
+      });
+    },
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
     getFilteredRowModel: (0, import_react_table2.getFilteredRowModel)(),
     getPaginationRowModel: pagination && paginationMode === "client" ? (0, import_react_table2.getPaginationRowModel)() : void 0,
     manualPagination: paginationMode === "server",
     pageCount: paginationMode === "server" ? Math.ceil(totalRecords / localPageSize) : void 0,
-    ...paginationMode === "server" ? {
-      onPaginationChange: (updater) => {
-        const prev = table.getState().pagination;
-        const next = typeof updater === "function" ? updater(prev) : updater;
+    onPaginationChange: (updater) => {
+      if (isUpdatingPageSizeRef.current) {
+        isUpdatingPageSizeRef.current = false;
+        return;
+      }
+      const prev = table.getState().pagination;
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      if (paginationMode === "server") {
         onPageChange?.(next.pageIndex, next.pageSize);
+      } else {
+        setLocalPageIndex(next.pageIndex);
+        setLocalPageSize(next.pageSize);
       }
-    } : {}
+    }
   });
+  React11.useEffect(() => {
+    tableRef.current = table;
+    if (table && !hasLoadedInitialState.current && !isFetchingRef.current && tableId) {
+      fetchColumnPreferences();
+    }
+  }, [table, tableId]);
   const getPageNumbers = (currentPage, totalPages, maxVisiblePages = 5) => {
     if (totalPages <= maxVisiblePages) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -4194,17 +4380,26 @@ function DataTable({
   const pageCount = table.getPageCount() === 0 ? 1 : table.getPageCount();
   const handlePageSizeChange = (e) => {
     const newSize = Number(e.target.value);
-    const currentPageIndex = table.getState().pagination.pageIndex;
-    onPageChange?.(currentPageIndex, newSize);
-    setLocalPageSize(newSize);
+    if (paginationMode === "server") {
+      const currentPageIndex = table.getState().pagination.pageIndex;
+      onPageChange?.(currentPageIndex, newSize);
+      setLocalPageSize(newSize);
+    } else {
+      isUpdatingPageSizeRef.current = true;
+      setLocalPageSize(newSize);
+      setLocalPageIndex(0);
+    }
   };
   const pageSizeOptions = React11.useMemo(() => {
+    if (paginationMode === "client") {
+      return [5, 10, 20, 50, 100];
+    }
     const options = [5, 10, 20, 50, 100].filter((size) => size < totalRecords);
     if (options.length === 0) {
       options.push(5);
     }
     return options;
-  }, [totalRecords]);
+  }, [paginationMode, totalRecords]);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
     !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex justify-between p-2 bg-gray-50", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-4 w-full", children: [
@@ -4220,10 +4415,17 @@ function DataTable({
                 type: "text",
                 placeholder: "Search...",
                 value: searchTerm,
-                onChange: (e) => setSearchTerm(e.target.value),
+                onChange: (e) => {
+                  setSearchTerm(e.target.value);
+                  if (paginationMode === "client") {
+                    setLocalPageIndex(0);
+                  }
+                },
                 onKeyDown: (e) => {
-                  if (e.key === "Enter" && onGlobalSearch) {
-                    onGlobalSearch(searchTerm.trim());
+                  if (e.key === "Enter") {
+                    if (paginationMode === "server" && onGlobalSearch) {
+                      onGlobalSearch(searchTerm.trim());
+                    }
                   }
                 },
                 className: "border border-gray-300 rounded-md text-sm px-3 py-2 pl-8 w-full focus:outline-none focus:ring-1 focus:ring-[#12715B]"
@@ -4231,7 +4433,7 @@ function DataTable({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react12.Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          paginationMode === "server" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Button,
             {
               size: "sm",
@@ -4242,7 +4444,7 @@ function DataTable({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover, { children: [
+      manageColumns && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Button,
           {
@@ -4252,42 +4454,44 @@ function DataTable({
             children: "Manage Columns"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              "input",
-              {
-                type: "checkbox",
-                checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
-                ref: (input) => {
-                  if (input) {
-                    input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
-                  }
-                },
-                onChange: (e) => {
-                  table.getAllLeafColumns().forEach(
-                    (col) => col.toggleVisibility(e.target.checked)
-                  );
-                }
-              }
-            ),
-            "Toggle All"
-          ] }),
-          table.getAllLeafColumns().map((column) => {
-            const header = column.columnDef.header;
-            return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "max-h-56 overflow-y-auto pr-1 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "input",
                 {
                   type: "checkbox",
-                  checked: column.getIsVisible(),
-                  onChange: (e) => column.toggleVisibility(e.target.checked)
+                  checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
+                  ref: (input) => {
+                    if (input) {
+                      input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+                    }
+                  },
+                  onChange: (e) => {
+                    table.getAllLeafColumns().forEach(
+                      (col) => col.toggleVisibility(e.target.checked)
+                    );
+                  }
                 }
               ),
-              typeof header === "function" ? header({ column, header, table }) : typeof header === "string" ? header : column.id
-            ] }, column.id);
-          })
+              "Toggle All"
+            ] }),
+            table.getAllLeafColumns().map((column) => {
+              const header = column.columnDef.header;
+              return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: column.getIsVisible(),
+                    onChange: (e) => column.toggleVisibility(e.target.checked)
+                  }
+                ),
+                typeof header === "function" ? header({ column, header, table }) : typeof header === "string" ? header : column.id
+              ] }, column.id);
+            })
+          ] })
         ] })
       ] })
     ] }),
@@ -4386,7 +4590,22 @@ function DataTable({
           `header-${header.id}-${index}`
         );
       }) }, `header-group-${hg.id}`)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableCell, { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: table.getHeaderGroups()[0].headers.map((header, j) => {
+        const column = header.column;
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          TableCell,
+          {
+            className: "p-3",
+            style: {
+              width: column.getSize(),
+              minWidth: column.columnDef.minSize,
+              maxWidth: column.columnDef.maxSize
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "h-4 bg-gray-200 rounded w-full block animate-pulse" })
+          },
+          j
+        );
+      }) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
         const isLastCell = cellIndex === arr.length - 1;
@@ -5823,7 +6042,7 @@ function Navbar({
 
 // src/components/Chart/BarChart.tsx
 var import_react36 = __toESM(require("react"));
-var import_axios3 = __toESM(require("axios"));
+var import_axios4 = __toESM(require("axios"));
 var import_recharts = require("recharts");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var getRandomColor = () => {
@@ -5903,7 +6122,7 @@ var ChartComponent = ({
         page: page.toString(),
         limit: limit.toString()
       });
-      const axiosClient = props.axiosInstance ?? import_axios3.default;
+      const axiosClient = props.axiosInstance ?? import_axios4.default;
       const res = await axiosClient.get(`${apiUrl}?${params.toString()}`, {
         withCredentials: true
       });
@@ -6131,7 +6350,7 @@ var BarChart_default = import_react36.default.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
 var import_react37 = __toESM(require("react"));
-var import_axios4 = __toESM(require("axios"));
+var import_axios5 = __toESM(require("axios"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var getRandomColor2 = () => {
@@ -6220,7 +6439,7 @@ var DonutChart = ({
     const fetchData = async () => {
       try {
         setLocalLoading(true);
-        const axiosClient = props.axiosInstance ?? import_axios4.default;
+        const axiosClient = props.axiosInstance ?? import_axios5.default;
         const res = await axiosClient.get(apiUrl, {
           withCredentials: true
         });