@open-mercato/core 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3278.1.a4d26475e4

package/dist/modules/customers/backend/customers/people/page.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
 import { DataTable, withDataTableNamespaces } from "@open-mercato/ui/backend/DataTable";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { RowActions } from "@open-mercato/ui/backend/RowActions";
-import { apiCall, apiCallOrThrow, readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
+import { apiCall, apiCallOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
 import { buildCrudExportUrl } from "@open-mercato/ui/backend/utils/crud";
 import { groupBulkDeleteFailures, runBulkDelete } from "@open-mercato/ui/backend/utils/bulkDelete";
 import { coalesceLastOperations } from "@open-mercato/ui/backend/operations/store";
@@ -17,7 +17,9 @@ import { E } from "../../../../../generated/entities.ids.generated.js";
 import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
-import { serializeAdvancedFilter } from "@open-mercato/shared/lib/query/advanced-filter";
+import { createEmptyTree, makeRuleTree } from "@open-mercato/shared/lib/query/advanced-filter-tree";
+import { deserializeAdvancedFilter, deserializeTree, flatToTree, mapDictionaryColorToTone, serializeTree } from "@open-mercato/shared/lib/query/advanced-filter";
+import { useCurrentUserId } from "@open-mercato/ui/backend/utils/useCurrentUserId";
 import {
   DictionaryValue,
   createEmptyCustomerDictionaryMaps,
@@ -32,9 +34,50 @@ import {
   normalizeCustomFieldFilterOptions,
   supportsCustomFieldColumn
 } from "@open-mercato/ui/backend/utils/customFieldColumns";
+import { useAutoDiscoveredFields } from "@open-mercato/ui/backend/utils/useAutoDiscoveredFields";
+import { useAdvancedFilterTree } from "@open-mercato/ui/backend/hooks/useAdvancedFilter";
+import { AdvancedFilterPanel } from "@open-mercato/ui/backend/filters/AdvancedFilterPanel";
+import { ActiveFilterChips } from "@open-mercato/ui/backend/filters/ActiveFilterChips";
 import { useQueryClient } from "@tanstack/react-query";
 import { ensureCustomerDictionary } from "../../../components/detail/hooks/useCustomerDictionary.js";
+import {
+  ensureCurrentUserFilterOption,
+  fetchAssignableStaffMembers,
+  mapAssignableStaffToFilterOptions
+} from "../../../components/detail/assignableStaff.js";
 import { CollectionPreviewCell, normalizeCollectionLabels } from "../../../components/list/CollectionPreviewCell.js";
+function makePeoplePresets() {
+  return [
+    {
+      id: "recently-active",
+      labelKey: "customers.people.presets.recentlyActive",
+      iconName: "clock",
+      build: ({ now }) => {
+        const cutoff = new Date(now.getTime() - 7 * 24 * 3600 * 1e3).toISOString().slice(0, 10);
+        return makeRuleTree({ field: "next_interaction_at", operator: "is_after", value: cutoff });
+      }
+    },
+    {
+      id: "my-contacts",
+      labelKey: "customers.people.presets.myContacts",
+      requiresUser: true,
+      build: ({ userId }) => makeRuleTree({ field: "owner_user_id", operator: "is", value: userId })
+    },
+    {
+      id: "hot-leads",
+      labelKey: "customers.people.presets.hotLeads",
+      build: () => makeRuleTree({ field: "lifecycle_stage", operator: "is", value: "lead" })
+    },
+    {
+      id: "stale-30",
+      labelKey: "customers.people.presets.stale30",
+      build: ({ now }) => {
+        const cutoff = new Date(now.getTime() - 30 * 24 * 3600 * 1e3).toISOString().slice(0, 10);
+        return makeRuleTree({ field: "next_interaction_at", operator: "is_before", value: cutoff });
+      }
+    }
+  ];
+}
 const NO_MATCH_TAG_SENTINEL = "__no_match__";
 function formatDate(value, fallback) {
   if (!value) return fallback;
@@ -109,13 +152,37 @@ function CustomersPeoplePage() {
   const [total, setTotal] = React.useState(0);
   const [totalPages, setTotalPages] = React.useState(1);
   const [search, setSearch] = React.useState("");
-  const [filterValues, setFilterValues] = React.useState({});
-  const [advancedFilterState, setAdvancedFilterState] = React.useState({ logic: "and", conditions: [] });
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const initialFilterTree = React.useMemo(() => {
+    if (!searchParams) return createEmptyTree();
+    const record = {};
+    searchParams.forEach((value, key) => {
+      if (key.startsWith("filter[")) record[key] = value;
+    });
+    const v2 = deserializeTree(record);
+    if (v2) return v2;
+    const flat = deserializeAdvancedFilter(record);
+    if (flat) return flatToTree(flat);
+    return createEmptyTree();
+  }, []);
+  const [panelFields, setPanelFields] = React.useState([]);
+  const [filtersOpen, setFiltersOpen] = React.useState(false);
+  const filtersTriggerRef = React.useRef(null);
+  const filterPanel = useAdvancedFilterTree({
+    initial: initialFilterTree,
+    fields: panelFields,
+    onApply: () => setPage(1)
+  });
+  const advancedFilterState = filterPanel.appliedTree;
+  const handleAdvancedFilterClear = React.useCallback(() => {
+    filterPanel.clear();
+    setPage(1);
+  }, [filterPanel]);
   const [isLoading, setIsLoading] = React.useState(true);
   const [reloadToken, setReloadToken] = React.useState(0);
   const [cacheStatus, setCacheStatus] = React.useState(null);
   const [dictionaryMaps, setDictionaryMaps] = React.useState(createEmptyCustomerDictionaryMaps());
-  const [tagIdToLabel, setTagIdToLabel] = React.useState({});
   const scopeVersion = useOrganizationScopeVersion();
   const queryClient = useQueryClient();
   const t = useT();
@@ -146,65 +213,19 @@ function CustomersPeoplePage() {
       return [];
     }
   }, [queryClient, scopeVersion]);
-  const loadDictionaryOptions = React.useCallback(async (kind) => {
-    const entries = await fetchDictionaryEntries(kind);
-    return entries.map((entry) => ({ value: entry.value, label: entry.label }));
-  }, [fetchDictionaryEntries]);
   const dictionaryOptions = React.useMemo(() => {
-    const toOptions = (map) => Object.values(map ?? {}).map((entry) => ({ value: entry.value, label: entry.label })).sort((a, b) => a.label.localeCompare(b.label, void 0, { sensitivity: "base" }));
+    const toOptions = (map) => Object.values(map ?? {}).map((entry) => {
+      const tone = mapDictionaryColorToTone(entry.color);
+      const option = { value: entry.value, label: entry.label };
+      if (tone) option.tone = tone;
+      return option;
+    }).sort((a, b) => a.label.localeCompare(b.label, void 0, { sensitivity: "base" }));
     return {
       statuses: toOptions(dictionaryMaps.statuses),
       sources: toOptions(dictionaryMaps.sources),
       lifecycleStages: toOptions(dictionaryMaps["lifecycle-stages"])
     };
   }, [dictionaryMaps]);
-  const loadTagOptions = React.useCallback(async (query) => {
-    try {
-      const params = new URLSearchParams({ pageSize: "100" });
-      const trimmedQuery = typeof query === "string" ? query.trim() : "";
-      if (trimmedQuery) params.set("search", trimmedQuery);
-      const payload = await readApiResultOrThrow(
-        `/api/customers/tags?${params.toString()}`,
-        void 0,
-        { errorMessage: t("customers.people.detail.tags.loadError", "Failed to load tags.") }
-      );
-      const items = Array.isArray(payload?.items) ? payload.items : [];
-      const options = [];
-      for (const item of items) {
-        if (!item || typeof item !== "object") continue;
-        const raw = item;
-        const rawId = typeof raw.id === "string" ? raw.id : typeof raw.tagId === "string" ? raw.tagId : null;
-        if (!rawId) continue;
-        const label = typeof raw.label === "string" && raw.label.trim().length ? raw.label.trim() : typeof raw.slug === "string" && raw.slug.trim().length ? raw.slug.trim() : rawId;
-        options.push({ value: rawId, label });
-      }
-      if (options.length) {
-        setTagIdToLabel((prev) => {
-          let changed = false;
-          const next = { ...prev };
-          for (const option of options) {
-            if (next[option.value] !== option.label) {
-              next[option.value] = option.label;
-              changed = true;
-            }
-          }
-          return changed ? next : prev;
-        });
-      }
-      return options;
-    } catch (err) {
-      console.error("customers.people.list.loadTagOptions", err);
-      return [];
-    }
-  }, [setTagIdToLabel, t]);
-  const tagLabelToId = React.useMemo(() => {
-    const map = {};
-    for (const [id, label] of Object.entries(tagIdToLabel)) {
-      if (!label) continue;
-      map[label] = id;
-    }
-    return map;
-  }, [tagIdToLabel]);
   React.useEffect(() => {
     let cancelled = false;
     async function loadAll() {
@@ -226,62 +247,33 @@ function CustomersPeoplePage() {
     [E.customers.customer_entity, E.customers.customer_person_profile],
     { keyExtras: [scopeVersion, reloadToken] }
   );
-  const filters = React.useMemo(() => [
-    {
-      id: "status",
-      label: t("customers.people.list.filters.status"),
-      type: "select",
-      options: dictionaryOptions.statuses,
-      loadOptions: () => loadDictionaryOptions("statuses")
-    },
-    {
-      id: "source",
-      label: t("customers.people.list.filters.source"),
-      type: "select",
-      options: dictionaryOptions.sources,
-      loadOptions: () => loadDictionaryOptions("sources")
-    },
-    {
-      id: "lifecycleStage",
-      label: t("customers.people.list.filters.lifecycleStage"),
-      type: "select",
-      options: dictionaryOptions.lifecycleStages,
-      loadOptions: () => loadDictionaryOptions("lifecycle-stages")
-    },
-    {
-      id: "tagIds",
-      label: t("customers.people.list.filters.tags"),
-      type: "tags",
-      loadOptions: loadTagOptions,
-      formatValue: (value) => tagIdToLabel[value] ?? value
-    },
-    {
-      id: "createdAt",
-      label: t("customers.people.list.filters.createdAt"),
-      type: "dateRange"
-    },
-    {
-      id: "emailContains",
-      label: t("customers.people.list.filters.emailContains"),
-      type: "text",
-      placeholder: t("customers.people.list.filters.emailContainsPlaceholder")
-    },
-    {
-      id: "hasEmail",
-      label: t("customers.people.list.filters.hasEmail"),
-      type: "checkbox"
-    },
-    {
-      id: "hasPhone",
-      label: t("customers.people.list.filters.hasPhone"),
-      type: "checkbox"
-    },
-    {
-      id: "hasNextInteraction",
-      label: t("customers.people.list.filters.hasNextInteraction"),
-      type: "checkbox"
-    }
-  ], [dictionaryOptions.lifecycleStages, dictionaryOptions.sources, dictionaryOptions.statuses, loadDictionaryOptions, loadTagOptions, tagIdToLabel, t]);
+  const currentUserId = useCurrentUserId();
+  const [ownerFilterOptions, setOwnerFilterOptions] = React.useState([]);
+  React.useEffect(() => {
+    const controller = new AbortController();
+    let cancelled = false;
+    void fetchAssignableStaffMembers("", { pageSize: 100, signal: controller.signal }).then((items) => {
+      if (!cancelled) setOwnerFilterOptions(mapAssignableStaffToFilterOptions(items));
+    }).catch(() => {
+      if (!cancelled) setOwnerFilterOptions([]);
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [scopeVersion]);
+  const resolvedOwnerFilterOptions = React.useMemo(
+    () => ensureCurrentUserFilterOption(
+      ownerFilterOptions,
+      currentUserId,
+      t("customers.filters.currentUser", "Current user")
+    ),
+    [currentUserId, ownerFilterOptions, t]
+  );
+  const loadOwnerFilterOptions = React.useCallback(async (query) => {
+    const items = await fetchAssignableStaffMembers(query ?? "", { pageSize: 100 });
+    return mapAssignableStaffToFilterOptions(items);
+  }, []);
   const queryParams = React.useMemo(() => {
     const params = new URLSearchParams();
     params.set("page", String(page));
@@ -291,63 +283,32 @@ function CustomersPeoplePage() {
       params.set("order", sorting[0].desc ? "desc" : "asc");
     }
     if (search.trim()) params.set("search", search.trim());
-    const status = filterValues.status;
-    if (typeof status === "string" && status.trim()) params.set("status", status);
-    const source = filterValues.source;
-    if (typeof source === "string" && source.trim()) params.set("source", source);
-    const lifecycleStage = filterValues.lifecycleStage;
-    if (typeof lifecycleStage === "string" && lifecycleStage.trim()) params.set("lifecycleStage", lifecycleStage);
-    const createdAt = filterValues.createdAt;
-    if (createdAt && typeof createdAt === "object") {
-      if (createdAt.from) params.set("createdFrom", createdAt.from);
-      if (createdAt.to) params.set("createdTo", createdAt.to);
-    }
-    const emailContains = filterValues.emailContains;
-    if (typeof emailContains === "string" && emailContains.trim()) {
-      params.set("emailContains", emailContains.trim());
-    }
-    const booleanFilters = [
-      ["hasEmail", "hasEmail"],
-      ["hasPhone", "hasPhone"],
-      ["hasNextInteraction", "hasNextInteraction"]
-    ];
-    for (const [key, queryKey] of booleanFilters) {
-      const value = filterValues[key];
-      if (value === true) params.set(queryKey, "true");
-      if (value === false) params.set(queryKey, "false");
-    }
-    const tagValues = Array.isArray(filterValues.tagIds) ? filterValues.tagIds.map((value) => typeof value === "string" ? value.trim() : String(value || "").trim()).filter((value) => value.length > 0) : [];
-    if (tagValues.length > 0) {
-      const normalizedTagIds = tagValues.map((value) => typeof tagIdToLabel[value] === "string" ? value : tagLabelToId[value]).filter((id) => typeof id === "string" && id.length > 0);
-      if (normalizedTagIds.length === tagValues.length && normalizedTagIds.length > 0) {
-        params.set("tagIds", normalizedTagIds.join(","));
-      } else {
-        params.set("tagIdsEmpty", "true");
-      }
-    }
-    Object.entries(filterValues).forEach(([key, value]) => {
-      if (!key.startsWith("cf_") || value == null) return;
-      if (Array.isArray(value)) {
-        const normalized = value.map((item) => {
-          if (item == null) return "";
-          if (typeof item === "string") return item.trim();
-          return String(item).trim();
-        }).filter((item) => item.length > 0);
-        if (normalized.length) params.set(key, normalized.join(","));
-      } else if (typeof value === "object") {
-        return;
-      } else if (value !== "") {
-        const stringValue = typeof value === "string" ? value.trim() : String(value);
-        if (stringValue) params.set(key, stringValue);
-      }
-    });
-    const advancedParams = serializeAdvancedFilter(advancedFilterState);
+    const advancedParams = serializeTree(advancedFilterState);
     for (const [key, val] of Object.entries(advancedParams)) {
       params.set(key, val);
     }
     return params.toString();
-  }, [advancedFilterState, filterValues, page, pageSize, search, sorting, tagIdToLabel, tagLabelToId]);
+  }, [advancedFilterState, page, pageSize, search, sorting]);
   const currentParams = React.useMemo(() => Object.fromEntries(new URLSearchParams(queryParams)), [queryParams]);
+  const queryRef = React.useRef(searchParams?.toString() ?? "");
+  React.useEffect(() => {
+    if (!pathname) return;
+    const params = new URLSearchParams();
+    if (search.trim().length) params.set("search", search.trim());
+    if (page > 1) params.set("page", String(page));
+    if (sorting.length > 0) {
+      params.set("sort", sorting[0].id);
+      params.set("order", sorting[0].desc ? "desc" : "asc");
+    }
+    const advancedParams = serializeTree(advancedFilterState);
+    for (const [key, val] of Object.entries(advancedParams)) {
+      params.set(key, val);
+    }
+    const next = params.toString();
+    if (queryRef.current === next) return;
+    queryRef.current = next;
+    router.replace(next ? `${pathname}?${next}` : pathname, { scroll: false });
+  }, [pathname, router, page, search, sorting, advancedFilterState]);
   const exportConfig = React.useMemo(() => ({
     view: {
       getUrl: (format) => buildCrudExportUrl("customers/people", { ...currentParams, exportScope: "view" }, format)
@@ -497,28 +458,6 @@ function CustomersPeoplePage() {
     }
     return succeeded.length > 0;
   }, [bulkMutationContextId, confirm, retryBulkMutation, runBulkMutation, t]);
-  const handleFiltersApply = React.useCallback((values) => {
-    const next = {};
-    Object.entries(values).forEach(([key, value]) => {
-      if (value !== void 0) {
-        next[key] = value;
-      }
-    });
-    const rawTags = Array.isArray(values.tagIds) ? values.tagIds : [];
-    const sanitizedTags = rawTags.map((tag) => {
-      const normalized = typeof tag === "string" ? tag.trim() : "";
-      if (!normalized) return "";
-      return tagIdToLabel[normalized] ?? normalized;
-    }).filter((tag) => tag.length > 0);
-    if (sanitizedTags.length) next.tagIds = sanitizedTags;
-    else delete next.tagIds;
-    setFilterValues(next);
-    setPage(1);
-  }, [setFilterValues, setPage, tagIdToLabel]);
-  const handleFiltersClear = React.useCallback(() => {
-    setFilterValues({});
-    setPage(1);
-  }, [setFilterValues, setPage]);
   const columns = React.useMemo(() => {
     const noValue = /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("customers.people.list.noValue") });
     const renderDictionaryCell = (kind, rawValue) => /* @__PURE__ */ jsx(
@@ -558,19 +497,36 @@ function CustomersPeoplePage() {
       {
         accessorKey: "name",
         header: t("customers.people.list.columns.name"),
-        meta: { alwaysVisible: true, columnChooserGroup: "Basic Info", filterKey: "display_name", maxWidth: "240px" },
+        meta: {
+          alwaysVisible: true,
+          columnChooserGroup: "Basic Info",
+          filterKey: "display_name",
+          filterGroup: "CRM",
+          maxWidth: "240px"
+        },
         cell: ({ row }) => /* @__PURE__ */ jsx(Link, { href: `/backend/customers/people-v2/${row.original.id}`, className: "font-medium hover:underline", children: row.original.name })
       },
       {
         accessorKey: "email",
         header: t("customers.people.list.columns.email"),
-        meta: { columnChooserGroup: "Contact", filterKey: "primary_email", maxWidth: "220px" },
+        meta: {
+          columnChooserGroup: "Contact",
+          filterKey: "primary_email",
+          filterGroup: "Contact",
+          filterIconName: "mail",
+          maxWidth: "220px"
+        },
         cell: ({ row }) => row.original.email || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("customers.people.list.noValue") })
       },
       {
         accessorKey: "status",
         header: t("customers.people.list.columns.status"),
-        meta: { filterType: "select", filterOptions: dictionaryOptions.statuses, columnChooserGroup: "Basic Info" },
+        meta: {
+          filterType: "select",
+          filterOptions: dictionaryOptions.statuses,
+          columnChooserGroup: "Basic Info",
+          filterGroup: "CRM"
+        },
         cell: ({ row }) => renderDictionaryCell("statuses", row.original.status)
       },
       {
@@ -580,7 +536,8 @@ function CustomersPeoplePage() {
           filterType: "select",
           filterOptions: dictionaryOptions.lifecycleStages,
           columnChooserGroup: "Basic Info",
-          filterKey: "lifecycle_stage"
+          filterKey: "lifecycle_stage",
+          filterGroup: "CRM"
         },
         cell: ({ row }) => renderDictionaryCell("lifecycle-stages", row.original.lifecycleStage)
       },
@@ -590,6 +547,8 @@ function CustomersPeoplePage() {
         meta: {
           columnChooserGroup: "Dates",
           filterKey: "next_interaction_at",
+          filterGroup: "Activity",
+          filterIconName: "calendar",
           tooltipContent: (row) => {
             if (!row.nextInteractionAt) return void 0;
             const date = formatDate(row.nextInteractionAt, "");
@@ -609,67 +568,137 @@ function CustomersPeoplePage() {
       {
         accessorKey: "source",
         header: t("customers.people.list.columns.source"),
-        meta: { filterType: "select", filterOptions: dictionaryOptions.sources, columnChooserGroup: "Basic Info" },
+        meta: {
+          filterType: "select",
+          filterOptions: dictionaryOptions.sources,
+          columnChooserGroup: "Basic Info",
+          filterGroup: "CRM"
+        },
         cell: ({ row }) => renderDictionaryCell("sources", row.original.source)
       },
+      {
+        accessorKey: "ownerUserId",
+        header: t("customers.people.list.columns.owner", "Owner"),
+        meta: {
+          columnChooserGroup: "CRM",
+          filterType: "select",
+          filterOptions: resolvedOwnerFilterOptions,
+          filterLoadOptions: loadOwnerFilterOptions,
+          filterGroup: "CRM",
+          filterIconName: "user-round",
+          filterKey: "owner_user_id",
+          hidden: true
+        },
+        cell: ({ row }) => row.original.ownerUserId ?? null
+      },
       {
         accessorKey: "firstName",
         header: t("customers.people.form.firstName", "First name"),
-        meta: { columnChooserGroup: "Profile", hidden: true, filterKey: "person_profile.first_name" },
+        meta: {
+          columnChooserGroup: "Profile",
+          hidden: true,
+          filterKey: "person_profile.first_name",
+          filterGroup: "Profile"
+        },
         cell: ({ row }) => row.original.firstName || noValue
       },
       {
         accessorKey: "lastName",
         header: t("customers.people.form.lastName", "Last name"),
-        meta: { columnChooserGroup: "Profile", hidden: true, filterKey: "person_profile.last_name" },
+        meta: {
+          columnChooserGroup: "Profile",
+          hidden: true,
+          filterKey: "person_profile.last_name",
+          filterGroup: "Profile"
+        },
         cell: ({ row }) => row.original.lastName || noValue
       },
       {
         accessorKey: "preferredName",
         header: t("customers.people.form.preferredName", "Preferred name"),
-        meta: { columnChooserGroup: "Profile", hidden: true, filterKey: "person_profile.preferred_name" },
+        meta: {
+          columnChooserGroup: "Profile",
+          hidden: true,
+          filterKey: "person_profile.preferred_name",
+          filterGroup: "Profile"
+        },
         cell: ({ row }) => row.original.preferredName || noValue
       },
       {
         accessorKey: "jobTitle",
         header: t("customers.people.form.jobTitle", "Job title"),
-        meta: { columnChooserGroup: "Profile", hidden: true, filterKey: "person_profile.job_title" },
+        meta: {
+          columnChooserGroup: "Profile",
+          hidden: true,
+          filterKey: "person_profile.job_title",
+          filterGroup: "Profile"
+        },
         cell: ({ row }) => row.original.jobTitle || noValue
       },
       {
         accessorKey: "department",
         header: t("customers.people.detail.fields.department", "Department"),
-        meta: { columnChooserGroup: "Profile", hidden: true, filterKey: "person_profile.department" },
+        meta: {
+          columnChooserGroup: "Profile",
+          hidden: true,
+          filterKey: "person_profile.department",
+          filterGroup: "Profile"
+        },
         cell: ({ row }) => row.original.department || noValue
       },
       {
         accessorKey: "seniority",
         header: t("customers.people.detail.fields.seniority", "Seniority"),
-        meta: { columnChooserGroup: "Profile", hidden: true, filterKey: "person_profile.seniority" },
+        meta: {
+          columnChooserGroup: "Profile",
+          hidden: true,
+          filterKey: "person_profile.seniority",
+          filterGroup: "Profile"
+        },
         cell: ({ row }) => row.original.seniority || noValue
       },
       {
         accessorKey: "timezone",
         header: t("customers.people.detail.fields.timezone", "Timezone"),
-        meta: { columnChooserGroup: "Profile", hidden: true, filterKey: "person_profile.timezone" },
+        meta: {
+          columnChooserGroup: "Profile",
+          hidden: true,
+          filterKey: "person_profile.timezone",
+          filterGroup: "Profile"
+        },
         cell: ({ row }) => row.original.timezone || noValue
       },
       {
         accessorKey: "linkedInUrl",
         header: t("customers.people.detail.fields.linkedIn", "LinkedIn"),
-        meta: { columnChooserGroup: "Socials", hidden: true, filterKey: "person_profile.linked_in_url" },
+        meta: {
+          columnChooserGroup: "Socials",
+          hidden: true,
+          filterKey: "person_profile.linked_in_url",
+          filterGroup: "Socials"
+        },
         cell: ({ row }) => row.original.linkedInUrl || noValue
       },
       {
         accessorKey: "twitterUrl",
         header: t("customers.people.detail.fields.twitter", "Twitter"),
-        meta: { columnChooserGroup: "Socials", hidden: true, filterKey: "person_profile.twitter_url" },
+        meta: {
+          columnChooserGroup: "Socials",
+          hidden: true,
+          filterKey: "person_profile.twitter_url",
+          filterGroup: "Socials"
+        },
         cell: ({ row }) => row.original.twitterUrl || noValue
       },
       {
         accessorKey: "description",
         header: t("customers.people.form.description", "Description"),
-        meta: { columnChooserGroup: "Notes", hidden: true, filterKey: "description" },
+        meta: {
+          columnChooserGroup: "Notes",
+          hidden: true,
+          filterKey: "description",
+          filterGroup: "Notes"
+        },
         cell: ({ row }) => row.original.description || noValue
       }
     ];
@@ -687,93 +716,146 @@ function CustomersPeoplePage() {
       cell: ({ getValue }) => renderCustomFieldCell(getValue())
     }));
     return [...baseColumns, ...customColumns];
-  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, t]);
+  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, loadOwnerFilterOptions, resolvedOwnerFilterOptions, t]);
+  const { advancedFilterFields } = useAutoDiscoveredFields({ columns, customFieldDefs });
+  React.useEffect(() => {
+    setPanelFields((prev) => {
+      if (prev === advancedFilterFields) return prev;
+      if (prev.length === advancedFilterFields.length) {
+        let same = true;
+        for (let i = 0; i < prev.length; i++) {
+          if (prev[i].key !== advancedFilterFields[i].key) {
+            same = false;
+            break;
+          }
+        }
+        if (same) return prev;
+      }
+      return advancedFilterFields;
+    });
+  }, [advancedFilterFields]);
+  const peoplePresets = React.useMemo(() => makePeoplePresets(), []);
   return /* @__PURE__ */ jsxs(Page, { children: [
-    /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
-      DataTable,
-      {
-        stickyFirstColumn: true,
-        stickyActionsColumn: true,
-        title: t("customers.people.list.title"),
-        refreshButton: {
-          label: t("customers.people.list.actions.refresh"),
-          onRefresh: () => {
-            setSearch("");
+    /* @__PURE__ */ jsxs(PageBody, { children: [
+      /* @__PURE__ */ jsx(
+        DataTable,
+        {
+          stickyFirstColumn: true,
+          stickyActionsColumn: true,
+          title: t("customers.people.list.title"),
+          refreshButton: {
+            label: t("customers.people.list.actions.refresh"),
+            onRefresh: () => {
+              setSearch("");
+              setPage(1);
+              handleRefresh();
+            }
+          },
+          actions: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/backend/customers/people/create", children: t("customers.people.list.actions.new") }) }),
+          columns,
+          columnChooser: { auto: true },
+          data: rows,
+          exporter: exportConfig,
+          searchValue: search,
+          onSearchChange: (value) => {
+            setSearch(value);
             setPage(1);
-            handleRefresh();
-          }
-        },
-        actions: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/backend/customers/people/create", children: t("customers.people.list.actions.new") }) }),
-        columns,
-        columnChooser: { auto: true },
-        data: rows,
-        exporter: exportConfig,
-        searchValue: search,
-        onSearchChange: (value) => {
-          setSearch(value);
-          setPage(1);
-        },
-        searchPlaceholder: t("customers.people.list.searchPlaceholder"),
-        filters,
-        filterValues,
-        onFiltersApply: handleFiltersApply,
-        onFiltersClear: handleFiltersClear,
-        entityIds: [E.customers.customer_entity, E.customers.customer_person_profile],
-        perspective: { tableId: "customers.people.list" },
-        onRowClick: (row) => router.push(`/backend/customers/people-v2/${row.id}`),
-        sortable: true,
-        sorting,
-        onSortingChange: setSorting,
-        bulkActions: [
-          {
-            id: "delete",
-            label: t("customers.people.list.bulkDelete.action", "Delete selected"),
-            destructive: true,
-            onExecute: handleBulkDelete
-          }
-        ],
-        rowActions: (row) => /* @__PURE__ */ jsx(
-          RowActions,
-          {
-            items: [
-              {
-                id: "view",
-                label: t("customers.people.list.actions.view"),
-                onSelect: () => {
-                  router.push(`/backend/customers/people-v2/${row.id}`);
+          },
+          searchPlaceholder: t("customers.people.list.searchPlaceholder"),
+          entityIds: [E.customers.customer_entity, E.customers.customer_person_profile],
+          perspective: { tableId: "customers.people.list" },
+          onRowClick: (row) => router.push(`/backend/customers/people-v2/${row.id}`),
+          sortable: true,
+          sorting,
+          onSortingChange: setSorting,
+          bulkActions: [
+            {
+              id: "delete",
+              label: t("customers.people.list.bulkDelete.action", "Delete selected"),
+              destructive: true,
+              onExecute: handleBulkDelete
+            }
+          ],
+          rowActions: (row) => /* @__PURE__ */ jsx(
+            RowActions,
+            {
+              items: [
+                {
+                  id: "view",
+                  label: t("customers.people.list.actions.view"),
+                  onSelect: () => {
+                    router.push(`/backend/customers/people-v2/${row.id}`);
+                  }
+                },
+                {
+                  id: "open-new-tab",
+                  label: t("customers.people.list.actions.openInNewTab"),
+                  onSelect: () => window.open(`/backend/customers/people-v2/${row.id}`, "_blank", "noopener")
+                },
+                {
+                  id: "delete",
+                  label: t("customers.people.list.actions.delete"),
+                  destructive: true,
+                  onSelect: () => handleDelete(row)
                 }
-              },
-              {
-                id: "open-new-tab",
-                label: t("customers.people.list.actions.openInNewTab"),
-                onSelect: () => window.open(`/backend/customers/people-v2/${row.id}`, "_blank", "noopener")
-              },
-              {
-                id: "delete",
-                label: t("customers.people.list.actions.delete"),
-                destructive: true,
-                onSelect: () => handleDelete(row)
-              }
-            ]
-          }
-        ),
-        advancedFilter: {
-          auto: true,
-          value: advancedFilterState,
-          onChange: setAdvancedFilterState,
-          onApply: () => {
-            setPage(1);
+              ]
+            }
+          ),
+          advancedFilter: {
+            auto: true,
+            value: filterPanel.tree,
+            onChange: filterPanel.setTree,
+            onApply: () => filterPanel.flush(),
+            onClear: handleAdvancedFilterClear,
+            triggerRef: filtersTriggerRef,
+            externalPopover: true,
+            onTriggerClick: () => setFiltersOpen((prev) => !prev),
+            onApplyTree: (tree) => {
+              filterPanel.replaceTree(tree);
+              setPage(1);
+            }
           },
-          onClear: () => {
-            setAdvancedFilterState({ logic: "and", conditions: [] });
-            setPage(1);
-          }
-        },
-        virtualized: true,
-        pagination: { page, pageSize, total, totalPages, onPageChange: setPage, cacheStatus, pageSizeOptions: [10, 25, 50, 100], onPageSizeChange: handlePageSizeChange },
-        isLoading
-      }
-    ) }),
+          activeFilterChips: /* @__PURE__ */ jsx(
+            ActiveFilterChips,
+            {
+              tree: filterPanel.tree,
+              fields: advancedFilterFields,
+              popoverOpen: filtersOpen,
+              onRemoveNode: (id) => filterPanel.dispatch({ type: "removeNode", nodeId: id }),
+              onOpen: () => setFiltersOpen(true)
+            }
+          ),
+          filterAwareEmptyState: {
+            active: advancedFilterState.root.children.length > 0,
+            entityNamePlural: t("customers.people.entityPlural", "people"),
+            canRemoveLast: filterPanel.tree.root.children.length > 0,
+            onClearAll: handleAdvancedFilterClear,
+            onRemoveLast: () => filterPanel.dispatch({ type: "removeLast" })
+          },
+          virtualized: true,
+          pagination: { page, pageSize, total, totalPages, onPageChange: setPage, cacheStatus, pageSizeOptions: [10, 25, 50, 100], onPageSizeChange: handlePageSizeChange },
+          isLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AdvancedFilterPanel,
+        {
+          fields: advancedFilterFields,
+          value: filterPanel.tree,
+          onChange: filterPanel.setTree,
+          onApply: filterPanel.flush,
+          onClear: handleAdvancedFilterClear,
+          onFlush: filterPanel.flush,
+          pendingErrors: filterPanel.pendingErrors,
+          userId: currentUserId,
+          presets: peoplePresets,
+          open: filtersOpen,
+          onOpenChange: setFiltersOpen,
+          triggerRef: filtersTriggerRef,
+          savedFilterStorageKey: "customers.people.list"
+        }
+      )
+    ] }),
     ConfirmDialogElement
   ] });
 }