@open-mercato/core 0.6.1-develop.3260.1.dc719cac84 → 0.6.1-develop.3278.1.a4d26475e4

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

@@ -1,12 +1,14 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useQueryClient } from "@tanstack/react-query";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
 import { DataTable, withDataTableNamespaces } from "@open-mercato/ui/backend/DataTable";
-import { deserializeAdvancedFilter, serializeAdvancedFilter } from "@open-mercato/shared/lib/query/advanced-filter";
+import { createEmptyTree, makeRuleTree, makeMultiRuleTree } from "@open-mercato/shared/lib/query/advanced-filter-tree";
+import { deserializeTree, deserializeAdvancedFilter, flatToTree, mapDictionaryColorToTone, serializeTree } from "@open-mercato/shared/lib/query/advanced-filter";
+import { useCurrentUserId } from "@open-mercato/ui/backend/utils/useCurrentUserId";
 import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
 import { buildCrudExportUrl, deleteCrud } from "@open-mercato/ui/backend/utils/crud";
 import { groupBulkDeleteFailures, runBulkDelete } from "@open-mercato/ui/backend/utils/bulkDelete";
@@ -35,31 +37,51 @@ import {
   supportsCustomFieldColumn
 } from "@open-mercato/ui/backend/utils/customFieldColumns";
 import { CollectionPreviewCell, normalizeCollectionLabels } from "../../../components/list/CollectionPreviewCell.js";
