@aglyn/plugins-crm 1.0.0-beta.199 → 1.0.0-beta.201

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";
@@ -31,9 +35,10 @@ import { useCrmRecordsQuota } from "../hooks/use-crm-records-quota.js";
 import { CardDisplay } from "@aglyn/shared-ui-jsx";
 import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
 import ContactsBulkBar from "./contacts-bulk-bar.js";
+import { CrmListActions } from "./crm-list-toolbar.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 +55,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 +65,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 +106,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 +208,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 +246,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 +302,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 +328,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 +350,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 +401,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 +421,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 +463,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 +523,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 +628,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,150 +724,40 @@ 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, {
         children: [
-            /*#__PURE__*/ _jsx(CardDisplay, {
-                header: 'Contacts',
-                help: pluginDocsHelp('contacts', {
-                    anchor: '#the-contacts-page'
-                }),
-                contentGutterX: true,
-                contentGutterY: true,
-                children: /*#__PURE__*/ _jsxs(Stack, {
-                    spacing: 2,
-                    children: [
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                alignItems: 'center',
-                                flexWrap: 'wrap',
-                                rowGap: 1
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "body2",
-                                    color: "text.secondary",
-                                    sx: {
-                                        flex: 1
-                                    },
-                                    children: `${contactCount.toLocaleString()} contacts · ${Number.isFinite(quota.included) ? `${quota.used.toLocaleString()} of ${quota.included.toLocaleString()} CRM records` : `${quota.used.toLocaleString()} CRM records`}`
-                                }),
-                                suiteIncluded ? /*#__PURE__*/ _jsx(ContactImportButton, {
-                                    hostId: hostId,
-                                    org: org
-                                }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
-                                    children: 'Import CSV'
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    onClick: handleExport,
-                                    disabled: !visible.length,
-                                    children: 'Export CSV'
-                                }),
-                                suiteIncluded ? /*#__PURE__*/ _jsx(Button, {
-                                    size: "small",
-                                    variant: "contained",
-                                    color: "primary",
-                                    disabled: !dataScope,
-                                    onClick: ()=>{
-                                        setCreateError(null);
-                                        setCreateOpen(true);
-                                    },
-                                    children: 'New contact'
-                                }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
-                                    variant: "contained",
-                                    color: "primary",
-                                    children: 'New contact'
-                                })
-                            ]
-                        }),
-                        suiteIncluded ? null : /*#__PURE__*/ _jsx(CrmSuiteNotice, {
-                            children: 'Contacts arrive here on their own from your forms, sign-ups, ' + 'orders and bookings. Adding one by hand, importing a CSV, ' + "saved views, and a contact's owner, stage and company are " + 'part of the CRM.'
-                        }),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 1,
-                            children: [
-                                /*#__PURE__*/ _jsx(CrmViewsControl, {
-                                    controller: views,
-                                    allLabel: "All contacts",
-                                    suiteLocked: !suiteIncluded,
-                                    presets: segmentPresets,
-                                    onSaveAsSegment: segmentFilters && dataScope ? ()=>setSegmentName('') : null
-                                }),
-                                /*#__PURE__*/ _jsx(ListFilterChips, {
-                                    fields: filterFields,
-                                    headers: filterHeaders,
-                                    clauses: views.state.filters,
-                                    onChange: views.setFilters,
-                                    options: filterOptions,
-                                    servedField: (_ref7 = (_plan_served = plan.served) == null ? void 0 : _plan_served.field) != null ? _ref7 : null
-                                })
-                            ]
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 3,
+                children: [
+                    /*#__PURE__*/ _jsx(CardDisplay, {
+                        header: 'Contacts',
+                        help: pluginDocsHelp('contacts', {
+                            anchor: '#the-contacts-page'
                         }),
-                        !quota.allowed ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "warning",
-                            children: 'CRM records limit reached — new visitors are no longer ' + 'captured' + (droppedTotal > 0 ? ` (${droppedTotal.toLocaleString()} missed so far)` : '') + '. Upgrade in Billing to keep collecting.'
-                        }) : quota.overageRecords > 0 && quota.overageRateUsd != null && // No claim about money until the verdict that decides it has
-                        // settled (AGL-1662). Before Remote Config activation the flag
-                        // reads its registry default, which is no org's verdict, so an
-                        // ungated alert could assert the wrong wording for one paint.
-                        releaseFlagsReady ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "info",
-                            children: contactsBilled ? // basis (AGL-2399): the count here is LIVE, the invoice
-                            // charges the last reading before the month closes, so the
-                            // dollar figure is a projection until the month ends. Staff
-                            // and customer must not read different sentences about the
-                            // same org's money — that applies to WHEN it is measured as
-                            // much as to how much.
-                            `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + `metered at $${quota.overageRateUsd}/1,000 per month ` + `(≈$${quota.overageMonthlyUsd.toFixed(2)} if your list ends ` + 'the month at this size). ' + 'Upgrade in Billing for a larger included audience.' : // itself the wording `1a2aed5cb` published to
-                            // `billing-and-plans/overview.md` (AGL-1601/1603). Staff and
-                            // customer must not read different sentences about the same
-                            // org's money.
-                            //
-                            // THE COUNT STAYS, THE TOTAL GOES: the head-count is real —
-                            // ingestion captured those records — and is not a claim
-                            // about money. The upgrade nudge goes with the total, since
-                            // it prompts a purchase premised on a charge that is not
-                            // happening.
-                            `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + 'not billed while the CRM is unavailable. ' + `The $${quota.overageRateUsd}/1,000 rate applies once ` + 'Contacts opens.'
-                        }) : droppedTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
-                            severity: "info",
-                            children: `${droppedTotal.toLocaleString()} earlier visitor${droppedTotal === 1 ? ' was' : 's were'} not captured while your CRM records band was full.`
-                        }) : null,
-                        unmatchedRefundTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
-                            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, {
-                            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, {
-                                direction: "row",
-                                spacing: 1,
+                        contentGutterX: true,
+                        contentGutterY: true,
+                        HeaderProps: {
+                            // The record actions, top right and never clipped (AGL-3311).
+                            action: /*#__PURE__*/ _jsxs(CrmListActions, {
                                 children: [
-                                    /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
-                                        variant: "contained",
-                                        color: "primary",
-                                        children: 'New contact'
-                                    }),
-                                    /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                    suiteIncluded ? /*#__PURE__*/ _jsx(ContactImportButton, {
+                                        hostId: hostId,
+                                        org: org
+                                    }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
                                         children: 'Import CSV'
-                                    })
-                                ]
-                            }) : /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                children: [
+                                    }),
                                     /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        onClick: handleExport,
