@open-mercato/ui 0.6.8-develop.6914.1.6c7a5dcb6b → 0.6.8-develop.6916.1.f04fff3436

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 145 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 398 entry points
+[build:ui] found 399 entry points
 [build:ui] built successfully

package/AGENTS.md

@@ -291,6 +291,7 @@ const leadTagMap: TagMap<'customer' | 'hot' | 'inactive' | 'renewal'> = {
 - Use `RowActions` for per-row actions; navigate via `onRowClick` or action links.
 - Keep table state (paging, sorting, filters, search) in component state and reload on scope changes.
 - Keep `extensionTableId` stable and deterministic.
+- Prefer `showSaveViewButton` for "Save view" affordances; build your own on `viewApiRef`/`onColumnsDirtyChange` only for a host with a custom `toolbar`. Never patch `DataTable`. See `apps/docs/docs/framework/admin-ui/perspectives.mdx`.
 - Render injected row actions and bulk actions through `RowActions`/bulk handlers so they follow the same guard and i18n behavior as built-ins.
 - For mutating bulk actions, show operation progress in `ProgressTopBar`: return `{ ok, progressJobId }` from server/queued actions, or use shared bulk helpers that emit client-local progress events for browser-bound loops. MUST NOT add custom per-page progress bars for DataTable bulk work.
 - Prefer server-side `ProgressJob` + queue workers for bulk work that may exceed one second, touch many records, call external services, or should continue after navigation. Use client-local progress only for short in-page loops that intentionally preserve response-side metadata such as undo headers.

package/dist/backend/DataTable.js

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { flexRender } from "@tanstack/react-table";
 import { useLegacyTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table/legacy";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox } from "lucide-react";
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox, Save } from "lucide-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table.js";
 import { Button } from "../primitives/button.js";
 import { Checkbox } from "../primitives/checkbox.js";
@@ -46,6 +46,7 @@ import { readVersionedPreference, writeVersionedPreference, clearVersionedPrefer
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { flash } from "./FlashMessages.js";
 import { useConfirmDialog } from "./confirm-dialog/index.js";
+import { surfaceRecordConflict } from "./conflicts/index.js";
 import { ComponentReplacementHandles } from "@open-mercato/shared/modules/widgets/component-registry";
 import { dataTableExtensionSpotId, extensionSpotChildId } from "@open-mercato/shared/modules/widgets/extension-points";
 import { insertByInjectionPlacement } from "@open-mercato/shared/modules/widgets/injection-position";
@@ -77,6 +78,7 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { createLogger } from "@open-mercato/shared/lib/logger";
 import { clearAllPerspectiveState, PERSPECTIVE_COOKIE_PREFIX, PERSPECTIVE_STORAGE_PREFIX } from "./perspectiveState.js";
+import { diffPerspectiveSettings } from "./perspectiveDirty.js";
 const logger = createLogger("ui").child({ component: "DataTable" });
 let refreshScheduled = false;
 function scheduleRouterRefresh(router) {
@@ -141,6 +143,7 @@ const EXPORT_LABELS = {
 };
 const EMPTY_FILTER_DEFS = [];
 const EMPTY_FILTER_VALUES = Object.freeze({});
+const EMPTY_VIEW_SETTINGS = Object.freeze({});
 const STICKY_RIGHT_SHADOW_CLASS = "md:before:absolute md:before:inset-y-0 md:before:-left-2 md:before:w-2 md:before:bg-gradient-to-l md:before:from-foreground/8 md:before:to-transparent md:before:pointer-events-none";
 const STICKY_LEFT_SHADOW_CLASS = "md:after:absolute md:after:inset-y-0 md:after:-right-2 md:after:w-2 md:after:bg-gradient-to-r md:after:from-foreground/8 md:after:to-transparent md:after:pointer-events-none";
 function collectUniqueById(entries, warningScope) {
@@ -757,6 +760,9 @@ function DataTable({
   entityIds,
   exporter,
   perspective,
+  onColumnsDirtyChange,
+  viewApiRef,
+  showSaveViewButton = false,
   embedded = false,
   onCustomFieldFilterFieldsetChange,
   customFieldFilterKeyExtras,
@@ -822,8 +828,11 @@ function DataTable({
   const perspectiveEnabled = Boolean(perspectiveTableId);
   const initialSnapshotRef = React.useRef(null);
   const snapshotHydratedTableRef = React.useRef(null);
-  const initialSettingsFromConfig = sanitizePerspectiveSettings(perspectiveConfig?.initialState?.initialSettings ?? null);
-  const mergedInitialSettings = initialSettingsFromConfig;
+  const initialSettingsSource = perspectiveConfig?.initialState?.initialSettings ?? null;
+  const mergedInitialSettings = React.useMemo(
+    () => sanitizePerspectiveSettings(initialSettingsSource),
+    [initialSettingsSource]
+  );
   const initialActiveId = perspectiveConfig?.initialState?.activePerspectiveId ?? null;
   const [isPerspectiveOpen, setPerspectiveOpen] = React.useState(false);
   const [isAdvancedFilterOpen, setAdvancedFilterOpen] = React.useState(false);
@@ -838,6 +847,13 @@ function DataTable({
   const [deletingIds, setDeletingIds] = React.useState([]);
   const [roleClearingIds, setRoleClearingIds] = React.useState([]);
   const [perspectiveApiMissing, setPerspectiveApiMissing] = React.useState(false);
+  const [viewBaseline, setViewBaselineState] = React.useState(() => mergedInitialSettings ?? {});
+  const viewBaselineInitializedRef = React.useRef(Boolean(mergedInitialSettings));
+  const setViewBaseline = React.useCallback((settings) => {
+    const initialized = viewBaselineInitializedRef.current;
+    viewBaselineInitializedRef.current = true;
+    setViewBaselineState((previous) => initialized && diffPerspectiveSettings(previous, settings).length === 0 ? previous : settings);
+  }, []);
   const perspectiveFeatureQuery = useQuery({
     queryKey: ["feature-check", "perspectives"],
     enabled: perspectiveEnabled,
@@ -884,9 +900,12 @@ function DataTable({
       setPerspectiveOpen(false);
     }
   }, [canUsePerspectives, isPerspectiveOpen]);
+  const initialSettingsSeededTableRef = React.useRef(null);
   React.useEffect(() => {
     if (!perspectiveTableId) return;
     if (!mergedInitialSettings) return;
+    if (initialSettingsSeededTableRef.current === perspectiveTableId) return;
+    initialSettingsSeededTableRef.current = perspectiveTableId;
     const snapshot = {
       perspectiveId: initialActiveId,
       settings: mergedInitialSettings,
@@ -894,7 +913,8 @@ function DataTable({
     };
     writePerspectiveSnapshot(perspectiveTableId, snapshot);
     initialSnapshotRef.current = snapshot;
-  }, [perspectiveTableId, mergedInitialSettings, initialActiveId]);
+    setViewBaseline(mergedInitialSettings);
+  }, [perspectiveTableId, mergedInitialSettings, initialActiveId, setViewBaseline]);
   const perspectiveQuery = useQuery({
     queryKey: ["table-perspectives", perspectiveTableId],
     queryFn: async () => {
@@ -1276,6 +1296,9 @@ function DataTable({
   }, [columnOrder, columnVisibility, columnSizing, sorting, filterValues, searchValue, advancedFilter]);
   const applyPerspectiveSettings = React.useCallback((settings, nextId, options) => {
     const normalized = sanitizePerspectiveSettings(settings) ?? {};
+    setViewBaseline(
+      options?.preserveAdvancedFilter ? { ...normalized, filters: getCurrentSettings().filters } : normalized
+    );
     if (normalized.columnOrder && normalized.columnOrder.length) {
       setColumnOrder(normalized.columnOrder);
     } else {
@@ -1335,7 +1358,7 @@ function DataTable({
         initialSnapshotRef.current = null;
       }
     }
-  }, [onFiltersApply, onSearchChange, onSortingChange, perspectiveTableId, table, advancedFilter]);
+  }, [onFiltersApply, onSearchChange, onSortingChange, perspectiveTableId, table, advancedFilter, getCurrentSettings, setViewBaseline]);
   const persistColumnSizingSnapshot = React.useCallback(() => {
     if (!perspectiveTableId) return;
     const sizing = columnSizingRef.current;
@@ -1602,6 +1625,117 @@ function DataTable({
       settings: input.settings
     });
   }, [savePerspectiveMutation, activePersonalPerspectiveId]);
+  const defaultColumnOrderIds = React.useMemo(
+    () => table.getAllLeafColumns().map((column) => column.id),
+    [table, mergedColumns]
+  );
+  const viewApiRequested = Boolean(onColumnsDirtyChange || viewApiRef || showSaveViewButton);
+  const currentViewSettings = React.useMemo(
+    () => viewApiRequested ? getCurrentSettings() : EMPTY_VIEW_SETTINGS,
+    [viewApiRequested, getCurrentSettings]
+  );
+  const viewDirtyState = React.useMemo(() => {
+    if (!viewApiRequested || !perspectiveEnabled || !viewBaselineInitializedRef.current) {
+      return {
+        isDirty: false,
+        changedKeys: [],
+        changedCount: 0,
+        activePerspectiveId,
+        canSaveToActiveView: false
+      };
+    }
+    const changedKeys = diffPerspectiveSettings(viewBaseline, currentViewSettings, {
+      defaultColumnOrder: defaultColumnOrderIds
+    });
+    return {
+      isDirty: changedKeys.length > 0,
+      changedKeys,
+      changedCount: changedKeys.length,
+      activePerspectiveId,
+      canSaveToActiveView: Boolean(activePersonalPerspectiveId)
+    };
+  }, [
+    viewApiRequested,
+    perspectiveEnabled,
+    viewBaseline,
+    currentViewSettings,
+    defaultColumnOrderIds,
+    activePerspectiveId,
+    activePersonalPerspectiveId
+  ]);
+  React.useEffect(() => {
+    if (!viewApiRequested || !perspectiveEnabled || viewBaselineInitializedRef.current) return;
+    setViewBaseline(currentViewSettings);
+  }, [viewApiRequested, perspectiveEnabled, currentViewSettings, setViewBaseline]);
+  const viewDirtyStateRef = React.useRef(viewDirtyState);
+  const onColumnsDirtyChangeRef = React.useRef(onColumnsDirtyChange);
+  React.useLayoutEffect(() => {
+    viewDirtyStateRef.current = viewDirtyState;
+    onColumnsDirtyChangeRef.current = onColumnsDirtyChange;
+  }, [viewDirtyState, onColumnsDirtyChange]);
+  const lastDirtySignatureRef = React.useRef(null);
+  React.useEffect(() => {
+    const notify = onColumnsDirtyChangeRef.current;
+    if (!notify || !perspectiveEnabled) return;
+    const signature = JSON.stringify([
+      viewDirtyState.isDirty,
+      viewDirtyState.changedKeys,
+      viewDirtyState.activePerspectiveId,
+      viewDirtyState.canSaveToActiveView
+    ]);
+    if (lastDirtySignatureRef.current === signature) return;
+    lastDirtySignatureRef.current = signature;
+    notify(viewDirtyState);
+  }, [viewDirtyState, perspectiveEnabled]);
+  const saveCurrentView = React.useCallback(async (input) => {
+    if (!perspectiveTableId) return { ok: false, reason: "perspectives-disabled" };
+    if (perspectivePermissions === void 0) return { ok: false, reason: "not-ready" };
+    if (!canUsePerspectives) return { ok: false, reason: "perspectives-disabled" };
+    const targetId = input?.perspectiveId !== void 0 ? input.perspectiveId : activePersonalPerspectiveId;
+    const existing = targetId ? perspectiveData?.perspectives.find((item) => item.id === targetId) ?? null : null;
+    const name = (input?.name ?? existing?.name ?? "").trim();
+    if (!name) return { ok: false, reason: "name-required" };
+    try {
+      const saved = await savePerspectiveMutation.mutateAsync({
+        name,
+        isDefault: input?.isDefault ?? existing?.isDefault ?? false,
+        applyToRoles: [],
+        setRoleDefault: false,
+        perspectiveId: targetId ?? null
+      });
+      return { ok: true, perspectiveId: saved?.perspective?.id ?? null };
+    } catch (error2) {
+      return { ok: false, reason: "failed", error: error2 };
+    }
+  }, [
+    canUsePerspectives,
+    perspectivePermissions,
+    perspectiveTableId,
+    activePersonalPerspectiveId,
+    perspectiveData,
+    savePerspectiveMutation
+  ]);
+  React.useImperativeHandle(viewApiRef, () => ({
+    getCurrentSettings: () => getCurrentSettings(),
+    getDirtyState: () => viewDirtyStateRef.current,
+    saveCurrentView,
+    openViewsSidebar: () => setPerspectiveOpen(true)
+  }), [getCurrentSettings, saveCurrentView]);
+  const handleSaveViewClick = React.useCallback(async () => {
+    const result = await saveCurrentView();
+    if (result.ok) {
+      flash(t("ui.dataTable.saveView.success", "View saved"), "success");
+      return;
+    }
+    if (result.reason === "name-required") {
+      setPerspectiveOpen(true);
+      return;
+    }
+    if (result.reason === "failed") {
+      if (surfaceRecordConflict(result.error, t)) return;
+      flash(t("ui.dataTable.saveView.error", "Failed to save view"), "error");
+    }
+  }, [saveCurrentView, t]);
   const handlePerspectiveDelete = React.useCallback(async (perspectiveId) => {
     await deletePerspectiveMutation.mutateAsync({ perspectiveId });
   }, [deletePerspectiveMutation]);
@@ -2090,9 +2224,29 @@ function DataTable({
         }
       )
     ] }) : null;
-    const leadingItems = advancedFilterButton || perspectiveButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    const saveViewButton = showSaveViewButton && canUsePerspectives ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "default",
+        disabled: !viewDirtyState.isDirty || savePerspectiveMutation.isPending,
+        onClick: () => {
+          void handleSaveViewClick();
+        },
+        title: viewDirtyState.isDirty ? t("ui.dataTable.saveView.title", "Save the current view") : t("ui.dataTable.saveView.noChanges", "No unsaved changes"),
+        "data-testid": "save-view-trigger",
+        children: [
+          savePerspectiveMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: t("ui.dataTable.saveView.button", "Save view") }),
+          viewDirtyState.changedCount > 0 ? /* @__PURE__ */ jsx("span", { className: "ml-1 inline-flex h-5 min-w-5 px-1.5 items-center justify-center rounded-full bg-muted-foreground/30 text-background text-xs", children: viewDirtyState.changedCount }) : null
+        ]
+      }
+    ) : null;
+    const leadingItems = advancedFilterButton || perspectiveButton || saveViewButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       advancedFilterButton,
-      perspectiveButton
+      perspectiveButton,
+      saveViewButton
     ] }) : null;
     const trailingItems = hasBulkButtons ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       selectedRows.length > 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("ui.dataTable.bulkAction.selectedCount", "{count} selected", { count: selectedRows.length }) }) : null,
@@ -2186,7 +2340,12 @@ function DataTable({
     advancedFilter,
     advancedFilterRuleCount,
     isAdvancedFilterOpen,
-    resolvedAdvancedFilterFields
+    resolvedAdvancedFilterFields,
+    showSaveViewButton,
+    viewDirtyState,
+    savePerspectiveMutation.isPending,
+    handleSaveViewClick,
+    t
   ]);
   const hasTitle = title != null;
   const hasActions = actions !== void 0 && actions !== null && actions !== false;