@algorithm-shift/design-system 1.3.113 → 1.3.115

package/dist/index.d.mts

@@ -239,6 +239,7 @@ interface NavbarProps extends ElementProps {
   source?: string;
   navList?: Record<string, any>;
   onSearch?: (search: { searchTerm: string }) => void;
+  primaryColor: string
 }
 
 interface BreadcrumbProps extends ElementProps {
@@ -500,7 +501,7 @@ declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, styl
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 
 declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, // desktop | mobile | tablet
-list, profileMenu, userName, isBuilder, source, navList, onSearch }: NavbarProps): react_jsx_runtime.JSX.Element;
+list, profileMenu, userName, isBuilder, source, navList, onSearch, primaryColor }: NavbarProps): react_jsx_runtime.JSX.Element;
 
 declare const _default$1: React$1.MemoExoticComponent<({ className, style, loading: externalLoading, dataKey, dataLabel, apiUrl, isPaginationEnabled, limit, canvasMode, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/index.d.ts

@@ -239,6 +239,7 @@ interface NavbarProps extends ElementProps {
   source?: string;
   navList?: Record<string, any>;
   onSearch?: (search: { searchTerm: string }) => void;
+  primaryColor: string
 }
 
 interface BreadcrumbProps extends ElementProps {
@@ -500,7 +501,7 @@ declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, styl
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 
 declare function Navbar({ style, badgeType, badgeCount, hideBadgeWhenZero, profileType, showName, imageUrl, altText, canvasMode, // desktop | mobile | tablet
-list, profileMenu, userName, isBuilder, source, navList, onSearch }: NavbarProps): react_jsx_runtime.JSX.Element;
+list, profileMenu, userName, isBuilder, source, navList, onSearch, primaryColor }: NavbarProps): react_jsx_runtime.JSX.Element;
 
 declare const _default$1: React$1.MemoExoticComponent<({ className, style, loading: externalLoading, dataKey, dataLabel, apiUrl, isPaginationEnabled, limit, canvasMode, ...props }: BarChartProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/index.js

@@ -4107,7 +4107,6 @@ function DataTable({
   onPageChange,
   pageSize = 10,
   paginationMode = "client",
-  totalRecords = 0,
   onSortChange,
   onFilterChange,
   onGlobalSearch,
@@ -4120,13 +4119,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 {};
@@ -4295,8 +4298,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 = (0, import_react_table2.useReactTable)({
     data: finalData,
     columns: dynamicCols,
@@ -4311,8 +4316,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,
@@ -4350,7 +4355,7 @@ function DataTable({
     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,
+    // pageCount: paginationMode === 'server' ? Math.ceil(totalRecords / localPageSize) : undefined,
     onPaginationChange: (updater) => {
       if (isUpdatingPageSizeRef.current) {
         isUpdatingPageSizeRef.current = false;
@@ -4408,19 +4413,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__ */ (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: [
-        !!totalRecords && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "text-sm font-medium", children: [
-          "Total Records : ",
-          totalRecords.toLocaleString("en-IN") || 0
-        ] }),
+        enableTotalRecords && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          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__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
           /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "relative w-full", children: [
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -4620,18 +4636,18 @@ function DataTable({
           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 meta2 = cell.column.columnDef.meta || {};
+        const isClickable = meta2?.isClickable;
         const isLastCell = cellIndex === arr.length - 1;
         return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           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) {
@@ -4667,55 +4683,33 @@ function DataTable({
       }) }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
     ] }),
     pagination && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between py-3 text-sm w-full", children: [
-      !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          "select",
-          {
-            value: localPageSize,
-            onChange: handlePageSizeChange,
-            className: "ml-2 border rounded py-1 text-sm cursor-pointer border-blue-600",
-            children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("option", { value: size, children: [
-              size,
-              " / page"
-            ] }, size))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-          "Page ",
-          table.getState().pagination.pageIndex + 1,
-          " of ",
-          pageCount
-        ] })
-      ] }),
+      !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "select",
+        {
+          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__ */ (0, import_jsx_runtime51.jsxs)("option", { value: size, children: [
+            size,
+            " / page"
+          ] }, size))
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "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"
           }
         ),
-        getPageNumbers(
-          table.getState().pagination.pageIndex + 1,
-          table.getPageCount(),
-          5
-        ).map((pageNum, index) => /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(
           "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"
           }
@@ -4766,7 +4760,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 }),
@@ -5776,8 +5769,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" };
@@ -5800,7 +5795,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: () => {
@@ -5925,7 +5920,8 @@ function Navbar({
   isBuilder = false,
   source,
   navList,
-  onSearch
+  onSearch,
+  primaryColor = "#2a55a3"
 }) {
   const router = (0, import_navigation3.useRouter)();
   const [screenMode, setScreenMode] = (0, import_react35.useState)(
@@ -6018,7 +6014,7 @@ function Navbar({
             /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(DropdownMenu, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center space-x-2 cursor-pointer", children: [
                 !isMobile && showName && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h4", { className: "text-gray-900 dark:text-gray-300 text-sm", children: userName }),
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "bg-green-700 text-white h-full w-full rounded-full flex items-center justify-center text-xs", children: getInitials(userName) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Avatar, { className: "h-8 w-8", children: profileType === "avatar" ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(AvatarImage, { src: "/images/appbuilder/toolset/profile.svg", alt: "profile" }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react18.Menu, { className: "h-6 w-6" }) })
               ] }) }),
               /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
@@ -6200,15 +6196,6 @@ var ChartComponent = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: `${className} h-[450px]`, style, children: [
     isPaginationEnabled && rawMeta && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-between mb-4 px-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "text-sm text-gray-600 hidden sm:block", children: [
-        "Page ",
-        rawMeta.page,
-        " of ",
-        rawMeta.pages,
-        " (",
-        rawMeta.total.toLocaleString(),
-        " total records)"
-      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center space-x-2 sm:hidden w-full justify-center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "button",