@aglyn/plugins-crm 1.0.0-beta.198 → 1.0.0-beta.200

package/src/lib/components/contacts-section.js

@@ -18,12 +18,16 @@ import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as Aglyn from "@aglyn/aglyn";
 import { CONTACT_LIFECYCLE_STAGE_LABELS, CONTACT_LIFECYCLE_STAGES, CONTACT_SOURCE_LABELS, CRM_CONTACT_VIEW_FIELDS, crmContactCustomColumn, crmViewFiltersFromSegment, crmViewSegmentFilters, newResourceScopeFields, ORG_SCOPE_TOKEN, pluginDocsHelp } from "@aglyn/aglyn";
-import { hiddenFilterVisibility, matchListFilter } from "@aglyn/shared-ui-jsx/const/list-filter";
+import { hiddenFilterVisibility } from "@aglyn/shared-ui-jsx/const/list-filter";
 import { ListTable } from "@aglyn/shared-ui-jsx/components/list-table.component";
-import { CONTACT_LIST_FILTER_FIELDS, CONTACT_LIST_FILTER_HEADERS, contactCustomFilterFields, contactCustomFilterHeaders } from "../constants/contact-filters.js";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import ListQueryNotices from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
+import { CONTACT_LIST_DECLARATION, CONTACT_LIST_FILTER_FIELDS, CONTACT_LIST_FILTER_HEADERS, CONTACT_PREFIX_SEARCH, contactClauseImpliesScope, contactSoloClause, contactCustomFilterFields, contactCustomFilterHeaders, contactQueryClause } from "../constants/contact-filters.js";
+import { crmAskClauses, crmQueryRefusals } from "../model/crm-list-query.js";
+import { useCrmFoldsScope, useCrmListQuery } from "../hooks/use-crm-list-query.js";
 import { contactPrimaryGroup, contactRecordFromDoc } from "../model/contact-record.js";
 import { useCrmOrgMount } from "../hooks/use-crm-org-mount.js";
-import { crmVisibleToClause, useCrmScope } from "../hooks/use-crm-scope.js";
+import { useCrmScope } from "../hooks/use-crm-scope.js";
 import { contactsListSeed } from "../model/contacts-list-seed.js";
 import { crmRoutes } from "../model/crm-routes.js";
 import { contactsCsv, downloadTextFile } from "../model/contacts-csv.js";
@@ -33,7 +37,7 @@ import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.com
 import ContactsBulkBar from "./contacts-bulk-bar.js";
 import { ContactImportButton } from "./contact-import-drawer.js";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
-import { listFilterPlan, useFirestore, useFirestoreCollection, useFirestoreDoc, useUser } from "@aglyn/tenant-feature-instance";
+import { useFirestore, useFirestoreCollection, useFirestoreDoc, useUser } from "@aglyn/tenant-feature-instance";
 import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField, Typography } from "@mui/material";
 import { addDoc, collection, deleteDoc, doc, limit, orderBy, query } from "firebase/firestore";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -50,7 +54,7 @@ import { useCrmViewGrid } from "../hooks/use-crm-view-grid.js";
 import { CRM_LIST_SLOTS, CrmColumnOrderProvider } from "./crm-column-menu.js";
 import { useCompanyOptions } from "./company-picker.js";
 import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
