@algorithm-shift/design-system 1.2.61 → 1.2.63

package/dist/index.js

@@ -27958,6 +27958,10 @@ function DatePicker({ className, style, ...props }) {
   const handleChange = (e) => {
     props.onChange?.(e);
   };
+  const toDateInputValue = (value) => {
+    if (!value) return "";
+    return new Date(value).toISOString().split("T")[0];
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-start items-center relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Calendar, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#BDBDBD]" }),
@@ -27970,7 +27974,7 @@ function DatePicker({ className, style, ...props }) {
           onChange: handleChange,
           disabled: isDisabled || !isEditable,
           name: props.name,
-          value: props.value || "",
+          value: toDateInputValue(props.value),
           className: cn(
             className,
             props.errorMessage ? "border-red-500" : "",
@@ -28327,10 +28331,10 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 };
 var TextInputGroup_default = TextInputGroup;
 
-// src/components/DataDisplay/Table/Table.tsx
-var import_react26 = require("react");
-
 // src/components/ui/data-table.tsx
+var React6 = __toESM(require("react"));
+var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/ui/table.tsx
@@ -28422,72 +28426,277 @@ function TableCell({ className, ...props }) {
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function DataTable({
   columns,
-  rowActions,
   data,
   loading,
-  getRowSelection,
-  onCellClick,
-  cellClickEnabled = () => false
+  pagination = false,
+  controlledPageIndex,
+  onPageChange,
+  pageSize = 10,
+  paginationMode = "client",
+  totalRecords = 0
 }) {
+  const [sorting, setSorting] = React6.useState([]);
+  const [columnFilters, setColumnFilters] = React6.useState([]);
+  const [columnVisibility, setColumnVisibility] = React6.useState({});
   const table = (0, import_react_table.useReactTable)({
     data,
     columns,
-    enableRowSelection: true,
-    onRowSelectionChange: getRowSelection ? (updaterOrValue) => {
-      const value = typeof updaterOrValue === "function" ? updaterOrValue(table.getState().rowSelection) : updaterOrValue;
-      getRowSelection(value);
-    } : void 0,
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      pagination: {
+        pageIndex: controlledPageIndex ?? 0,
+        pageSize
+      }
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getPaginationRowModel: pagination && paginationMode === "client" ? (0, import_react_table.getPaginationRowModel)() : void 0,
+    manualPagination: paginationMode === "server",
+    pageCount: paginationMode === "server" ? Math.ceil(totalRecords / pageSize) : void 0,
+    onPaginationChange: (updater) => {
+      const prev = table.getState().pagination;
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      onPageChange?.(next.pageIndex, next.pageSize);
+    }
   });
-  const handleCellClick = (rowData, columnId) => {
-    if (onCellClick) {
-      onCellClick(rowData, columnId);
+  const getPageNumbers = (currentPage, totalPages, maxVisiblePages = 5) => {
+    if (totalPages <= maxVisiblePages) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
+    const leftSiblingIndex = Math.max(currentPage - 1, 1);
+    const rightSiblingIndex = Math.min(currentPage + 1, totalPages);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      return [1, 2, 3, "...", totalPages];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      return [1, "...", totalPages - 2, totalPages - 1, totalPages];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages];
+    }
+    return [];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "overflow-hidden rounded-md border w-full", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Table3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHead, { children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
-        header.column.columnDef.header,
-        header.getContext()
-      ) }, header.id);
-    }) }, headerGroup.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-      TableRow,
-      {
-        "data-state": row.getIsSelected() && "selected",
-        className: "relative group",
-        children: [
-          row.getVisibleCells().map((cell) => {
-            const isCellClickable = cellClickEnabled(row.original, cell.column.id);
-            const dynamicClass = cell.column.columnDef.meta?.cellClass || "";
-            const dynamicStyle = cell.column.columnDef.meta?.cellStyle || {};
-            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "overflow-hidden rounded-md border w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex justify-end p-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "px-3 py-1 text-xs cursor-pointer",
+          children: "Manage Columns"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.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) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: column.getIsVisible(),
+              onChange: (e) => column.toggleVisibility(e.target.checked)
+            }
+          ),
+          column.columnDef.header?.toString() ?? column.id
+        ] }, column.id))
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Table3, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: hg.headers.map((header) => {
+        const canSort = header.column.getCanSort();
+        const canFilter = header.column.getCanFilter();
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableHead, { className: "relative select-none", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "span",
+            {
+              className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
+              onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+              children: [
+                (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
+                canSort && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+                  header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUp, { size: 14, className: "text-gray-500" }),
+                  header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowDown, { size: 14, className: "text-gray-500" }),
+                  !header.column.getIsSorted() && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                ] })
+              ]
+            }
+          ),
+          canFilter && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "span",
+              {
+                role: "presentation",
+                className: "pl-5 cursor-pointer",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons.faEllipsisH, className: "w-5 h-5 text-gray-500" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              PopoverContent,
               {
-                className: `${dynamicClass} ${isCellClickable ? "underline cursor-pointer" : ""}`,
-                style: dynamicStyle,
-                onClick: () => {
-                  if (isCellClickable) {
-                    handleCellClick(row.original, cell.column.id);
+                align: "start",
+                sideOffset: 4,
+                className: "w-50 p-3 z-[200] border-gray-300",
+                avoidCollisions: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                  "form",
+                  {
+                    onSubmit: (e) => {
+                      e.preventDefault();
+                      const formData = new FormData(e.currentTarget);
+                      const value = formData.get("filter");
+                      header.column.setFilterValue(value || void 0);
+                    },
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                        "input",
+                        {
+                          name: "filter",
+                          placeholder: "Search",
+                          defaultValue: header.column.getFilterValue() ?? "",
+                          className: "border-gray-300 border-1 block p-3 rounded-md text-xs w-full h-9 focus:ring-0 focus:border-gray-300 focus-visible:ring-0 focus-visible:border-gray-300 focus-visible:outline-none mt-2 font-normal",
+                          autoComplete: "off"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "justify-end flex", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                        Button,
+                        {
+                          type: "submit",
+                          className: "py-2 px-3 bg-[#12715B] text-white text-xs h-auto cursor-pointer",
+                          children: "Apply"
+                        }
+                      ) })
+                    ]
                   }
-                },
-                children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
-              },
-              cell.id
-            );
-          }),
-          rowActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "absolute top-0 right-0 bg-white py-3 min-w-[100px] z-50 shadow-md flex items-center justify-center gap-3 p-2 opacity-0 group-hover:opacity-100 duration-300 h-full", children: rowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[#383838] text-[12px] cursor-pointer font-[400]", children: action.header }, index)) })
-        ]
-      },
-      row.id
-    )) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) }) })
-  ] }) });
+                )
+              }
+            )
+          ] })
+        ] }) }, header.id);
+      }) }, hg.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableBody, { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+    ] }),
+    pagination && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage?.(),
+            className: "px-2 py-1 border rounded disabled:opacity-50 cursor-pointer",
+            children: "Prev"
+          }
+        ),
+        getPageNumbers(
+          table.getState().pagination.pageIndex + 1,
+          table.getPageCount(),
+          5
+        ).map((pageNum, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "button",
+          {
+            disabled: pageNum === "...",
+            onClick: () => typeof pageNum === "number" && table.setPageIndex(pageNum - 1),
+            className: `px-2 py-1 border rounded ${table.getState().pagination.pageIndex + 1 === pageNum ? "bg-[#12715B] text-white" : "bg-white"} ${pageNum === "..." ? "cursor-default" : "cursor-pointer"}`,
+            children: pageNum
+          },
+          index
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage?.(),
+            className: "px-2 py-1 border rounded disabled:opacity-50 cursor-pointer",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 
-// src/components/ui/pagination.tsx
+// src/components/DataDisplay/Table/Table.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
+var Table4 = ({
+  columns,
+  data,
+  rowActions,
+  className,
+  style,
+  pagination = false,
+  paginationMode = "client",
+  itemsPerPage = 10,
+  onPageChange,
+  page,
+  loading = false,
+  totalRecords = 0,
+  ...props
+}) => {
+  const rawColumns = Array.isArray(columns) ? columns : [];
+  const rawData = Array.isArray(data) ? data : [];
+  const isControlled = typeof page === "number";
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    DataTable,
+    {
+      ...props,
+      columns: rawColumns,
+      data: rawData,
+      rowActions,
+      loading,
+      pagination,
+      pageSize: itemsPerPage,
+      controlledPageIndex: isControlled ? page - 1 : void 0,
+      onPageChange: (pageIndex, pageSize) => {
+        onPageChange?.({ page: pageIndex + 1, itemsPerPage: pageSize });
+      },
+      paginationMode,
+      totalRecords
+    }
+  ) });
+};
+var Table_default = Table4;
+
+// src/components/ui/pagination.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "nav",
     {
       role: "navigation",
@@ -28502,7 +28711,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -28512,7 +28721,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -28520,7 +28729,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -28541,7 +28750,7 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
@@ -28549,8 +28758,8 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChevronLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChevronLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -28559,7 +28768,7 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to next page",
@@ -28567,8 +28776,8 @@ function PaginationNext({
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChevronRight, {})
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChevronRight, {})
       ]
     }
   );
