@open-mercato/core 0.4.11-develop.1355.50152f3ee9 → 0.4.11-develop.1362.574a071900

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

@@ -8,6 +8,8 @@ import type { ColumnDef } from '@tanstack/react-table'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { DataTable, type DataTableExportFormat, withDataTableNamespaces } from '@open-mercato/ui/backend/DataTable'
 import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
+import type { AdvancedFilterState } from '@open-mercato/shared/lib/query/advanced-filter'
+import { serializeAdvancedFilter } from '@open-mercato/shared/lib/query/advanced-filter'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { buildCrudExportUrl, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -28,8 +30,12 @@ import {
 } from '../../../components/detail/hooks/useCustomerDictionary'
 import {
   useCustomFieldDefs,
-  filterCustomFieldDefs,
 } from '@open-mercato/ui/backend/utils/customFieldDefs'
+import {
+  mapCustomFieldKindToFilterType,
+  normalizeCustomFieldFilterOptions,
+  supportsCustomFieldColumn,
+} from '@open-mercato/ui/backend/utils/customFieldColumns'
 
 type DealRow = {
   id: string
@@ -276,6 +282,8 @@ export default function CustomersDealsPage() {
     const raw = Number(searchParams?.get('page') ?? '1')
     return Number.isFinite(raw) && raw > 0 ? raw : 1
   })
+  const [pageSize, setPageSize] = React.useState(PAGE_SIZE)
+  const [sorting, setSorting] = React.useState<import('@tanstack/react-table').SortingState>([])
   const [total, setTotal] = React.useState(0)
   const [totalPages, setTotalPages] = React.useState(1)
   const [search, setSearch] = React.useState(() => searchParams?.get('search')?.trim() ?? '')
@@ -283,6 +291,7 @@ export default function CustomersDealsPage() {
   const [reloadToken, setReloadToken] = React.useState(0)
   const [pendingDeleteId, setPendingDeleteId] = React.useState<string | null>(null)
   const [filterValues, setFilterValues] = React.useState<FilterValues>({})
+  const [advancedFilterState, setAdvancedFilterState] = React.useState<AdvancedFilterState>({ logic: 'and', conditions: [] })
   const [cacheStatus, setCacheStatus] = React.useState<'hit' | 'miss' | null>(null)
 
   const initialPersonIds = React.useMemo(
@@ -580,7 +589,11 @@ export default function CustomersDealsPage() {
   const queryParams = React.useMemo(() => {
     const params = new URLSearchParams()
     params.set('page', String(page))
-    params.set('pageSize', String(PAGE_SIZE))
+    params.set('pageSize', String(pageSize))
+    if (sorting.length > 0) {
+      params.set('sort', sorting[0].id)
+      params.set('order', sorting[0].desc ? 'desc' : 'asc')
+    }
     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(','))
@@ -607,8 +620,12 @@ export default function CustomersDealsPage() {
         if (stringValue) params.set(key, stringValue)
       }
     })
+    const advancedParams = serializeAdvancedFilter(advancedFilterState)
+    for (const [key, val] of Object.entries(advancedParams)) {
+      params.set(key, val)
+    }
     return params.toString()
-  }, [filterValues, page, search, selectedCompanyIds, selectedPersonIds])
+  }, [advancedFilterState, filterValues, page, pageSize, search, selectedCompanyIds, selectedPersonIds, sorting])
 
   const currentParams = React.useMemo(
     () => Object.fromEntries(new URLSearchParams(queryParams)),
@@ -731,6 +748,39 @@ export default function CustomersDealsPage() {
     [confirm, handleRefresh, pendingDeleteId, t],
   )
 
+  const handlePageSizeChange = React.useCallback((newSize: number) => {
+    setPageSize(newSize)
+    setPage(1)
+  }, [])
+
+  const handleBulkDelete = React.useCallback(async (selectedRows: DealRow[]) => {
+    const confirmed = await confirm({
+      title: t('customers.deals.list.bulkDelete.title', 'Delete {count} deals?', { count: selectedRows.length }),
+      description: t('customers.deals.list.bulkDelete.description', 'This action cannot be undone.'),
+      variant: 'destructive',
+    })
+    if (!confirmed) return false
+    let deletedCount = 0
+    for (const row of selectedRows) {
+      try {
+        await deleteCrud('customers/deals', {
+          body: { id: row.id },
+          errorMessage: t('customers.deals.list.deleteError', 'Failed to delete deal.'),
+        })
+        deletedCount++
+      } catch {}
+    }
+    if (deletedCount > 0) {
+      setRows((prev) => {
+        const deletedIds = new Set(selectedRows.map((r) => r.id))
+        return prev.filter((r) => !deletedIds.has(r.id))
+      })
+      setTotal((prev) => Math.max(0, prev - deletedCount))
+      flash(t('customers.deals.list.bulkDelete.success', '{count} deals deleted', { count: deletedCount }), 'success')
+    }
+    return deletedCount > 0
+  }, [confirm, t])
+
   const personOptions = peopleState.options
   const companyOptions = companiesState.options
 
@@ -786,57 +836,70 @@ export default function CustomersDealsPage() {
       )
     }
 
