@quan-erp/shared-ui 1.0.0

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

@@ -0,0 +1,311 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { TableIcon, LayoutList, Search, CheckSquare, Square, Settings2, PinOff, Pin, CheckCircle2 } from "lucide-react";
+import { useState, useMemo } from "react";
+import { formatCamelCaseString } from "./data-table-helper.js";
+import { setColumnVisibleInState } from "./data-table-view-preferences.storage.js";
+import { useMediaQuery } from "../../../hooks/use-mobile.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+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 { Button } from "../../ui/button.js";
+import "react-day-picker";
+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 { Checkbox } from "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from "../../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 { ResponsiveDialog, ResponsiveTrigger, ResponsiveContent, ResponsiveHeader, ResponsiveTitle } from "../responsive-dialog.js";
+function DataTableViewOptions({
+  table,
+  pluginName,
+  columnVisibility,
+  setColumnVisibility,
+  viewMode,
+  pinnedColumnIds,
+  setViewMode,
+  setPinnedColumnIds,
+  disableViewSettingsLabel
+}) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const isMobile = useMediaQuery();
+  const [isOpen, setOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const allHideableColumns = useMemo(
+    () => table.getAllColumns().filter(
+      (col) => typeof col.accessorFn !== "undefined" && col.getCanHide()
+    ),
+    [table, columnVisibility]
+  );
+  const pinnedColumns = allHideableColumns.filter(
+    (col) => pinnedColumnIds.includes(col.id)
+  );
+  const unpinnedColumns = allHideableColumns.filter(
+    (col) => !pinnedColumnIds.includes(col.id)
+  );
+  const setColumnVisible = (columnId, visible) => {
+    setColumnVisibility(
+      (prev) => setColumnVisibleInState(prev, columnId, visible)
+    );
+  };
+  const togglePin = (id, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setPinnedColumnIds(
+      (prev) => prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id]
+    );
+  };
+  const isAllVisible = allHideableColumns.every((col) => col.getIsVisible());
+  const toggleAll = () => {
+    setColumnVisibility((prev) => {
+      const next = { ...prev };
+      allHideableColumns.forEach((col) => {
+        if (isAllVisible) {
+          next[col.id] = false;
+        } else {
+          delete next[col.id];
+        }
+      });
+      return next;
+    });
+  };
+  const ColumnList = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "shared:custom-scrollbar shared:overflow-y-auto shared:px-1 shared:pb-4",
+        isMobile ? "shared:max-h-[50vh]" : "shared:max-h-70"
+      ),
+      children: [
+        pinnedColumns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "shared:mb-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "shared:text-primary/50 shared:px-2 shared:pb-1 shared:text-[9px] shared:font-bold shared:uppercase", children: "Pinned" }),
+          pinnedColumns.map((col) => /* @__PURE__ */ jsx(
+            ColumnRowItem,
+            {
+              column: col,
+              isPinned: true,
+              onTogglePin: (e) => togglePin(col.id, e),
+              onToggleVisible: setColumnVisible
+            },
+            col.id
+          )),
+          /* @__PURE__ */ jsx("div", { className: "shared:bg-border/40 shared:my-2 shared:h-px" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shared:text-muted-foreground/40 shared:px-2 shared:pb-1 shared:text-[9px] shared:font-bold shared:uppercase", children: "Columns" }),
+        unpinnedColumns.filter((c) => c.id.toLowerCase().includes(searchTerm.toLowerCase())).map((col, i) => /* @__PURE__ */ jsx(
+          ColumnRowItem,
+          {
+            column: col,
+            isPinned: false,
+            index: i,
+            onTogglePin: (e) => togglePin(col.id, e),
+            onToggleVisible: setColumnVisible
+          },
+          col.id
+        ))
+      ]
+    }
+  );
+  const MenuHeaderAndControls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "shared:text-muted-foreground/50 shared:px-2 shared:py-1 shared:text-[10px] shared:font-bold shared:tracking-widest shared:uppercase", children: "Preferences" }),
+    /* @__PURE__ */ jsx("div", { className: "shared:bg-muted/30 shared:my-2 shared:grid shared:grid-cols-2 shared:gap-1 shared:rounded-lg shared:p-1", children: [
+      { id: "table", icon: TableIcon, label: "Table" },
+      { id: "list", icon: LayoutList, label: "Cards" }
+    ].map((m) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onPointerDown: (e) => e.preventDefault(),
+        onClick: () => setViewMode(m.id),
+        className: cn(
+          "shared:flex shared:items-center shared:justify-center shared:gap-2 shared:rounded-md shared:py-1.5 shared:text-xs shared:font-medium shared:transition-all",
+          viewMode === m.id ? "shared:bg-background shared:text-foreground shared:shadow-sm shared:ring-1 shared:ring-black/5" : "shared:text-muted-foreground hover:shared:bg-background/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(m.icon, { className: "shared:size-3.5" }),
+          " ",
+          m.label
+        ]
+      },
+      m.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "shared:mb-2 shared:flex shared:items-center shared:gap-2 shared:px-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "shared:relative shared:flex-1", children: [
+        /* @__PURE__ */ jsx(Search, { className: "shared:text-muted-foreground/40 shared:absolute shared:top-2.5 shared:left-2.5 shared:size-3" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            placeholder: "Filter...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            onPointerDown: (e) => e.stopPropagation(),
+            className: "shared:border-border/40 shared:bg-muted/20 focus:shared:bg-background focus:shared:ring-primary/10 shared:h-8 shared:w-full shared:rounded-md shared:border shared:pr-2 shared:pl-8 shared:text-xs focus:shared:ring-2 focus:shared:outline-none"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          type: "button",
+          onPointerDown: (e) => e.preventDefault(),
+          onClick: toggleAll,
+          className: "shared:h-8 shared:w-8",
+          children: isAllVisible ? /* @__PURE__ */ jsx(CheckSquare, { className: "shared:text-primary/60 shared:size-4" }) : /* @__PURE__ */ jsx(Square, { className: "shared:text-muted-foreground/40 shared:size-4" })
+        }
+      )
+    ] })
+  ] });
+  const TriggerButton = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: "shared:group shared:bg-background/50 shared:relative shared:ml-auto shared:flex shared:h-8 shared:gap-2 shared:border-dashed active:shared:scale-95",
+      children: [
+        /* @__PURE__ */ jsx(Settings2, { className: "shared:text-muted-foreground shared:size-4 shared:transition-transform shared:duration-700 group-hover:shared:rotate-180" }),
+        disableViewSettingsLabel !== true && /* @__PURE__ */ jsx("span", { className: "shared:hidden shared:font-medium sm:shared:inline", children: "View Settings" })
+      ]
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(ResponsiveDialog, { open: isOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(ResponsiveTrigger, { children: TriggerButton }),
+      /* @__PURE__ */ jsxs(ResponsiveContent, { className: "shared:px-4 shared:pb-8", pluginName, children: [
+        /* @__PURE__ */ jsx(ResponsiveHeader, { className: "shared:px-0 shared:pt-4 shared:text-left", children: /* @__PURE__ */ jsx(ResponsiveTitle, { className: "shared:text-muted-foreground/60 shared:text-xs shared:font-bold shared:tracking-widest shared:uppercase", children: "Configure View" }) }),
+        MenuHeaderAndControls,
+        /* @__PURE__ */ jsx(ColumnList, {})
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: TriggerButton }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "end",
+        className: "shared:w-72 shared:p-2 shared:shadow-2xl",
+        "data-plugin": pluginName,
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        children: [
+          MenuHeaderAndControls,
+          /* @__PURE__ */ jsx(ColumnList, {})
+        ]
+      }
+    )
+  ] });
+}
+function ColumnRowItem({
+  column,
+  isPinned,
+  index = 0,
+  onTogglePin,
+  onToggleVisible
+}) {
+  const label = formatCamelCaseString(column.id);
+  const isVisible = column.getIsVisible();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "shared:group shared:flex shared:h-9 shared:items-center shared:rounded-md shared:px-2",
+        !isPinned && "shared:animate-in shared:slide-in-from-top-1 shared:fade-in"
+      ),
+      style: !isPinned ? { animationDelay: `${index * 12}ms` } : {},
+      onPointerDown: (e) => e.preventDefault(),
+      children: /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-1 shared:items-center shared:justify-between shared:gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "shared:flex shared:min-w-0 shared:flex-1 shared:cursor-pointer shared:items-center shared:gap-3",
+            onClick: (e) => {
+              onToggleVisible(column.id, !isVisible);
+              e.stopPropagation();
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isVisible,
+                  onCheckedChange: (v) => onToggleVisible(column.id, !!v),
+                  onPointerDown: (e) => e.stopPropagation()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "shared:truncate shared:font-medium shared:transition-colors",
+                    isPinned ? "shared:text-primary" : "shared:text-muted-foreground group-hover:shared:text-foreground"
+                  ),
+                  children: label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:shrink-0 shared:items-center shared:gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onPointerDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onClick: onTogglePin,
+              className: "shared:p-1 shared:transition-all hover:shared:scale-110",
+              children: isPinned ? /* @__PURE__ */ jsx(PinOff, { className: "shared:text-primary shared:size-3" }) : /* @__PURE__ */ jsx(Pin, { className: "shared:text-muted-foreground/30 hover:shared:text-primary shared:size-3 shared:opacity-0 group-hover:shared:opacity-100" })
+            }
+          ),
+          isVisible && /* @__PURE__ */ jsx(CheckCircle2, { className: "shared:text-primary/40 group-hover:shared:text-primary shared:size-3.5" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  DataTableViewOptions
+};

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

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { loadViewPreferences, saveViewPreferences } from "./data-table-view-preferences.storage.js";
+function getDataTableViewPreferencesStorageKey(tableName) {
+  return `view-prefs-${tableName}`;
+}
+function useDataTableViewPreferences({
+  tableName,
+  isMobile,
+  getMobileDefaults,
+  persist = "indexedDB"
+}) {
+  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const [viewMode, setViewMode] = React.useState("table");
+  const [pinnedColumnIds, setPinnedColumnIds] = React.useState([
+    "select"
+  ]);
+  const canPersistRef = React.useRef(false);
+  const getMobileDefaultsRef = React.useRef(getMobileDefaults);
+  getMobileDefaultsRef.current = getMobileDefaults;
+  const storageKey = getDataTableViewPreferencesStorageKey(tableName);
+  const applyMobileOrDefaultPrefs = React.useCallback(() => {
+    if (isMobile && getMobileDefaultsRef.current) {
+      setColumnVisibility(getMobileDefaultsRef.current());
+      setViewMode("list");
+      setPinnedColumnIds(["select"]);
+      return;
+    }
+    setColumnVisibility({});
+    setViewMode("table");
+    setPinnedColumnIds(["select"]);
+  }, [isMobile]);
+  React.useEffect(() => {
+    canPersistRef.current = false;
+    let cancelled = false;
+    void (async () => {
+      const stored = await loadViewPreferences(storageKey, persist);
+      if (cancelled) return;
+      if (stored) {
+        setColumnVisibility(stored.columnVisibility);
+        setViewMode(stored.viewMode);
+        setPinnedColumnIds(stored.pinnedColumnIds);
+      } else {
+        applyMobileOrDefaultPrefs();
+      }
+      canPersistRef.current = true;
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [storageKey, persist, applyMobileOrDefaultPrefs]);
+  React.useEffect(() => {
+    if (!canPersistRef.current || persist === false) return;
+    void saveViewPreferences(storageKey, persist, {
+      columnVisibility,
+      viewMode,
+      pinnedColumnIds
+    });
+  }, [storageKey, persist, columnVisibility, viewMode, pinnedColumnIds]);
+  return {
+    columnVisibility,
+    setColumnVisibility,
+    viewMode,
+    setViewMode,
+    pinnedColumnIds,
+    setPinnedColumnIds
+  };
+}
+export {
+  getDataTableViewPreferencesStorageKey,
+  useDataTableViewPreferences
+};

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

@@ -0,0 +1,115 @@
+const IDB_NAME = "quan-erp-datatable-prefs";
+const IDB_STORE = "view-preferences";
+const IDB_VERSION = 1;
+function openPreferencesDb() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(IDB_NAME, IDB_VERSION);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(IDB_STORE)) {
+        db.createObjectStore(IDB_STORE);
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+async function readFromIndexedDB(key) {
+  const db = await openPreferencesDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(IDB_STORE, "readonly");
+    const getReq = tx.objectStore(IDB_STORE).get(key);
+    getReq.onsuccess = () => {
+      db.close();
+      resolve(typeof getReq.result === "string" ? getReq.result : null);
+    };
+    getReq.onerror = () => {
+      db.close();
+      reject(getReq.error);
+    };
+  });
+}
+async function writeToIndexedDB(key, value) {
+  const db = await openPreferencesDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(IDB_STORE, "readwrite");
+    tx.objectStore(IDB_STORE).put(value, key);
+    tx.oncomplete = () => {
+      db.close();
+      resolve();
+    };
+    tx.onerror = () => {
+      db.close();
+      reject(tx.error);
+    };
+  });
+}
+function serializeViewPreferences(prefs) {
+  return JSON.stringify({
+    pinned: prefs.pinnedColumnIds,
+    visibility: prefs.columnVisibility,
+    mode: prefs.viewMode
+  });
+}
+function parseViewPreferences(raw) {
+  try {
+    const { pinned, visibility, mode } = JSON.parse(raw);
+    return {
+      pinnedColumnIds: Array.from(
+        /* @__PURE__ */ new Set(["select", ...pinned || []])
+      ),
+      columnVisibility: visibility || {},
+      viewMode: mode || "table"
+    };
+  } catch {
+    return null;
+  }
+}
+async function loadViewPreferences(storageKey, persist) {
+  if (persist === false) return null;
+  if (persist === "indexedDB") {
+    const idbRaw = await readFromIndexedDB(storageKey);
+    if (idbRaw) return parseViewPreferences(idbRaw);
+    const legacyRaw = localStorage.getItem(storageKey);
+    if (!legacyRaw) return null;
+    const parsed = parseViewPreferences(legacyRaw);
+    if (parsed) {
+      await writeToIndexedDB(storageKey, legacyRaw);
+    }
+    return parsed;
+  }
+  const raw = localStorage.getItem(storageKey);
+  if (!raw) return null;
+  return parseViewPreferences(raw);
+}
+async function saveViewPreferences(storageKey, persist, prefs) {
+  if (persist === false) return;
+  const payload = serializeViewPreferences(prefs);
+  if (persist === "indexedDB") {
+    await writeToIndexedDB(storageKey, payload);
+    return;
+  }
+  localStorage.setItem(storageKey, payload);
+}
+function buildColumnLayoutKey(columnVisibility, pinnedColumnIds, viewMode, hideableColumnIds = []) {
+  const ids = hideableColumnIds.length > 0 ? hideableColumnIds : Object.keys(columnVisibility);
+  const visibilityPart = [...ids].sort().map((id) => `${id}:${columnVisibility[id] === false ? "0" : "1"}`).join(",");
+  return `${viewMode}|${pinnedColumnIds.join(",")}|${visibilityPart}`;
+}
+function setColumnVisibleInState(prev, columnId, visible) {
+  const next = { ...prev };
+  if (visible) {
+    delete next[columnId];
+  } else {
+    next[columnId] = false;
+  }
+  return next;
+}
+export {
+  buildColumnLayoutKey,
+  loadViewPreferences,
+  parseViewPreferences,
+  saveViewPreferences,
+  serializeViewPreferences,
+  setColumnVisibleInState
+};