+                                        disabled: !contacts.length,
+                                        children: 'Export CSV'
+                                    }),
+                                    suiteIncluded ? /*#__PURE__*/ _jsx(Button, {
                                         size: "small",
                                         variant: "contained",
                                         color: "primary",
@@ -931,73 +767,188 @@ import { CrmSuiteLockedButton, CrmSuiteNotice, crmSuiteIncluded } from "./crm-su
                                             setCreateOpen(true);
                                         },
                                         children: 'New contact'
-                                    }),
-                                    /*#__PURE__*/ _jsx(ContactImportButton, {
-                                        hostId: hostId,
-                                        org: org
+                                    }) : /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                        variant: "contained",
+                                        color: "primary",
+                                        children: 'New contact'
                                     })
                                 ]
                             })
-                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                        },
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
                             children: [
-                                windowClauses.length ? /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
                                     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.'
+                                    children: `${contactCount.toLocaleString()} contacts · ${Number.isFinite(quota.included) ? `${quota.used.toLocaleString()} of ${quota.included.toLocaleString()} CRM records` : `${quota.used.toLocaleString()} CRM records`}`
+                                }),
+                                suiteIncluded ? null : /*#__PURE__*/ _jsx(CrmSuiteNotice, {
+                                    children: 'Contacts arrive here on their own from your forms, sign-ups, ' + 'orders and bookings. Adding one by hand, importing a CSV, ' + "saved views, and a contact's owner, stage and company are " + 'part of the CRM.'
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CrmViewsControl, {
+                                            controller: views,
+                                            allLabel: "All contacts",
+                                            suiteLocked: !suiteIncluded,
+                                            presets: segmentPresets,
+                                            onSaveAsSegment: segmentFilters && dataScope ? ()=>setSegmentName('') : null
+                                        }),
+                                        /*#__PURE__*/ _jsx(ListFilterChips, {
+                                            fields: filterFields,
+                                            headers: filterHeaders,
+                                            clauses: views.state.filters,
+                                            onChange: views.setFilters,
+                                            options: filterOptions,
+                                            marksServed: false
+                                        })
+                                    ]
+                                }),
+                                !quota.allowed ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "warning",
+                                    children: 'CRM records limit reached — new visitors are no longer ' + 'captured' + (droppedTotal > 0 ? ` (${droppedTotal.toLocaleString()} missed so far)` : '') + '. Upgrade in Billing to keep collecting.'
+                                }) : quota.overageRecords > 0 && quota.overageRateUsd != null && // No claim about money until the verdict that decides it has
+                                // settled (AGL-1662). Before Remote Config activation the flag
+                                // reads its registry default, which is no org's verdict, so an
+                                // ungated alert could assert the wrong wording for one paint.
+                                releaseFlagsReady ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "info",
+                                    children: contactsBilled ? // basis (AGL-2399): the count here is LIVE, the invoice
+                                    // charges the last reading before the month closes, so the
+                                    // dollar figure is a projection until the month ends. Staff
+                                    // and customer must not read different sentences about the
+                                    // same org's money — that applies to WHEN it is measured as
+                                    // much as to how much.
+                                    `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + `metered at $${quota.overageRateUsd}/1,000 per month ` + `(≈$${quota.overageMonthlyUsd.toFixed(2)} if your list ends ` + 'the month at this size). ' + 'Upgrade in Billing for a larger included audience.' : // itself the wording `1a2aed5cb` published to
+                                    // `billing-and-plans/overview.md` (AGL-1601/1603). Staff and
+                                    // customer must not read different sentences about the same
+                                    // org's money.
+                                    //
+                                    // THE COUNT STAYS, THE TOTAL GOES: the head-count is real —
+                                    // ingestion captured those records — and is not a claim
+                                    // about money. The upgrade nudge goes with the total, since
+                                    // it prompts a purchase premised on a charge that is not
+                                    // happening.
+                                    `${quota.overageRecords.toLocaleString()} CRM records over ` + `your plan's included ${quota.included.toLocaleString()} — ` + 'not billed while the CRM is unavailable. ' + `The $${quota.overageRateUsd}/1,000 rate applies once ` + 'Contacts opens.'
+                                }) : droppedTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "info",
+                                    children: `${droppedTotal.toLocaleString()} earlier visitor${droppedTotal === 1 ? ' was' : 's were'} not captured while your CRM records band was full.`
+                                }) : null,
+                                unmatchedRefundTotal > 0 ? /*#__PURE__*/ _jsx(Alert, {
+                                    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,
-                                /*#__PURE__*/ _jsx(ContactsBulkBar, {
-                                    hostId: hostId,
-                                    org: org,
-                                    scope: dataScope,
-                                    consentGroup: consentGroup,
-                                    rows: visible,
-                                    selected: selectedIds,
-                                    onSelectedChange: setSelectedIds,
-                                    csv: csvOptions,
-                                    suiteLocked: !suiteIncluded
+                                /*#__PURE__*/ _jsx(ListQueryNotices, {
+                                    refused: refused,
+                                    notices: paged.plan.notices
                                 }),
-                                /*#__PURE__*/ _jsx(CrmColumnOrderProvider, {
-                                    value: grid.columnOrder,
-                                    children: /*#__PURE__*/ _jsx(ListTable, {
-                                        rows: visible,
-                                        columns: grid.columns,
-                                        slots: CRM_LIST_SLOTS,
-                                        selectable: {
-                                            selected: selectedIds,
-                                            onChange: setSelectedIds
-                                        },
-                                        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.
-                   */ filterMode: "server",
-                                        filterModel: gridFilter.filterModel,
-                                        onFilterModelChange: gridFilter.onFilterModelChange,
-                                        quickFilter: true,
-                                        onPreferencePanelOpen: ()=>setFilterOpened(true),
-                                        // A filter that matched nothing is said inside the grid,
-                                        // so the toolbar that set it stays to change it.
-                                        noRowsLabel: contactsStatus === 'loading' ? 'Loading…' : 'No contacts match these filters',
-                                        columnVisibilityModel: grid.columnVisibilityModel,
-                                        onColumnVisibilityModelChange: grid.onColumnVisibilityModelChange,
-                                        sortModel: grid.sortModel,
-                                        onSortModelChange: grid.onSortModelChange
+                                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, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                                variant: "contained",
+                                                color: "primary",
+                                                children: 'New contact'
+                                            }),
+                                            /*#__PURE__*/ _jsx(CrmSuiteLockedButton, {
+                                                children: 'Import CSV'
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                size: "small",
+                                                variant: "contained",
+                                                color: "primary",
+                                                disabled: !dataScope,
+                                                onClick: ()=>{
+                                                    setCreateError(null);
+                                                    setCreateOpen(true);
+                                                },
+                                                children: 'New contact'
+                                            }),
+                                            /*#__PURE__*/ _jsx(ContactImportButton, {
+                                                hostId: hostId,
+                                                org: org
+                                            })
+                                        ]
                                     })
+                                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(ContactsBulkBar, {
+                                            hostId: hostId,
+                                            org: org,
+                                            scope: dataScope,
+                                            consentGroup: consentGroup,
+                                            rows: contacts,
+                                            selected: selectedIds,
+                                            onSelectedChange: setSelectedIds,
+                                            csv: csvOptions,
+                                            suiteLocked: !suiteIncluded
+                                        }),
+                                        /*#__PURE__*/ _jsx(CrmColumnOrderProvider, {
+                                            value: grid.columnOrder,
+                                            children: /*#__PURE__*/ _jsx(ListTable, {
+                                                rows: contacts,
+                                                columns: grid.columns,
+                                                slots: CRM_LIST_SLOTS,
+                                                selectable: {
+                                                    selected: selectedIds,
+                                                    onChange: setSelectedIds
+                                                },
+                                                onOpen: (id)=>router.push(routes.contact(id)),
+                                                /*
+                     * The grid's Filters panel and quick search edit the view's
+                     * 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,
+                                                quickFilter: true,
+                                                onPreferencePanelOpen: ()=>setFilterOpened(true),
+                                                // A filter that matched nothing is said inside the grid,
+                                                // so the toolbar that set it stays to change it.
+                                                noRowsLabel: contactsStatus === 'loading' ? 'Loading…' : 'No contacts match these filters',
+                                                columnVisibilityModel: grid.columnVisibilityModel,
+                                                onColumnVisibilityModelChange: grid.onColumnVisibilityModelChange,
+                                                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
+                                        })
+                                    ]
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ _jsx(RecentActivityFeed, {
-                            hostId: hostId,
-                            org: org,
-                            basePath: props.basePath
                         })
-                    ]
-                })
+                    }),
+                    /*#__PURE__*/ _jsx(RecentActivityFeed, {
+                        hostId: hostId,
+                        org: org,
+                        basePath: props.basePath
+                    })
+                ]
             }),
             /*#__PURE__*/ _jsxs(Dialog, {
                 open: segmentName !== null,