-    const customColumns = filterCustomFieldDefs(customFieldDefs, 'list').map<ColumnDef<DealRow>>((def) => ({
-      accessorKey: `cf_${def.key}`,
-      header: def.label || def.key,
-      cell: ({ getValue }) => {
-        const value = getValue()
-        if (value == null) return noValue
-        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) return noValue
-          return <span className="text-sm">{normalized.join(', ')}</span>
-        }
-        if (typeof value === 'boolean') {
-          return (
-            <span className="text-sm">
-              {value
-                ? t('customers.deals.list.booleanYes', 'Yes')
-                : t('customers.deals.list.booleanNo', 'No')}
-            </span>
-          )
-        }
-        const stringValue = typeof value === 'string' ? value.trim() : String(value)
-        if (!stringValue) return noValue
-        return <span className="text-sm">{stringValue}</span>
-      },
-    }))
+    const customColumns = customFieldDefs
+      .filter((def) => supportsCustomFieldColumn(def))
+      .map<ColumnDef<DealRow>>((def) => ({
+        accessorKey: `cf_${def.key}`,
+        header: def.label || def.key,
+        meta: {
+          columnChooserGroup: def.group?.title ?? 'Custom Fields',
+          filterGroup: def.group?.title ?? 'Custom Fields',
+          filterType: mapCustomFieldKindToFilterType(def.kind),
+          filterOptions: normalizeCustomFieldFilterOptions(def.options),
+          hidden: def.listVisible === false,
+        },
+        cell: ({ getValue }) => {
+          const value = getValue()
+          if (value == null) return noValue
+          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) return noValue
+            return <span className="text-sm">{normalized.join(', ')}</span>
+          }
+          if (typeof value === 'boolean') {
+            return (
+              <span className="text-sm">
+                {value
+                  ? t('customers.deals.list.booleanYes', 'Yes')
+                  : t('customers.deals.list.booleanNo', 'No')}
+              </span>
+            )
+          }
+          const stringValue = typeof value === 'string' ? value.trim() : String(value)
+          if (!stringValue) return noValue
+          return <span className="text-sm">{stringValue}</span>
+        },
+      }))
 
     return [
       {
         accessorKey: 'title',
         header: t('customers.deals.list.columns.title'),
+        meta: { alwaysVisible: true, columnChooserGroup: 'Basic Info', filterKey: 'title' },
         cell: ({ row }) => <span className="font-medium text-sm">{row.original.title}</span>,
       },
       {
         accessorKey: 'status',
         header: t('customers.deals.list.columns.status'),
+        meta: { filterType: 'select' as const, columnChooserGroup: 'Basic Info', filterKey: 'status' },
         cell: ({ row }) => renderDictionaryCell('deal-statuses', row.original.status),
       },
       {
         accessorKey: 'pipelineStage',
         header: t('customers.deals.list.columns.pipelineStage'),
+        meta: { columnChooserGroup: 'Pipeline', filterKey: 'pipeline_stage' },
         cell: ({ row }) => renderDictionaryCell('pipeline-stages', row.original.pipelineStage),
       },
       {
         accessorKey: 'pipelineId',
         header: t('customers.deals.list.columns.pipeline', 'Pipeline'),
+        meta: { columnChooserGroup: 'Pipeline', filterKey: 'pipeline_id' },
         cell: ({ row }) => {
           const name = row.original.pipelineId ? pipelineNames[row.original.pipelineId] : null
           return name ? <span className="text-sm">{name}</span> : noValue
@@ -845,6 +908,7 @@ export default function CustomersDealsPage() {
       {
         accessorKey: 'valueAmount',
         header: t('customers.deals.list.columns.value'),
+        meta: { filterType: 'number' as const, columnChooserGroup: 'Financial', filterKey: 'value_amount' },
         cell: ({ row }) => (
           <span className="text-sm font-medium">
             {formatCurrency(row.original.valueAmount ?? null, row.original.valueCurrency ?? null, t('customers.deals.list.noValue'))}
@@ -854,6 +918,7 @@ export default function CustomersDealsPage() {
       {
         accessorKey: 'probability',
         header: t('customers.deals.list.columns.probability'),
+        meta: { filterType: 'number' as const, columnChooserGroup: 'Financial', filterKey: 'probability' },
         cell: ({ row }) => {
           const value = row.original.probability
           if (typeof value === 'number' && Number.isFinite(value)) {
@@ -865,6 +930,7 @@ export default function CustomersDealsPage() {
       {
         accessorKey: 'expectedCloseAt',
         header: t('customers.deals.list.columns.expectedClose'),
+        meta: { columnChooserGroup: 'Dates', filterKey: 'expected_close_at' },
         cell: ({ row }) => (
           <span className="text-sm">
             {formatDateValue(row.original.expectedCloseAt ?? null, t('customers.deals.list.noValue'))}
@@ -874,16 +940,19 @@ export default function CustomersDealsPage() {
       {
         accessorKey: 'companies',
         header: t('customers.deals.list.columns.companies'),
+        meta: { columnChooserGroup: 'Associations', filterable: false },
         cell: ({ row }) => renderAssociationList(row.original.companies, t('customers.deals.list.unnamedCompany')),
       },
       {
         accessorKey: 'people',
         header: t('customers.deals.list.columns.people'),
+        meta: { columnChooserGroup: 'Associations', filterable: false },
         cell: ({ row }) => renderAssociationList(row.original.people, t('customers.deals.list.unnamedPerson')),
       },
       {
         accessorKey: 'updatedAt',
         header: t('customers.deals.list.columns.updatedAt'),
+        meta: { columnChooserGroup: 'Dates', filterKey: 'updated_at' },
         cell: ({ row }) => (
           <span className="text-sm">
             {formatDateValue(row.original.updatedAt ?? null, t('customers.deals.list.noValue'))}
@@ -898,6 +967,7 @@ export default function CustomersDealsPage() {
     <Page>
       <PageBody>
         <DataTable<DealRow>
+          stickyFirstColumn
           title={t('customers.deals.list.title')}
           actions={(
             <Button asChild>
@@ -907,6 +977,7 @@ export default function CustomersDealsPage() {
             </Button>
           )}
           columns={columns}
+          columnChooser={{ auto: true }}
           data={rows}
           onRowClick={(row) => {
             router.push(`/backend/customers/deals/${row.id}`)
@@ -942,6 +1013,17 @@ export default function CustomersDealsPage() {
               />
             )
           }}
+          sortable
+          sorting={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')}
@@ -951,10 +1033,12 @@ export default function CustomersDealsPage() {
           onFiltersClear={handleFiltersClear}
           pagination={{
             page,
-            pageSize: PAGE_SIZE,
+            pageSize,
             total,
             totalPages,
             onPageChange: (nextPage) => setPage(nextPage),
+            pageSizeOptions: [10, 25, 50, 100],
+            onPageSizeChange: handlePageSizeChange,
             cacheStatus,
           }}
           isLoading={isLoading}
@@ -965,6 +1049,14 @@ export default function CustomersDealsPage() {
           exporter={exportConfig}
           entityId={E.customers.customer_deal}
           perspective={{ tableId: 'customers.deals.list' }}
+          advancedFilter={{
+              auto: true,
+              value: advancedFilterState,
+              onChange: setAdvancedFilterState,
+              onApply: () => { setPage(1) },
+              onClear: () => { setAdvancedFilterState({ logic: 'and', conditions: [] }); setPage(1) },
+            }}
+          virtualized
         />
       </PageBody>
       {ConfirmDialogElement}

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

@@ -17,6 +17,8 @@ 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 {
   DictionaryValue,
   renderDictionaryColor,
@@ -26,8 +28,12 @@ import {
 } from '../../../lib/dictionaries'
 import {
   useCustomFieldDefs,
-  filterCustomFieldDefs,
 } from '@open-mercato/ui/backend/utils/customFieldDefs'
+import {
+  mapCustomFieldKindToFilterType,
+  normalizeCustomFieldFilterOptions,
+  supportsCustomFieldColumn,
+} from '@open-mercato/ui/backend/utils/customFieldColumns'
 import { useQueryClient } from '@tanstack/react-query'
 import { ensureCustomerDictionary } from '../../../components/detail/hooks/useCustomerDictionary'
 
@@ -37,6 +43,16 @@ type PersonRow = {
   description?: string | null
   email?: string | null
   phone?: string | null
+  firstName?: string | null
+  lastName?: string | null
+  preferredName?: string | null
+  jobTitle?: string | null
+  department?: string | null
+  seniority?: string | null
+  timezone?: string | null
+  linkedInUrl?: string | null
+  twitterUrl?: string | null
+  companyEntityId?: string | null
   status?: string | null
   lifecycleStage?: string | null
   nextInteractionAt?: string | null
@@ -87,6 +103,16 @@ function mapApiItem(item: Record<string, unknown>): PersonRow | null {
   const description = typeof item.description === 'string' ? item.description : null
   const email = typeof item.primary_email === 'string' ? item.primary_email : null
   const phone = typeof item.primary_phone === 'string' ? item.primary_phone : null
+  const firstName = typeof item.first_name === 'string' ? item.first_name : null
+  const lastName = typeof item.last_name === 'string' ? item.last_name : null
+  const preferredName = typeof item.preferred_name === 'string' ? item.preferred_name : null
+  const jobTitle = typeof item.job_title === 'string' ? item.job_title : null
+  const department = typeof item.department === 'string' ? item.department : null
+  const seniority = typeof item.seniority === 'string' ? item.seniority : null
+  const timezone = typeof item.timezone === 'string' ? item.timezone : null
+  const linkedInUrl = typeof item.linked_in_url === 'string' ? item.linked_in_url : null
+  const twitterUrl = typeof item.twitter_url === 'string' ? item.twitter_url : null
+  const companyEntityId = typeof item.company_entity_id === 'string' ? item.company_entity_id : null
   const status = typeof item.status === 'string' ? item.status : null
   const lifecycleStage = typeof item.lifecycle_stage === 'string' ? item.lifecycle_stage : null
   const nextInteractionAt = typeof item.next_interaction_at === 'string' ? item.next_interaction_at : null
@@ -107,6 +133,16 @@ function mapApiItem(item: Record<string, unknown>): PersonRow | null {
     description,
     email,
     phone,
+    firstName,
+    lastName,
+    preferredName,
+    jobTitle,
+    department,
+    seniority,
+    timezone,
+    linkedInUrl,
+    twitterUrl,
+    companyEntityId,
     status,
     lifecycleStage,
     nextInteractionAt,
@@ -123,11 +159,13 @@ export default function CustomersPeoplePage() {
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const [rows, setRows] = React.useState<PersonRow[]>([])
   const [page, setPage] = React.useState(1)
-  const [pageSize] = React.useState(20)
+  const [pageSize, setPageSize] = React.useState(20)
+  const [sorting, setSorting] = React.useState<import('@tanstack/react-table').SortingState>([])
   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 [isLoading, setIsLoading] = React.useState(true)
   const [reloadToken, setReloadToken] = React.useState(0)
   const [cacheStatus, setCacheStatus] = React.useState<'hit' | 'miss' | null>(null)
@@ -137,6 +175,10 @@ export default function CustomersPeoplePage() {
   const queryClient = useQueryClient()
   const t = useT()
   const router = useRouter()
+  const handlePageSizeChange = React.useCallback((newSize: number) => {
+    setPageSize(newSize)
+    setPage(1)
+  }, [])
   const fetchDictionaryEntries = React.useCallback(async (kind: DictionaryKindKey) => {
     try {
       const data = await ensureCustomerDictionary(queryClient, kind, scopeVersion)
@@ -305,6 +347,10 @@ export default function CustomersPeoplePage() {
     const params = new URLSearchParams()
     params.set('page', String(page))
     params.set('pageSize', String(pageSize))
+    if (sorting.length > 0) {
+      params.set('sort', sorting[0].id)
+      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)
@@ -364,8 +410,12 @@ export default function CustomersPeoplePage() {
         if (stringValue) params.set(key, stringValue)
       }
     })
+    const advancedParams = serializeAdvancedFilter(advancedFilterState)
+    for (const [key, val] of Object.entries(advancedParams)) {
+      params.set(key, val)
+    }
     return params.toString()
-  }, [filterValues, page, pageSize, search, tagIdToLabel, tagLabelToId])
+  }, [advancedFilterState, filterValues, page, pageSize, search, sorting, tagIdToLabel, tagLabelToId])
 
   const currentParams = React.useMemo(() => Object.fromEntries(new URLSearchParams(queryParams)), [queryParams])
   const exportConfig = React.useMemo(() => ({
@@ -446,6 +496,35 @@ export default function CustomersPeoplePage() {
     }
   }, [confirm, handleRefresh, t])
 
+  const handleBulkDelete = React.useCallback(async (selectedRows: PersonRow[]) => {
+    const confirmed = await confirm({
+      title: t('customers.people.list.bulkDelete.title', 'Delete {count} people?', { count: selectedRows.length }),
+      description: t('customers.people.list.bulkDelete.description', 'This action cannot be undone.'),
+      variant: 'destructive',
+    })
+    if (!confirmed) return false
+    let deletedCount = 0
+    for (const row of selectedRows) {
+      try {
+        await apiCallOrThrow(`/api/customers/people?id=${encodeURIComponent(row.id)}`, {
+          method: 'DELETE',
+          headers: { 'content-type': 'application/json' },
+        })
+        deletedCount++
+      } catch {}
+    }
+    if (deletedCount > 0) {
+      setRows((prev) => {
+        const deletedIds = new Set(selectedRows.map((r) => r.id))
+        return prev.filter((r) => !deletedIds.has(r.id))
+      })
+      setTotal((prev) => Math.max(0, prev - deletedCount))
+      flash(t('customers.people.list.bulkDelete.success', '{count} people deleted', { count: deletedCount }), 'success')
+      setReloadToken((prev) => prev + 1)
+    }
+    return deletedCount > 0
+  }, [confirm, t])
+
   const handleFiltersApply = React.useCallback((values: FilterValues) => {
     const next: FilterValues = {}
     Object.entries(values).forEach(([key, value]) => {
@@ -518,6 +597,7 @@ export default function CustomersPeoplePage() {
       {
         accessorKey: 'name',
         header: t('customers.people.list.columns.name'),
+        meta: { alwaysVisible: true, columnChooserGroup: 'Basic Info', filterKey: 'display_name' },
         cell: ({ row }) => (
           <Link href={`/backend/customers/people-v2/${row.original.id}`} className="font-medium hover:underline">
             {row.original.name}
@@ -527,22 +607,32 @@ export default function CustomersPeoplePage() {
       {
         accessorKey: 'email',
         header: t('customers.people.list.columns.email'),
+        meta: { columnChooserGroup: 'Contact', filterKey: 'primary_email' },
         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' },
         cell: ({ row }) => renderDictionaryCell('statuses', row.original.status),
       },
       {
         accessorKey: 'lifecycleStage',
         header: t('customers.people.list.columns.lifecycleStage'),
+        meta: {
+          filterType: 'select' as const,
+          filterOptions: dictionaryOptions.lifecycleStages,
+          columnChooserGroup: 'Basic Info',
+          filterKey: 'lifecycle_stage',
+        },
         cell: ({ row }) => renderDictionaryCell('lifecycle-stages', row.original.lifecycleStage),
       },
       {
         accessorKey: 'nextInteractionAt',
         header: t('customers.people.list.columns.nextInteraction'),
         meta: {
+          columnChooserGroup: 'Dates',
+          filterKey: 'next_interaction_at',
           tooltipContent: (row: PersonRow) => {
             if (!row.nextInteractionAt) return undefined
             const date = formatDate(row.nextInteractionAt, '')
@@ -577,23 +667,94 @@ export default function CustomersPeoplePage() {
       {
         accessorKey: 'source',
         header: t('customers.people.list.columns.source'),
+        meta: { filterType: 'select' as const, filterOptions: dictionaryOptions.sources, columnChooserGroup: 'Basic Info' },
         cell: ({ row }) => renderDictionaryCell('sources', row.original.source),
       },
+      {
+        accessorKey: 'firstName',
+        header: t('customers.people.form.firstName', 'First name'),
+        meta: { columnChooserGroup: 'Profile', hidden: true, filterKey: 'person_profile.first_name' },
+        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' },
+        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' },
+        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' },
+        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' },
+        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' },
+        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' },
+        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' },
+        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' },
+        cell: ({ row }) => row.original.twitterUrl || noValue,
+      },
+      {
+        accessorKey: 'description',
+        header: t('customers.people.form.description', 'Description'),
+        meta: { columnChooserGroup: 'Notes', hidden: true, filterKey: 'description' },
+        cell: ({ row }) => row.original.description || noValue,
+      },
     ]
 
-    const customColumns = filterCustomFieldDefs(customFieldDefs, 'list').map<ColumnDef<PersonRow>>((def) => ({
-      accessorKey: `cf_${def.key}`,
-      header: def.label || def.key,
-      cell: ({ getValue }) => renderCustomFieldCell(getValue()),
-    }))
+    const customColumns = customFieldDefs
+      .filter((def) => supportsCustomFieldColumn(def))
+      .map<ColumnDef<PersonRow>>((def) => ({
+        accessorKey: `cf_${def.key}`,
+        header: def.label || def.key,
+        meta: {
+          columnChooserGroup: def.group?.title ?? 'Custom Fields',
+          filterGroup: def.group?.title ?? 'Custom Fields',
+          filterType: mapCustomFieldKindToFilterType(def.kind),
+          filterOptions: normalizeCustomFieldFilterOptions(def.options),
+          hidden: def.listVisible === false,
+        },
+        cell: ({ getValue }) => renderCustomFieldCell(getValue()),
+      }))
 
     return [...baseColumns, ...customColumns]
-  }, [customFieldDefs, dictionaryMaps, t])
+  }, [customFieldDefs, dictionaryMaps, dictionaryOptions, t])
 
   return (
     <Page>
       <PageBody>
         <DataTable<PersonRow>
+          stickyFirstColumn
           title={t('customers.people.list.title')}
           refreshButton={{
             label: t('customers.people.list.actions.refresh'),
@@ -607,6 +768,7 @@ export default function CustomersPeoplePage() {
             </Button>
           )}
           columns={columns}
+          columnChooser={{ auto: true }}
           data={rows}
           exporter={exportConfig}
           searchValue={search}
@@ -619,6 +781,17 @@ export default function CustomersPeoplePage() {
           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
+          sorting={sorting}
+          onSortingChange={setSorting}
+          bulkActions={[
+            {
+              id: 'delete',
+              label: t('customers.people.list.bulkDelete.action', 'Delete selected'),
+              destructive: true,
+              onExecute: handleBulkDelete,
+            },
+          ]}
           rowActions={(row) => (
             <RowActions
               items={[
@@ -641,7 +814,15 @@ export default function CustomersPeoplePage() {
               ]}
             />
           )}
-          pagination={{ page, pageSize, total, totalPages, onPageChange: setPage, cacheStatus }}
+          advancedFilter={{
+              auto: true,
+              value: advancedFilterState,
+              onChange: setAdvancedFilterState,
+              onApply: () => { setPage(1) },
+              onClear: () => { setAdvancedFilterState({ logic: 'and', conditions: [] }); setPage(1) },
+            }}
+          virtualized
+          pagination={{ page, pageSize, total, totalPages, onPageChange: setPage, cacheStatus, pageSizeOptions: [10, 25, 50, 100], onPageSizeChange: handlePageSizeChange }}
           isLoading={isLoading}
         />
       </PageBody>

package/src/modules/customers/commands/interactions.ts

@@ -28,6 +28,7 @@ import {
   ensureTenantScope,
   requireCustomerEntity,
   extractUndoPayload,
+  emitQueryIndexUpsertEvents,
   requireDealInScope,
   resolveParentResourceKind,
 } from './shared'
@@ -233,6 +234,12 @@ async function emitNextInteractionUpdatedEvent(
   projection: InteractionProjectionMutation,
   identifiers: InteractionIdentifiers,
 ): Promise<void> {
+  await emitQueryIndexUpsertEvents(ctx, [{
+    entityType: 'customers:customer_entity',
+    recordId: projection.entityId,
+    organizationId: identifiers.organizationId,
+    tenantId: identifiers.tenantId,
+  }])
   await emitLifecycleEvent(ctx, 'customers.next_interaction.updated', {
     id: projection.entityId,
     entityId: projection.entityId,