@algorithm-shift/design-system 1.3.114 → 1.3.115

package/dist/index.mjs

@@ -4019,7 +4019,6 @@ function DataTable({
   onPageChange,
   pageSize = 10,
   paginationMode = "client",
-  totalRecords = 0,
   onSortChange,
   onFilterChange,
   onGlobalSearch,
@@ -4032,13 +4031,17 @@ function DataTable({
   tableId,
   manageColumns = false,
   preferenceUrl,
-  axiosInstance
+  axiosInstance,
+  meta,
+  enableTotalRecords,
+  getRowCount
 }) {
   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 [fetchLoading, setFetchLoading] = React11.useState(false);
   const transformApiToFrontend = React11.useCallback((apiSettings, allColumnIds) => {
     if (!apiSettings || !apiSettings.columns || !apiSettings.columns.visible) {
       return {};
@@ -4207,8 +4210,10 @@ function DataTable({
   React11.useEffect(() => {
     if (paginationMode === "client") {
       setLocalPageSize(pageSize);
+    } else if (paginationMode === "server" && meta?.limit != null) {
+      setLocalPageSize(meta.limit);
     }
-  }, [pageSize, paginationMode]);
+  }, [pageSize, paginationMode, meta?.limit]);
   const table = useReactTable({
     data: finalData,
     columns: dynamicCols,
@@ -4223,8 +4228,8 @@ function DataTable({
       columnVisibility,
       rowSelection,
       pagination: {
-        pageIndex: paginationMode === "server" ? controlledPageIndex ?? 0 : localPageIndex,
-        pageSize: localPageSize
+        pageIndex: paginationMode === "server" ? meta?.page != null ? meta.page - 1 : controlledPageIndex ?? 0 : localPageIndex,
+        pageSize: paginationMode === "server" && meta?.limit != null ? meta.limit : localPageSize
       }
     },
     enableRowSelection: !!enableRowSelection,
@@ -4262,7 +4267,7 @@ function DataTable({
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination && paginationMode === "client" ? getPaginationRowModel() : void 0,
     manualPagination: paginationMode === "server",
-    pageCount: paginationMode === "server" ? Math.ceil(totalRecords / localPageSize) : void 0,
+    // pageCount: paginationMode === 'server' ? Math.ceil(totalRecords / localPageSize) : undefined,
     onPaginationChange: (updater) => {
       if (isUpdatingPageSizeRef.current) {
         isUpdatingPageSizeRef.current = false;
@@ -4320,19 +4325,30 @@ function DataTable({
     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);
+    const base = [5, 10, 20, 50, 100];
+    if (meta?.limit != null && !base.includes(meta.limit)) {
+      const withMeta = [...base, meta.limit].sort((a, b) => a - b);
+      return withMeta;
     }
-    return options;
-  }, [paginationMode, totalRecords]);
+    return base;
+  }, [paginationMode, meta?.limit]);
   return /* @__PURE__ */ jsxs30("div", { className: "overflow-hidden rounded-md w-full", children: [
     !loading && /* @__PURE__ */ jsxs30("div", { className: "flex justify-between p-2 bg-gray-50", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-4 w-full", children: [
-        !!totalRecords && /* @__PURE__ */ jsxs30("p", { className: "text-sm font-medium", children: [
-          "Total Records : ",
-          totalRecords.toLocaleString("en-IN") || 0
-        ] }),
+        enableTotalRecords && /* @__PURE__ */ jsx51(
+          Button,
+          {
+            size: "sm",
+            className: "bg-[#12715B] text-white text-xs h-auto py-2 px-3 cursor-pointer",
+            onClick: async () => {
+              setFetchLoading(true);
+              await getRowCount?.();
+              setFetchLoading(false);
+            },
+            disabled: fetchLoading,
+            children: fetchLoading ? "Fetching..." : "Get Total Records"
+          }
+        ),
         globalSearch && /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
           /* @__PURE__ */ jsxs30("div", { className: "relative w-full", children: [
             /* @__PURE__ */ jsx51(
@@ -4532,18 +4548,18 @@ function DataTable({
           j
         );
       }) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx51(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
-        const meta = cell.column.columnDef.meta || {};
-        const isClickable = meta?.isClickable;
+        const meta2 = cell.column.columnDef.meta || {};
+        const isClickable = meta2?.isClickable;
         const isLastCell = cellIndex === arr.length - 1;
         return /* @__PURE__ */ jsxs30(
           TableCell,
           {
-            className: `break-words whitespace-normal align-top ${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2 `,
+            className: `break-words whitespace-normal align-top ${meta2?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2 `,
             style: {
               width: cell.column.getSize(),
               minWidth: cell.column.columnDef.minSize,
               maxWidth: cell.column.columnDef.maxSize,
-              ...meta?.cellStyle ?? {}
+              ...meta2?.cellStyle ?? {}
             },
             onClick: () => {
               if (isClickable && onCellClick) {
@@ -4582,7 +4598,7 @@ function DataTable({
       !loading && /* @__PURE__ */ jsx51("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ jsx51(
         "select",
         {
-          value: localPageSize,
+          value: paginationMode === "server" && meta?.limit != null ? meta.limit : localPageSize,
           onChange: handlePageSizeChange,
           className: "ml-2 border rounded py-1 text-sm cursor-pointer border-blue-600",
           children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs30("option", { value: size, children: [
@@ -4596,7 +4612,7 @@ function DataTable({
           "button",
           {
             onClick: () => table.previousPage(),
-            disabled: !table.getCanPreviousPage?.(),
+            disabled: paginationMode === "server" && meta != null ? (meta.page ?? 1) <= 1 : !table.getCanPreviousPage?.(),
             className: "px-2 py-1 border rounded disabled:opacity-50 cursor-pointer",
             children: "Prev"
           }
@@ -4605,7 +4621,7 @@ function DataTable({
           "button",
           {
             onClick: () => table.nextPage(),
-            disabled: !table.getCanNextPage?.(),
+            disabled: paginationMode === "server" && meta != null ? !meta.hasMore : !table.getCanNextPage?.(),
             className: "px-2 py-1 border rounded disabled:opacity-50 cursor-pointer",
             children: "Next"
           }
@@ -4656,7 +4672,6 @@ var Table2 = ({
         onPageChange?.({ page: pageIndex + 1, itemsPerPage: pageSize });
       },
       paginationMode,
-      totalRecords,
       onSortChange: (col, dir) => onSortChange?.({ sort_by: col, sort_order: dir }),
       onFilterChange: (filters) => onFilterChange?.({ columnKey: filters.columnKey, columnTerm: filters.columnTerm }),
       onGlobalSearch: (term) => onGlobalSearch?.({ searchTerm: term }),
@@ -5670,8 +5685,10 @@ var StagesComponent = ({
               const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
               const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
               const isActive = !isAllStagesCompleted && index === currentIndex;
+              const isLastStageWhenCompleted = isAllStagesCompleted && index === stages.length - 1;
+              const showAsActive = isActive || isLastStageWhenCompleted;
               let stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
-              let stageStyle = { borderColor: primaryColor, color: isActive ? "white" : primaryColor, backgroundColor: isActive ? primaryColor : "transparent" };
+              let stageStyle = { borderColor: primaryColor, color: showAsActive ? "white" : primaryColor, backgroundColor: showAsActive ? primaryColor : "transparent" };
               if (stage.hasOwnProperty("isSuccess") && stage.isSuccess === false) {
                 stageColor = `bg-red-50 text-red-700 border-2 border-red-700`;
                 stageStyle = { borderColor: "red", color: "red", backgroundColor: "transparent" };
@@ -5694,7 +5711,7 @@ var StagesComponent = ({
                     min-w-[70px] sm:min-w-[80px] w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 
                     rounded-full text-xs sm:text-sm font-medium transition-colors duration-200 
                     whitespace-normal sm:whitespace-nowrap flex-shrink-0 max-w-[150px] text-ellipsis overflow-hidden
-                    ${isActive ? `bg-[${primaryColor}] text-white shadow-md` : isCompletedStage ? stageColor : "bg-white border border-gray-200"}
+                    ${showAsActive ? `bg-[${primaryColor}] text-white shadow-md` : isCompletedStage ? stageColor : "bg-white border border-gray-200"}
                     ${isMobile ? "flex-1 text-center py-2.5" : ""}
                   `,
                     onClick: () => {
@@ -5819,7 +5836,8 @@ function Navbar({
   isBuilder = false,
   source,
   navList,
-  onSearch
+  onSearch,
+  primaryColor = "#2a55a3"
 }) {
   const router = useRouter2();
   const [screenMode, setScreenMode] = useState14(
@@ -5912,7 +5930,7 @@ function Navbar({
             /* @__PURE__ */ jsxs41(DropdownMenu, { children: [
               /* @__PURE__ */ jsx67(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
                 !isMobile && showName && /* @__PURE__ */ jsx67("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
-                /* @__PURE__ */ jsx67(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ jsx67(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ jsx67("div", { className: "bg-green-700 text-white h-full w-full rounded-full flex items-center justify-center text-xs", children: getInitials(userName) }) }),
+                /* @__PURE__ */ jsx67(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ jsx67(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ jsx67("div", { className: `bg-[${primaryColor}] text-white h-full w-full rounded-full flex items-center justify-center text-xs`, style: { backgroundColor: primaryColor }, children: getInitials(userName) }) }),
                 (isMobile || isTablet) && /* @__PURE__ */ jsx67(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx67(Menu2, { className: "h-6 w-6" }) })
               ] }) }),
               /* @__PURE__ */ jsxs41(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
@@ -6105,15 +6123,6 @@ var ChartComponent = ({
   }
   return /* @__PURE__ */ jsxs42("div", { className: `${className} h-[450px]`, style, children: [
     isPaginationEnabled && rawMeta && /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-between mb-4 px-2", children: [
-      /* @__PURE__ */ jsxs42("div", { className: "text-sm text-gray-600 hidden sm:block", children: [
-        "Page ",
-        rawMeta.page,
-        " of ",
-        rawMeta.pages,
-        " (",
-        rawMeta.total.toLocaleString(),
-        " total records)"
-      ] }),
       /* @__PURE__ */ jsxs42("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
         /* @__PURE__ */ jsx68(
           "button",