@quan-erp/shared-ui 1.0.0

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

@@ -0,0 +1,425 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useReactTable } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import * as React from "react";
+import { DataTableBulkActionMenu } from "./data-table-bulk-action-menu.js";
+import { DataTableBulkExportButton } from "./data-table-bulk-export.js";
+import { DATA_TABLE_BODY_MAX_HEIGHT_CLASS, DATA_TABLE_PAGE_SIZE_OPTIONS } from "./data-table-page-size.js";
+import { DataTableToolbar } from "./data-table-toolbar.js";
+import { DataTableViewFallback } from "./data-table-view-fallback.js";
+import { useDataTableViewPreferences } from "./data-table-view-preferences.js";
+import { buildColumnLayoutKey } from "./data-table-view-preferences.storage.js";
+import { useMediaQuery } from "../../../hooks/use-mobile.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import { useScrollDirection } from "../../../hooks/use-scroll-direction.js";
+import { EmptyState } from "../empty-screen.js";
+import { cn } from "../../../lib/utils.js";
+import { PullToRefresh } from "../pull-to-refresh.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 { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../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 "../../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";
+import { getSortedRowModel, getCoreRowModel } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+const LazyDataTableGrid = React.lazy(
+  () => import("./data-table-grid.js").then((m) => ({ default: m.DataTableGrid }))
+);
+const LazyDataTableListView = React.lazy(
+  () => import("./data-table-list-view.js").then((m) => ({
+    default: m.DataTableListView
+  }))
+);
+function buildMobileVisibilityDefaults(columns) {
+  const mobileDefaults = {};
+  columns.forEach((col) => {
+    if (col.meta?.hideOnMobile) {
+      mobileDefaults[col.accessorKey || col.id] = false;
+    }
+  });
+  return mobileDefaults;
+}
+function DataTable({
+  columns,
+  data,
+  btnList,
+  disableToolbar,
+  onRowClickFn,
+  totalItems,
+  title,
+  tableName,
+  searchComponent,
+  icon,
+  headerComponent,
+  renderBulkActions,
+  disableDefaultBulkExport,
+  disableViewSettingsLabel,
+  leftActionComponent,
+  paginationComponent,
+  isModal,
+  dataTableClassName,
+  emptyStateAction,
+  emptyStateDescription,
+  emptyStateTitle,
+  refetch,
+  footerData,
+  groupBy,
+  isInfinitePagination = false,
+  pageSize = 50,
+  onPageSizeChange,
+  onLoadMore,
+  hasMore = false,
+  isLoadingMore = false,
+  viewPreferencesPersist,
+  itemCountText,
+  maxHeightClass,
+  firstRowData,
+  firstRowCardView,
+  footerCardView
+}) {
+  const [rowSelection, setRowSelection] = React.useState({});
+  const isMobile = useMediaQuery();
+  const columnsRef = React.useRef(columns);
+  columnsRef.current = columns;
+  const getMobileDefaults = React.useCallback(
+    () => buildMobileVisibilityDefaults(
+      columnsRef.current
+    ),
+    []
+  );
+  const {
+    columnVisibility,
+    setColumnVisibility,
+    viewMode,
+    setViewMode,
+    pinnedColumnIds,
+    setPinnedColumnIds
+  } = useDataTableViewPreferences({
+    tableName,
+    isMobile,
+    getMobileDefaults,
+    persist: viewPreferencesPersist
+  });
+  const noResultsLabel = "No results found";
+  const effectiveViewMode = isMobile ? "list" : viewMode;
+  const effectiveInfinitePagination = isInfinitePagination || isMobile && !isModal;
+  const isTableView = effectiveViewMode === "table";
+  const columnPinning = React.useMemo(
+    () => isTableView ? { left: pinnedColumnIds } : void 0,
+    [isTableView, pinnedColumnIds]
+  );
+  const tableState = React.useMemo(
+    () => ({
+      columnVisibility,
+      rowSelection,
+      ...columnPinning ? { columnPinning } : {}
+    }),
+    [columnVisibility, rowSelection, columnPinning]
+  );
+  const table = useReactTable({
+    data,
+    columns,
+    state: tableState,
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    ...isTableView ? { getSortedRowModel: getSortedRowModel() } : {}
+  });
+  const columnLayoutKey = React.useMemo(() => {
+    const hideableIds = table.getAllLeafColumns().filter((col) => col.getCanHide()).map((col) => col.id);
+    return buildColumnLayoutKey(
+      columnVisibility,
+      pinnedColumnIds,
+      effectiveViewMode,
+      hideableIds
+    );
+  }, [table, columnVisibility, pinnedColumnIds, effectiveViewMode]);
+  const rows = table.getRowModel().rows;
+  const isServerPaginated = paginationComponent != null;
+  const displayRows = React.useMemo(() => {
+    if (effectiveInfinitePagination || isServerPaginated) return rows;
+    return rows.slice(0, pageSize);
+  }, [effectiveInfinitePagination, isServerPaginated, pageSize, rows]);
+  const rowsPerPageValue = effectiveInfinitePagination ? "infinite" : String(pageSize);
+  const dataViewKey = `${columnLayoutKey}|${rowsPerPageValue}|${effectiveInfinitePagination ? "infinite" : "paged"}`;
+  const handleRowsPerPageChange = React.useCallback(
+    (value) => {
+      const next = value === "infinite" ? "infinite" : Number(value);
+      if (next !== "infinite" && !Number.isFinite(next)) return;
+      onPageSizeChange?.(next);
+    },
+    [onPageSizeChange]
+  );
+  const selectedData = React.useMemo(
+    () => table.getSelectedRowModel().rows.map((row) => row.original),
+    [table, rowSelection]
+  );
+  const bulkActionMenu = React.useMemo(() => {
+    if (selectedData.length === 0) return null;
+    const exportLabel = `Export ${selectedData.length} to CSV`;
+    const defaultExport = !disableDefaultBulkExport ? /* @__PURE__ */ jsx(
+      DataTableBulkExportButton,
+      {
+        selectedData,
+        tableName,
+        label: exportLabel
+      },
+      "default-bulk-export"
+    ) : null;
+    const custom = renderBulkActions?.(selectedData);
+    if (!defaultExport && !custom) return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      defaultExport,
+      custom
+    ] });
+  }, [selectedData, renderBulkActions, disableDefaultBulkExport, tableName]);
+  const scrollRef = React.useRef(null);
+  const loadMoreRef = React.useRef(null);
+  const loadMoreLockRef = React.useRef(false);
+  const isToolbarVisible = useScrollDirection(
+    scrollRef
+  );
+  React.useEffect(() => {
+    if (!isLoadingMore) {
+      loadMoreLockRef.current = false;
+    }
+  }, [isLoadingMore]);
+  React.useEffect(() => {
+    if (!effectiveInfinitePagination || !onLoadMore || !hasMore) return;
+    const root = scrollRef.current;
+    const target = loadMoreRef.current;
+    if (!root || !target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0]?.isIntersecting || isLoadingMore || loadMoreLockRef.current || !hasMore) {
+          return;
+        }
+        loadMoreLockRef.current = true;
+        onLoadMore();
+      },
+      { root, rootMargin: "0px 0px 120px 0px", threshold: 0 }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [effectiveInfinitePagination, hasMore, isLoadingMore, onLoadMore]);
+  const handleClearSelection = React.useCallback(() => {
+    table.resetRowSelection();
+  }, [table]);
+  const showBulkBar = selectedData.length > 0 && bulkActionMenu != null;
+  const dataView = React.useMemo(() => {
+    if (totalItems === 0) {
+      return /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: emptyStateTitle,
+          action: emptyStateAction,
+          description: emptyStateDescription
+        }
+      );
+    }
+    if (effectiveViewMode === "list") {
+      return /* @__PURE__ */ jsx(React.Suspense, { fallback: /* @__PURE__ */ jsx(DataTableViewFallback, {}), children: /* @__PURE__ */ jsx(
+        LazyDataTableListView,
+        {
+          rows: displayRows,
+          rowSelection,
+          onRowClickFn,
+          layoutKey: columnLayoutKey,
+          groupBy,
+          firstRowData: firstRowCardView,
+          footerData: footerCardView
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(React.Suspense, { fallback: /* @__PURE__ */ jsx(DataTableViewFallback, {}), children: /* @__PURE__ */ jsx(
+      LazyDataTableGrid,
+      {
+        table,
+        rows: displayRows,
+        rowSelection,
+        columnCount: columns.length,
+        onRowClickFn,
+        noResultsLabel,
+        footerData,
+        groupBy,
+        layoutKey: columnLayoutKey,
+        firstRowData
+      }
+    ) });
+  }, [
+    totalItems,
+    effectiveViewMode,
+    columnLayoutKey,
+    rows,
+    displayRows,
+    rowSelection,
+    table,
+    columns.length,
+    onRowClickFn,
+    footerData,
+    groupBy,
+    noResultsLabel,
+    emptyStateTitle,
+    emptyStateAction,
+    emptyStateDescription
+  ]);
+  const [isDataRefreshing, setDataRefreshing] = React.useState(false);
+  React.useEffect(() => {
+    if (isDataRefreshing && refetch) {
+      refetch();
+      setDataRefreshing(false);
+    }
+  }, [isDataRefreshing]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "shared:flex shared:h-full shared:w-full shared:flex-col shared:overflow-hidden",
+        isModal ? "lg:shared:p-3" : "",
+        dataTableClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "shared:flex shared:shrink-0 shared:flex-col shared:gap-3 shared:pb-4",
+              showBulkBar ? "shared:pb-2 lg:shared:pb-4" : isMobile ? "shared:pb-0" : ""
+            ),
+            children: [
+              !disableToolbar && /* @__PURE__ */ jsx(
+                DataTableToolbar,
+                {
+                  itemCountText,
+                  table,
+                  btnList,
+                  title,
+                  viewMode: effectiveViewMode,
+                  setViewMode,
+                  pinnedColumnIds,
+                  setPinnedColumnIds,
+                  columnVisibility,
+                  setColumnVisibility,
+                  searchComponent,
+                  icon,
+                  headerComponent,
+                  isVisible: isMobile ? isToolbarVisible : true,
+                  disableViewSettingsLabel,
+                  leftActionComponent,
+                  isModal
+                }
+              ),
+              showBulkBar && /* @__PURE__ */ jsx(
+                DataTableBulkActionMenu,
+                {
+                  selectedCount: selectedData.length,
+                  onClear: handleClearSelection,
+                  bulkActionMenu
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PullToRefresh,
+          {
+            className: "shared:flex shared:min-h-0 shared:flex-1 shared:flex-col",
+            onRefresh: () => {
+              setDataRefreshing(true);
+            },
+            refreshing: isDataRefreshing,
+            disabled: !refetch,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "shared:min-h-0 shared:flex-1 shared:overflow-auto",
+                  DATA_TABLE_BODY_MAX_HEIGHT_CLASS,
+                  isModal && "shared:max-h-[min(100%,calc(100dvh-10rem))]",
+                  maxHeightClass
+                ),
+                ref: scrollRef,
+                children: dataView
+              },
+              dataViewKey
+            )
+          }
+        ),
+        effectiveInfinitePagination && hasMore ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: loadMoreRef,
+            className: "shared:text-muted-foreground shared:py-3 shared:text-center shared:text-xs",
+            children: isLoadingMore ? "Loading more..." : null
+          }
+        ) : null,
+        !isMobile ? /* @__PURE__ */ jsxs("div", { className: "shared:mt-2 shared:flex shared:items-center shared:justify-end shared:gap-2 shared:px-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "shared:text-muted-foreground shared:text-xs shared:font-medium", children: "Rows per page" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: rowsPerPageValue,
+              onValueChange: handleRowsPerPageChange,
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "shared:h-8 shared:w-[120px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  DATA_TABLE_PAGE_SIZE_OPTIONS.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "infinite", children: "Infinite" })
+                ] })
+              ]
+            }
+          )
+        ] }) : null,
+        !effectiveInfinitePagination ? paginationComponent : null
+      ]
+    }
+  );
+}
+export {
+  DataTable
+};