@@ -28577,7 +28786,7 @@ function PaginationEllipsis({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "span",
     {
       "aria-hidden": true,
@@ -28585,15 +28794,15 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Ellipsis, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -28639,10 +28848,10 @@ var CustomPagination = ({
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         Select,
         {
           defaultValue: String(perPage),
@@ -28650,26 +28859,26 @@ var CustomPagination = ({
             onPageChange({ page: 1, itemsPerPage: Number(value) });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectValue, { placeholder: "Select" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "5", children: "5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "10", children: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "20", children: "20" }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem, { value: "50", children: "50" })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SelectItem, { value: "50", children: "50" })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PaginationContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Pagination, { className: "justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PaginationContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         PaginationPrevious,
         {
           onClick: () => handlePageChange(currentPage - 1),
           className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
         }
       ) }),
-      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         PaginationLink,
         {
           onClick: () => handlePageChange(pageNumber),
@@ -28678,7 +28887,7 @@ var CustomPagination = ({
           children: pageNumber
         }
       ) }, index)),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         PaginationNext,
         {
           onClick: () => handlePageChange(currentPage + 1),
@@ -28690,78 +28899,6 @@ var CustomPagination = ({
 };
 var Pagination_default = CustomPagination;
 
-// src/components/DataDisplay/Table/Table.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var Table4 = ({
-  columns,
-  data,
-  rowActions,
-  className,
-  style,
-  pagination = false,
-  paginationMode = "client",
-  itemsPerPage = 10,
-  onPageChange,
-  page,
-  loading = false,
-  totalRecords = 0,
-  ...props
-}) => {
-  const rawColumns = Array.isArray(columns) ? columns : [];
-  const rawData = Array.isArray(data) ? data : [];
-  const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const isControlled = typeof page === "number";
-  const [internalPage, setInternalPage] = (0, import_react26.useState)(1);
-  const currentPage = isControlled ? page : internalPage;
-  (0, import_react26.useEffect)(() => {
-    if (isControlled) return;
-    if (currentPage > 1 && !pagination) setInternalPage(1);
-  }, [pagination, isControlled]);
-  const enablePagination = pagination && (paginationMode === "server" ? totalRecords > itemsPerPage : rawData.length > itemsPerPage);
-  const handlePageChange = (options) => {
-    if (!isControlled) setInternalPage(options.page);
-    onPageChange?.(options);
-  };
-  const paginatedData = !enablePagination ? rawData : paginationMode === "server" ? rawData : rawData.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
-  const totalPages = enablePagination ? Math.max(
-    1,
-    Math.ceil(
-      (paginationMode === "server" ? totalRecords : rawData.length) / itemsPerPage
-    )
-  ) : 1;
-  const isCellClickEnabled = (row, id) => {
-    const selectedColumn = (columns || [])?.find((col) => col.accessorKey === id);
-    if (!selectedColumn) return false;
-    return selectedColumn.isClickable ?? false;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `${className || ""} space-y-3`, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      DataTable,
-      {
-        ...props,
-        columns: rawColumns,
-        data: paginatedData,
-        rowActions: rawRowActions,
-        loading,
-        cellClickEnabled: isCellClickEnabled
-      }
-    ),
-    enablePagination && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      Pagination_default,
-      {
-        perPage: itemsPerPage,
-        totalPages,
-        currentPage,
-        onPageChange: handlePageChange
-      }
-    )
-  ] });
-};
-var Table_default = Table4;
-
 // src/components/Navigation/Tabs/Tabs.tsx
 var import_link5 = __toESM(require("next/link"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -28843,23 +28980,22 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
       }
     )
   ] });
-  const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const forceDesktop = canvasMode === "desktop";
+  const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
+  const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className, style, children: [
-    forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
-    forceMobile && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: renderMobileMenu() }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "md:hidden", children: renderMobileMenu() })
+    forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "hidden md:flex", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
+    forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: renderMobileMenu() }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex md:hidden", children: renderMobileMenu() })
   ] });
 };
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react27 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react27.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react26.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "button",
         {
@@ -28891,10 +29027,10 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -28906,7 +29042,7 @@ var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -28915,7 +29051,7 @@ var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,