@quan-erp/shared-ui 1.0.0

package/dist/es/components/custom/data-table/data-table-page-size.js

@@ -0,0 +1,49 @@
+const DATA_TABLE_PAGE_SIZE_OPTIONS = [
+  20,
+  30,
+  40,
+  50,
+  60,
+  70,
+  80,
+  90,
+  100
+];
+const DEFAULT_DATA_TABLE_PAGE_SIZE = 50;
+const INFINITE_FETCH_PAGE_SIZE = 100;
+const DATA_TABLE_BODY_MAX_HEIGHT_CLASS = "max-h-[min(100%,calc(100dvh-5rem))] lg:max-h-[min(100%,calc(100dvh-13rem))]";
+function getDataTablePageSizeStorageKey(tableName) {
+  return `rows-per-page-${tableName}`;
+}
+function parseDataTableRowsPerPage(raw) {
+  if (!raw) return null;
+  if (raw === "infinite") return "infinite";
+  const parsed = Number(raw);
+  if (Number.isFinite(parsed) && DATA_TABLE_PAGE_SIZE_OPTIONS.includes(
+    parsed
+  )) {
+    return parsed;
+  }
+  return null;
+}
+function resolveDataTableQueryPageSize(sizeParam, fallback = DEFAULT_DATA_TABLE_PAGE_SIZE) {
+  const parsed = parseDataTableRowsPerPage(sizeParam);
+  if (parsed === "infinite") return INFINITE_FETCH_PAGE_SIZE;
+  if (typeof parsed === "number") return parsed;
+  return fallback;
+}
+function isDataTableInfiniteFromStorage(tableName) {
+  return parseDataTableRowsPerPage(
+    localStorage.getItem(getDataTablePageSizeStorageKey(tableName))
+  ) === "infinite";
+}
+export {
+  DATA_TABLE_BODY_MAX_HEIGHT_CLASS,
+  DATA_TABLE_PAGE_SIZE_OPTIONS,
+  DEFAULT_DATA_TABLE_PAGE_SIZE,
+  INFINITE_FETCH_PAGE_SIZE,
+  getDataTablePageSizeStorageKey,
+  isDataTableInfiniteFromStorage,
+  parseDataTableRowsPerPage,
+  resolveDataTableQueryPageSize
+};

