@open-mercato/ui 0.4.2-canary-c02407ff85

package/dist/backend/DataTable.js

@@ -0,0 +1,1363 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from "@tanstack/react-table";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle } from "lucide-react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table.js";
+import { Button } from "../primitives/button.js";
+import { Spinner } from "../primitives/spinner.js";
+import { TooltipProvider } from "../primitives/tooltip.js";
+import { TruncatedCell } from "./TruncatedCell.js";
+import { FilterBar } from "./FilterBar.js";
+import { useCustomFieldFilterDefs } from "./utils/customFieldFilters.js";
+import { fetchCustomFieldDefinitionsPayload } from "./utils/customFieldDefs.js";
+import { subscribeOrganizationScopeChanged } from "@open-mercato/shared/lib/frontend/organizationEvents";
+import { InjectionSpot } from "./injection/InjectionSpot.js";
+import { serializeExport, defaultExportFilename } from "@open-mercato/shared/lib/crud/exporters";
+import { apiCall } from "./utils/apiCall.js";
+import { raiseCrudError } from "./utils/serverErrors.js";
+import { PerspectiveSidebar } from "./PerspectiveSidebar.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+let refreshScheduled = false;
+function scheduleRouterRefresh(router) {
+  if (refreshScheduled) return;
+  refreshScheduled = true;
+  if (typeof window === "undefined") {
+    refreshScheduled = false;
+    return;
+  }
+  window.requestAnimationFrame(() => {
+    refreshScheduled = false;
+    try {
+      router.refresh();
+    } catch {
+    }
+  });
+}
+function extractEditAction(items) {
+  const byId = items.find((item) => item.id === "edit" && (item.href || item.onSelect));
+  if (byId) return byId;
+  return items.find(
+    (item) => item.label.toLowerCase() === "edit" && (item.href || item.onSelect)
+  ) || null;
+}
+const DEFAULT_EXPORT_FORMATS = ["csv", "json", "xml", "markdown"];
+const EXPORT_LABELS = {
+  csv: "CSV",
+  json: "JSON",
+  xml: "XML",
+  markdown: "Markdown"
+};
+const EMPTY_FILTER_DEFS = [];
+const EMPTY_FILTER_VALUES = Object.freeze({});
+function resolveExportSections(config) {
+  if (!config) return [];
+  const sections = [];
+  const baseFormats = config.formats && config.formats.length > 0 ? config.formats : DEFAULT_EXPORT_FORMATS;
+  const addSection = (key, section, fallbackTitle) => {
+    if (!section || !section.getUrl && !section.prepare) return;
+    const title = section.title?.trim().length ? section.title.trim() : fallbackTitle;
+    const seen = /* @__PURE__ */ new Set();
+    const formatsSource = section.formats && section.formats.length > 0 ? section.formats : baseFormats;
+    const formats = formatsSource.filter((format) => {
+      if (seen.has(format)) return false;
+      seen.add(format);
+      return true;
+    });
+    if (formats.length === 0) return;
+    sections.push({
+      key,
+      title,
+      description: section.description,
+      formats,
+      getUrl: section.getUrl,
+      prepare: section.prepare ? async (format) => {
+        const result = await section.prepare(format);
+        if (!result) return null;
+        if ("prepared" in result) return result;
+        return { prepared: result };
+      } : void 0,
+      filename: section.filename,
+      disabled: Boolean(config.disabled || section.disabled)
+    });
+  };
+  const hasExplicitSections = Array.isArray(config.sections) && config.sections.length > 0;
+  if (!config.view && !config.full && !hasExplicitSections && config.getUrl) {
+    addSection("view", { getUrl: config.getUrl, formats: config.formats }, "Export what you view");
+  } else {
+    addSection("view", config.view, "Export what you view");
+  }
+  if (hasExplicitSections) {
+    config.sections.forEach((section, idx) => {
+      addSection(`section-${idx}`, section, section.title?.trim().length ? section.title : `Export ${idx + 1}`);
+    });
+  }
+  addSection("full", config.full, "Full data export");
+  return sections;
+}
+const PERSPECTIVE_COOKIE_PREFIX = "om_table_perspective";
+const PERSPECTIVE_STORAGE_PREFIX = "om_table_perspective_snapshot";
+function formatDurationLabel(durationMs) {
+  if (durationMs == null) return "";
+  if (!Number.isFinite(durationMs)) return "";
+  if (durationMs < 0) return "";
+  if (durationMs < 1e3) return `${Math.round(durationMs)}ms`;
+  if (durationMs < 1e4) return `${(durationMs / 1e3).toFixed(1)}s`;
+  if (durationMs < 6e4) return `${Math.round(durationMs / 1e3)}s`;
+  if (durationMs < 36e5) return `${(durationMs / 6e4).toFixed(durationMs < 6e5 ? 1 : 0)}m`;
+  return `${(durationMs / 36e5).toFixed(durationMs < 72e5 ? 1 : 0)}h`;
+}
+function readPerspectiveCookie(tableId) {
+  if (typeof document === "undefined") return null;
+  const key = `${PERSPECTIVE_COOKIE_PREFIX}:${tableId}`;
+  const pattern = new RegExp(`(?:^|;\\s*)${key}=([^;]+)`);
+  const match = document.cookie.match(pattern);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+function writePerspectiveCookie(tableId, perspectiveId) {
+  if (typeof document === "undefined") return;
+  const key = `${PERSPECTIVE_COOKIE_PREFIX}:${tableId}`;
+  const expires = perspectiveId ? "Max-Age=31536000" : "Max-Age=0";
+  const value = perspectiveId ? encodeURIComponent(perspectiveId) : "";
+  document.cookie = `${key}=${value}; Path=/; ${expires}; SameSite=Lax`;
+}
+function readPerspectiveSnapshot(tableId) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(`${PERSPECTIVE_STORAGE_PREFIX}:${tableId}`);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return null;
+    const perspectiveId = typeof parsed.perspectiveId === "string" && parsed.perspectiveId.trim().length > 0 ? parsed.perspectiveId : null;
+    const settings = typeof parsed.settings === "object" && parsed.settings !== null ? parsed.settings : null;
+    const updatedAt = typeof parsed.updatedAt === "number" ? parsed.updatedAt : Date.now();
+    if (!settings) return null;
+    return { perspectiveId, settings, updatedAt };
+  } catch {
+    return null;
+  }
+}
+function writePerspectiveSnapshot(tableId, snapshot) {
+  if (typeof window === "undefined") return;
+  const key = `${PERSPECTIVE_STORAGE_PREFIX}:${tableId}`;
+  try {
+    if (!snapshot) {
+      window.localStorage.removeItem(key);
+      return;
+    }
+    window.localStorage.setItem(key, JSON.stringify(snapshot));
+  } catch {
+  }
+}
+function sanitizePerspectiveSettings(source) {
+  if (!source || typeof source !== "object") return null;
+  const forbidden = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
+  const result = {};
+  if (Array.isArray(source.columnOrder)) {
+    const seen = /* @__PURE__ */ new Set();
+    const order = source.columnOrder.map((id) => typeof id === "string" ? id.trim() : "").filter((id) => id.length > 0 && !seen.has(id) && (seen.add(id), true));
+    if (order.length) result.columnOrder = order;
+  }
+  if (source.columnVisibility && typeof source.columnVisibility === "object") {
+    const entries = Object.entries(source.columnVisibility).filter(([key, value]) => typeof key === "string" && key.trim().length > 0 && !forbidden.has(key) && typeof value === "boolean");
+    if (entries.length) {
+      const visibility = {};
+      entries.forEach(([key, value]) => {
+        visibility[key] = value;
+      });
+      result.columnVisibility = visibility;
+    }
+  }
+  if (Array.isArray(source.sorting)) {
+    const sorting = source.sorting.map((item) => {
+      const id = typeof item?.id === "string" ? item.id.trim() : "";
+      if (!id || forbidden.has(id)) return null;
+      return { id, desc: Boolean(item?.desc) };
+    }).filter((item) => item !== null);
+    if (sorting.length) result.sorting = sorting;
+  }
+  if (typeof source.pageSize === "number" && Number.isFinite(source.pageSize)) {
+    const pageSize = Math.max(1, Math.min(500, Math.floor(source.pageSize)));
+    result.pageSize = pageSize;
+  }
+  if (typeof source.searchValue === "string" && source.searchValue.trim().length > 0) {
+    result.searchValue = source.searchValue.trim().slice(0, 200);
+  }
+  if (source.filters && typeof source.filters === "object") {
+    const filters = {};
+    for (const [key, value] of Object.entries(source.filters)) {
+      if (typeof key === "string") {
+        const trimmed = key.trim();
+        if (trimmed.length > 0 && !forbidden.has(trimmed)) filters[trimmed] = value;
+      }
+    }
+    if (Object.keys(filters).length) result.filters = filters;
+  }
+  return Object.keys(result).length ? result : null;
+}
+function normalizeLabel(input) {
+  if (!input) return "";
+  return input.replace(/^cf[_:]/, "").replace(/[_:\-]+/g, " ").replace(/\b\w/g, (ch) => ch.toUpperCase());
+}
+function getColumnTruncateConfig(columnId, accessorKey, columnMeta) {
+  const key = accessorKey || columnId;
+  const metaMaxWidth = typeof columnMeta?.maxWidth === "string" ? columnMeta.maxWidth.trim() : "";
+  if (key.startsWith("cf_") || key.startsWith("cf:")) {
+    return {
+      maxWidth: metaMaxWidth || "120px",
+      truncate: typeof columnMeta?.truncate === "boolean" ? columnMeta.truncate : true
+    };
+  }
+  const wideColumns = ["title", "name", "description", "source", "companies", "people"];
+  if (wideColumns.includes(key)) {
+    return {
+      maxWidth: metaMaxWidth || "250px",
+      truncate: typeof columnMeta?.truncate === "boolean" ? columnMeta.truncate : true
+    };
+  }
+  const mediumColumns = ["status", "pipelineStage", "pipeline_stage", "type", "category"];
+  if (mediumColumns.includes(key)) {
+    return {
+      maxWidth: metaMaxWidth || "180px",
+      truncate: typeof columnMeta?.truncate === "boolean" ? columnMeta.truncate : true
+    };
+  }
+  if (key.endsWith("_at") || key.endsWith("At") || key.includes("date") || key.includes("Date")) {
+    return {
+      maxWidth: metaMaxWidth || "120px",
+      truncate: typeof columnMeta?.truncate === "boolean" ? columnMeta.truncate : true
+    };
+  }
+  return {
+    maxWidth: metaMaxWidth || "150px",
+    truncate: typeof columnMeta?.truncate === "boolean" ? columnMeta.truncate : true
+  };
+}
+function shouldSkipTruncation(columnId) {
+  const skipColumns = ["actions", "select", "checkbox", "expand"];
+  return skipColumns.includes(columnId.toLowerCase());
+}
+function ExportMenu({ config, sections }) {
+  const t = useT();
+  const { label } = config;
+  const defaultLabel = label ?? t("ui.dataTable.export.label", "Export");
+  const disabled = Boolean(config.disabled);
+  const hasSections = sections.length > 0;
+  const [open, setOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open || !hasSections) return;
+    const onDocClick = (event) => {
+      const target = event.target;
+      if (menuRef.current && !menuRef.current.contains(target) && buttonRef.current && !buttonRef.current.contains(target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        buttonRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [hasSections, open]);
+  if (!hasSections) return null;
+  const handleSelect = async (section, format) => {
+    try {
+      if (section.prepare) {
+        const preparedResult = await section.prepare(format);
+        if (!preparedResult) return;
+        const prepared = preparedResult.prepared;
+        const serialized = serializeExport(prepared, format);
+        const filename = preparedResult.filename ?? section.filename?.(format) ?? config.filename?.(format) ?? defaultExportFilename(section.title, format);
+        if (typeof window !== "undefined") {
+          const blob = new Blob([serialized.body], { type: serialized.contentType });
+          const href = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = href;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(href);
+        }
+      } else if (section.getUrl) {
+        const url = section.getUrl(format);
+        if (url && typeof window !== "undefined") {
+          window.open(url, "_blank", "noopener,noreferrer");
+        }
+      }
+    } catch {
+    } finally {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: buttonRef,
+        variant: "outline",
+        size: "sm",
+        type: "button",
+        onClick: () => {
+          if (disabled) return;
+          setOpen((prev) => !prev);
+        },
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        disabled,
+        children: defaultLabel
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        className: "absolute right-0 mt-2 w-60 rounded-md border bg-background py-2 shadow z-20",
+        children: sections.map((section, idx) => /* @__PURE__ */ jsxs("div", { className: idx > 0 ? "mt-2 border-t pt-3" : "", children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase text-muted-foreground", children: section.title }),
+            section.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground leading-snug", children: section.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1 px-2 pb-1", children: section.formats.map((format) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "block w-full rounded px-2 py-1 text-left text-sm hover:bg-accent",
+              onClick: () => void handleSelect(section, format),
+              disabled: section.disabled,
+              children: EXPORT_LABELS[format]
+            },
+            `${section.key}-${format}`
+          )) })
+        ] }, section.key))
+      }
+    ) : null
+  ] });
+}
+function DataTable({
+  columns,
+  data,
+  toolbar,
+  title,
+  actions,
+  refreshButton,
+  sortable,
+  sorting: sortingProp,
+  onSortingChange,
+  pagination,
+  isLoading,
+  emptyState,
+  error,
+  rowActions,
+  onRowClick,
+  disableRowClick = false,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder,
+  searchAlign = "right",
+  filters: baseFilters = EMPTY_FILTER_DEFS,
+  filterValues = EMPTY_FILTER_VALUES,
+  onFiltersApply,
+  onFiltersClear,
+  entityId,
+  entityIds,
+  exporter,
+  perspective,
+  embedded = false,
+  onCustomFieldFilterFieldsetChange,
+  customFieldFilterKeyExtras,
+  injectionSpotId,
+  injectionContext
+}) {
+  const t = useT();
+  const router = useRouter();
+  const lastScopeRef = React.useRef(null);
+  const hasInitializedScopeRef = React.useRef(false);
+  React.useEffect(() => {
+    return subscribeOrganizationScopeChanged((detail) => {
+      const prev = lastScopeRef.current;
+      lastScopeRef.current = detail;
+      if (!hasInitializedScopeRef.current) {
+        hasInitializedScopeRef.current = true;
+        return;
+      }
+      if (prev && prev.organizationId === detail.organizationId && prev.tenantId === detail.tenantId) {
+        return;
+      }
+      scheduleRouterRefresh(router);
+    });
+  }, [router]);
+  const queryClient = useQueryClient();
+  const perspectiveConfig = perspective ?? null;
+  const perspectiveTableId = perspectiveConfig?.tableId ?? null;
+  const perspectiveEnabled = Boolean(perspectiveTableId);
+  const initialSnapshotRef = React.useRef(null);
+  const snapshotTableIdRef = React.useRef(null);
+  if (typeof window !== "undefined") {
+    if (perspectiveTableId !== snapshotTableIdRef.current) {
+      initialSnapshotRef.current = perspectiveTableId ? readPerspectiveSnapshot(perspectiveTableId) : null;
+      snapshotTableIdRef.current = perspectiveTableId ?? null;
+    }
+  } else if (snapshotTableIdRef.current !== perspectiveTableId) {
+    snapshotTableIdRef.current = perspectiveTableId ?? null;
+    initialSnapshotRef.current = null;
+  }
+  const initialSnapshot = initialSnapshotRef.current;
+  const initialSettingsFromConfig = sanitizePerspectiveSettings(perspectiveConfig?.initialState?.initialSettings ?? null);
+  const initialSettingsFromSnapshot = sanitizePerspectiveSettings(initialSnapshot?.settings ?? null);
+  const mergedInitialSettings = initialSettingsFromConfig ?? initialSettingsFromSnapshot ?? null;
+  const initialActiveId = perspectiveConfig?.initialState?.activePerspectiveId ?? initialSnapshot?.perspectiveId ?? null;
+  const [isPerspectiveOpen, setPerspectiveOpen] = React.useState(false);
+  const [activePerspectiveId, setActivePerspectiveId] = React.useState(initialActiveId);
+  const [columnVisibility, setColumnVisibility] = React.useState(() => mergedInitialSettings?.columnVisibility ?? {});
+  const [columnOrder, setColumnOrder] = React.useState(() => mergedInitialSettings?.columnOrder ?? []);
+  const [deletingIds, setDeletingIds] = React.useState([]);
+  const [roleClearingIds, setRoleClearingIds] = React.useState([]);
+  const [perspectiveApiMissing, setPerspectiveApiMissing] = React.useState(false);
+  const perspectiveFeatureQuery = useQuery({
+    queryKey: ["feature-check", "perspectives"],
+    enabled: perspectiveEnabled,
+    staleTime: 5 * 60 * 1e3,
+    queryFn: async () => {
+      try {
+        const call = await apiCall(
+          "/api/auth/feature-check",
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ features: ["perspectives.use", "perspectives.role_defaults"] })
+          }
+        );
+        if (!call.ok) throw new Error(`feature-check failed (${call.status})`);
+        const data2 = call.result ?? {};
+        const granted = Array.isArray(data2?.granted) ? data2.granted.map((f) => String(f)) : [];
+        const has = (feature) => granted.some((grantedFeature) => {
+          if (grantedFeature === "*") return true;
+          if (grantedFeature === feature) return true;
+          if (grantedFeature.endsWith(".*")) {
+            const prefix = grantedFeature.slice(0, -2);
+            return feature === prefix || feature.startsWith(`${prefix}.`);
+          }
+          return false;
+        });
+        return {
+          use: has("perspectives.use"),
+          roleDefaults: has("perspectives.role_defaults")
+        };
+      } catch {
+        return {
+          use: true,
+          roleDefaults: true
+        };
+      }
+    }
+  });
+  const perspectivePermissions = perspectiveFeatureQuery.data;
+  const canUsePerspectives = perspectiveEnabled && Boolean(perspectivePermissions?.use);
+  const canUseRoleDefaultsFeature = Boolean(perspectivePermissions?.roleDefaults);
+  React.useEffect(() => {
+    if (!canUsePerspectives && isPerspectiveOpen) {
+      setPerspectiveOpen(false);
+    }
+  }, [canUsePerspectives, isPerspectiveOpen]);
+  React.useEffect(() => {
+    if (!perspectiveTableId) return;
+    if (!mergedInitialSettings) return;
+    const snapshot = {
+      perspectiveId: initialActiveId,
+      settings: mergedInitialSettings,
+      updatedAt: Date.now()
+    };
+    writePerspectiveSnapshot(perspectiveTableId, snapshot);
+    initialSnapshotRef.current = snapshot;
+  }, [perspectiveTableId, mergedInitialSettings, initialActiveId]);
+  const perspectiveQuery = useQuery({
+    queryKey: ["table-perspectives", perspectiveTableId],
+    queryFn: async () => {
+      if (!perspectiveTableId) throw new Error("Missing table id");
+      const call = await apiCall(`/api/perspectives/${encodeURIComponent(perspectiveTableId)}`);
+      if (call.status === 404) {
+        setPerspectiveApiMissing(true);
+        return {
+          tableId: perspectiveTableId,
+          perspectives: [],
+          defaultPerspectiveId: null,
+          rolePerspectives: [],
+          roles: [],
+          canApplyToRoles: false
+        };
+      }
+      if (!call.ok) {
+        await raiseCrudError(call.response, t("ui.dataTable.perspectives.error.load", "Failed to load perspectives"));
+      }
+      setPerspectiveApiMissing(false);
+      const payload = call.result;
+      if (!payload) throw new Error(t("ui.dataTable.perspectives.error.load", "Failed to load perspectives"));
+      return payload;
+    },
+    enabled: canUsePerspectives,
+    initialData: perspectiveConfig?.initialState?.response,
+    staleTime: 5 * 60 * 1e3,
+    gcTime: 10 * 60 * 1e3
+  });
+  const perspectiveData = perspectiveQuery.data;
+  const initialPerspectiveAppliedRef = React.useRef(Boolean(mergedInitialSettings));
+  const DATE_FORMAT = process.env.NEXT_PUBLIC_DATE_FORMAT || "YYYY-MM-DD HH:mm";
+  const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+  const simpleFormat = (d, fmt) => {
+    const YYYY = String(d.getFullYear());
+    const MM = pad2(d.getMonth() + 1);
+    const DD = pad2(d.getDate());
+    const HH = pad2(d.getHours());
+    const mm = pad2(d.getMinutes());
+    const ss = pad2(d.getSeconds());
+    return fmt.replace(/YYYY/g, YYYY).replace(/MM/g, MM).replace(/DD/g, DD).replace(/HH/g, HH).replace(/mm/g, mm).replace(/ss/g, ss);
+  };
+  const tryParseDate = (v) => {
+    if (v == null) return null;
+    if (v instanceof Date) return isNaN(v.getTime()) ? null : v;
+    if (typeof v === "number") {
+      const d = new Date(v);
+      return isNaN(d.getTime()) ? null : d;
+    }
+    if (typeof v === "string") {
+      const s = v.trim();
+      if (!s) return null;
+      if (/^\d{4}-\d{2}-\d{2}(?:[ T]\d{2}:\d{2}(?::\d{2})?(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?)?$/.test(s)) {
+        const d2 = new Date(s);
+        return isNaN(d2.getTime()) ? null : d2;
+      }
+      const d = new Date(s);
+      return isNaN(d.getTime()) ? null : d;
+    }
+    return null;
+  };
+  const [dateColumnIds, setDateColumnIds] = React.useState(null);
+  React.useEffect(() => {
+    if (dateColumnIds) return;
+    if (!data || data.length === 0) return;
+    const accessors = columns.map((c) => {
+      const key = c.accessorKey;
+      const id = c.id;
+      return { id: id || key || "", key };
+    });
+    const guessed = /* @__PURE__ */ new Set();
+    accessors.forEach((a) => {
+      if (!a.id) return;
+      const name = a.id;
+      if (name.endsWith("_at")) {
+        guessed.add(name);
+        return;
+      }
+    });
+    setDateColumnIds(guessed);
+  }, [dateColumnIds, data, columns]);
+  const responsiveClass = (priority, hidden) => {
+    if (hidden) return "hidden";
+    switch (priority) {
+      case 2:
+        return "hidden sm:table-cell";
+      case 3:
+        return "hidden md:table-cell";
+      case 4:
+        return "hidden lg:table-cell";
+      case 5:
+        return "hidden xl:table-cell";
+      case 6:
+        return "hidden 2xl:table-cell";
+      default:
+        return "";
+    }
+  };
+  const resolvePriority = React.useCallback((column) => {
+    const meta = column.columnDef?.meta;
+    const rawPriority = typeof meta?.priority === "number" ? meta.priority : void 0;
+    if (rawPriority && rawPriority > 0) return rawPriority;
+    const index = column.getIndex();
+    return index <= 1 ? 1 : 2;
+  }, []);
+  const initialSorting = React.useMemo(() => {
+    if (mergedInitialSettings?.sorting) {
+      return mergedInitialSettings.sorting.map((item) => ({ id: item.id, desc: Boolean(item.desc) }));
+    }
+    return [];
+  }, [mergedInitialSettings]);
+  const [sorting, setSorting] = React.useState(() => {
+    if (sortingProp && sortingProp.length) return sortingProp;
+    if (initialSorting.length) return initialSorting;
+    return [];
+  });
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    ...sortable ? { getSortedRowModel: getSortedRowModel() } : {},
+    state: { sorting, columnVisibility, columnOrder },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(sorting) : updater;
+      setSorting(next);
+      onSortingChange?.(next);
+    },
+    onColumnVisibilityChange: (updater) => {
+      const next = typeof updater === "function" ? updater(columnVisibility) : updater;
+      setColumnVisibility(next);
+    },
+    onColumnOrderChange: (updater) => {
+      const next = typeof updater === "function" ? updater(columnOrder) : updater;
+      setColumnOrder(next);
+    }
+  });
+  React.useEffect(() => {
+    if (sortingProp) setSorting(sortingProp);
+  }, [sortingProp]);
+  React.useEffect(() => {
+    const ids = table.getAllLeafColumns().map((column) => column.id);
+    if (!ids.length) return;
+    setColumnOrder((prev) => {
+      if (!prev.length) return ids;
+      const allowed = ids;
+      const filtered = prev.filter((id) => allowed.includes(id));
+      const seen = new Set(filtered);
+      for (const id of allowed) {
+        if (!seen.has(id)) {
+          filtered.push(id);
+          seen.add(id);
+        }
+      }
+      const changed = filtered.length !== prev.length || filtered.some((id, index) => id !== prev[index]);
+      return changed ? filtered : prev;
+    });
+  }, [table, columns]);
+  const initialVisibilityApplied = React.useRef(Boolean(mergedInitialSettings?.columnVisibility));
+  React.useEffect(() => {
+    if (initialVisibilityApplied.current) return;
+    const hidden = {};
+    table.getAllLeafColumns().forEach((column) => {
+      const hiddenMeta = column.columnDef?.meta?.hidden;
+      if (hiddenMeta) hidden[column.id] = false;
+    });
+    if (Object.keys(hidden).length) {
+      setColumnVisibility((prev) => ({ ...hidden, ...prev }));
+    }
+    initialVisibilityApplied.current = true;
+  }, [table, columns]);
+  const getCurrentSettings = React.useCallback(() => {
+    const visibility = {};
+    for (const [key, value] of Object.entries(columnVisibility)) {
+      if (typeof key === "string" && typeof value === "boolean") {
+        visibility[key] = value;
+      }
+    }
+    const filtersRecord = {};
+    for (const [key, value] of Object.entries(filterValues ?? {})) {
+      if (typeof key === "string") filtersRecord[key] = value;
+    }
+    const candidate = {
+      columnOrder,
+      columnVisibility: visibility,
+      sorting,
+      filters: filtersRecord,
+      searchValue
+    };
+    return sanitizePerspectiveSettings(candidate) ?? {};
+  }, [columnOrder, columnVisibility, sorting, filterValues, searchValue]);
+  const applyPerspectiveSettings = React.useCallback((settings, nextId) => {
+    const normalized = sanitizePerspectiveSettings(settings) ?? {};
+    if (normalized.columnOrder && normalized.columnOrder.length) {
+      setColumnOrder(normalized.columnOrder);
+    } else {
+      const ids = table.getAllLeafColumns().map((column) => column.id);
+      if (ids.length) setColumnOrder(ids);
+    }
+    if (normalized.columnVisibility) setColumnVisibility(normalized.columnVisibility);
+    else setColumnVisibility({});
+    if (normalized.sorting) {
+      const sortingState = normalized.sorting.map((item) => ({
+        id: item.id,
+        desc: item.desc === true
+      }));
+      setSorting(sortingState);
+      onSortingChange?.(sortingState);
+    } else {
+      setSorting([]);
+      onSortingChange?.([]);
+    }
+    if (onFiltersApply) {
+      onFiltersApply(normalized.filters ?? {});
+    }
+    if (onSearchChange) {
+      onSearchChange(normalized.searchValue ?? "");
+    }
+    setActivePerspectiveId(nextId);
+    if (perspectiveTableId) {
+      writePerspectiveCookie(perspectiveTableId, nextId);
+      if (nextId) {
+        const snapshot = { perspectiveId: nextId, settings: normalized, updatedAt: Date.now() };
+        writePerspectiveSnapshot(perspectiveTableId, snapshot);
+        initialSnapshotRef.current = snapshot;
+      } else {
+        writePerspectiveSnapshot(perspectiveTableId, null);
+        initialSnapshotRef.current = null;
+      }
+    }
+  }, [onFiltersApply, onSearchChange, onSortingChange, perspectiveTableId, table]);
+  const perspectiveQueryKey = ["table-perspectives", perspectiveTableId];
+  const savePerspectiveMutation = useMutation({
+    mutationFn: async (input) => {
+      if (!perspectiveTableId) throw new Error("Missing table id");
+      const payload = {
+        perspectiveId: input.perspectiveId ?? void 0,
+        name: input.name,
+        settings: getCurrentSettings(),
+        isDefault: input.isDefault,
+        applyToRoles: input.applyToRoles,
+        setRoleDefault: input.setRoleDefault
+      };
+      if (process.env.NODE_ENV !== "production") {
+        console.debug("[DataTable] perspective payload", payload);
+      }
+      const call = await apiCall(
+        `/api/perspectives/${encodeURIComponent(perspectiveTableId)}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        }
+      );
+      if (call.status === 404) {
+        throw new Error(t("ui.dataTable.perspectives.error.apiUnavailable", "Perspectives API is not available. Run `npm run modules:prepare` to regenerate module routes and restart the dev server."));
+      }
+      if (!call.ok) {
+        await raiseCrudError(call.response, t("ui.dataTable.perspectives.error.save", "Failed to save perspective"));
+      }
+      const result = call.result;
+      if (!result) throw new Error(t("ui.dataTable.perspectives.error.save", "Failed to save perspective"));
+      return result;
+    },
+    onSuccess: (data2) => {
+      if (perspectiveTableId) {
+        void queryClient.invalidateQueries({ queryKey: perspectiveQueryKey });
+      }
+      if (data2.perspective) {
+        applyPerspectiveSettings(data2.perspective.settings, data2.perspective.id);
+      }
+    }
+  });
+  const resolveColumnLabel = React.useCallback((column) => {
+    const meta = column.columnDef?.meta;
+    if (typeof meta?.label === "string" && meta.label.trim().length > 0) return meta.label.trim();
+    if (typeof meta?.title === "string" && meta.title.trim().length > 0) return meta.title.trim();
+    const header = column.columnDef.header;
+    if (typeof header === "string") return header;
+    if (typeof header === "function") return normalizeLabel(column.id);
+    return normalizeLabel(column.id);
+  }, []);
+  const columnOptions = React.useMemo(() => {
+    const leaves = table.getAllLeafColumns();
+    const baseOrder = columnOrder.length ? columnOrder : leaves.map((column) => column.id);
+    const seen = /* @__PURE__ */ new Set();
+    const ordered = baseOrder.map((id) => {
+      const col = leaves.find((column) => column.id === id);
+      if (!col) return null;
+      seen.add(id);
+      return col;
+    }).filter(Boolean);
+    leaves.forEach((column) => {
+      if (!seen.has(column.id)) ordered.push(column);
+    });
+    return ordered.map((column) => ({
+      id: column.id,
+      label: resolveColumnLabel(column),
+      visible: columnVisibility[column.id] ?? column.getIsVisible(),
+      canHide: column.getCanHide()
+    }));
+  }, [table, columnOrder, resolveColumnLabel, columnVisibility, columns]);
+  const activePersonalPerspectiveId = React.useMemo(() => {
+    if (!perspectiveData || !activePerspectiveId) return null;
+    const found = perspectiveData.perspectives.find((p) => p.id === activePerspectiveId);
+    return found ? found.id : null;
+  }, [perspectiveData, activePerspectiveId]);
+  const deletePerspectiveMutation = useMutation({
+    mutationFn: async ({ perspectiveId }) => {
+      if (!perspectiveTableId) throw new Error("Missing table id");
+      const call = await apiCall(
+        `/api/perspectives/${encodeURIComponent(perspectiveTableId)}/${encodeURIComponent(perspectiveId)}`,
+        { method: "DELETE" }
+      );
+      if (call.status === 404) throw new Error(t("ui.dataTable.perspectives.error.apiUnavailable", "Perspectives API is not available. Run `npm run modules:prepare` and restart the dev server."));
+      if (!call.ok) {
+        await raiseCrudError(call.response, t("ui.dataTable.perspectives.error.delete", "Failed to delete perspective"));
+      }
+    },
+    onMutate: ({ perspectiveId }) => {
+      setDeletingIds((prev) => prev.includes(perspectiveId) ? prev : [...prev, perspectiveId]);
+    },
+    onSettled: (_data, _error, variables) => {
+      setDeletingIds((prev) => prev.filter((id) => id !== variables.perspectiveId));
+    },
+    onSuccess: (_data, variables) => {
+      const removedActive = activePerspectiveId === variables.perspectiveId;
+      if (perspectiveTableId) {
+        void queryClient.invalidateQueries({ queryKey: perspectiveQueryKey });
+        if (removedActive) {
+          setActivePerspectiveId(null);
+          writePerspectiveCookie(perspectiveTableId, null);
+          writePerspectiveSnapshot(perspectiveTableId, null);
+          initialSnapshotRef.current = null;
+          initialPerspectiveAppliedRef.current = false;
+        }
+      } else if (removedActive) {
+        setActivePerspectiveId(null);
+        initialPerspectiveAppliedRef.current = false;
+      }
+    }
+  });
+  const clearRoleMutation = useMutation({
+    mutationFn: async ({ roleId }) => {
+      if (!perspectiveTableId) throw new Error("Missing table id");
+      const call = await apiCall(
+        `/api/perspectives/${encodeURIComponent(perspectiveTableId)}/roles/${encodeURIComponent(roleId)}`,
+        { method: "DELETE" }
+      );
+      if (call.status === 404) throw new Error(t("ui.dataTable.perspectives.error.apiUnavailable", "Perspectives API is not available. Run `npm run modules:prepare` and restart the dev server."));
+      if (!call.ok) {
+        await raiseCrudError(call.response, t("ui.dataTable.perspectives.error.clearRoles", "Failed to clear role perspectives"));
+      }
+    },
+    onMutate: ({ roleId }) => {
+      setRoleClearingIds((prev) => prev.includes(roleId) ? prev : [...prev, roleId]);
+    },
+    onSettled: (_data, _error, variables) => {
+      setRoleClearingIds((prev) => prev.filter((id) => id !== variables.roleId));
+    },
+    onSuccess: (_data, variables) => {
+      if (perspectiveTableId) {
+        void queryClient.invalidateQueries({ queryKey: perspectiveQueryKey });
+      }
+      if (activePerspectiveId) {
+        const current = queryClient.getQueryData(perspectiveQueryKey);
+        const match = current?.rolePerspectives.find((rp) => rp.id === activePerspectiveId);
+        if (match && match.roleId === variables.roleId) {
+          setActivePerspectiveId(null);
+          if (perspectiveTableId) writePerspectiveCookie(perspectiveTableId, null);
+          if (perspectiveTableId) writePerspectiveSnapshot(perspectiveTableId, null);
+          initialSnapshotRef.current = null;
+          initialPerspectiveAppliedRef.current = false;
+        }
+      }
+    }
+  });
+  const handlePerspectiveActivate = React.useCallback((item, _source) => {
+    applyPerspectiveSettings(item.settings, item.id);
+    setPerspectiveOpen(false);
+  }, [applyPerspectiveSettings]);
+  const handlePerspectiveSave = React.useCallback(async (input) => {
+    const normalizedRoles = Array.from(new Set(input.applyToRoles));
+    await savePerspectiveMutation.mutateAsync({
+      name: input.name.trim(),
+      isDefault: input.isDefault,
+      applyToRoles: normalizedRoles,
+      setRoleDefault: normalizedRoles.length > 0 ? input.setRoleDefault : false,
+      perspectiveId: activePersonalPerspectiveId
+    });
+  }, [savePerspectiveMutation, activePersonalPerspectiveId]);
+  const handlePerspectiveDelete = React.useCallback(async (perspectiveId) => {
+    await deletePerspectiveMutation.mutateAsync({ perspectiveId });
+  }, [deletePerspectiveMutation]);
+  const handleClearRole = React.useCallback(async (roleId) => {
+    await clearRoleMutation.mutateAsync({ roleId });
+  }, [clearRoleMutation]);
+  const handleToggleColumn = React.useCallback((columnId, visible) => {
+    const column = table.getColumn(columnId);
+    if (!column) return;
+    setColumnVisibility((prev) => {
+      const next = { ...prev };
+      if (visible) delete next[columnId];
+      else next[columnId] = false;
+      return next;
+    });
+    column.toggleVisibility(visible);
+  }, [table]);
+  const handleMoveColumn = React.useCallback((columnId, direction) => {
+    setColumnOrder((prev) => {
+      const idx = prev.indexOf(columnId);
+      if (idx === -1) return prev;
+      const swap = direction === "up" ? idx - 1 : idx + 1;
+      if (swap < 0 || swap >= prev.length) return prev;
+      const next = [...prev];
+      const tmp = next[swap];
+      next[swap] = next[idx];
+      next[idx] = tmp;
+      table.setColumnOrder(next);
+      return next;
+    });
+  }, [table]);
+  const perspectiveApiWarning = perspectiveApiMissing && canUsePerspectives ? t("ui.dataTable.perspectives.warning.apiUnavailable", "Perspectives API is not available yet. Run `npm run modules:prepare` to regenerate module routes, then restart the server.") : null;
+  const loadStartRef = React.useRef(null);
+  const [measuredDurationMs, setMeasuredDurationMs] = React.useState(null);
+  React.useEffect(() => {
+    if (typeof isLoading !== "boolean") return;
+    if (isLoading) {
+      if (loadStartRef.current === null) {
+        const now = typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+        loadStartRef.current = now;
+      }
+      return;
+    }
+    if (loadStartRef.current !== null) {
+      const now = typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+      setMeasuredDurationMs(now - loadStartRef.current);
+      loadStartRef.current = null;
+    }
+  }, [isLoading]);
+  React.useLayoutEffect(() => {
+    if (!canUsePerspectives) return;
+    if (!perspectiveTableId) return;
+    if (initialPerspectiveAppliedRef.current && activePerspectiveId != null) return;
+    const source = perspectiveData ?? perspectiveConfig?.initialState?.response;
+    if (!source) return;
+    const tryResolve = (id) => {
+      if (!id) return void 0;
+      return source.perspectives.find((p) => p.id === id) ?? source.rolePerspectives.find((p) => p.id === id);
+    };
+    let target;
+    if (activePerspectiveId) {
+      target = tryResolve(activePerspectiveId);
+    }
+    const cookieId = readPerspectiveCookie(perspectiveTableId);
+    if (!target && cookieId) target = tryResolve(cookieId);
+    if (!target && source.defaultPerspectiveId) {
+      target = tryResolve(source.defaultPerspectiveId);
+    }
+    if (!target) {
+      target = source.rolePerspectives.find((p) => p.isDefault);
+    }
+    if (!target) {
+      target = source.perspectives[0];
+    }
+    if (target) {
+      applyPerspectiveSettings(target.settings, target.id);
+    }
+    initialPerspectiveAppliedRef.current = true;
+  }, [canUsePerspectives, perspectiveData, perspectiveTableId, perspectiveConfig, applyPerspectiveSettings, activePerspectiveId]);
+  const renderPagination = () => {
+    if (!pagination) return null;
+    const { page, totalPages, onPageChange, durationMs, cacheStatus } = pagination;
+    const startItem = (page - 1) * pagination.pageSize + 1;
+    const endItem = Math.min(page * pagination.pageSize, pagination.total);
+    const effectiveDuration = typeof durationMs === "number" && Number.isFinite(durationMs) && durationMs >= 0 ? durationMs : measuredDurationMs ?? void 0;
+    const durationLabel = formatDurationLabel(effectiveDuration);
+    const normalizedCacheStatus = cacheStatus === "hit" || cacheStatus === "miss" ? cacheStatus : null;
+    const cacheBadge = normalizedCacheStatus ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex items-center justify-center",
+        "aria-label": t("ui.dataTable.pagination.cache.ariaLabel", "Cache {status}", { status: normalizedCacheStatus.toUpperCase() }),
+        title: t("ui.dataTable.pagination.cache.title", "Cache {status}", { status: normalizedCacheStatus.toUpperCase() }),
+        children: [
+          /* @__PURE__ */ jsx(
+            Circle,
+            {
+              className: `h-3.5 w-3.5 ${normalizedCacheStatus === "hit" ? "text-emerald-500" : "text-amber-500"}`,
+              strokeWidth: 3
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("ui.dataTable.pagination.cache.srOnly", "Cache {status}", { status: normalizedCacheStatus.toUpperCase() }) })
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { children: durationLabel ? t("ui.dataTable.pagination.resultsWithDuration", "Showing {start} to {end} of {total} results in {duration}", { start: startItem, end: endItem, total: pagination.total, duration: durationLabel }) : t("ui.dataTable.pagination.results", "Showing {start} to {end} of {total} results", { start: startItem, end: endItem, total: pagination.total }) }),
+        cacheBadge
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => onPageChange(page - 1),
+            disabled: page <= 1,
+            children: t("ui.dataTable.pagination.previous", "Previous")
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("ui.dataTable.pagination.pageInfo", "Page {page} of {totalPages}", { page, totalPages }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => onPageChange(page + 1),
+            disabled: page >= totalPages,
+            children: t("ui.dataTable.pagination.next", "Next")
+          }
+        )
+      ] })
+    ] });
+  };
+  const resolvedEntityIds = React.useMemo(() => {
+    if (Array.isArray(entityIds) && entityIds.length) {
+      const dedup = /* @__PURE__ */ new Set();
+      const list = [];
+      entityIds.forEach((id) => {
+        const trimmed = typeof id === "string" ? id.trim() : "";
+        if (!trimmed || dedup.has(trimmed)) return;
+        dedup.add(trimmed);
+        list.push(trimmed);
+      });
+      return list;
+    }
+    if (typeof entityId === "string" && entityId.trim().length > 0) {
+      return [entityId.trim()];
+    }
+    return [];
+  }, [entityId, entityIds]);
+  const entityKey = React.useMemo(() => resolvedEntityIds.length ? resolvedEntityIds.join("|") : null, [resolvedEntityIds]);
+  const customFieldFilterExtrasSignature = React.useMemo(
+    () => JSON.stringify(customFieldFilterKeyExtras ?? []),
+    [customFieldFilterKeyExtras]
+  );
+  const [cfFilterFieldsetsByEntity, setCfFilterFieldsetsByEntity] = React.useState({});
+  const [cfFilterFieldsetSelection, setCfFilterFieldsetSelection] = React.useState({});
+  React.useEffect(() => {
+    if (!entityKey) {
+      setCfFilterFieldsetsByEntity({});
+      setCfFilterFieldsetSelection({});
+      return;
+    }
+    let cancelled = false;
+    const loadFieldsets = async () => {
+      try {
+        const payload = await fetchCustomFieldDefinitionsPayload(resolvedEntityIds);
+        if (cancelled) return;
+        const fieldsets = payload.fieldsetsByEntity ?? {};
+        setCfFilterFieldsetsByEntity(fieldsets);
+        const selectionChanges = [];
+        let shouldNotify = false;
+        setCfFilterFieldsetSelection((prev) => {
+          const next = {};
+          let changed = false;
+          resolvedEntityIds.forEach((entityId2) => {
+            const list = fieldsets[entityId2] ?? [];
+            if (!list.length) {
+              if (prev[entityId2] !== void 0) changed = true;
+              return;
+            }
+            const existing = prev[entityId2];
+            const fallback = list[0]?.code ?? null;
+            const isValidExisting = existing ? list.some((entry) => entry.code === existing) : false;
+            const value = isValidExisting ? existing : fallback ?? null;
+            next[entityId2] = value;
+            if (value !== existing) {
+              changed = true;
+              selectionChanges.push([entityId2, value]);
+            }
+          });
+          if (Object.keys(prev).length !== Object.keys(next).length) changed = true;
+          if (changed) {
+            shouldNotify = true;
+            return next;
+          }
+          return prev;
+        });
+        if (shouldNotify && selectionChanges.length && onCustomFieldFilterFieldsetChange) {
+          selectionChanges.forEach(([entityId2, value]) => onCustomFieldFilterFieldsetChange(value, entityId2));
+        }
+      } catch {
+        if (!cancelled) {
+          setCfFilterFieldsetsByEntity({});
+          setCfFilterFieldsetSelection({});
+        }
+      }
+    };
+    loadFieldsets();
+    return () => {
+      cancelled = true;
+    };
+  }, [customFieldFilterExtrasSignature, entityKey, onCustomFieldFilterFieldsetChange, resolvedEntityIds]);
+  const supportsCustomFieldFilterFieldsets = resolvedEntityIds.length === 1 && (cfFilterFieldsetsByEntity[resolvedEntityIds[0]]?.length ?? 0) > 0;
+  const activeCustomFieldFilterFieldset = supportsCustomFieldFilterFieldsets ? cfFilterFieldsetSelection[resolvedEntityIds[0]] ?? cfFilterFieldsetsByEntity[resolvedEntityIds[0]]?.[0]?.code ?? null : null;
+  const handleCustomFieldFilterFieldsetChange = React.useCallback(
+    (value) => {
+      if (!supportsCustomFieldFilterFieldsets) return;
+      const entityId2 = resolvedEntityIds[0];
+      const nextValue = value || null;
+      setCfFilterFieldsetSelection((prev) => {
+        if (prev[entityId2] === nextValue) return prev;
+        return { ...prev, [entityId2]: nextValue };
+      });
+      if (onCustomFieldFilterFieldsetChange) {
+        onCustomFieldFilterFieldsetChange(nextValue, entityId2);
+      }
+    },
+    [onCustomFieldFilterFieldsetChange, resolvedEntityIds, supportsCustomFieldFilterFieldsets]
+  );
+  const { data: cfFilters = [] } = useCustomFieldFilterDefs(entityKey ? resolvedEntityIds : [], {
+    enabled: !!entityKey,
+    fieldset: supportsCustomFieldFilterFieldsets ? activeCustomFieldFilterFieldset ?? void 0 : void 0,
+    keyExtras: customFieldFilterKeyExtras
+  });
+  const builtToolbar = React.useMemo(() => {
+    if (toolbar) return toolbar;
+    const anySearch = onSearchChange != null;
+    const anyFilters = baseFilters && baseFilters.length > 0 || cfFilters && cfFilters.length > 0;
+    if (!anySearch && !anyFilters) return null;
+    const baseList = baseFilters || [];
+    const existing = new Set(baseList.map((f) => f.id));
+    const cfOnly = (cfFilters || []).filter((f) => !existing.has(f.id));
+    const combined = [...baseList, ...cfOnly];
+    const perspectiveButton = canUsePerspectives ? /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "h-9", onClick: () => setPerspectiveOpen(true), children: [
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "mr-2 h-4 w-4" }),
+      t("ui.dataTable.perspectives.button", "Perspectives")
+    ] }) : null;
+    const fieldsetSelector = supportsCustomFieldFilterFieldsets && resolvedEntityIds.length === 1 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Fieldset" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: "w-full rounded border bg-background px-2 py-2 text-sm",
+          value: activeCustomFieldFilterFieldset ?? "",
+          onChange: (event) => handleCustomFieldFilterFieldsetChange(event.target.value),
+          children: (cfFilterFieldsetsByEntity[resolvedEntityIds[0]] ?? []).map((fieldset) => /* @__PURE__ */ jsx("option", { value: fieldset.code, children: fieldset.label }, fieldset.code))
+        }
+      )
+    ] }) : null;
+    const leadingItems = perspectiveButton ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: perspectiveButton }) : null;
+    return /* @__PURE__ */ jsx(
+      FilterBar,
+      {
+        searchValue,
+        onSearchChange,
+        searchPlaceholder,
+        searchAlign,
+        filters: combined,
+        values: filterValues,
+        onApply: onFiltersApply,
+        onClear: onFiltersClear,
+        leadingItems,
+        filtersExtraContent: fieldsetSelector,
+        layout: embedded ? "inline" : "stacked",
+        className: embedded ? "min-h-[2.25rem]" : void 0
+      }
+    );
+  }, [
+    toolbar,
+    searchValue,
+    onSearchChange,
+    searchPlaceholder,
+    searchAlign,
+    baseFilters,
+    cfFilters,
+    filterValues,
+    onFiltersApply,
+    onFiltersClear,
+    canUsePerspectives,
+    embedded,
+    supportsCustomFieldFilterFieldsets,
+    resolvedEntityIds,
+    activeCustomFieldFilterFieldset,
+    handleCustomFieldFilterFieldsetChange,
+    cfFilterFieldsetsByEntity
+  ]);
+  const hasTitle = title != null;
+  const hasActions = actions !== void 0 && actions !== null && actions !== false;
+  const shouldReserveActionsSpace = actions === null || actions === false;
+  const exportConfig = exporter === false ? null : exporter || null;
+  const resolvedExportSections = React.useMemo(() => resolveExportSections(exportConfig), [exportConfig]);
+  const hasExport = resolvedExportSections.length > 0;
+  const refreshButtonConfig = refreshButton;
+  const hasRefreshButton = Boolean(refreshButtonConfig);
+  const hasToolbar = builtToolbar != null;
+  const shouldRenderActionsWrapper = hasActions || hasRefreshButton || shouldReserveActionsSpace || hasExport;
+  const renderToolbarInline = embedded && hasToolbar;
+  const shouldRenderToolbarBelow = hasToolbar && !renderToolbarInline;
+  const shouldRenderHeader = hasTitle || renderToolbarInline || shouldRenderActionsWrapper || shouldRenderToolbarBelow;
+  const resolvedInjectionSpotId = injectionSpotId ?? (perspective?.tableId ? `data-table:${perspective.tableId}` : null);
+  const resolvedInjectionContext = React.useMemo(
+    () => injectionContext ?? { tableId: perspective?.tableId ?? null, title: typeof title === "string" ? title : void 0 },
+    [injectionContext, perspective?.tableId, title]
+  );
+  const headerInjectionSpotId = React.useMemo(
+    () => resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:header` : null,
+    [resolvedInjectionSpotId]
+  );
+  const footerInjectionSpotId = React.useMemo(
+    () => resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:footer` : null,
+    [resolvedInjectionSpotId]
+  );
+  const containerClassName = embedded ? "" : "rounded-lg border bg-card";
+  const headerWrapperClassName = embedded ? "pb-3" : "px-4 py-3 border-b";
+  const headerContentClassName = "flex items-center justify-between gap-2";
+  const toolbarWrapperClassName = embedded ? "mt-2" : "mt-3 pt-3 border-t";
+  const tableScrollWrapperClassName = embedded ? "" : "overflow-auto";
+  const titleContent = hasTitle ? /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight min-h-[2.25rem] flex items-center", children: typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: title }) : title }) : /* @__PURE__ */ jsx("div", { className: "min-h-[2.25rem]" });
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
+    shouldRenderHeader && /* @__PURE__ */ jsxs("div", { className: headerWrapperClassName, children: [
+      (hasTitle || shouldRenderActionsWrapper || renderToolbarInline) && /* @__PURE__ */ jsxs("div", { className: headerContentClassName, children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: renderToolbarInline ? builtToolbar : titleContent }),
+        shouldRenderActionsWrapper ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-h-[2.25rem]", children: [
+          refreshButtonConfig ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              onClick: refreshButtonConfig.onRefresh,
+              "aria-label": refreshButtonConfig.label,
+              title: refreshButtonConfig.label,
+              disabled: refreshButtonConfig.disabled || refreshButtonConfig.isRefreshing,
+              children: [
+                refreshButtonConfig.isRefreshing ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: refreshButtonConfig.label })
+              ]
+            }
+          ) : null,
+          canUsePerspectives ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              onClick: () => setPerspectiveOpen(true),
+              "aria-label": t("ui.dataTable.customizeColumns.ariaLabel", "Customize columns"),
+              title: t("ui.dataTable.customizeColumns.title", "Customize columns"),
+              children: [
+                /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("ui.dataTable.customizeColumns.srOnly", "Customize columns") })
+              ]
+            }
+          ) : null,
+          exportConfig && hasExport ? /* @__PURE__ */ jsx(ExportMenu, { config: exportConfig, sections: resolvedExportSections }) : null,
+          hasActions ? actions : null
+        ] }) : null
+      ] }),
+      shouldRenderToolbarBelow ? /* @__PURE__ */ jsx("div", { className: toolbarWrapperClassName, children: builtToolbar }) : null,
+      headerInjectionSpotId ? /* @__PURE__ */ jsx("div", { className: embedded ? "mt-2" : "mt-3", children: /* @__PURE__ */ jsx(InjectionSpot, { spotId: headerInjectionSpotId, context: resolvedInjectionContext }) }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: tableScrollWrapperClassName, children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        hg.headers.map((header) => {
+          const columnMeta = header.column.columnDef?.meta;
+          const priority = resolvePriority(header.column);
+          return /* @__PURE__ */ jsx(TableHead, { className: responsiveClass(priority, columnMeta?.hidden), children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `inline-flex items-center gap-1 ${sortable && header.column.getCanSort?.() ? "cursor-pointer select-none" : ""}`,
+              onClick: () => sortable && header.column.toggleSorting?.(header.column.getIsSorted() === "asc"),
+              children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                sortable && header.column.getIsSorted?.() ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: header.column.getIsSorted() === "asc" ? "\u25B2" : "\u25BC" }) : null
+              ]
+            }
+          ) }, header.id);
+        }),
+        rowActions ? /* @__PURE__ */ jsx(TableHead, { className: "w-0 text-right", children: t("ui.dataTable.actionsColumn", "Actions") }) : null
+      ] }, hg.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: isLoading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (rowActions ? 1 : 0), className: "h-24 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "md" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Loading data..." })
+      ] }) }) }) : error ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (rowActions ? 1 : 0), className: "h-24 text-center text-destructive", children: typeof error === "string" ? error : error }) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
+        const isClickable = !disableRowClick && (onRowClick || rowActions && rowActions(row.original));
+        return /* @__PURE__ */ jsxs(
+          TableRow,
+          {
+            "data-state": row.getIsSelected() && "selected",
+            className: isClickable ? "cursor-pointer hover:bg-muted/50 transition-colors" : "",
+            onClick: isClickable ? (e) => {
+              if (e.target.closest("[data-actions-cell]")) {
+                return;
+              }
+              if (onRowClick) {
+                onRowClick(row.original);
+              } else if (rowActions) {
+                const rowActionsElement = rowActions(row.original);
+                if (React.isValidElement(rowActionsElement) && "items" in rowActionsElement.props && Array.isArray(rowActionsElement.props.items)) {
+                  const editAction = extractEditAction(rowActionsElement.props.items);
+                  if (editAction) {
+                    if (editAction.href) {
+                      router.push(editAction.href);
+                    } else if (editAction.onSelect) {
+                      editAction.onSelect();
+                    }
+                  }
+                }
+              }
+            } : void 0,
+            children: [
+              row.getVisibleCells().map((cell) => {
+                const columnMeta = cell.column.columnDef?.meta;
+                const priority = resolvePriority(cell.column);
+                const hasCustomCell = Boolean(cell.column.columnDef.cell);
+                const columnId = String(cell.column.id || "");
+                const accessorKey = String(cell.column.columnDef?.accessorKey || "");
+                const isDateCol = dateColumnIds ? dateColumnIds.has(columnId) : false;
+                let content;
+                if (isDateCol) {
+                  const raw = cell.getValue();
+                  const d = tryParseDate(raw);
+                  content = d ? simpleFormat(d, DATE_FORMAT) : raw;
+                } else {
+                  content = flexRender(cell.column.columnDef.cell, cell.getContext());
+                }
+                const skipTruncation = shouldSkipTruncation(columnId);
+                const truncateConfig = getColumnTruncateConfig(columnId, accessorKey, columnMeta);
+                const shouldTruncate = truncateConfig.truncate && !skipTruncation;
+                const maxWidth = truncateConfig.maxWidth;
+                const cellValue = cell.getValue();
+                const metaTooltipContent = columnMeta?.tooltipContent;
+                const tooltipText = metaTooltipContent ? metaTooltipContent(row.original) : cellValue != null ? String(cellValue) : void 0;
+                const wrappedContent = shouldTruncate ? /* @__PURE__ */ jsx(TruncatedCell, { maxWidth, tooltipContent: tooltipText, children: content }) : content;
+                return /* @__PURE__ */ jsx(TableCell, { className: responsiveClass(priority, columnMeta?.hidden), children: wrappedContent }, cell.id);
+              }),
+              rowActions ? /* @__PURE__ */ jsx(TableCell, { className: "text-right whitespace-nowrap", "data-actions-cell": true, children: rowActions(row.original) }) : null
+            ]
+          },
+          row.id
+        );
+      }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (rowActions ? 1 : 0), className: "h-24 text-center text-muted-foreground", children: emptyState ?? t("ui.dataTable.emptyState.default", "No results.") }) }) })
+    ] }) }),
+    footerInjectionSpotId ? /* @__PURE__ */ jsx("div", { className: embedded ? "mt-3" : "px-4 py-3 border-t", children: /* @__PURE__ */ jsx(InjectionSpot, { spotId: footerInjectionSpotId, context: resolvedInjectionContext }) }) : null,
+    renderPagination(),
+    canUsePerspectives ? /* @__PURE__ */ jsx(
+      PerspectiveSidebar,
+      {
+        open: isPerspectiveOpen,
+        onOpenChange: setPerspectiveOpen,
+        loading: perspectiveQuery.isFetching && !perspectiveQuery.data,
+        perspectives: perspectiveData?.perspectives ?? [],
+        rolePerspectives: perspectiveData?.rolePerspectives ?? [],
+        roles: perspectiveData?.roles ?? [],
+        activePerspectiveId,
+        onActivatePerspective: handlePerspectiveActivate,
+        onDeletePerspective: handlePerspectiveDelete,
+        onClearRole: handleClearRole,
+        onSave: handlePerspectiveSave,
+        canApplyToRoles: Boolean(perspectiveData?.canApplyToRoles && canUseRoleDefaultsFeature),
+        columnOptions,
+        onToggleColumn: handleToggleColumn,
+        onMoveColumn: handleMoveColumn,
+        saving: savePerspectiveMutation.isPending,
+        deletingIds,
+        roleClearingIds,
+        apiWarning: perspectiveApiWarning
+      }
+    ) : null
+  ] }) });
+}
+export {
+  DataTable
+};
+//# sourceMappingURL=DataTable.js.map