package/dist/es/components/custom/data-table/group-table-rows.js

@@ -0,0 +1,16 @@
+function groupTableRowsBy(rows, getGroupKey) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const key = getGroupKey(row.original);
+    const bucket = groups.get(key);
+    if (bucket) {
+      bucket.push(row);
+    } else {
+      groups.set(key, [row]);
+    }
+  }
+  return Array.from(groups.entries());
+}
+export {
+  groupTableRowsBy
+};

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

@@ -0,0 +1,155 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { INFINITE_FETCH_PAGE_SIZE, DEFAULT_DATA_TABLE_PAGE_SIZE, parseDataTableRowsPerPage, getDataTablePageSizeStorageKey } from "./data-table-page-size.js";
+function readStoredRowsPerPage(storageKey, fallback) {
+  return parseDataTableRowsPerPage(localStorage.getItem(storageKey)) ?? fallback;
+}
+function useDataTablePageSize({
+  tableName,
+  data,
+  totalItems = 0,
+  enabled = true,
+  defaultPageSize = DEFAULT_DATA_TABLE_PAGE_SIZE,
+  pagination,
+  cursorPagination,
+  paginationMode = "offset",
+  forceInfinite = false,
+  onPageSizeChange,
+  onPaginationChange
+}) {
+  const storageKey = getDataTablePageSizeStorageKey(tableName);
+  const [rowsPerPage, setRowsPerPage] = useState(
+    () => readStoredRowsPerPage(storageKey, defaultPageSize)
+  );
+  const [fetchPage, setFetchPage] = useState(1);
+  const [fetchAfter, setFetchAfter] = useState("");
+  const [fetchBefore, setFetchBefore] = useState("");
+  const [accumulatedData, setAccumulatedData] = useState([]);
+  const fetchGenerationRef = useRef(0);
+  const isInfinitePagination = forceInfinite || rowsPerPage === "infinite";
+  const pageSize = isInfinitePagination ? INFINITE_FETCH_PAGE_SIZE : rowsPerPage;
+  const resetFetchPosition = useCallback(() => {
+    fetchGenerationRef.current += 1;
+    setFetchPage(1);
+    setFetchAfter("");
+    setFetchBefore("");
+    setAccumulatedData([]);
+  }, []);
+  useEffect(() => {
+    if (!enabled) return;
+    onPaginationChange?.({
+      pageSize,
+      page: isInfinitePagination ? fetchPage : 1,
+      after: fetchAfter,
+      before: fetchBefore,
+      isInfinite: isInfinitePagination
+    });
+  }, [
+    enabled,
+    fetchAfter,
+    fetchBefore,
+    fetchPage,
+    isInfinitePagination,
+    onPaginationChange,
+    pageSize
+  ]);
+  const handlePageSizeChange = useCallback(
+    (next) => {
+      localStorage.setItem(storageKey, String(next));
+      setRowsPerPage(next);
+      resetFetchPosition();
+      onPageSizeChange?.(next);
+    },
+    [onPageSizeChange, resetFetchPosition, storageKey]
+  );
+  useEffect(() => {
+    if (!enabled || !isInfinitePagination) {
+      setAccumulatedData([]);
+      return;
+    }
+    const generation = fetchGenerationRef.current;
+    if (paginationMode === "cursor") {
+      if (!fetchAfter) {
+        setAccumulatedData(data);
+        return;
+      }
+      setAccumulatedData((prev) => {
+        if (generation !== fetchGenerationRef.current) return prev;
+        const seen = new Set(
+          prev.map((item) => item.id ?? item)
+        );
+        const appended = data.filter((item) => {
+          const key = item.id ?? item;
+          return !seen.has(key);
+        });
+        return appended.length > 0 ? [...prev, ...appended] : prev;
+      });
+      return;
+    }
+    if (fetchPage <= 1) {
+      setAccumulatedData(data);
+      return;
+    }
+    setAccumulatedData((prev) => {
+      if (generation !== fetchGenerationRef.current) return prev;
+      const seen = new Set(
+        prev.map((item) => item.id ?? item)
+      );
+      const appended = data.filter((item) => {
+        const key = item.id ?? item;
+        return !seen.has(key);
+      });
+      return appended.length > 0 ? [...prev, ...appended] : prev;
+    });
+  }, [
+    data,
+    enabled,
+    fetchAfter,
+    fetchPage,
+    isInfinitePagination,
+    paginationMode
+  ]);
+  const tableData = enabled && isInfinitePagination ? accumulatedData : data;
+  const loadMore = useCallback(() => {
+    if (!enabled || !isInfinitePagination) return;
+    if (paginationMode === "cursor") {
+      if (!cursorPagination?.hasNextPage || cursorPagination.nextCursor == null) {
+        return;
+      }
+      setFetchAfter(String(cursorPagination.nextCursor));
+      setFetchBefore("");
+      return;
+    }
+    const canLoadMore = pagination?.hasNextPage ?? (data.length > 0 && data.length < totalItems);
+    if (!canLoadMore) return;
+    setFetchPage((prev) => prev + 1);
+  }, [
+    cursorPagination?.hasNextPage,
+    cursorPagination?.nextCursor,
+    data.length,
+    enabled,
+    isInfinitePagination,
+    pagination?.hasNextPage,
+    paginationMode,
+    totalItems
+  ]);
+  const hasMore = isInfinitePagination && (paginationMode === "cursor" ? Boolean(cursorPagination?.hasNextPage) : pagination?.hasNextPage ?? (data.length > 0 && data.length < totalItems));
+  return {
+    rowsPerPage: forceInfinite ? "infinite" : rowsPerPage,
+    pageSize,
+    isInfinitePagination,
+    tableData,
+    handlePageSizeChange,
+    loadMore,
+    hasMore,
+    paginationState: {
+      pageSize,
+      page: isInfinitePagination ? fetchPage : 1,
+      after: fetchAfter,
+      before: fetchBefore,
+      isInfinite: isInfinitePagination
+    }
+  };
+}
+export {
+  useDataTablePageSize
+};

package/dist/es/components/custom/empty-screen.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { FolderFocus } from "@icon-park/react";
+const EmptyState = ({
+  title = "No data found",
+  description = "There are no records to display at the moment.",
+  action,
+  className,
+  pluginName
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-plugin": pluginName,
+    className: cn(
+      "shared:w-full shared:h-full shared:min-h-[200px] shared:flex shared:flex-col shared:items-center shared:justify-center shared:p-8 shared:text-center shared:text-muted-foreground shared:bg-background/20 shared:rounded-3xl shared:border shared:border-dashed shared:border-border/50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx(FolderFocus, { className: "shared:mb-4 shared:opacity-20", size: 48 }),
+      /* @__PURE__ */ jsx("h2", { className: "shared:text-xl shared:font-semibold shared:text-foreground/80 shared:mb-2", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "shared:text-sm shared:opacity-80 shared:max-w-sm", children: description }),
+      action && /* @__PURE__ */ jsx("div", { className: "shared:mt-4", children: action })
+    ]
+  }
+);
+export {
+  EmptyState
+};