package/dist/es/components/custom/data-table/data-table-pagination.js

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMediaQuery } from "../../../hooks/use-mobile.js";
+import "react";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import "../../ui/accordion.js";
+import "../../ui/alert.js";
+import "../../ui/avatar.js";
+import "../../ui/badge.js";
+import "../../ui/breadcrumb.js";
+import "../../ui/button-group.js";
+import "../../ui/button.js";
+import "lucide-react";
+import "react-day-picker";
+import { cn } from "../../../lib/utils.js";
+import "../../ui/popover.js";
+import "../../ui/drawer.js";
+import "../../ui/select.js";
+import "@icon-park/react";
+import "../../ui/carousel.js";
+import "../../ui/chart.js";
+import "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../../ui/dropdown-menu.js";
+import "../../ui/field.js";
+import "../../ui/form.js";
+import "../../ui/hover-card.js";
+import "../../ui/input-group.js";
+import "../../ui/input-otp.js";
+import "../../ui/input.js";
+import "../../ui/item.js";
+import "@radix-ui/react-label";
+import "../../ui/menubar.js";
+import "../../ui/navigation-menu.js";
+import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationEllipsis, PaginationLink, PaginationNext } from "../../ui/pagination.js";
+import "../../ui/progress.js";
+import "../../ui/radio-group.js";
+import "react-resizable-panels";
+import "../../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../../ui/sidebar.js";
+import "../../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../../ui/spinner.js";
+import "../../ui/switch.js";
+import "../../ui/table.js";
+import "../../ui/tabs.js";
+import "../../ui/textarea.js";
+import "../../ui/toggle-group.js";
+import "../../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+function DataTablePagination({
+  pagination,
+  onPageChange,
+  className
+}) {
+  const { currentPage, totalPages, hasNextPage, hasPreviousPage, totalItems } = pagination;
+  const isMobile = useMediaQuery();
+  const getPages = () => {
+    const pages = [];
+    if (totalPages <= 5) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      if (currentPage <= 3) pages.push(1, 2, 3, "...", totalPages);
+      else if (currentPage >= totalPages - 2)
+        pages.push(1, "...", totalPages - 2, totalPages - 1, totalPages);
+      else pages.push(1, "...", currentPage, "...", totalPages);
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Forces flex-row on all screen sizes and prevents vertical stacking
+        "shared:border-border shared:bg-background/50 shared:mt-3 shared:flex shared:w-full shared:flex-row shared:items-center shared:justify-between shared:border-t shared:px-4 shared:py-3 shared:backdrop-blur-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-2 shared:text-xs", children: [
+          /* @__PURE__ */ jsxs("span", { className: "shared:text-muted-foreground shared:whitespace-nowrap", children: [
+            "Page",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "shared:text-foreground shared:font-bold shared:tabular-nums", children: currentPage }),
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "xs:shared:inline shared:hidden", children: "of " }),
+            /* @__PURE__ */ jsx("span", { className: "xs:shared:hidden", children: "/ " }),
+            /* @__PURE__ */ jsx("span", { className: "shared:text-foreground shared:font-bold shared:tabular-nums", children: totalPages })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "shared:bg-border shared:hidden shared:h-3 shared:w-px sm:shared:block" }),
+          /* @__PURE__ */ jsxs("span", { className: "shared:text-muted-foreground/60 shared:hidden shared:text-[10px] shared:font-bold shared:tracking-tight shared:uppercase sm:shared:block", children: [
+            totalItems.toLocaleString(),
+            " Total"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Pagination, { className: "shared:m-0 shared:w-auto", children: /* @__PURE__ */ jsxs(PaginationContent, { className: "shared:gap-1 sm:shared:gap-1.5", children: [
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationPrevious,
+            {
+              href: "#",
+              onClick: (e) => {
+                e.preventDefault();
+                if (hasPreviousPage) onPageChange(currentPage - 1);
+              },
+              className: cn(
+                // h-8 w-8 p-0 centers the icon and makes it square
+                // [&_span]:hidden hides that hardcoded "Previous" text
+                "shared:h-8 shared:w-8 shared:p-0 shared:text-xs shared:transition-all sm:shared:w-auto sm:shared:px-3 sm:shared:pl-2.5 [&_span]:shared:hidden sm:[&_span]:shared:inline",
+                !hasPreviousPage ? "shared:pointer-events-none shared:opacity-20 shared:grayscale" : "shared:border-border hover:shared:bg-accent shared:bg-background shared:cursor-pointer shared:border shared:shadow-sm active:shared:scale-95"
+              )
+            }
+          ) }),
+          !isMobile && getPages().map((page, idx) => /* @__PURE__ */ jsx(PaginationItem, { children: page === "..." ? /* @__PURE__ */ jsx(PaginationEllipsis, { className: "shared:text-muted-foreground/50" }) : /* @__PURE__ */ jsx(
+            PaginationLink,
+            {
+              href: "#",
+              onClick: (e) => {
+                e.preventDefault();
+                onPageChange(page);
+              },
+              isActive: currentPage === page,
+              className: cn(
+                "shared:h-8 shared:min-w-8 shared:cursor-pointer shared:rounded-md shared:text-xs shared:transition-all",
+                currentPage === page ? "shared:bg-primary shared:text-primary-foreground hover:shared:bg-primary/90 shared:font-bold shared:shadow-sm" : "hover:shared:border-border hover:shared:bg-accent shared:border shared:border-transparent shared:bg-transparent"
+              ),
+              children: page
+            }
+          ) }, idx)),
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationNext,
+            {
+              href: "#",
+              onClick: (e) => {
+                e.preventDefault();
+                if (hasNextPage) onPageChange(currentPage + 1);
+              },
+              className: cn(
+                // [&_span]:hidden hides the hardcoded "Next" text
+                "shared:h-8 shared:w-8 shared:p-0 shared:text-xs shared:transition-all sm:shared:w-auto sm:shared:px-3 sm:shared:pr-2.5 [&_span]:shared:hidden sm:[&_span]:shared:inline",
+                !hasNextPage ? "shared:pointer-events-none shared:opacity-20 shared:grayscale" : "shared:border-border hover:shared:bg-accent shared:bg-background shared:cursor-pointer shared:border shared:shadow-sm active:shared:scale-95"
+              )
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  DataTablePagination
+};

package/dist/es/components/custom/data-table/data-table-toolbar.js

@@ -0,0 +1,149 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { DataTableViewOptions } from "./data-table-view-options.js";
+import { cn } from "../../../lib/utils.js";
+import "../../ui/accordion.js";
+import "../../ui/alert.js";
+import "../../ui/avatar.js";
+import "../../ui/badge.js";
+import "../../ui/breadcrumb.js";
+import "../../ui/button-group.js";
+import "../../ui/button.js";
+import "lucide-react";
+import "react-day-picker";
+import "../../ui/popover.js";
+import "../../ui/drawer.js";
+import "../../ui/select.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import "@icon-park/react";
+import "../../ui/carousel.js";
+import "../../ui/chart.js";
+import "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../../ui/dropdown-menu.js";
+import "../../ui/field.js";
+import "../../ui/form.js";
+import "../../ui/hover-card.js";
+import "../../ui/input-group.js";
+import "../../ui/input-otp.js";
+import "../../ui/input.js";
+import "../../ui/item.js";
+import "@radix-ui/react-label";
+import "../../ui/menubar.js";
+import "../../ui/navigation-menu.js";
+import "../../ui/pagination.js";
+import "../../ui/progress.js";
+import "../../ui/radio-group.js";
+import "react-resizable-panels";
+import "../../ui/scroll-area.js";
+import { Separator } from "../../ui/separator.js";
+import "../../ui/sidebar.js";
+import "../../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../../ui/spinner.js";
+import "../../ui/switch.js";
+import "../../ui/table.js";
+import "../../ui/tabs.js";
+import "../../ui/textarea.js";
+import "../../ui/toggle-group.js";
+import "../../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+function DataTableToolbar({
+  table,
+  btnList,
+  title,
+  viewMode,
+  itemCountText,
+  pinnedColumnIds,
+  searchComponent,
+  icon,
+  headerComponent,
+  setViewMode,
+  setPinnedColumnIds,
+  columnVisibility,
+  setColumnVisibility,
+  isVisible = true,
+  // New prop to control visibility
+  disableViewSettingsLabel,
+  leftActionComponent,
+  isModal
+}) {
+  const viewOptionsNode = React__default.useMemo(
+    () => /* @__PURE__ */ jsx(
+      DataTableViewOptions,
+      {
+        table,
+        columnVisibility,
+        setColumnVisibility,
+        viewMode,
+        setViewMode,
+        pinnedColumnIds,
+        setPinnedColumnIds,
+        disableViewSettingsLabel
+      }
+    ),
+    [
+      table,
+      columnVisibility,
+      setColumnVisibility,
+      viewMode,
+      setViewMode,
+      pinnedColumnIds,
+      setPinnedColumnIds,
+      disableViewSettingsLabel
+    ]
+  );
+  if (!isVisible) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "shared:flex shared:flex-row shared:items-center shared:justify-between shared:gap-4 shared:transition-all shared:duration-300 shared:ease-in-out",
+        // When hidden: slide up and fade out
+        !isVisible ? "shared:pointer-events-none shared:-translate-y-4 shared:opacity-0" : "shared:translate-y-0 shared:opacity-100",
+        isModal ? "shared:flex" : "shared:hidden lg:shared:flex"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-3", children: [
+          leftActionComponent,
+          /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "shared:relative", children: [
+              /* @__PURE__ */ jsx("div", { className: "shared:bg-primary/20 shared:absolute shared:inset-0 shared:rounded-lg shared:blur-lg" }),
+              /* @__PURE__ */ jsx("div", { className: "shared:bg-primary shared:relative shared:flex shared:h-10 shared:w-10 shared:items-center shared:justify-center shared:rounded-xl shared:shadow-lg shared:ring-1 shared:ring-white/20", children: icon })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-col", children: [
+              /* @__PURE__ */ jsx("h1", { className: "shared:text-foreground/90 shared:text-lg shared:font-black shared:tracking-tight shared:whitespace-nowrap", children: title }),
+              /* @__PURE__ */ jsx("div", { className: "shared:flex shared:items-center shared:gap-2", children: /* @__PURE__ */ jsx("span", { className: "shared:bg-primary/10 shared:text-primary shared:rounded-full shared:px-2 shared:py-0.5 shared:text-[10px] shared:font-black shared:whitespace-nowrap", children: itemCountText }) })
+            ] })
+          ] }),
+          headerComponent
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-wrap shared:items-center shared:gap-2 max-lg:shared:w-full max-lg:shared:justify-end", children: [
+          /* @__PURE__ */ jsx("div", { className: "shared:flex-1 lg:shared:flex-none", children: searchComponent }),
+          /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-2", children: [
+            btnList?.map((item, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: item }, "action-" + index)),
+            /* @__PURE__ */ jsx(
+              Separator,
+              {
+                orientation: "vertical",
+                className: "shared:mx-1 shared:hidden shared:h-6 lg:shared:block"
+              }
+            ),
+            viewOptionsNode
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DataTableToolbar
+};

package/dist/es/components/custom/data-table/data-table-util.js

@@ -0,0 +1,31 @@
+function exportToCSV(data, filename = "export.csv") {
+  if (!data || !data.length) return;
+  const headers = Object.keys(data[0]);
+  const csvRows = [
+    // Header row
+    headers.join(","),
+    // Data rows
+    ...data.map(
+      (row) => headers.map((fieldName) => {
+        const value = row[fieldName] ?? "";
+        const escaped = ("" + value).replace(/"/g, '""');
+        return `"${escaped}"`;
+      }).join(",")
+    )
+  ];
+  const csvContent = csvRows.join("\n");
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  if (link.download !== void 0) {
+    const url = URL.createObjectURL(blob);
+    link.setAttribute("href", url);
+    link.setAttribute("download", filename);
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+export {
+  exportToCSV
+};

package/dist/es/components/custom/data-table/data-table-view-fallback.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+function DataTableViewFallback() {
+  return /* @__PURE__ */ jsx("div", { className: "shared:text-muted-foreground shared:flex shared:min-h-[12rem] shared:items-center shared:justify-center shared:text-sm", children: "Loading view…" });
+}
+export {
+  DataTableViewFallback
+};