@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/hooks/useDynamicTablePage.js

@@ -0,0 +1,1005 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiCall } from "../../utils/apiCall.js";
+import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { flash } from "../../FlashMessages.js";
+import { dispatch, useEventHandlers } from "../events/events.js";
+import {
+  apiToDynamicTable,
+  apiTemplateToDynamicTable,
+  dynamicTableToApi
+} from "../utils/perspectiveTransforms.js";
+import TableDeleteDialog from "../components/TableDeleteDialog.js";
+import { TableEvents } from "../types/index.js";
+import { mergeSharedFilters } from "../split-view/sharedCriteria.js";
+import { lookupColumnsToParam } from "../utils/lookupColumns.js";
+import { rollupColumnsToParam } from "../utils/rollupColumns.js";
+import { PERSPECTIVE_NAME_MAX_LENGTH } from "../types/perspective.js";
+const EMPTY_COLUMNS = [];
+function perspectiveWriteError(response, fallback) {
+  const message = response.result?.message ?? "";
+  return message.includes("duplicate key") ? "A view you deleted earlier still holds this name. Pick a different name." : fallback;
+}
+const LAST_PERSPECTIVE_KEY_PREFIX = "dt:lastPerspective:";
+const LIST_REFETCH_COALESCE_MS = 400;
+function readLastPerspectiveId(tableId) {
+  if (!tableId || typeof window === "undefined") return null;
+  try {
+    return window.sessionStorage.getItem(`${LAST_PERSPECTIVE_KEY_PREFIX}${tableId}`);
+  } catch {
+    return null;
+  }
+}
+function writeLastPerspectiveId(tableId, id) {
+  if (!tableId || typeof window === "undefined") return;
+  try {
+    const key = `${LAST_PERSPECTIVE_KEY_PREFIX}${tableId}`;
+    if (id) window.sessionStorage.setItem(key, id);
+    else window.sessionStorage.removeItem(key);
+  } catch {
+  }
+}
+function useDynamicTablePage(config) {
+  const {
+    source,
+    columns,
+    tableName,
+    perspectives: perspectivesTableId,
+    defaultSort,
+    defaultPageSize = 50,
+    idColumn = "id",
+    storageScope = "",
+    hooks
+  } = config;
+  const tableRef = useRef(null);
+  const queryClient = useQueryClient();
+  const storageTableId = perspectivesTableId ? `${storageScope}${perspectivesTableId}` : void 0;
+  const organizationScopeVersion = useOrganizationScopeVersion();
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(defaultPageSize);
+  const [sortField, setSortField] = useState(defaultSort?.field ?? "id");
+  const [sortDir, setSortDir] = useState(defaultSort?.direction ?? "asc");
+  const [search, setSearch] = useState("");
+  const [filters, setFilters] = useState(() => config.initialFilters ?? []);
+  const [grouping, setGrouping] = useState([]);
+  const [viewMode, setViewMode] = useState("table");
+  const [savedPerspectives, setSavedPerspectives] = useState([]);
+  const [sharedTemplates, setSharedTemplates] = useState([]);
+  const [activePerspectiveId, setActivePerspectiveId] = useState(null);
+  const [lookupColumns, setLookupColumns] = useState([]);
+  const [rollupColumns, setRollupColumns] = useState([]);
+  const [aggregations, setAggregations] = useState([]);
+  const [pendingDelete, setPendingDelete] = useState(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [pendingBulkDelete, setPendingBulkDelete] = useState(null);
+  const bulkResolverRef = useRef(null);
+  const queryKeyBase = config.queryKey ?? source;
+  const listInvalidateTimerRef = useRef(null);
+  const cancelPendingListInvalidation = useCallback(() => {
+    if (listInvalidateTimerRef.current) {
+      clearTimeout(listInvalidateTimerRef.current);
+      listInvalidateTimerRef.current = null;
+    }
+  }, []);
+  const scheduleListInvalidation = useCallback(() => {
+    cancelPendingListInvalidation();
+    listInvalidateTimerRef.current = setTimeout(() => {
+      listInvalidateTimerRef.current = null;
+      queryClient.invalidateQueries({ queryKey: [queryKeyBase] });
+    }, LIST_REFETCH_COALESCE_MS);
+  }, [cancelPendingListInvalidation, queryClient, queryKeyBase]);
+  const invalidateListNow = useCallback(() => {
+    cancelPendingListInvalidation();
+    queryClient.invalidateQueries({ queryKey: [queryKeyBase] });
+  }, [cancelPendingListInvalidation, queryClient, queryKeyBase]);
+  useEffect(() => cancelPendingListInvalidation, [cancelPendingListInvalidation]);
+  const defaultHiddenColumns = config.tableProps?.defaultHiddenColumns ?? EMPTY_COLUMNS;
+  const { data: perspectivesData, isFetched: perspectivesFetched } = useQuery({
+    queryKey: ["perspectives", perspectivesTableId],
+    queryFn: async () => {
+      const response = await apiCall(
+        `/api/perspectives/${perspectivesTableId}`
+      );
+      return response.ok ? response.result : null;
+    },
+    enabled: !!perspectivesTableId
+  });
+  const [perspectiveHydrated, setPerspectiveHydrated] = useState(!perspectivesTableId);
+  useEffect(() => {
+    if (!perspectivesTableId || !perspectivesFetched) return;
+    if (!perspectivesData?.perspectives || columns.length === 0) setPerspectiveHydrated(true);
+  }, [perspectivesTableId, perspectivesFetched, perspectivesData, columns.length]);
+  const initialPerspectivePickedRef = useRef(false);
+  useEffect(() => {
+    if (perspectivesData?.perspectives && columns.length > 0) {
+      const allCols = columns.map((c) => c.data);
+      const transformed = perspectivesData.perspectives.map(
+        (p) => apiToDynamicTable(p, allCols, defaultHiddenColumns)
+      );
+      setSavedPerspectives(transformed);
+      setSharedTemplates(
+        (perspectivesData.rolePerspectives ?? []).map(
+          (rp) => apiTemplateToDynamicTable(rp, allCols, defaultHiddenColumns)
+        )
+      );
+      if (!initialPerspectivePickedRef.current) {
+        const remembered = readLastPerspectiveId(storageTableId);
+        const baseViewId = transformed.find((p) => p.isBaseView)?.id ?? null;
+        const restored = remembered && transformed.some((p) => p.id === remembered) ? remembered : perspectivesData.defaultPerspectiveId ?? baseViewId;
+        initialPerspectivePickedRef.current = true;
+        if (restored) {
+          setActivePerspectiveId(restored);
+          const restoredPerspective = transformed.find((p) => p.id === restored);
+          if (restoredPerspective) {
+            if (restoredPerspective.filters.length > 0) setFilters(restoredPerspective.filters);
+            setLookupColumns(restoredPerspective.lookupColumns ?? []);
+            setRollupColumns(restoredPerspective.rollupColumns ?? []);
+            setAggregations(restoredPerspective.aggregations ?? []);
+            if (restoredPerspective.sorting.length > 0) {
+              setSortField(restoredPerspective.sorting[0].field);
+              setSortDir(restoredPerspective.sorting[0].direction);
+            }
+          }
+        }
+        setPerspectiveHydrated(true);
+      }
+    }
+  }, [perspectivesData, columns, defaultHiddenColumns, perspectivesTableId]);
+  useEffect(() => {
+    if (!initialPerspectivePickedRef.current) return;
+    writeLastPerspectiveId(storageTableId, activePerspectiveId);
+  }, [activePerspectiveId, perspectivesTableId]);
+  const sharedFilters = config.sharedFilters;
+  const sharedSearch = config.sharedSearch;
+  const effectiveFilters = useMemo(
+    () => mergeSharedFilters(filters, sharedFilters),
+    [filters, sharedFilters]
+  );
+  const effectiveSearch = sharedSearch !== void 0 ? sharedSearch : search;
+  const queryParams = useMemo(() => {
+    const params = new URLSearchParams();
+    params.set("page", String(page));
+    params.set("limit", String(limit));
+    params.set("pageSize", String(limit));
+    params.set("sortField", sortField);
+    params.set("sortDir", sortDir);
+    if (effectiveSearch) {
+      params.set("q", effectiveSearch);
+      params.set("search", effectiveSearch);
+    }
+    if (effectiveFilters.length) params.set("filters", JSON.stringify(effectiveFilters));
+    if (lookupColumns.length) params.set("lookups", lookupColumnsToParam(lookupColumns));
+    if (rollupColumns.length) params.set("rollups", rollupColumnsToParam(rollupColumns));
+    const extra = typeof config.extraParams === "function" ? config.extraParams() : config.extraParams;
+    if (extra) {
+      Object.entries(extra).forEach(([key, value]) => params.set(key, value));
+    }
+    return params.toString();
+  }, [page, limit, sortField, sortDir, effectiveSearch, effectiveFilters, lookupColumns, rollupColumns, config.extraParams]);
+  const queryKeyDeps = useMemo(
+    () => [organizationScopeVersion, ...config.queryKeyDeps ?? []],
+    [organizationScopeVersion, config.queryKeyDeps]
+  );
+  const dataQuery = useQuery({
+    queryKey: [queryKeyBase, queryParams, ...queryKeyDeps],
+    queryFn: async () => {
+      const call = await apiCall(`${source}?${queryParams}`);
+      if (!call.ok) throw new Error(`Failed to load ${tableName}`);
+      return call.result ?? { items: [], total: 0, totalPages: 1 };
+    },
+    // See `perspectiveHydrated` above (ledger 4.9). The skeleton stays up for
+    // the extra ~50 ms the perspectives request costs; in exchange the first
+    // response already carries the view's rollup values instead of a grid full
+    // of em-dashes that silently corrects itself a round-trip later.
+    enabled: perspectiveHydrated,
+    placeholderData: (previousData) => previousData
+  });
+  const aggregateSpec = useMemo(
+    () => aggregations.map((r) => r.dimension ? `${r.field}:${r.fn}:${r.dimension}` : `${r.field}:${r.fn}`).join(","),
+    [aggregations]
+  );
+  const aggregateParams = useMemo(() => {
+    if (!aggregateSpec) return null;
+    const params = new URLSearchParams(queryParams);
+    params.set("aggregate", aggregateSpec);
+    params.set("page", "1");
+    params.set("limit", "1");
+    params.set("pageSize", "1");
+    return params.toString();
+  }, [queryParams, aggregateSpec]);
+  const aggregateUnsupportedRef = useRef(false);
+  const aggregateQuery = useQuery({
+    queryKey: [queryKeyBase, "aggregate", aggregateParams, ...queryKeyDeps],
+    enabled: !!aggregateParams && !aggregateUnsupportedRef.current,
+    queryFn: async () => {
+      const call = await apiCall(`${source}?${aggregateParams}`);
+      if (!call.ok || !call.result?.aggregate) {
+        aggregateUnsupportedRef.current = true;
+        return null;
+      }
+      return call.result.aggregate;
+    },
+    placeholderData: (previousData) => previousData
+  });
+  const tableData = useMemo(() => {
+    const items = dataQuery.data?.items ?? [];
+    if (config.mapApiItem) {
+      return items.map(config.mapApiItem).filter(Boolean);
+    }
+    return items;
+  }, [dataQuery.data?.items, config.mapApiItem]);
+  const exportAllRows = useCallback(async () => {
+    const pageLimit = 100;
+    const collected = [];
+    let pageNum = 1;
+    let expected = null;
+    const RUNAWAY_PAGE_CAP = 1e4;
+    let maxPages = RUNAWAY_PAGE_CAP;
+    let incomplete = null;
+    while (pageNum <= maxPages) {
+      const params = new URLSearchParams();
+      params.set("page", String(pageNum));
+      params.set("limit", String(pageLimit));
+      params.set("pageSize", String(pageLimit));
+      params.set("sortField", sortField);
+      params.set("sortDir", sortDir);
+      const extra = typeof config.extraParams === "function" ? config.extraParams() : config.extraParams;
+      if (extra) Object.entries(extra).forEach(([key, value]) => params.set(key, value));
+      if (lookupColumns.length) params.set("lookups", lookupColumnsToParam(lookupColumns));
+      if (rollupColumns.length) params.set("rollups", rollupColumnsToParam(rollupColumns));
+      const call = await apiCall(
+        `${source}?${params.toString()}`
+      );
+      if (!call.ok) {
+        throw new Error(
+          `Export failed on page ${pageNum} (HTTP ${call.status}) after ${collected.length} row(s)`
+        );
+      }
+      if (!call.result) {
+        throw new Error(
+          `Export failed on page ${pageNum}: the server returned no readable body after ${collected.length} row(s)`
+        );
+      }
+      const items = call.result.items ?? [];
+      collected.push(...items);
+      if (typeof call.result.total === "number") expected = call.result.total;
+      const total = call.result.total ?? collected.length;
+      const totalPages = call.result.totalPages ?? Math.ceil(total / pageLimit);
+      if (Number.isFinite(totalPages) && totalPages > 0) {
+        maxPages = Math.min(RUNAWAY_PAGE_CAP, totalPages + 1);
+      }
+      if (items.length === 0 || pageNum >= totalPages) break;
+      pageNum++;
+      if (pageNum > maxPages) {
+        incomplete = maxPages >= RUNAWAY_PAGE_CAP ? `stopped at the ${RUNAWAY_PAGE_CAP}-page safety limit` : `the server declared ${totalPages} page(s) but did not finish within them`;
+      }
+    }
+    const rows = config.mapApiItem ? collected.map(config.mapApiItem).filter(Boolean) : collected;
+    if (!incomplete && expected !== null && collected.length < expected) {
+      incomplete = `fetched ${collected.length} of ${expected} row(s)`;
+    }
+    return {
+      rows,
+      expected,
+      complete: incomplete === null,
+      ...incomplete ? { reason: incomplete } : {}
+    };
+  }, [source, sortField, sortDir, lookupColumns, rollupColumns, config.extraParams, config.mapApiItem]);
+  const handleCellEditSave = useCallback(
+    async (payload) => {
+      if (config.cellEdit === false) return;
+      dispatch(tableRef.current, TableEvents.CELL_SAVE_START, {
+        rowIndex: payload.rowIndex,
+        colIndex: payload.colIndex
+      });
+      try {
+        const rowData = tableData[payload.rowIndex];
+        if (!rowData) throw new Error("Row data not found");
+        const cellEditConfig = typeof config.cellEdit === "object" ? config.cellEdit : {};
+        let hookResult = void 0;
+        if (hooks?.beforeCellEdit) {
+          hookResult = hooks.beforeCellEdit(payload, rowData);
+        }
+        let apiUrl;
+        if (hookResult?.url) {
+          apiUrl = hookResult.url;
+        } else if (typeof cellEditConfig.url === "function") {
+          apiUrl = cellEditConfig.url(payload, rowData);
+        } else if (cellEditConfig.url) {
+          apiUrl = `${cellEditConfig.url}/${rowData[idColumn]}`;
+        } else {
+          apiUrl = `${source}/${rowData[idColumn]}`;
+        }
+        let updatePayload;
+        if (hookResult?.payload) {
+          updatePayload = hookResult.payload;
+        } else if (cellEditConfig.mapPayload) {
+          updatePayload = cellEditConfig.mapPayload(payload, rowData);
+        } else {
+          updatePayload = { [payload.prop]: payload.newValue };
+        }
+        const method = hookResult?.method ?? cellEditConfig.method ?? "PUT";
+        const response = await apiCall(apiUrl, {
+          method,
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(updatePayload)
+        });
+        if (response.ok) {
+          dispatch(tableRef.current, TableEvents.CELL_SAVE_SUCCESS, {
+            rowIndex: payload.rowIndex,
+            colIndex: payload.colIndex
+          });
+          scheduleListInvalidation();
+          if (hooks?.afterMutation) await hooks.afterMutation("cellEdit", { payload, rowData });
+        } else {
+          const error = response.result?.error || "Update failed";
+          flash(error, "error");
+          dispatch(tableRef.current, TableEvents.CELL_SAVE_ERROR, {
+            rowIndex: payload.rowIndex,
+            colIndex: payload.colIndex,
+            error
+          });
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Unknown error";
+        flash(errorMessage, "error");
+        dispatch(tableRef.current, TableEvents.CELL_SAVE_ERROR, {
+          rowIndex: payload.rowIndex,
+          colIndex: payload.colIndex,
+          error: errorMessage
+        });
+      }
+    },
+    [tableData, scheduleListInvalidation, config.cellEdit, hooks, source, idColumn, queryKeyBase]
+  );
+  const handleNewRowSave = useCallback(
+    async (payload) => {
+      if (!config.create) return;
+      const createConfig = typeof config.create === "object" ? config.create : {};
+      if (createConfig.handler) {
+        await createConfig.handler(payload, {
+          tableRef,
+          invalidate: () => invalidateListNow()
+        });
+        return;
+      }
+      try {
+        let rowPayload = { ...payload.rowData };
+        if (hooks?.validateCreate) {
+          const validationError = hooks.validateCreate(payload.rowData);
+          if (validationError) {
+            flash(validationError, "error");
+            dispatch(tableRef.current, TableEvents.NEW_ROW_SAVE_ERROR, {
+              rowIndex: payload.rowIndex,
+              error: validationError
+            });
+            return;
+          }
+        }
+        if (hooks?.beforeCreate) {
+          const mapped = await hooks.beforeCreate(payload.rowData);
+          if (mapped) rowPayload = mapped;
+        }
+        if (createConfig.mapPayload) {
+          rowPayload = createConfig.mapPayload(payload.rowData);
+        }
+        const createUrl = createConfig.url ?? source;
+        const response = await apiCall(createUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(rowPayload)
+        });
+        if (response.ok && response.result) {
+          dispatch(tableRef.current, TableEvents.NEW_ROW_SAVE_SUCCESS, {
+            rowIndex: payload.rowIndex,
+            savedRowData: { ...payload.rowData, id: response.result.id }
+          });
+          invalidateListNow();
+          if (hooks?.afterMutation)
+            await hooks.afterMutation("create", { payload, result: response.result });
+        } else {
+          const error = response.result?.error || `Failed to create ${tableName}`;
+          flash(error, "error");
+          dispatch(tableRef.current, TableEvents.NEW_ROW_SAVE_ERROR, {
+            rowIndex: payload.rowIndex,
+            error
+          });
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : `Failed to create ${tableName}`;
+        flash(errorMessage, "error");
+        dispatch(tableRef.current, TableEvents.NEW_ROW_SAVE_ERROR, {
+          rowIndex: payload.rowIndex,
+          error: errorMessage
+        });
+      }
+    },
+    [config.create, hooks, source, tableName, queryClient, queryKeyBase]
+  );
+  const handleConfirmDelete = useCallback(async () => {
+    if (!pendingDelete) return;
+    if (hooks?.beforeDelete) {
+      const proceed = await hooks.beforeDelete(pendingDelete);
+      if (!proceed) return;
+    }
+    setIsDeleting(true);
+    try {
+      const deleteId = pendingDelete[idColumn];
+      let deleteUrl;
+      if (typeof config.delete === "string") {
+        deleteUrl = `${config.delete}/${deleteId}`;
+      } else if (typeof config.delete === "object" && config.delete.url) {
+        const urlConfig = config.delete.url;
+        deleteUrl = typeof urlConfig === "function" ? urlConfig(pendingDelete) : `${urlConfig}/${deleteId}`;
+      } else {
+        deleteUrl = `${source}/${deleteId}`;
+      }
+      const response = await apiCall(deleteUrl, { method: "DELETE" });
+      if (response.ok) {
+        flash(`${tableName} deleted`, "success");
+        invalidateListNow();
+        setPendingDelete(null);
+        if (hooks?.afterMutation) await hooks.afterMutation("delete", { row: pendingDelete });
+      } else {
+        flash(response.result?.error || `Failed to delete ${tableName}`, "error");
+      }
+    } catch (error) {
+      flash(error instanceof Error ? error.message : `Failed to delete ${tableName}`, "error");
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [pendingDelete, hooks, idColumn, config.delete, source, tableName, queryClient, queryKeyBase]);
+  const buildDeleteUrl = useCallback(
+    (id) => {
+      if (typeof config.delete === "string") return `${config.delete}/${id}`;
+      if (config.delete && typeof config.delete === "object" && config.delete.url) {
+        const urlConfig = config.delete.url;
+        return typeof urlConfig === "function" ? urlConfig({ [idColumn]: id }) : `${urlConfig}/${id}`;
+      }
+      return `${source}/${id}`;
+    },
+    [config.delete, idColumn, source]
+  );
+  const requestBulkDelete = useCallback(
+    (ids) => new Promise((resolve, reject) => {
+      if (!ids.length) {
+        resolve();
+        return;
+      }
+      bulkResolverRef.current = { resolve, reject };
+      setPendingBulkDelete(ids);
+    }),
+    []
+  );
+  const handleConfirmBulkDelete = useCallback(async () => {
+    const ids = pendingBulkDelete;
+    if (!ids || !ids.length) return;
+    setIsDeleting(true);
+    try {
+      let deleted = 0;
+      let failed = 0;
+      for (const id of ids) {
+        try {
+          const response = await apiCall(buildDeleteUrl(id), { method: "DELETE" });
+          if (response.ok) deleted += 1;
+          else failed += 1;
+        } catch {
+          failed += 1;
+        }
+      }
+      if (deleted > 0) flash(`${deleted} ${tableName} deleted`, "success");
+      if (failed > 0) flash(`Failed to delete ${failed} ${tableName}`, "error");
+      invalidateListNow();
+      if (hooks?.afterMutation) await hooks.afterMutation("delete", { ids });
+      bulkResolverRef.current?.resolve();
+    } finally {
+      bulkResolverRef.current = null;
+      setPendingBulkDelete(null);
+      setIsDeleting(false);
+    }
+  }, [pendingBulkDelete, buildDeleteUrl, tableName, queryClient, queryKeyBase, hooks]);
+  const cancelBulkDelete = useCallback(() => {
+    bulkResolverRef.current?.reject(new Error("cancelled"));
+    bulkResolverRef.current = null;
+    setPendingBulkDelete(null);
+  }, []);
+  const handlePerspectiveSave = useCallback(
+    async (payload) => {
+      if (!perspectivesTableId) return;
+      const settings = dynamicTableToApi(payload.perspective);
+      const existingPerspective = savedPerspectives.find((p) => p.id === payload.perspective.id) ?? savedPerspectives.find((p) => p.name === payload.perspective.name);
+      const response = await apiCall(`/api/perspectives/${perspectivesTableId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          // The upstream validator reads `perspectiveId`, not `id` — an `id` key
+          // is stripped by zod and the save silently falls back to an upsert by
+          // NAME. Harmless here (same name ⇒ same row) but fatal for rename,
+          // which changes the name and so used to CLONE the view.
+          perspectiveId: existingPerspective?.id,
+          name: payload.perspective.name,
+          settings
+        })
+      });
+      if (response.ok) {
+        if (!payload.silent) {
+          flash(
+            payload.perspective.isBaseView ? "Default view saved" : "Perspective saved",
+            "success"
+          );
+        }
+        queryClient.invalidateQueries({ queryKey: ["perspectives", perspectivesTableId] });
+        const savedId = response.result?.perspective?.id;
+        if (savedId) setActivePerspectiveId(savedId);
+      } else {
+        flash(perspectiveWriteError(response, "Failed to save perspective"), "error");
+      }
+    },
+    [perspectivesTableId, savedPerspectives, queryClient]
+  );
+  const handlePerspectiveSelect = useCallback(
+    (payload) => {
+      setActivePerspectiveId(payload.id);
+      if (payload.config) {
+        setFilters(payload.config.filters);
+        setLookupColumns(payload.config.lookupColumns ?? []);
+        setRollupColumns(payload.config.rollupColumns ?? []);
+        setAggregations(payload.config.aggregations ?? []);
+        if (payload.config.sorting.length > 0) {
+          setSortField(payload.config.sorting[0].field);
+          setSortDir(payload.config.sorting[0].direction);
+        }
+        setPage(1);
+      } else {
+        setFilters([]);
+        setLookupColumns([]);
+        setRollupColumns([]);
+        setAggregations([]);
+        setSortField(defaultSort?.field ?? "id");
+        setSortDir(defaultSort?.direction ?? "asc");
+        setPage(1);
+      }
+    },
+    [defaultSort]
+  );
+  const handlePerspectiveRename = useCallback(
+    async (payload) => {
+      if (!perspectivesTableId) return;
+      const perspective = savedPerspectives.find((p) => p.id === payload.id);
+      if (perspective) {
+        if (payload.newName.length > PERSPECTIVE_NAME_MAX_LENGTH) {
+          flash(
+            `A view name can be at most ${PERSPECTIVE_NAME_MAX_LENGTH} characters. This one is ${payload.newName.length}.`,
+            "error"
+          );
+          return;
+        }
+        const settings = dynamicTableToApi(perspective);
+        const response = await apiCall(`/api/perspectives/${perspectivesTableId}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          // `perspectiveId`, not `id` — see handlePerspectiveSave. With `id` the
+          // rename created a SECOND view under the new name and left the old one.
+          body: JSON.stringify({ perspectiveId: payload.id, name: payload.newName, settings })
+        });
+        if (response.ok) {
+          flash("Perspective renamed", "success");
+          queryClient.invalidateQueries({ queryKey: ["perspectives", perspectivesTableId] });
+        } else {
+          flash(perspectiveWriteError(response, "Failed to rename perspective"), "error");
+        }
+      }
+    },
+    [perspectivesTableId, savedPerspectives, queryClient]
+  );
+  const handlePerspectiveDuplicate = useCallback(
+    async (payload) => {
+      if (!perspectivesTableId) return;
+      const settings = dynamicTableToApi({
+        ...payload.perspective,
+        name: payload.newName,
+        isDefault: false,
+        isBaseView: false,
+        publication: void 0
+      });
+      const response = await apiCall(`/api/perspectives/${perspectivesTableId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: payload.newName, settings, isDefault: false })
+      });
+      if (response.ok) {
+        flash("View duplicated", "success");
+        queryClient.invalidateQueries({ queryKey: ["perspectives", perspectivesTableId] });
+        const savedId = response.result?.perspective?.id;
+        if (savedId) setActivePerspectiveId(savedId);
+      } else {
+        flash(perspectiveWriteError(response, "Failed to duplicate view"), "error");
+      }
+    },
+    [perspectivesTableId, queryClient]
+  );
+  const handlePerspectiveSetDefault = useCallback(
+    async (payload) => {
+      if (!perspectivesTableId) return;
+      const perspective = savedPerspectives.find((p) => p.id === payload.id);
+      if (!perspective) return;
+      const settings = dynamicTableToApi(perspective);
+      const response = await apiCall(`/api/perspectives/${perspectivesTableId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          perspectiveId: payload.id,
+          name: perspective.name,
+          settings,
+          isDefault: payload.isDefault
+        })
+      });
+      if (response.ok) {
+        flash("Default view updated", "success");
+        queryClient.invalidateQueries({ queryKey: ["perspectives", perspectivesTableId] });
+      } else {
+        flash("Failed to set the default view", "error");
+      }
+    },
+    [perspectivesTableId, savedPerspectives, queryClient]
+  );
+  const handlePerspectivePublish = useCallback(
+    async (payload) => {
+      if (!perspectivesTableId) return;
+      const perspective = savedPerspectives.find((p) => p.id === payload.id);
+      if (!perspective || !payload.roleIds.length) return;
+      const settings = dynamicTableToApi({
+        ...perspective,
+        publication: { roleIds: payload.roleIds, publishedAt: (/* @__PURE__ */ new Date()).toISOString() }
+      });
+      const response = await apiCall(`/api/perspectives/${perspectivesTableId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          perspectiveId: payload.id,
+          name: perspective.name,
+          settings,
+          applyToRoles: payload.roleIds,
+          setRoleDefault: false
+        })
+      });
+      if (response.ok) {
+        flash("View shared as a template", "success");
+        queryClient.invalidateQueries({ queryKey: ["perspectives", perspectivesTableId] });
+      } else {
+        flash("Failed to share the view", "error");
+      }
+    },
+    [perspectivesTableId, savedPerspectives, queryClient]
+  );
+  const handlePerspectiveTemplateCopy = useCallback(
+    async (payload) => {
+      if (!perspectivesTableId) return;
+      const { template } = payload;
+      const settings = dynamicTableToApi({
+        ...template,
+        name: payload.newName,
+        isDefault: false,
+        isBaseView: false,
+        publication: void 0,
+        origin: {
+          templateId: template.id,
+          version: template.version,
+          name: template.name,
+          copiedAt: (/* @__PURE__ */ new Date()).toISOString()
+        }
+      });
+      const response = await apiCall(`/api/perspectives/${perspectivesTableId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: payload.newName, settings, isDefault: false })
+      });
+      if (response.ok) {
+        flash("Template copied to your views", "success");
+        queryClient.invalidateQueries({ queryKey: ["perspectives", perspectivesTableId] });
+        const savedId = response.result?.perspective?.id;
+        if (savedId) setActivePerspectiveId(savedId);
+      } else {
+        flash(perspectiveWriteError(response, "Failed to copy the template"), "error");
+      }
+    },
+    [perspectivesTableId, queryClient]
+  );
+  const handlePerspectiveDelete = useCallback(
+    async (payload) => {
+      if (!perspectivesTableId) return;
+      const url = payload.hardDelete ? `/api/perspectives/${perspectivesTableId}/${payload.id}?hardDelete=true` : `/api/perspectives/${perspectivesTableId}/${payload.id}`;
+      const response = await apiCall(url, { method: "DELETE" });
+      if (response.ok) {
+        flash("Perspective deleted", "success");
+        queryClient.invalidateQueries({ queryKey: ["perspectives", perspectivesTableId] });
+        if (activePerspectiveId === payload.id) {
+          setActivePerspectiveId(null);
+          setFilters([]);
+          setSortField(defaultSort?.field ?? "id");
+          setSortDir(defaultSort?.direction ?? "asc");
+        }
+      } else {
+        flash("Failed to delete perspective", "error");
+      }
+    },
+    [perspectivesTableId, activePerspectiveId, queryClient, defaultSort]
+  );
+  const handlePerspectiveChange = useCallback(
+    (payload) => {
+      if (payload.config.lookupColumns) {
+        setLookupColumns(payload.config.lookupColumns);
+        setPage(1);
+      }
+      if (payload.config.rollupColumns) {
+        setRollupColumns(payload.config.rollupColumns);
+      }
+      if (payload.config.aggregations) {
+        setAggregations(payload.config.aggregations);
+      }
+      if (payload.config.grouping) {
+        setGrouping(payload.config.grouping);
+      }
+      if (payload.config.viewMode) {
+        setViewMode(payload.config.viewMode);
+      }
+      if (payload.config.sorting) {
+        if (payload.config.sorting.length > 0) {
+          const firstSort = payload.config.sorting[0];
+          setSortField(firstSort.field);
+          setSortDir(firstSort.direction);
+        } else {
+          setSortField(defaultSort?.field ?? "id");
+          setSortDir(defaultSort?.direction ?? "asc");
+        }
+        setPage(1);
+      }
+    },
+    [defaultSort]
+  );
+  const eventHandlers = useMemo(() => {
+    const handlers = {
+      [TableEvents.COLUMN_SORT]: (payload) => {
+        setSortField(payload.columnName);
+        setSortDir(payload.direction || "asc");
+        setPage(1);
+      },
+      [TableEvents.SEARCH]: (payload) => {
+        setSearch(payload.query);
+        setPage(1);
+      },
+      [TableEvents.FILTER_CHANGE]: (payload) => {
+        setFilters(payload.filters);
+        setPage(1);
+      }
+    };
+    if (config.cellEdit !== false) {
+      handlers[TableEvents.CELL_EDIT_SAVE] = handleCellEditSave;
+    }
+    if (config.create) {
+      handlers[TableEvents.NEW_ROW_SAVE] = handleNewRowSave;
+    }
+    if (perspectivesTableId) {
+      handlers[TableEvents.PERSPECTIVE_SAVE] = handlePerspectiveSave;
+      handlers[TableEvents.PERSPECTIVE_SELECT] = handlePerspectiveSelect;
+      handlers[TableEvents.PERSPECTIVE_RENAME] = handlePerspectiveRename;
+      handlers[TableEvents.PERSPECTIVE_DELETE] = handlePerspectiveDelete;
+      handlers[TableEvents.PERSPECTIVE_CHANGE] = handlePerspectiveChange;
+      handlers[TableEvents.PERSPECTIVE_DUPLICATE] = handlePerspectiveDuplicate;
+      handlers[TableEvents.PERSPECTIVE_SET_DEFAULT] = handlePerspectiveSetDefault;
+      handlers[TableEvents.PERSPECTIVE_PUBLISH] = handlePerspectivePublish;
+      handlers[TableEvents.PERSPECTIVE_TEMPLATE_COPY] = handlePerspectiveTemplateCopy;
+    }
+    return handlers;
+  }, [
+    config.cellEdit,
+    config.create,
+    perspectivesTableId,
+    handleCellEditSave,
+    handleNewRowSave,
+    handlePerspectiveSave,
+    handlePerspectiveSelect,
+    handlePerspectiveRename,
+    handlePerspectiveDelete,
+    handlePerspectiveChange,
+    handlePerspectiveDuplicate,
+    handlePerspectiveSetDefault,
+    handlePerspectivePublish,
+    handlePerspectiveTemplateCopy
+  ]);
+  useEventHandlers(eventHandlers, tableRef);
+  const customLoadFilterSuggestions = config.loadFilterSuggestions;
+  const loadFilterSuggestions = useMemo(() => {
+    if (customLoadFilterSuggestions) return customLoadFilterSuggestions;
+    if (!config.filterSuggestions) return void 0;
+    const entityType = config.filterSuggestions;
+    return async (field, query) => {
+      try {
+        const params = new URLSearchParams({ entityId: entityType, field, query: query || "" });
+        const result = await apiCall(
+          `/api/entities/filter-suggestions?${params.toString()}`,
+          { credentials: "include" }
+        );
+        if (!result.ok || !result.result) return [];
+        return result.result.items ?? [];
+      } catch {
+        return [];
+      }
+    };
+  }, [config.filterSuggestions, customLoadFilterSuggestions]);
+  const pagination = useMemo(
+    () => ({
+      currentPage: page,
+      totalPages: Math.ceil((dataQuery.data?.total || 0) / limit),
+      limit,
+      total: dataQuery.data?.total ?? 0,
+      limitOptions: [25, 50, 100],
+      onPageChange: setPage,
+      onLimitChange: (l) => {
+        setLimit(l);
+        setPage(1);
+      }
+    }),
+    [page, limit, dataQuery.data?.total]
+  );
+  const dynamicTableProps = useMemo(() => {
+    const baseProps = {
+      tableRef,
+      data: tableData,
+      columns,
+      tableName,
+      // Stable identity for per-user column-width persistence. Reuse the
+      // perspectives table id when present, else fall back to the entity source.
+      tableId: storageTableId ?? `${storageScope}${source}`,
+      idColumnName: idColumn,
+      colHeaders: true,
+      rowHeaders: true,
+      pagination,
+      // Read-only, for ONE thing: the in-grid finder's scope label says
+      // "…in 100 loaded rows (filtered by \"abc\")". Without it, a finder count
+      // and a SearchBar filter can be conflated while both are active.
+      // The EFFECTIVE needle, so the label names what actually narrowed the
+      // rows — a workspace search when one is driving this pane, this pane's
+      // own box otherwise (identical when no workspace is involved).
+      searchQuery: effectiveSearch,
+      onExportAll: exportAllRows,
+      aggregateResult: aggregateQuery.data ?? null,
+      aggregateLoading: aggregateQuery.isFetching,
+      aggregateError: aggregateQuery.isError,
+      // HEDGE-119 — carry the list query's FAILURE to the grid.
+      //
+      // `tableData` above collapses a rejected query to `[]` (there is no
+      // `dataQuery.data` to read items off), so without this flag the grid
+      // cannot tell "the server refused" from "the server said zero rows" and
+      // paints `EmptyState` for both. That is how a 500 on the invoice queue
+      // reached an accountant as the words "Nothing here yet".
+      //
+      // `placeholderData` keeps the PREVIOUS page's rows visible while a
+      // refetch fails, so this is deliberately not `|| isError` on the whole
+      // grid: rows we still hold are still shown, and the error state only
+      // takes over the zero-row region, which is the case that lies.
+      loadError: dataQuery.isError,
+      onRetryLoad: () => {
+        void dataQuery.refetch();
+      },
+      ...perspectivesTableId ? {
+        savedPerspectives,
+        activePerspectiveId,
+        // A4/A6 — which view opens by default FOR THIS USER. Comes straight
+        // off the perspectives index (`isDefault` is scoped by `userId`), so
+        // the star on the tab is a per-user fact, never an org-wide one.
+        defaultPerspectiveId: perspectivesData?.defaultPerspectiveId ?? null,
+        // Personal views + shared templates. `canPublishTemplates` is the
+        // server's own answer (`perspectives.role_defaults`), not a guess:
+        // a user without the feature never sees the publish affordance, and
+        // the endpoint would 403 them anyway.
+        sharedTemplates,
+        canPublishTemplates: perspectivesData?.canApplyToRoles ?? false,
+        publishableRoles: perspectivesData?.roles ?? []
+      } : {},
+      ...loadFilterSuggestions ? { loadFilterSuggestions } : {},
+      ...config.loadLookupSources ? { loadLookupSources: config.loadLookupSources } : {},
+      ...config.loadRollupSources ? { loadRollupSources: config.loadRollupSources } : {},
+      ...config.delete ? { onBulkDelete: requestBulkDelete } : {},
+      ...config.tableProps,
+      // LAST, so it cannot be overridden: while a workspace search is driving
+      // this pane, that pane's own search box is ignored (see `sharedSearch`).
+      // Leaving it on screen would let a user type into a box that does
+      // nothing — and the density argument for the bar only holds if the rows
+      // it replaces actually go away. Absent `sharedSearch`, this spreads
+      // nothing and `config.tableProps` still has the final word.
+      ...sharedSearch !== void 0 ? { hideSearch: true } : {}
+    };
+    return baseProps;
+  }, [
+    tableData,
+    columns,
+    tableName,
+    idColumn,
+    pagination,
+    effectiveSearch,
+    exportAllRows,
+    aggregateQuery.data,
+    aggregateQuery.isFetching,
+    aggregateQuery.isError,
+    dataQuery.isError,
+    dataQuery.refetch,
+    perspectivesTableId,
+    source,
+    savedPerspectives,
+    activePerspectiveId,
+    perspectivesData?.defaultPerspectiveId,
+    perspectivesData?.canApplyToRoles,
+    perspectivesData?.roles,
+    sharedTemplates,
+    loadFilterSuggestions,
+    config.loadLookupSources,
+    config.loadRollupSources,
+    config.delete,
+    requestBulkDelete,
+    config.tableProps,
+    sharedSearch
+  ]);
+  const deleteConfig = config.delete;
+  const dialogConfig = useMemo(() => {
+    if (!deleteConfig) return null;
+    if (typeof deleteConfig === "object" && typeof deleteConfig !== "boolean") {
+      return deleteConfig;
+    }
+    return {};
+  }, [deleteConfig]);
+  const cancelDelete = useCallback(() => setPendingDelete(null), []);
+  const deleteDialog = dialogConfig ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableDeleteDialog,
+      {
+        row: pendingDelete,
+        isDeleting,
+        onConfirm: handleConfirmDelete,
+        onCancel: cancelDelete,
+        restoreFocusRef: tableRef,
+        title: dialogConfig.title,
+        description: dialogConfig.description,
+        nameColumn: dialogConfig.nameColumn
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TableDeleteDialog,
+      {
+        row: pendingBulkDelete ? { count: pendingBulkDelete.length } : null,
+        isDeleting,
+        onConfirm: handleConfirmBulkDelete,
+        onCancel: cancelBulkDelete,
+        restoreFocusRef: tableRef,
+        title: (row) => `Delete ${row?.count ?? ""} ${tableName}`.replace(/\s+/g, " ").trim(),
+        description: (row) => `Are you sure you want to delete ${row?.count ?? "these"} selected items? This action cannot be undone.`
+      }
+    )
+  ] }) : null;
+  return {
+    props: dynamicTableProps,
+    deleteDialog,
+    setRowToDelete: setPendingDelete,
+    query: dataQuery,
+    aggregateResult: aggregateQuery.data ?? null,
+    aggregateLoading: aggregateQuery.isFetching,
+    aggregateError: aggregateQuery.isError,
+    // HEDGE-119 — hosts that render their own body (split views, card modes)
+    // need the same signal the grid now gets, so they can refuse to draw an
+    // "empty" affordance over a request that never landed.
+    isError: dataQuery.isError,
+    // `!perspectiveHydrated` counts as loading. TanStack reports `isLoading`
+    // false while a query is DISABLED (it is pending but not fetching), so
+    // without this the host would drop its skeleton and paint an empty grid for
+    // the one frame the list is waiting on the perspective.
+    isLoading: (!perspectiveHydrated || dataQuery.isLoading) && !dataQuery.data,
+    refresh: () => invalidateListNow(),
+    state: { page, limit, search, filters, sortField, sortDir, grouping, viewMode }
+  };
+}
+export {
+  useDynamicTablePage
+};
+//# sourceMappingURL=useDynamicTablePage.js.map