-function parsePersonLookupRecord(item) {
-  if (typeof item !== "object" || item === null) return null;
-  const record = item;
-  const id = typeof record.id === "string" ? record.id : null;
-  if (!id || !isUuid(id)) return null;
-  const name = typeof record.display_name === "string" ? record.display_name : null;
-  const email = typeof record.primary_email === "string" ? record.primary_email : null;
-  const phone = typeof record.primary_phone === "string" ? record.primary_phone : null;
-  return { id, name, email, phone };
-}
-function parseCompanyLookupRecord(item) {
-  if (typeof item !== "object" || item === null) return null;
-  const record = item;
-  const id = typeof record.id === "string" ? record.id : null;
-  if (!id || !isUuid(id)) return null;
-  const name = typeof record.display_name === "string" ? record.display_name : null;
-  const domain = typeof record.primary_domain === "string" ? record.primary_domain : null;
-  const email = typeof record.primary_email === "string" ? record.primary_email : null;
-  return { id, name, domain, email };
+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 {
+  ensureCurrentUserFilterOption,
+  fetchAssignableStaffMembers,
+  mapAssignableStaffToFilterOptions
+} from "../../../components/detail/assignableStaff.js";
+function makeDealsPresets() {
+  return [
+    {
+      id: "my-deals",
+      labelKey: "customers.deals.presets.myDeals",
+      requiresUser: true,
+      build: ({ userId }) => makeRuleTree({ field: "owner_user_id", operator: "is", value: userId })
+    },
+    {
+      id: "closing-month",
+      labelKey: "customers.deals.presets.closingMonth",
+      iconName: "clock",
+      build: ({ now }) => {
+        const start = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().slice(0, 10);
+        const end = new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString().slice(0, 10);
+        return makeRuleTree({ field: "expected_close_at", operator: "between", value: [start, end] });
+      }
+    },
+    // The Deal entity has no dedicated "at risk" or health-score field — `customer_deals`
+    // exposes only `status` (open/win/loose/closed/in_progress, dictionary-driven) and
+    // `closure_outcome`. Rather than fabricate a mapping, the "At risk" preset is omitted
+    // until the data model exposes a first-class signal.
+    {
+      id: "won-quarter",
+      labelKey: "customers.deals.presets.wonQuarter",
+      build: ({ now }) => {
+        const quarter = Math.floor(now.getMonth() / 3);
+        const start = new Date(now.getFullYear(), quarter * 3, 1).toISOString().slice(0, 10);
+        return makeMultiRuleTree([
+          { field: "status", operator: "is", value: "win" },
+          { field: "expected_close_at", operator: "is_after", value: start }
+        ], "and");
+      }
+    }
+  ];
 }
-const EMPTY_OPTIONS_STATE = {
-  options: [],
-  idToLabel: {},
-  labelToId: {}
-};
 const PAGE_SIZE = 20;
 const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 function isUuid(value) {
@@ -80,93 +102,6 @@ function extractIdsFromParams(params, key) {
   const values = params.getAll(key);
   return normalizeIdCandidates(values);
 }
-function ensureUniqueLabel(base, occupied) {
-  const trimmed = base.trim() || "Unnamed";
-  if (!occupied.has(trimmed)) {
-    occupied.add(trimmed);
-    return trimmed;
-  }
-  let counter = 2;
-  let candidate = `${trimmed} \u2022 ${counter}`;
-  while (occupied.has(candidate)) {
-    counter += 1;
-    candidate = `${trimmed} \u2022 ${counter}`;
-  }
-  occupied.add(candidate);
-  return candidate;
-}
-async function fetchPeopleLookup(query) {
-  const search = new URLSearchParams();
-  search.set("page", "1");
-  search.set("pageSize", "20");
-  if (query && query.trim().length) search.set("search", query.trim());
-  try {
-    const call = await apiCall(`/api/customers/people?${search.toString()}`);
-    if (!call.ok) return [];
-    const items = Array.isArray(call.result?.items) ? call.result.items : [];
-    return items.map((item) => parsePersonLookupRecord(item)).filter((record) => record !== null);
-  } catch {
-    return [];
-  }
-}
-async function fetchPeopleLookupByIds(ids) {
-  const unique = Array.from(new Set(ids.filter((id) => isUuid(id))));
-  if (!unique.length) return [];
-  const results = await Promise.all(
-    unique.map(async (id) => {
-      const search = new URLSearchParams();
-      search.set("id", id);
-      search.set("page", "1");
-      search.set("pageSize", "1");
-      try {
-        const call = await apiCall(`/api/customers/people?${search.toString()}`);
-        if (!call.ok) return null;
-        const items = Array.isArray(call.result?.items) ? call.result.items : [];
-        const match = items.map((item) => parsePersonLookupRecord(item)).find((record) => record?.id === id);
-        return match ?? null;
-      } catch {
-        return null;
-      }
-    })
-  );
-  return results.filter((record) => !!record);
-}
-async function fetchCompaniesLookup(query) {
-  const search = new URLSearchParams();
-  search.set("page", "1");
-  search.set("pageSize", "20");
-  if (query && query.trim().length) search.set("search", query.trim());
-  try {
-    const call = await apiCall(`/api/customers/companies?${search.toString()}`);
-    if (!call.ok) return [];
-    const items = Array.isArray(call.result?.items) ? call.result.items : [];
-    return items.map((item) => parseCompanyLookupRecord(item)).filter((record) => record !== null);
-  } catch {
-    return [];
-  }
-}
-async function fetchCompaniesLookupByIds(ids) {
-  const unique = Array.from(new Set(ids.filter((id) => isUuid(id))));
-  if (!unique.length) return [];
-  const results = await Promise.all(
-    unique.map(async (id) => {
-      const search = new URLSearchParams();
-      search.set("id", id);
-      search.set("page", "1");
-      search.set("pageSize", "1");
-      try {
-        const call = await apiCall(`/api/customers/companies?${search.toString()}`);
-        if (!call.ok) return null;
-        const items = Array.isArray(call.result?.items) ? call.result.items : [];
-        const match = items.map((item) => parseCompanyLookupRecord(item)).find((record) => record?.id === id);
-        return match ?? null;
-      } catch {
-        return null;
-      }
-    })
-  );
-  return results.filter((record) => !!record);
-}
 function formatCurrency(amount, currency, fallback) {
   if (typeof amount !== "number" || Number.isNaN(amount)) return fallback;
   try {
@@ -186,13 +121,6 @@ function formatDateValue(value, fallback) {
   if (Number.isNaN(date.getTime())) return fallback;
   return date.toLocaleDateString();
 }
-function arraysEqual(a, b) {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i += 1) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}
 function CustomersDealsPage() {
   const t = useT();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
@@ -214,17 +142,31 @@ function CustomersDealsPage() {
   const [isLoading, setIsLoading] = React.useState(false);
   const [reloadToken, setReloadToken] = React.useState(0);
   const [pendingDeleteId, setPendingDeleteId] = React.useState(null);
-  const [filterValues, setFilterValues] = React.useState({});
-  const [advancedFilterState, setAdvancedFilterState] = React.useState(() => {
-    const params = searchParams;
-    if (!params) return { logic: "and", conditions: [] };
+  const initialFilterTree = React.useMemo(() => {
+    if (!searchParams) return createEmptyTree();
     const record = {};
-    params.forEach((value, key) => {
+    searchParams.forEach((value, key) => {
       if (key.startsWith("filter[")) record[key] = value;
     });
-    const hydrated = deserializeAdvancedFilter(record);
-    return hydrated ?? { logic: "and", conditions: [] };
+    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 [cacheStatus, setCacheStatus] = React.useState(null);
   const initialPersonIds = React.useMemo(
     () => extractIdsFromParams(searchParams, "personId"),
@@ -236,142 +178,6 @@ function CustomersDealsPage() {
   );
   const [selectedPersonIds, setSelectedPersonIds] = React.useState(initialPersonIds);
   const [selectedCompanyIds, setSelectedCompanyIds] = React.useState(initialCompanyIds);
-  const [peopleState, setPeopleState] = React.useState(EMPTY_OPTIONS_STATE);
-  const [companiesState, setCompaniesState] = React.useState(EMPTY_OPTIONS_STATE);
-  const peopleCacheRef = React.useRef(/* @__PURE__ */ new Map());
-  const companiesCacheRef = React.useRef(/* @__PURE__ */ new Map());
-  const buildPersonLabel = React.useCallback((record) => {
-    const parts = [];
-    const name = record.name?.trim();
-    if (name) parts.push(name);
-    const email = record.email?.trim();
-    if (email && !parts.includes(email)) parts.push(email);
-    const phone = record.phone?.trim();
-    if (!parts.length && phone) parts.push(phone);
-    if (!parts.length) parts.push(t("customers.deals.list.unnamedPerson", "Unnamed person"));
-    return parts.join(" \u2022 ");
-  }, [t]);
-  const buildCompanyLabel = React.useCallback((record) => {
-    const parts = [];
-    const name = record.name?.trim();
-    if (name) parts.push(name);
-    const domain = record.domain?.trim();
-    if (domain && !parts.includes(domain)) parts.push(domain);
-    const email = record.email?.trim();
-    if (!parts.length && email) parts.push(email);
-    if (!parts.length) parts.push(t("customers.deals.list.unnamedCompany", "Unnamed company"));
-    return parts.join(" \u2022 ");
-  }, [t]);
-  const ingestPeopleRecords = React.useCallback((records) => {
-    if (!records.length) return [];
-    const queryMap = /* @__PURE__ */ new Map();
-    setPeopleState((prev) => {
-      const idToLabel = { ...prev.idToLabel };
-      const labelToId = {};
-      const merged = new Map(prev.options.map((opt) => [opt.value, opt]));
-      const occupied = /* @__PURE__ */ new Set();
-      Object.entries(prev.labelToId).forEach(([label, id]) => {
-        occupied.add(label);
-        labelToId[label] = id;
-      });
-      records.forEach((record) => {
-        if (!isUuid(record.id)) return;
-        const base = buildPersonLabel(record);
-        let previousLabel = idToLabel[record.id];
-        if (previousLabel) {
-          delete labelToId[previousLabel];
-          occupied.delete(previousLabel);
-        }
-        const label = ensureUniqueLabel(base, occupied);
-        idToLabel[record.id] = label;
-        labelToId[label] = record.id;
-        const option = { value: record.id, label };
-        merged.set(record.id, option);
-        queryMap.set(record.id, option);
-      });
-      const nextOptions = Array.from(merged.values()).sort((a, b) => a.label.localeCompare(b.label));
-      return { options: nextOptions, idToLabel, labelToId };
-    });
-    return Array.from(queryMap.values()).sort((a, b) => a.label.localeCompare(b.label));
-  }, [buildPersonLabel]);
-  const ingestCompanyRecords = React.useCallback((records) => {
-    if (!records.length) return [];
-    const queryMap = /* @__PURE__ */ new Map();
-    setCompaniesState((prev) => {
-      const idToLabel = { ...prev.idToLabel };
-      const labelToId = {};
-      const merged = new Map(prev.options.map((opt) => [opt.value, opt]));
-      const occupied = /* @__PURE__ */ new Set();
-      Object.entries(prev.labelToId).forEach(([label, id]) => {
-        occupied.add(label);
-        labelToId[label] = id;
-      });
-      records.forEach((record) => {
-        if (!isUuid(record.id)) return;
-        const base = buildCompanyLabel(record);
-        let previousLabel = idToLabel[record.id];
-        if (previousLabel) {
-          delete labelToId[previousLabel];
-          occupied.delete(previousLabel);
-        }
-        const label = ensureUniqueLabel(base, occupied);
-        idToLabel[record.id] = label;
-        labelToId[label] = record.id;
-        const option = { value: record.id, label };
-        merged.set(record.id, option);
-        queryMap.set(record.id, option);
-      });
-      const nextOptions = Array.from(merged.values()).sort((a, b) => a.label.localeCompare(b.label));
-      return { options: nextOptions, idToLabel, labelToId };
-    });
-    return Array.from(queryMap.values()).sort((a, b) => a.label.localeCompare(b.label));
-  }, [buildCompanyLabel]);
-  const loadPeopleOptions = React.useCallback(async (query) => {
-    const normalizedQuery = (query || "").trim().toLowerCase();
-    const cacheKey = `${scopeVersion}|${normalizedQuery}`;
-    const cached = peopleCacheRef.current.get(cacheKey);
-    if (cached) return cached;
-    const records = await fetchPeopleLookup(query);
-    const options = ingestPeopleRecords(records);
-    peopleCacheRef.current.set(cacheKey, options);
-    return options;
-  }, [scopeVersion, ingestPeopleRecords]);
-  const loadCompanyOptions = React.useCallback(async (query) => {
-    const normalizedQuery = (query || "").trim().toLowerCase();
-    const cacheKey = `${scopeVersion}|${normalizedQuery}`;
-    const cached = companiesCacheRef.current.get(cacheKey);
-    if (cached) return cached;
-    const records = await fetchCompaniesLookup(query);
-    const options = ingestCompanyRecords(records);
-    companiesCacheRef.current.set(cacheKey, options);
-    return options;
-  }, [scopeVersion, ingestCompanyRecords]);
-  React.useEffect(() => {
-    let cancelled = false;
-    if (!selectedPersonIds.length) return;
-    const missing = selectedPersonIds.filter((id) => !peopleState.idToLabel[id]);
-    if (!missing.length) return;
-    fetchPeopleLookupByIds(missing).then((records) => {
-      if (cancelled) return;
-      ingestPeopleRecords(records);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [selectedPersonIds, peopleState.idToLabel, ingestPeopleRecords]);
-  React.useEffect(() => {
-    let cancelled = false;
-    if (!selectedCompanyIds.length) return;
-    const missing = selectedCompanyIds.filter((id) => !companiesState.idToLabel[id]);
-    if (!missing.length) return;
-    fetchCompaniesLookupByIds(missing).then((records) => {
-      if (cancelled) return;
-      ingestCompanyRecords(records);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [selectedCompanyIds, companiesState.idToLabel, ingestCompanyRecords]);
   const [dictionaryMaps, setDictionaryMaps] = React.useState({
     "deal-statuses": {},
     "pipeline-stages": {}
@@ -400,6 +206,18 @@ function CustomersDealsPage() {
       cancelled = true;
     };
   }, [fetchDictionaryEntries, reloadToken]);
+  const dictionaryOptions = React.useMemo(() => {
+    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 {
+      dealStatuses: toOptions(dictionaryMaps["deal-statuses"]),
+      pipelineStages: toOptions(dictionaryMaps["pipeline-stages"])
+    };
+  }, [dictionaryMaps]);
   React.useEffect(() => {
     let cancelled = false;
     async function loadPipelines() {
@@ -423,70 +241,10 @@ function CustomersDealsPage() {
       cancelled = true;
     };
   }, [reloadToken, scopeVersion]);
-  React.useEffect(() => {
-    peopleCacheRef.current.clear();
-    companiesCacheRef.current.clear();
-    setPeopleState((prev) => {
-      if (!prev.options.length && !Object.keys(prev.idToLabel).length) return prev;
-      return { ...EMPTY_OPTIONS_STATE };
-    });
-    setCompaniesState((prev) => {
-      if (!prev.options.length && !Object.keys(prev.idToLabel).length) return prev;
-      return { ...EMPTY_OPTIONS_STATE };
-    });
-  }, [scopeVersion, reloadToken]);
-  const syncFilterIds = React.useCallback((key, ids) => {
-    setFilterValues((prev) => {
-      const current = Array.isArray(prev[key]) ? prev[key] : [];
-      if (!ids.length) {
-        if (!current.length) return prev;
-        const next = { ...prev };
-        delete next[key];
-        return next;
-      }
-      if (arraysEqual(current, ids)) return prev;
-      return { ...prev, [key]: [...ids] };
-    });
-  }, []);
-  React.useEffect(() => {
-    syncFilterIds("people", selectedPersonIds);
-  }, [selectedPersonIds, syncFilterIds]);
-  React.useEffect(() => {
-    syncFilterIds("companies", selectedCompanyIds);
-  }, [selectedCompanyIds, syncFilterIds]);
   const handleSearchChange = React.useCallback((value) => {
     setSearch(value.trim());
     setPage(1);
   }, []);
-  const handleFiltersApply = React.useCallback((values) => {
-    const next = { ...values };
-    const rawPeople = Array.isArray(values.people) ? values.people : [];
-    const nextPersonIds = Array.from(
-      new Set(
-        rawPeople.map((value) => typeof value === "string" ? value.trim() : "").filter((value) => value.length > 0 && isUuid(value))
-      )
-    );
-    setSelectedPersonIds(nextPersonIds);
-    if (nextPersonIds.length) next.people = nextPersonIds;
-    else delete next.people;
-    const rawCompanies = Array.isArray(values.companies) ? values.companies : [];
-    const nextCompanyIds = Array.from(
-      new Set(
-        rawCompanies.map((value) => typeof value === "string" ? value.trim() : "").filter((value) => value.length > 0 && isUuid(value))
-      )
-    );
-    setSelectedCompanyIds(nextCompanyIds);
-    if (nextCompanyIds.length) next.companies = nextCompanyIds;
-    else delete next.companies;
-    setFilterValues(next);
-    setPage(1);
-  }, []);
-  const handleFiltersClear = React.useCallback(() => {
-    setFilterValues({});
-    setSelectedPersonIds([]);
-    setSelectedCompanyIds([]);
-    setPage(1);
-  }, []);
   const queryParams = React.useMemo(() => {
     const params = new URLSearchParams();
     params.set("page", String(page));
@@ -498,33 +256,12 @@ function CustomersDealsPage() {
     if (search.trim().length) params.set("search", search.trim());
     if (selectedPersonIds.length) params.set("personId", selectedPersonIds.join(","));
     if (selectedCompanyIds.length) params.set("companyId", selectedCompanyIds.join(","));
-    Object.entries(filterValues).forEach(([key, value]) => {
-      if (key === "people" || key === "companies") return;
-      if (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") {
-        const obj = value;
-        const from = typeof obj.from === "string" ? obj.from.trim() : "";
-        const to = typeof obj.to === "string" ? obj.to.trim() : "";
-        if (from) params.set(`${key}[from]`, from);
-        if (to) params.set(`${key}[to]`, to);
-      } else {
-        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, selectedCompanyIds, selectedPersonIds, sorting]);
+  }, [advancedFilterState, page, pageSize, search, selectedCompanyIds, selectedPersonIds, sorting]);
   const currentParams = React.useMemo(
     () => Object.fromEntries(new URLSearchParams(queryParams)),
     [queryParams]
@@ -587,7 +324,7 @@ function CustomersDealsPage() {
     if (selectedPersonIds.length) selectedPersonIds.forEach((id) => params.append("personId", id));
     if (selectedCompanyIds.length) selectedCompanyIds.forEach((id) => params.append("companyId", id));
     if (page > 1) params.set("page", String(page));
-    const advancedParams = serializeAdvancedFilter(advancedFilterState);
+    const advancedParams = serializeTree(advancedFilterState);
     for (const [key, val] of Object.entries(advancedParams)) {
       params.set(key, val);
     }
@@ -597,8 +334,6 @@ function CustomersDealsPage() {
     router.replace(next ? `${pathname}?${next}` : pathname, { scroll: false });
   }, [pathname, router, page, search, selectedPersonIds, selectedCompanyIds, advancedFilterState]);
   const handleRefresh = React.useCallback(() => {
-    peopleCacheRef.current.clear();
-    companiesCacheRef.current.clear();
     void Promise.all([
       invalidateCustomerDictionary(queryClient, "deal-statuses"),
       invalidateCustomerDictionary(queryClient, "pipeline-stages")
@@ -724,33 +459,36 @@ function CustomersDealsPage() {
     }
     return succeeded.length > 0;
   }, [bulkMutationContextId, confirm, retryBulkMutation, runBulkMutation, t]);
-  const personOptions = peopleState.options;
-  const companyOptions = companiesState.options;
-  const peopleIdToLabel = peopleState.idToLabel;
-  const companyIdToLabel = companiesState.idToLabel;
-  const filters = React.useMemo(() => [
-    {
-      id: "people",
-      label: t("customers.deals.list.filters.people"),
-      type: "tags",
-      options: personOptions,
-      loadOptions: loadPeopleOptions,
-      placeholder: t("customers.deals.list.filters.peoplePlaceholder"),
-      formatValue: (value) => peopleIdToLabel[value] ?? value
-    },
-    {
-      id: "companies",
-      label: t("customers.deals.list.filters.companies"),
-      type: "tags",
-      options: companyOptions,
-      loadOptions: loadCompanyOptions,
-      placeholder: t("customers.deals.list.filters.companiesPlaceholder"),
-      formatValue: (value) => companyIdToLabel[value] ?? value
-    }
-  ], [companyIdToLabel, companyOptions, loadCompanyOptions, loadPeopleOptions, peopleIdToLabel, personOptions, t]);
   const { data: customFieldDefs = [] } = useCustomFieldDefs([E.customers.customer_deal], {
     keyExtras: [scopeVersion, reloadToken]
   });
+  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 columns = React.useMemo(() => {
     const noValue = /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("customers.deals.list.noValue") });
     const renderDictionaryCell = (kind, value) => /* @__PURE__ */ jsx(
@@ -814,6 +552,7 @@ function CustomersDealsPage() {
           alwaysVisible: true,
           columnChooserGroup: "Basic Info",
           filterKey: "title",
+          filterGroup: "Deal",
           maxWidth: "280px"
         },
         cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: row.original.title })
@@ -821,19 +560,36 @@ function CustomersDealsPage() {
       {
         accessorKey: "status",
         header: t("customers.deals.list.columns.status"),
-        meta: { filterType: "select", columnChooserGroup: "Basic Info", filterKey: "status" },
+        meta: {
+          filterType: "select",
+          filterOptions: dictionaryOptions.dealStatuses,
+          columnChooserGroup: "Basic Info",
+          filterKey: "status",
+          filterGroup: "Deal"
+        },
         cell: ({ row }) => renderDictionaryCell("deal-statuses", row.original.status)
       },
       {
         accessorKey: "pipelineStage",
         header: t("customers.deals.list.columns.pipelineStage"),
-        meta: { columnChooserGroup: "Pipeline", filterKey: "pipeline_stage" },
+        meta: {
+          filterType: "select",
+          filterOptions: dictionaryOptions.pipelineStages,
+          columnChooserGroup: "Pipeline",
+          filterKey: "pipeline_stage",
+          filterGroup: "Deal"
+        },
         cell: ({ row }) => renderDictionaryCell("pipeline-stages", row.original.pipelineStage)
       },
       {
         accessorKey: "pipelineId",
         header: t("customers.deals.list.columns.pipeline", "Pipeline"),
-        meta: { columnChooserGroup: "Pipeline", filterKey: "pipeline_id", maxWidth: "220px" },
+        meta: {
+          columnChooserGroup: "Pipeline",
+          filterKey: "pipeline_id",
+          filterGroup: "Deal",
+          maxWidth: "220px"
+        },
         cell: ({ row }) => {
           const name = row.original.pipelineId ? pipelineNames[row.original.pipelineId] : null;
           return name ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: name }) : noValue;
@@ -842,13 +598,23 @@ function CustomersDealsPage() {
       {
         accessorKey: "valueAmount",
         header: t("customers.deals.list.columns.value"),
-        meta: { filterType: "number", columnChooserGroup: "Financial", filterKey: "value_amount" },
+        meta: {
+          filterType: "number",
+          columnChooserGroup: "Financial",
+          filterKey: "value_amount",
+          filterGroup: "Deal"
+        },
         cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: formatCurrency(row.original.valueAmount ?? null, row.original.valueCurrency ?? null, t("customers.deals.list.noValue")) })
       },
       {
         accessorKey: "probability",
         header: t("customers.deals.list.columns.probability"),
-        meta: { filterType: "number", columnChooserGroup: "Financial", filterKey: "probability" },
+        meta: {
+          filterType: "number",
+          columnChooserGroup: "Financial",
+          filterKey: "probability",
+          filterGroup: "Deal"
+        },
         cell: ({ row }) => {
           const value = row.original.probability;
           if (typeof value === "number" && Number.isFinite(value)) {
@@ -860,15 +626,37 @@ function CustomersDealsPage() {
       {
         accessorKey: "expectedCloseAt",
         header: t("customers.deals.list.columns.expectedClose"),
-        meta: { columnChooserGroup: "Dates", filterKey: "expected_close_at" },
+        meta: {
+          columnChooserGroup: "Dates",
+          filterKey: "expected_close_at",
+          filterGroup: "Activity",
+          filterIconName: "calendar"
+        },
         cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: formatDateValue(row.original.expectedCloseAt ?? null, t("customers.deals.list.noValue")) })
       },
+      {
+        accessorKey: "ownerUserId",
+        header: t("customers.deals.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: "companies",
         header: t("customers.deals.list.columns.companies"),
         meta: {
           columnChooserGroup: "Associations",
           filterable: false,
+          filterGroup: "CRM",
+          filterIconName: "building-2",
           maxWidth: "220px",
           tooltipContent: (row) => normalizeCollectionLabels(
             row.companies.map((entry) => entry.label && entry.label.trim().length ? entry.label : t("customers.deals.list.unnamedCompany"))
@@ -882,6 +670,8 @@ function CustomersDealsPage() {
         meta: {
           columnChooserGroup: "Associations",
           filterable: false,
+          filterGroup: "CRM",
+          filterIconName: "user-round",
           maxWidth: "220px",
           tooltipContent: (row) => normalizeCollectionLabels(
             row.people.map((entry) => entry.label && entry.label.trim().length ? entry.label : t("customers.deals.list.unnamedPerson"))
@@ -892,109 +682,222 @@ function CustomersDealsPage() {
       {
         accessorKey: "updatedAt",
         header: t("customers.deals.list.columns.updatedAt"),
-        meta: { columnChooserGroup: "Dates", filterKey: "updated_at" },
+        meta: {
+          columnChooserGroup: "Dates",
+          filterKey: "updated_at",
+          filterGroup: "Activity",
+          filterIconName: "calendar"
+        },
         cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: formatDateValue(row.original.updatedAt ?? null, t("customers.deals.list.noValue")) })
       },
       ...customColumns
     ];
-  }, [customFieldDefs, dictionaryMaps, pipelineNames, t]);
-  return /* @__PURE__ */ jsxs(Page, { children: [
-    /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
-      DataTable,
+  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, loadOwnerFilterOptions, pipelineNames, 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 associationFilterFields = React.useMemo(() => {
+    const personLabels = /* @__PURE__ */ new Map();
+    const companyLabels = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      for (const person of row.people) {
+        if (selectedPersonIds.includes(person.id) && person.label.trim().length > 0) {
+          personLabels.set(person.id, person.label);
+        }
+      }
+      for (const company of row.companies) {
+        if (selectedCompanyIds.includes(company.id) && company.label.trim().length > 0) {
+          companyLabels.set(company.id, company.label);
+        }
+      }
+    }
+    return [
       {
-        stickyFirstColumn: true,
-        stickyActionsColumn: true,
-        title: t("customers.deals.list.title"),
-        actions: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/backend/customers/deals/create", children: t("customers.deals.list.actions.new", "New deal") }) }),
-        columns,
-        columnChooser: { auto: true },
-        data: rows,
-        onRowClick: (row) => {
-          router.push(`/backend/customers/deals/${row.id}`);
-        },
-        rowActions: (row) => {
-          const isDeleting = pendingDeleteId === row.id;
-          return /* @__PURE__ */ jsx(
-            RowActions,
-            {
-              items: [
-                {
-                  id: "edit",
-                  label: t("customers.deals.list.actions.edit", "Edit"),
-                  onSelect: () => {
-                    router.push(`/backend/customers/deals/${row.id}`);
-                  }
-                },
-                {
-                  id: "open-new-tab",
-                  label: t("customers.deals.list.actions.openInNewTab", "Open in new tab"),
-                  onSelect: () => {
-                    if (typeof window !== "undefined") {
-                      window.open(`/backend/customers/deals/${row.id}`, "_blank", "noopener");
+        key: "people",
+        label: t("customers.deals.list.columns.people", "People"),
+        type: "select",
+        options: selectedPersonIds.map((id) => ({ value: id, label: personLabels.get(id) ?? id }))
+      },
+      {
+        key: "companies",
+        label: t("customers.deals.list.columns.companies", "Companies"),
+        type: "select",
+        options: selectedCompanyIds.map((id) => ({ value: id, label: companyLabels.get(id) ?? id }))
+      }
+    ];
+  }, [rows, selectedCompanyIds, selectedPersonIds, t]);
+  const associationFilterTree = React.useMemo(() => {
+    const rules = [];
+    if (selectedPersonIds.length) rules.push({ field: "people", operator: "is_any_of", value: selectedPersonIds });
+    if (selectedCompanyIds.length) rules.push({ field: "companies", operator: "is_any_of", value: selectedCompanyIds });
+    return rules.length ? makeMultiRuleTree(rules) : createEmptyTree();
+  }, [selectedCompanyIds, selectedPersonIds]);
+  const handleAssociationFilterRemove = React.useCallback((nodeId) => {
+    const node = associationFilterTree.root.children.find((child) => child.id === nodeId);
+    if (!node || node.type !== "rule") return;
+    if (node.field === "people") setSelectedPersonIds([]);
+    if (node.field === "companies") setSelectedCompanyIds([]);
+    setPage(1);
+  }, [associationFilterTree.root.children]);
+  const dealsPresets = React.useMemo(() => makeDealsPresets(), []);
+  return /* @__PURE__ */ jsxs(Page, { children: [
+    /* @__PURE__ */ jsxs(PageBody, { children: [
+      /* @__PURE__ */ jsx(
+        DataTable,
+        {
+          stickyFirstColumn: true,
+          stickyActionsColumn: true,
+          title: t("customers.deals.list.title"),
+          actions: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/backend/customers/deals/create", children: t("customers.deals.list.actions.new", "New deal") }) }),
+          columns,
+          columnChooser: { auto: true },
+          data: rows,
+          onRowClick: (row) => {
+            router.push(`/backend/customers/deals/${row.id}`);
+          },
+          rowActions: (row) => {
+            const isDeleting = pendingDeleteId === row.id;
+            return /* @__PURE__ */ jsx(
+              RowActions,
+              {
+                items: [
+                  {
+                    id: "edit",
+                    label: t("customers.deals.list.actions.edit", "Edit"),
+                    onSelect: () => {
+                      router.push(`/backend/customers/deals/${row.id}`);
+                    }
+                  },
+                  {
+                    id: "open-new-tab",
+                    label: t("customers.deals.list.actions.openInNewTab", "Open in new tab"),
+                    onSelect: () => {
+                      if (typeof window !== "undefined") {
+                        window.open(`/backend/customers/deals/${row.id}`, "_blank", "noopener");
+                      }
                     }
+                  },
+                  {
+                    id: "delete",
+                    label: isDeleting ? t("customers.deals.list.actions.deleting", "Deleting\u2026") : t("customers.deals.list.actions.delete", "Delete"),
+                    destructive: true,
+                    onSelect: () => handleDeleteDeal(row.id)
                   }
-                },
-                {
-                  id: "delete",
-                  label: isDeleting ? t("customers.deals.list.actions.deleting", "Deleting\u2026") : t("customers.deals.list.actions.delete", "Delete"),
-                  destructive: true,
-                  onSelect: () => handleDeleteDeal(row.id)
-                }
-              ]
+                ]
+              }
+            );
+          },
+          sortable: true,
+          sorting,
+          onSortingChange: setSorting,
+          bulkActions: [
+            {
+              id: "delete",
+              label: t("customers.deals.list.actions.delete", "Delete"),
+              destructive: true,
+              onExecute: handleBulkDelete
             }
-          );
-        },
-        sortable: true,
-        sorting,
-        onSortingChange: setSorting,
-        bulkActions: [
-          {
-            id: "delete",
-            label: t("customers.deals.list.actions.delete", "Delete"),
-            destructive: true,
-            onExecute: handleBulkDelete
-          }
-        ],
-        searchValue: search,
-        onSearchChange: handleSearchChange,
-        searchPlaceholder: t("customers.deals.list.searchPlaceholder"),
-        filters,
-        filterValues,
-        onFiltersApply: handleFiltersApply,
-        onFiltersClear: handleFiltersClear,
-        pagination: {
-          page,
-          pageSize,
-          total,
-          totalPages,
-          onPageChange: (nextPage) => setPage(nextPage),
-          pageSizeOptions: [10, 25, 50, 100],
-          onPageSizeChange: handlePageSizeChange,
-          cacheStatus
-        },
-        isLoading,
-        refreshButton: {
-          label: t("customers.deals.list.refresh"),
-          onRefresh: handleRefresh
-        },
-        exporter: exportConfig,
-        entityId: E.customers.customer_deal,
-        perspective: { tableId: "customers.deals.list" },
-        advancedFilter: {
-          auto: true,
-          value: advancedFilterState,
-          onChange: setAdvancedFilterState,
-          onApply: () => {
-            setPage(1);
+          ],
+          searchValue: search,
+          onSearchChange: handleSearchChange,
+          searchPlaceholder: t("customers.deals.list.searchPlaceholder"),
+          pagination: {
+            page,
+            pageSize,
+            total,
+            totalPages,
+            onPageChange: (nextPage) => setPage(nextPage),
+            pageSizeOptions: [10, 25, 50, 100],
+            onPageSizeChange: handlePageSizeChange,
+            cacheStatus
           },
-          onClear: () => {
-            setAdvancedFilterState({ logic: "and", conditions: [] });
-            setPage(1);
-          }
-        },
-        virtualized: true
-      }
-    ) }),
+          isLoading,
+          refreshButton: {
+            label: t("customers.deals.list.refresh"),
+            onRefresh: handleRefresh
+          },
+          exporter: exportConfig,
+          entityId: E.customers.customer_deal,
+          perspective: { tableId: "customers.deals.list" },
+          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);
+            }
+          },
+          activeFilterChips: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ActiveFilterChips,
+              {
+                tree: associationFilterTree,
+                fields: associationFilterFields,
+                popoverOpen: filtersOpen,
+                onRemoveNode: handleAssociationFilterRemove,
+                onOpen: () => setFiltersOpen(true)
+              }
+            ),
+            /* @__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.deals.entityPlural", "deals"),
+            canRemoveLast: filterPanel.tree.root.children.length > 0,
+            onClearAll: handleAdvancedFilterClear,
+            onRemoveLast: () => filterPanel.dispatch({ type: "removeLast" })
+          },
+          virtualized: true
+        }
+      ),
+      /* @__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: dealsPresets,
+          open: filtersOpen,
+          onOpenChange: setFiltersOpen,
+          triggerRef: filtersTriggerRef,
+          savedFilterStorageKey: "customers.deals.list"
+        }
+      )
+    ] }),
     ConfirmDialogElement
   ] });
 }
@@ -1013,6 +916,7 @@ function mapDeal(item) {
   const probability = typeof probabilityRaw === "number" ? probabilityRaw : typeof probabilityRaw === "string" && probabilityRaw.trim().length ? Number(probabilityRaw) : null;
   const expectedCloseAt = typeof item.expected_close_at === "string" ? item.expected_close_at : null;
   const updatedAt = typeof item.updated_at === "string" ? item.updated_at : null;
+  const ownerUserId = typeof item.owner_user_id === "string" ? item.owner_user_id : null;
   const peopleRaw = Array.isArray(item.people) ? item.people : [];
   const companiesRaw = Array.isArray(item.companies) ? item.companies : [];
   const people = peopleRaw.map((entry) => {
@@ -1047,6 +951,7 @@ function mapDeal(item) {
     probability,
     expectedCloseAt,
     updatedAt,
+    ownerUserId,
     people,
     companies,
     ...customFields