-import { listFilterGridColumns, listRowMatchesSearch } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
+import { listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
 import { useListGridFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-grid-filter";
 import CrmViewsControl from "./crm-views-control.js";
 import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-suite-lock.js";
@@ -60,13 +64,6 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
  * The map lives beside the `ContactSource` union so the dynamic-list rule
  * editor and this filter cannot disagree about what `order` is called.
  */ const SOURCE_LABELS = CONTACT_SOURCE_LABELS;
-/** What the grid's quick search reads on a contact: who they are, and their tags. */ const CONTACT_SEARCH_FIELDS = [
-    'name',
-    'email',
-    'phone',
-    'company',
-    'tags'
-];
 /**
  * What the list keeps out of sight until a view says otherwise: the
  * filter-only columns, which never show, and the optional columns
@@ -108,8 +105,7 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
  * body is the v1 page unchanged, and it takes the shell's full prop bag so
  * nothing the v1 page read has to be threaded through the hub by name.
  */ export function ContactsPeopleSection(props) {
-    var _ref, _ref1, _ref2, _records_contactsCount, _ref3, _ref4, _ref5, _ref6, _ref7, _filterHeaders_windowClauses__field, _filterHeaders_plan_served_field;
-    var _plan_served;
+    var _ref, _ref1, _ref2, _ref3, _records_contactsCount, _ref4, _ref5, _ref6, _ref7;
     const { hostId, org, releaseFlag, basePath } = props;
     /*
    * A row is a LINK now (AGL-2596): opening a person navigates to their own
@@ -211,7 +207,9 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
             ...seed.filter ? [
                 seed.filter
             ] : [],
-            ...seed.source ? [
+            // A form's captures all came in through a form: the source beside it
+            // would ask a second array clause of the one query (AGL-3321).
+            ...seed.source && !seed.formId ? [
                 {
                     field: CRM_CONTACT_VIEW_FIELDS.source,
                     op: 'equals',
@@ -247,97 +245,47 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
         customFields.active
     ]);
     /*
-   * ONE clause on the query, the rest over the window.
+   * EVERY CLAUSE AND THE SEARCH ON ONE QUERY (AGL-3321).
    *
-   * Firestore takes one array clause per query and composes the rest only
-   * through indexes nobody built for every pair of columns, so the first
-   * clause the translator can serve is the one that reaches every contact
-   * and every other narrows the thousand the query returned. The caption
-   * under the bar says which is which; the chips mark the served one.
-   */ /*
-   * Under a site the listener already carries the `visibleTo`
-   * `array-contains-any`, so the translator serves no second array clause
-   * beside it and keeps an `in` inside the disjunction budget the two share
-   * (AGL-3321). `formIds` is exempt: its listener drops the scope clause.
-   */ const plan = useMemo(()=>listFilterPlan(filterFields, views.state.filters, visibleToTokens ? {
-            arrayScope: {
-                values: visibleToTokens.length,
-                exempt: [
-                    'formIds'
-                ]
-            }
-        } : {}), [
-        filterFields,
+   * Each stored clause is asked through the field its writers keep
+   * (`contactQueryClause`): a holder's owner, stage, source, company, tags,
+   * custom value or "has bought" as that holder's facet key, the verdict as
+   * `emailStatus`, the rest as stored. The query pages the list newest
+   * change first and carries all of it; what one query cannot hold is
+   * refused by name above the list, and nothing is matched over the rows a
+   * page happened to load. Under a site the scope clause is the query's one
+   * array clause — the search folds into it, and a facet or form clause
+   * stands in its place, for a reader whose access is not limited to
+   * particular sites.
+   */ const foldsScope = useCrmFoldsScope(orgId, visibleToTokens);
+    const groupId = (_ref3 = consentGroup == null ? void 0 : consentGroup.groupId) != null ? _ref3 : null;
+    const asked = useMemo(()=>crmAskClauses(views.state.filters, (clause)=>contactQueryClause(clause, {
+                groupId,
+                foldsScope
+            })), [
         views.state.filters,
-        visibleToTokens
+        groupId,
+        foldsScope
     ]);
-    const filter = plan.served;
-    /**
-   * The one filter that cannot carry the scope clause.
-   *
-   * `formIds` is an `array-contains` on the mirror, and Firestore takes one
-   * array clause per query — so this listener drops its `visibleTo`
-   * predicate for it, exactly as the company contacts card does for
-   * `companyIds`, and the rules then admit the read to an org-wide member
-   * only. A scoped member's listener errors instead of listing, and the
-   * alert below says so rather than showing an empty form.
-   */ const byForm = (filter == null ? void 0 : filter.field) === 'formIds';
-    const { data: contactDocs, status: contactsStatus, /**
-     * The rows the profile drawer is seeded from are unconfirmed by the
-     * server (AGL-1358). This payload is narrower than most sites in this
-     * issue — `email`, `sources` and `interactions` are not in it — but the
-     * two fields that are, `tags` and `notes`, are BOTH written on every
-     * save and both come off the seed. Edit the notes against a cached read
-     * and the tags go back with them, and tags are what
-     * `contactMatchesSegment` runs on: a saved segment is a campaign
-     * audience, so a rollback here silently changes who gets emailed.
-     */ fromCache: contactsFromCache } = useFirestoreCollection(()=>{
-        if (!dataScope) return null;
-        /*
-       * ORDERED, and filtered by the QUERY (AGL-2501, AGL-2292).
-       *
-       * Two bugs shared this one line. `limit(1000)` with no `orderBy` returns
-       * documents in ID order — contacts are created with `.add()` and
-       * `createResourceUid()`, so that is a pseudo-random SAMPLE of a thousand,
-       * and the client `.sort()` below made it look reliably newest-first. An
-       * org with forty thousand contacts saw a thousand arbitrary ones,
-       * convincingly sorted.
-       *
-       * The search then ran over that sample, so a name on the wrong side of
-       * the cap answered "no contacts match" — the answer a search must never
-       * give wrongly, on the list a merchant uses to find one person.
-       *
-       * The cap STAYS: nobody needs forty thousand rows streamed into a table,
-       * and the head-count has been a server aggregate since AGL-1706. What
-       * changes is that the thousand are now the newest thousand, and that a
-       * filter reaches the whole collection before the cap applies.
-       */ const constraints = plan.constraints;
-        /*
-       * SCOPED, and this is the leak it closes.
-       *
-       * The listener had no `where()` at all: `hostId` reached it only to
-       * resolve which ORG owns the data, so every site in the account listed
-       * every contact in the account. An agency's client opened Contacts and
-       * read the other clients' customers.
-       *
-       * `array-contains-any` over the group's tokens is the same predicate
-       * the rules evaluate with `hasAny`, so a filtered query is provable
-       * per-document and an UNFILTERED one is now permission-denied rather
-       * than quietly returning everything.
-       */ return query(collection(firestore, dataScope[0], dataScope[1], 'contacts'), // Dropped for the form mirror alone — see `byForm` — and absent at
-        // the organization level, where the tokens are `null` (AGL-2630).
-        ...byForm ? [] : crmVisibleToClause(visibleToTokens), ...constraints != null ? constraints : [
-            orderBy('updatedAt', 'desc')
-        ], limit(1000));
-    }, [
-        firestore,
-        dataScope,
-        plan.constraints,
-        byForm,
-        visibleToTokens
-    ], {
-        idField: '$id'
+    const impliesScope = useMemo(()=>contactClauseImpliesScope(groupId), [
+        groupId
+    ]);
+    // The quick search is the grid's box, answered by the same query.
+    const [searchWords, setSearchWords] = useState([]);
+    const paged = useCrmListQuery({
+        scope: dataScope,
+        collection: 'contacts',
+        visibleTo: visibleToTokens,
+        foldsScope,
+        declaration: CONTACT_LIST_DECLARATION,
+        clauses: asked.clauses,
+        search: searchWords,
+        impliesScope,
+        soloClause: contactSoloClause,
+        prefixSearch: CONTACT_PREFIX_SEARCH
     });
+    const contactDocs = paged.rows;
+    const contactsStatus = paged.status;
     /*
    * OPENED FOR ONE ADDRESS: move straight on to the record (AGL-2612).
    *
@@ -353,15 +301,17 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
     useEffect(()=>{
         if (openedByEmail.current || !seed.openEmail) return;
         if (contactsStatus !== 'success') return;
-        if ((filter == null ? void 0 : filter.field) !== 'email' || filter.value !== seed.openEmail) return;
-        const only = (contactDocs != null ? contactDocs : []).length === 1 ? contactDocs == null ? void 0 : contactDocs[0] : null;
+        const served = paged.plan.served.some((clause)=>clause.field === 'email' && clause.op === 'equals' && clause.value === seed.openEmail);
+        if (!served) return;
+        const only = contactDocs.length === 1 && !paged.hasMore ? contactDocs[0] : null;
         if (!only) return;
         openedByEmail.current = true;
         router.replace(routes.contact(String(only.$id)));
     }, [
         seed.openEmail,
         contactsStatus,
-        filter,
+        paged.plan,
+        paged.hasMore,
         contactDocs,
         router,
         routes
@@ -377,7 +327,7 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
    * The canonical `name` is the fallback and the shared identity; a holder's
    * own override wins, so one business renaming a person cannot change what
    * an unrelated business sees.
-   */ const contacts = useMemo(()=>(contactDocs != null ? contactDocs : []).map((row)=>contactRecordFromDoc(row, consentGroup != null ? consentGroup : contactPrimaryGroup(row, org))), [
+   */ const contacts = useMemo(()=>contactDocs.map((row)=>contactRecordFromDoc(row, consentGroup != null ? consentGroup : contactPrimaryGroup(row, org))), [
         contactDocs,
         consentGroup,
         org
@@ -399,10 +349,10 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
     /**
    * The HEAD-COUNT, read as a server-side aggregate (AGL-1706).
    *
-   * The listener above is `limit(1000)` and always will be — nobody needs
-   * 40,000 rows streamed into a table. What it must not do is answer "how
-   * many contacts does this org have", and it did: `contacts.length`
-   * saturated at 1,000, which is *exactly* the smallest paid included band
+   * The list above reads a page at a time (AGL-3321) — nobody needs 40,000
+   * rows streamed into a table. What it must not do is answer "how many
+   * contacts does this org have", and it did when it was a `limit(1000)`
+   * window: `contacts.length` saturated at 1,000, which is *exactly* the smallest paid included band
    * (`starter`). So `overageContacts = max(0, used − included)` was 0 on
    * every stock plan and the alert below could not render at all.
    *
@@ -450,7 +400,7 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
         firestore,
         hostId
     ]);
-    const droppedTotal = Number((_ref3 = droppedCounter == null ? void 0 : droppedCounter['total']) != null ? _ref3 : 0);
+    const droppedTotal = Number((_ref4 = droppedCounter == null ? void 0 : droppedCounter['total']) != null ? _ref4 : 0);
     /*==========================================
    * REFUNDS THAT REACHED NO CONTACT (AGL-2329).
    *
@@ -470,10 +420,12 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
         firestore,
         hostId
     ]);
-    const unmatchedRefundTotal = Number((_ref4 = unmatchedRefundCounter == null ? void 0 : unmatchedRefundCounter['total']) != null ? _ref4 : 0);
-    const unmatchedRefundReason = String((_ref5 = unmatchedRefundCounter == null ? void 0 : unmatchedRefundCounter['lastReason']) != null ? _ref5 : '');
+    const unmatchedRefundTotal = Number((_ref5 = unmatchedRefundCounter == null ? void 0 : unmatchedRefundCounter['total']) != null ? _ref5 : 0);
+    const unmatchedRefundReason = String((_ref6 = unmatchedRefundCounter == null ? void 0 : unmatchedRefundCounter['lastReason']) != null ? _ref6 : '');
     // Saved segments (AGL-199): reusable audience filters.
-    const { data: segmentDocs } = useFirestoreCollection(()=>dataScope ? query(collection(firestore, dataScope[0], dataScope[1], 'contactSegments'), limit(50)) : null, [
+    const { data: segmentDocs } = useFirestoreCollection(()=>dataScope ? query(collection(firestore, dataScope[0], dataScope[1], 'contactSegments'), // The first fifty by name — the menu's own order — rather than
+        // whichever fifty the ids happen to sort first.
+        orderBy('name'), limit(50)) : null, [
         firestore,
         dataScope
     ], {
@@ -510,32 +462,7 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
         dataScope,
         firestore
     ]);
-    /*
-   * THE WINDOW CLAUSES narrow in the browser, and the caption says so.
-   *
-   * An owner, a stage, a source, a company and a custom value all live on
-   * the viewing group's FACET, and a facet path is per group, so none of
-   * them is a field the query grammar can reach without an index per
-   * group; a second tag clause, or "any of these tags", is an array clause
-   * the scope predicate already occupies. So every clause the plan could
-   * not serve refines the ordered window rather than the collection —
-   * through the same matcher the grammar declares, so a chip and the rows
-   * under it agree. Ordinary orgs load their whole list into the window
-   * anyway; the caption below says what these narrow for the ones that do
-   * not.
-   */ const uid = (_ref6 = user == null ? void 0 : user.uid) != null ? _ref6 : '';
-    const windowClauses = plan.window;
-    // The quick search is the grid's box, answered here over the same window.
-    const [searchWords, setSearchWords] = useState([]);
-    const searchKey = searchWords.join(' ');
-    const visible = useMemo(()=>windowClauses.length || searchWords.length ? contacts.filter((contact)=>windowClauses.every((clause)=>matchListFilter(contact, filterFields, clause)) && listRowMatchesSearch(contact, CONTACT_SEARCH_FIELDS, searchWords)) : contacts, // `searchKey` stands for the words, which are a new array each render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        contacts,
-        windowClauses,
-        filterFields,
-        searchKey
-    ]);
+    const uid = (_ref7 = user == null ? void 0 : user.uid) != null ? _ref7 : '';
     /*
    * The choices the filter bar picks from. The companies are read only once
    * the reader has reached for a filter or is looking at a view that names
@@ -595,6 +522,18 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
         companies.options,
         customFields.active
     ]);
+    // What the query could not hold, named by the clause the reader set.
+    const refused = useMemo(()=>crmQueryRefusals(paged.plan, asked, {
+            fields: filterFields,
+            headers: filterHeaders,
+            options: filterOptions
+        }), [
+        paged.plan,
+        asked,
+        filterFields,
+        filterHeaders,
+        filterOptions
+    ]);
     /* One row grammar, the console's (AGL-2501) — the same table everywhere. */ const contactColumns = useMemo(()=>[
             ...contactListColumns({
                 memberName: members.memberName,
@@ -688,6 +627,12 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
         enqueueSnackbar
     ]);
     /** The rows ticked for a bulk action (AGL-2603); the bar above the table acts on them. */ const [selectedIds, setSelectedIds] = useState([]);
+    // A filter, a search or a page is a different set of rows; a selection
+    // made on the last one would be a count over rows no longer on screen.
+    useEffect(()=>setSelectedIds([]), [
+        paged.plan,
+        paged.page
+    ]);
     /*==========================================
    * ADDING ONE PERSON BY HAND (AGL-2596).
    *
@@ -778,9 +723,9 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
         customFields.active
     ]);
     const handleExport = useCallback(()=>{
-        downloadTextFile('contacts.csv', 'text/csv', contactsCsv(visible, csvOptions));
+        downloadTextFile('contacts.csv', 'text/csv', contactsCsv(contacts, csvOptions));
     }, [
-        visible,
+        contacts,
         csvOptions
     ]);
     return /*#__PURE__*/ _jsxs(_Fragment, {
@@ -821,7 +766,7 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                                 /*#__PURE__*/ _jsx(Button, {
                                     size: "small",
                                     onClick: handleExport,
-                                    disabled: !visible.length,
+                                    disabled: !contacts.length,
                                     children: 'Export CSV'
                                 }),
                                 suiteIncluded ? /*#__PURE__*/ _jsx(Button, {
@@ -860,7 +805,7 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                                     clauses: views.state.filters,
                                     onChange: views.setFilters,
                                     options: filterOptions,
-                                    servedField: (_ref7 = (_plan_served = plan.served) == null ? void 0 : _plan_served.field) != null ? _ref7 : null
+                                    marksServed: false
                                 })
                             ]
                         }),
@@ -898,10 +843,11 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                             severity: "warning",
                             children: `${unmatchedRefundTotal.toLocaleString()} refund${unmatchedRefundTotal === 1 ? '' : 's'} could not be recorded against a contact${UNMATCHED_REFUND_REASON[unmatchedRefundReason] ? ` — most recently because ${UNMATCHED_REFUND_REASON[unmatchedRefundReason]}` : ''}. The money moved; the customer's timeline does not show it.`
                         }) : null,
-                        byForm && contactsStatus === 'error' ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "info",
-                            children: 'The contacts this form captured could not be listed. Your ' + 'access is limited to specific sites, and a form filter ' + 'cannot be narrowed to them — an organization administrator ' + 'can see it.'
-                        }) : contacts.length === 0 && !views.state.filters.length ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
+                        /*#__PURE__*/ _jsx(ListQueryNotices, {
+                            refused: refused,
+                            notices: paged.plan.notices
+                        }),
+                        contacts.length === 0 && !views.state.filters.length && !searchWords.some((word)=>word.trim()) ? /*#__PURE__*/ _jsx(EmptyStateComponent, {
                             label: contactsStatus === 'loading' ? 'Loading contacts…' : 'No contacts yet',
                             description: contactsStatus === 'loading' ? undefined : suiteIncluded ? 'Form submissions, member sign-ups, orders and bookings become contacts on their own; add one by hand or bring a list in from a CSV.' : 'Form submissions, member sign-ups, orders and bookings become contacts on their own.',
                             action: contactsStatus === 'loading' ? undefined : !suiteIncluded ? /*#__PURE__*/ _jsxs(Stack, {
@@ -940,17 +886,12 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                             })
                         }) : /*#__PURE__*/ _jsxs(_Fragment, {
                             children: [
-                                windowClauses.length ? /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
-                                    color: "text.secondary",
-                                    children: (windowClauses.length === 1 ? `${(_filterHeaders_windowClauses__field = filterHeaders[windowClauses[0].field]) != null ? _filterHeaders_windowClauses__field : windowClauses[0].field} narrows ` : `${windowClauses.length} of the filters narrow `) + 'the loaded window — the newest 1,000 contacts' + (plan.served ? ` matching ${(_filterHeaders_plan_served_field = filterHeaders[plan.served.field]) != null ? _filterHeaders_plan_served_field : plan.served.field}, which reached every contact.` : '.') + ' Sorting reorders that window.'
-                                }) : null,
                                 /*#__PURE__*/ _jsx(ContactsBulkBar, {
                                     hostId: hostId,
                                     org: org,
                                     scope: dataScope,
                                     consentGroup: consentGroup,
-                                    rows: visible,
+                                    rows: contacts,
                                     selected: selectedIds,
                                     onSelectedChange: setSelectedIds,
                                     csv: csvOptions,
@@ -959,7 +900,7 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                                 /*#__PURE__*/ _jsx(CrmColumnOrderProvider, {
                                     value: grid.columnOrder,
                                     children: /*#__PURE__*/ _jsx(ListTable, {
-                                        rows: visible,
+                                        rows: contacts,
                                         columns: grid.columns,
                                         slots: CRM_LIST_SLOTS,
                                         selectable: {
@@ -969,12 +910,12 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                                         onOpen: (id)=>router.push(routes.contact(id)),
                                         /*
                    * The grid's Filters panel and quick search edit the view's
-                   * clauses; the list answers them, onto the query where it
-                   * can and over the loaded window where it cannot, so the
-                   * grid must not filter again itself (AGL-3313). Opening the
-                   * panel is what reads the roster and the companies its
-                   * pickers name. Columns and sort are the view's, controlled
-                   * so a saved arrangement is what the grid shows.
+                   * clauses; the list's query answers them (AGL-3321), so the
+                   * grid must not filter again itself. Opening the panel is
+                   * what reads the roster and the companies its pickers name.
+                   * Columns are the view's, controlled so a saved arrangement
+                   * is what the grid shows; the query orders the rows —
+                   * newest change first — so the grid sorts nothing itself.
                    */ filterMode: "server",
                                         filterModel: gridFilter.filterModel,
                                         onFilterModelChange: gridFilter.onFilterModelChange,
@@ -985,9 +926,20 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                                         noRowsLabel: contactsStatus === 'loading' ? 'Loading…' : 'No contacts match these filters',
                                         columnVisibilityModel: grid.columnVisibilityModel,
                                         onColumnVisibilityModelChange: grid.onColumnVisibilityModelChange,
-                                        sortModel: grid.sortModel,
-                                        onSortModelChange: grid.onSortModelChange
+                                        sortingMode: "server",
+                                        disableColumnSorting: true,
+                                        loading: contactsStatus === 'loading',
+                                        // Paged by the footer below, so the grid must not also slice.
+                                        hideFooter: true
                                     })
+                                }),
+                                /*#__PURE__*/ _jsx(ListPagination, {
+                                    page: paged.page,
+                                    pageSize: paged.pageSize,
+                                    rowCount: contacts.length,
+                                    hasMore: paged.hasMore,
+                                    onPageChange: paged.setPage,
+                                    onPageSizeChange: paged.setPageSize
                                 })
                             ]
                         }),