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

package/src/modules/customers/backend/customers/people/page.tsx

@@ -2,13 +2,13 @@
 
 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, type DataTableExportFormat, withDataTableNamespaces } from '@open-mercato/ui/backend/DataTable'
 import type { ColumnDef } from '@tanstack/react-table'
 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'
@@ -18,10 +18,12 @@ import { E } from '#generated/entities.ids.generated'
 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 type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
 import type { FilterOption } from '@open-mercato/ui/backend/FilterOverlay'
-import type { AdvancedFilterState } from '@open-mercato/shared/lib/query/advanced-filter'
-import { serializeAdvancedFilter } from '@open-mercato/shared/lib/query/advanced-filter'
+import type { FilterFieldDef, FilterOption as AdvancedFilterOption } from '@open-mercato/shared/lib/query/advanced-filter'
+import type { AdvancedFilterTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+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,
@@ -38,10 +40,55 @@ 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 type { FilterPreset } from '@open-mercato/ui/backend/filters/QuickFilters'
 import { useQueryClient } from '@tanstack/react-query'
 import { ensureCustomerDictionary } from '../../../components/detail/hooks/useCustomerDictionary'
+import {
+  ensureCurrentUserFilterOption,
+  fetchAssignableStaffMembers,
+  mapAssignableStaffToFilterOptions,
+} from '../../../components/detail/assignableStaff'
 import { CollectionPreviewCell, normalizeCollectionLabels } from '../../../components/list/CollectionPreviewCell'
 
+type DictionaryOptionWithTone = AdvancedFilterOption & FilterOption
+
+function makePeoplePresets(): FilterPreset[] {
+  return [
+    {
+      id: 'recently-active',
+      labelKey: 'customers.people.presets.recentlyActive',
+      iconName: 'clock',
+      build: ({ now }) => {
+        const cutoff = new Date(now.getTime() - 7 * 24 * 3600 * 1000).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 * 1000).toISOString().slice(0, 10)
+        return makeRuleTree({ field: 'next_interaction_at', operator: 'is_before', value: cutoff })
+      },
+    },
+  ]
+}
+
 type PersonRow = {
   id: string
   name: string
@@ -66,6 +113,7 @@ type PersonRow = {
   nextInteractionColor?: string | null
   organizationId?: string | null
   source?: string | null
+  ownerUserId?: string | null
 } & Record<string, unknown>
 
 type PeopleResponse = {
@@ -155,13 +203,51 @@ export default function CustomersPeoplePage() {
   const [total, setTotal] = React.useState(0)
   const [totalPages, setTotalPages] = React.useState(1)
   const [search, setSearch] = React.useState('')
-  const [filterValues, setFilterValues] = React.useState<FilterValues>({})
-  const [advancedFilterState, setAdvancedFilterState] = React.useState<AdvancedFilterState>({ logic: 'and', conditions: [] })
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  // One-shot URL hydration used as the hook's initial value. The hook is the
+  // single source of truth from this point on — the page MUST NOT keep a
+  // parallel `useState<AdvancedFilterTree>` (see spec "Migration & Backward
+  // Compatibility" → state ownership).
+  const initialFilterTree = React.useMemo<AdvancedFilterTree>(() => {
+    if (!searchParams) return createEmptyTree()
+    const record: Record<string, string> = {}
+    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()
+    // searchParams is intentionally evaluated once on mount — subsequent URL
+    // changes flow through the hook, not back through hydration.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  // `filterPanel` lives at the top of the component so derived state below
+  // (URL params, data fetch, export config) can read `filterPanel.appliedTree`
+  // directly. Real `FilterFieldDef[]` arrives later from `useAutoDiscoveredFields`
+  // (it depends on columns) and is synced into the hook via a small effect at
+  // the bottom of the component. The hook reads fields through a ref at
+  // validation time only — first validation cannot fire before user input, by
+  // which point fields have settled, so the empty initial value is safe.
+  const [panelFields, setPanelFields] = React.useState<FilterFieldDef[]>([])
+  const [filtersOpen, setFiltersOpen] = React.useState(false)
+  const filtersTriggerRef = React.useRef<HTMLButtonElement | null>(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<'hit' | 'miss' | null>(null)
   const [dictionaryMaps, setDictionaryMaps] = React.useState<Record<DictionaryKindKey, DictionaryMap>>(createEmptyCustomerDictionaryMaps())
-  const [tagIdToLabel, setTagIdToLabel] = React.useState<Record<string, string>>({})
   const scopeVersion = useOrganizationScopeVersion()
   const queryClient = useQueryClient()
   const t = useT()
@@ -203,15 +289,15 @@ export default function CustomersPeoplePage() {
       return []
     }
   }, [queryClient, scopeVersion])
-  const loadDictionaryOptions = React.useCallback(async (kind: 'statuses' | 'sources' | 'lifecycle-stages') => {
-    const entries = await fetchDictionaryEntries(kind)
-    return entries.map((entry) => ({ value: entry.value, label: entry.label }))
-  }, [fetchDictionaryEntries])
-
   const dictionaryOptions = React.useMemo(() => {
-    const toOptions = (map?: DictionaryMap | null): FilterOption[] =>
+    const toOptions = (map?: DictionaryMap | null): DictionaryOptionWithTone[] =>
       Object.values(map ?? {})
-        .map((entry) => ({ value: entry.value, label: entry.label }))
+        .map((entry) => {
+          const tone = mapDictionaryColorToTone(entry.color)
+          const option: DictionaryOptionWithTone = { value: entry.value, label: entry.label }
+          if (tone) option.tone = tone
+          return option
+        })
         .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
     return {
       statuses: toOptions(dictionaryMaps.statuses),
@@ -220,63 +306,6 @@ export default function CustomersPeoplePage() {
     }
   }, [dictionaryMaps])
 
-  const loadTagOptions = React.useCallback(async (query?: string): Promise<FilterOption[]> => {
-    try {
-      const params = new URLSearchParams({ pageSize: '100' })
-      const trimmedQuery = typeof query === 'string' ? query.trim() : ''
-      if (trimmedQuery) params.set('search', trimmedQuery)
-      const payload = await readApiResultOrThrow<{ items?: unknown[] }>(
-        `/api/customers/tags?${params.toString()}`,
-        undefined,
-        { errorMessage: t('customers.people.detail.tags.loadError', 'Failed to load tags.') },
-      )
-      const items = Array.isArray(payload?.items) ? payload.items : []
-      const options: FilterOption[] = []
-      for (const item of items) {
-        if (!item || typeof item !== 'object') continue
-        const raw = item as { id?: unknown; tagId?: unknown; label?: unknown; slug?: unknown }
-        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: Record<string, string> = {}
-    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() {
@@ -298,63 +327,35 @@ export default function CustomersPeoplePage() {
     [E.customers.customer_entity, E.customers.customer_person_profile],
     { keyExtras: [scopeVersion, reloadToken] },
   )
-
-  const filters = React.useMemo<FilterDef[]>(() => [
-    {
-      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: string) => 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<AdvancedFilterOption[]>([])
+  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?: string): Promise<AdvancedFilterOption[]> => {
+    const items = await fetchAssignableStaffMembers(query ?? '', { pageSize: 100 })
+    return mapAssignableStaffToFilterOptions(items)
+  }, [])
 
   const queryParams = React.useMemo(() => {
     const params = new URLSearchParams()
@@ -365,72 +366,40 @@ export default 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: Array<['hasEmail' | 'hasPhone' | 'hasNextInteraction', string]> = [
-      ['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): id is string => 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])
+
+  // Mirror page state into the URL so a refresh restores the same filter tree,
+  // including nested subgroups. Without this effect the People page would
+  // discard everything the user typed into the filter panel on refresh
+  // (the previous behavior — top-level rules only "appeared" to survive
+  // because a stale localStorage perspective snapshot was being re-applied).
+  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: DataTableExportFormat) =>
@@ -592,32 +561,6 @@ export default function CustomersPeoplePage() {
     return succeeded.length > 0
   }, [bulkMutationContextId, confirm, retryBulkMutation, runBulkMutation, t])
 
-  const handleFiltersApply = React.useCallback((values: FilterValues) => {
-    const next: FilterValues = {}
-    Object.entries(values).forEach(([key, value]) => {
-      if (value !== undefined) {
-        next[key] = value
-      }
-    })
-    const rawTags = Array.isArray(values.tagIds) ? (values.tagIds as string[]) : []
-    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<ColumnDef<PersonRow>[]>(() => {
     const noValue = <span className="text-muted-foreground text-sm">{t('customers.people.list.noValue')}</span>
     const renderDictionaryCell = (kind: DictionaryKindKey, rawValue: string | null | undefined) => (
@@ -664,7 +607,13 @@ export default 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 }) => (
           <Link href={`/backend/customers/people-v2/${row.original.id}`} className="font-medium hover:underline">
             {row.original.name}
@@ -674,13 +623,24 @@ export default function CustomersPeoplePage() {
       {
         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 || <span className="text-muted-foreground text-sm">{t('customers.people.list.noValue')}</span>,
       },
       {
         accessorKey: 'status',
         header: t('customers.people.list.columns.status'),
-        meta: { filterType: 'select' as const, filterOptions: dictionaryOptions.statuses, columnChooserGroup: 'Basic Info' },
+        meta: {
+          filterType: 'select' as const,
+          filterOptions: dictionaryOptions.statuses,
+          columnChooserGroup: 'Basic Info',
+          filterGroup: 'CRM',
+        },
         cell: ({ row }) => renderDictionaryCell('statuses', row.original.status),
       },
       {
@@ -691,6 +651,7 @@ export default function CustomersPeoplePage() {
           filterOptions: dictionaryOptions.lifecycleStages,
           columnChooserGroup: 'Basic Info',
           filterKey: 'lifecycle_stage',
+          filterGroup: 'CRM',
         },
         cell: ({ row }) => renderDictionaryCell('lifecycle-stages', row.original.lifecycleStage),
       },
@@ -700,6 +661,8 @@ export default function CustomersPeoplePage() {
         meta: {
           columnChooserGroup: 'Dates',
           filterKey: 'next_interaction_at',
+          filterGroup: 'Activity',
+          filterIconName: 'calendar',
           tooltipContent: (row: PersonRow) => {
             if (!row.nextInteractionAt) return undefined
             const date = formatDate(row.nextInteractionAt, '')
@@ -734,67 +697,137 @@ export default function CustomersPeoplePage() {
       {
         accessorKey: 'source',
         header: t('customers.people.list.columns.source'),
-        meta: { filterType: 'select' as const, filterOptions: dictionaryOptions.sources, columnChooserGroup: 'Basic Info' },
+        meta: {
+          filterType: 'select' as const,
+          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,
       },
     ]
@@ -816,7 +849,31 @@ export default function CustomersPeoplePage() {
       }))
 
     return [...baseColumns, ...customColumns]
-  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, t])
+  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, loadOwnerFilterOptions, resolvedOwnerFilterOptions, t])
+
+  const { advancedFilterFields } = useAutoDiscoveredFields({ columns, customFieldDefs })
+
+  // Sync auto-discovered fields into the `filterPanel` declared at the top of
+  // the component. See the comment on the `panelFields` state for why this
+  // late-binding is safe. Bail out by content (field-key list) — every render
+  // of `useAutoDiscoveredFields` produces fresh `FilterFieldDef` object refs
+  // even when the set of fields hasn't actually changed, so a naive reference
+  // setState would loop ("Maximum update depth exceeded").
+  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<FilterPreset[]>(() => makePeoplePresets(), [])
 
   return (
     <Page>
@@ -843,10 +900,6 @@ export default function CustomersPeoplePage() {
           searchValue={search}
           onSearchChange={(value) => { setSearch(value); setPage(1) }}
           searchPlaceholder={t('customers.people.list.searchPlaceholder')}
-          filters={filters}
-          filterValues={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}`)}
@@ -884,16 +937,54 @@ export default function CustomersPeoplePage() {
             />
           )}
           advancedFilter={{
-              auto: true,
-              value: advancedFilterState,
-              onChange: setAdvancedFilterState,
-              onApply: () => { setPage(1) },
-              onClear: () => { setAdvancedFilterState({ logic: 'and', conditions: [] }); setPage(1) },
-            }}
+            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={(
+            <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
           pagination={{ page, pageSize, total, totalPages, onPageChange: setPage, cacheStatus, pageSizeOptions: [10, 25, 50, 100], onPageSizeChange: handlePageSizeChange }}
           isLoading={isLoading}
         />
+        <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"
+        />
       </PageBody>
       {ConfirmDialogElement}
     </Page>