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

package/src/lib/components/sequence-report-card.d.ts

@@ -19,5 +19,22 @@ export interface OutreachSequenceReportCardProps {
     links: OutreachSequenceLinksLoad;
     /** The mailbox's zone, which times are read in; `null` for the reader's own. */
     timeZone: string | null;
+    /** Lists the people who clicked, on the Enrollments tab (AGL-3332). */
+    onShowClickers?: () => void;
+    /** Lists the people who followed one destination, on the Enrollments tab (AGL-3332). */
+    onShowLink?: (url: string) => void;
 }
+/**
+ * One figure, with what it counts under it — and where it leads, when it
+ * leads somewhere. The sequence's Results and one person's page (AGL-3332)
+ * draw their numbers alike.
+ */
+export declare function OutreachFigure(props: {
+    label: string;
+    value: string;
+    hint?: string;
+    /** Opens the list behind the figure; named for a screen reader by `action`. */
+    onClick?: () => void;
+    action?: string;
+}): import("react").JSX.Element;
 export declare function OutreachSequenceReportCard(props: OutreachSequenceReportCardProps): import("react").JSX.Element;

package/src/lib/components/sequence-report-card.js

@@ -15,24 +15,25 @@
  * limitations under the License.
  */ 'use client';
 import { _ as _extends } from "@swc/helpers/_/_extends";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Card, CardContent, Divider, Stack, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, ButtonBase, Card, CardContent, Divider, Link, Stack, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from "@mui/material";
 // Not a raw MUI `Table`: a destination is a long string, and a raw table is
 // cut off by the card around it with nothing able to scroll to what is past
 // the edge (AGL-3045).
 import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
 import { outreachSequenceLinkReport, outreachSequenceReport } from "../model/sequence-report.js";
 import { formatOutreachTime, OutreachLoadProblem } from "./outreach-ui.js";
-/** One figure, with what it counts under it. */ function Figure(props) {
-    return /*#__PURE__*/ _jsxs(Stack, {
-        spacing: 0,
-        sx: {
-            minWidth: 110
-        },
+/**
+ * One figure, with what it counts under it — and where it leads, when it
+ * leads somewhere. The sequence's Results and one person's page (AGL-3332)
+ * draw their numbers alike.
+ */ export function OutreachFigure(props) {
+    const body = /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Typography, {
                 variant: "h5",
                 component: "p",
+                color: props.onClick ? 'primary' : undefined,
                 children: props.value
             }),
             /*#__PURE__*/ _jsx(Typography, {
@@ -46,6 +47,36 @@ import { formatOutreachTime, OutreachLoadProblem } from "./outreach-ui.js";
             }) : null
         ]
     });
+    if (!props.onClick) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            spacing: 0,
+            sx: {
+                minWidth: 110
+            },
+            children: body
+        });
+    }
+    return /*#__PURE__*/ _jsx(Tooltip, {
+        title: props.action,
+        children: /*#__PURE__*/ _jsx(ButtonBase, {
+            onClick: props.onClick,
+            "aria-label": `${props.value} ${props.label}. ${props.action}`,
+            sx: {
+                minWidth: 110,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                textAlign: 'left',
+                borderRadius: 1,
+                px: 1,
+                mx: -1,
+                '&:hover, &.Mui-focusVisible': {
+                    bgcolor: 'action.hover'
+                }
+            },
+            children: body
+        })
+    });
 }
 /** A whole number as the card prints one. */ const count = (value)=>value.toLocaleString();
 /**
@@ -86,27 +117,30 @@ export function OutreachSequenceReportCard(props) {
                             rowGap: 2
                         },
                         children: [
-                            /*#__PURE__*/ _jsx(Figure, {
+                            /*#__PURE__*/ _jsx(OutreachFigure, {
                                 label: "Emails sent",
                                 value: count(report.sent)
                             }),
-                            /*#__PURE__*/ _jsx(Figure, _extends({
+                            /*#__PURE__*/ _jsx(OutreachFigure, _extends({
                                 label: "People emailed",
                                 value: report.people === null ? '—' : count(report.people)
                             }, report.people === null ? {
                                 hint: 'Not counted for this sequence'
                             } : {})),
-                            /*#__PURE__*/ _jsx(Figure, {
+                            /*#__PURE__*/ _jsx(OutreachFigure, _extends({
                                 label: "Clicked",
                                 value: count(report.uniqueClicks),
                                 hint: report.clicks === report.uniqueClicks ? undefined : `${count(report.clicks)} clicks in all`
-                            }),
-                            /*#__PURE__*/ _jsx(Figure, {
+                            }, props.onShowClickers && report.uniqueClicks > 0 ? {
+                                onClick: props.onShowClickers,
+                                action: 'Show who clicked'
+                            } : {})),
+                            /*#__PURE__*/ _jsx(OutreachFigure, {
                                 label: "Click rate",
                                 value: clickRate.value,
                                 hint: clickRate.hint
                             }),
-                            report.machineClicks > 0 ? /*#__PURE__*/ _jsx(Figure, {
+                            report.machineClicks > 0 ? /*#__PURE__*/ _jsx(OutreachFigure, {
                                 label: "Scanner clicks",
                                 value: count(report.machineClicks),
                                 hint: "Not in the rate"
@@ -156,12 +190,25 @@ export function OutreachSequenceReportCard(props) {
                                     }),
                                     /*#__PURE__*/ _jsx(TableBody, {
                                         children: links.rows.map((row)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                hover: Boolean(props.onShowLink),
                                                 children: [
                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                         sx: {
                                                             wordBreak: 'break-all'
                                                         },
-                                                        children: row.url
+                                                        children: props.onShowLink ? /*#__PURE__*/ _jsx(Link, {
+                                                            component: "button",
+                                                            type: "button",
+                                                            variant: "body2",
+                                                            underline: "hover",
+                                                            onClick: ()=>props.onShowLink == null ? void 0 : props.onShowLink.call(props, row.url),
+                                                            "aria-label": `Show who followed ${row.url}`,
+                                                            sx: {
+                                                                textAlign: 'left',
+                                                                wordBreak: 'break-all'
+                                                            },
+                                                            children: row.url
+                                                        }) : row.url
                                                     }),
                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                         align: "right",
@@ -176,6 +223,7 @@ export function OutreachSequenceReportCard(props) {
                                 variant: "caption",
                                 color: "text.secondary",
                                 children: [
+                                    props.onShowLink ? 'Select a destination to see who followed it. ' : '',
                                     "Two links to the same page are counted as one destination, whatever tracking parameters follow the address.",
                                     links.truncated ? ` ${count(links.overflowClicks)} more clicks went to destinations past the ones listed.` : ''
                                 ]

package/src/lib/components/sequence-report-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../libs/plugins/outreach/src/lib/components/sequence-report-card.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport type { CampaignRate } from '@aglyn/shared-ui-email-campaigns/model'\nimport {\n  Alert,\n  Card,\n  CardContent,\n  Divider,\n  Stack,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material'\n// Not a raw MUI `Table`: a destination is a long string, and a raw table is\n// cut off by the card around it with nothing able to scroll to what is past\n// the edge (AGL-3045).\nimport { ScrollTable } from '@aglyn/shared-ui-jsx/components/scroll-table.component'\nimport type { OutreachSequence } from '../model/outreach.types'\nimport {\n  outreachSequenceLinkReport,\n  outreachSequenceReport,\n} from '../model/sequence-report'\nimport { formatOutreachTime, OutreachLoadProblem } from './outreach-ui'\nimport type { OutreachSequenceLinksLoad } from './use-outreach-data'\n\n/**\n * WHAT A SEQUENCE MEASURED (AGL-3239).\n *\n * Four figures and one rate, and the sentences saying what each of them is\n * not. The decisions are all in `model/sequence-report.ts`; this renders\n * them and adds no arithmetic of its own — in particular it never divides,\n * so there is no second place a percentage can be computed differently from\n * the way a campaign's report computes it.\n *\n * The caveats are rendered as prominently as the numbers rather than as\n * small print. \"Opens aren't measured\" is the thing a reader coming from\n * the campaign report most needs told, and a blank where an open rate would\n * be says the opposite of what is true.\n */\n\nexport interface OutreachSequenceReportCardProps {\n  sequence: Pick<OutreachSequence, 'stats' | 'settings'>\n  links: OutreachSequenceLinksLoad\n  /** The mailbox's zone, which times are read in; `null` for the reader's own. */\n  timeZone: string | null\n}\n\n/** One figure, with what it counts under it. */\nfunction Figure(props: { label: string; value: string; hint?: string }) {\n  return (\n    <Stack spacing={0} sx={{ minWidth: 110 }}>\n      <Typography variant=\"h5\" component=\"p\">\n        {props.value}\n      </Typography>\n      <Typography variant=\"body2\">{props.label}</Typography>\n      {props.hint ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {props.hint}\n        </Typography>\n      ) : null}\n    </Stack>\n  )\n}\n\n/** A whole number as the card prints one. */\nconst count = (value: number): string => value.toLocaleString()\n\n/**\n * A rate and the denominator it was taken over, or the em dash that stands\n * for a rate the model refused to take. The denominator is printed beside\n * the percentage, never dropped: \"12% of people emailed\" and \"12% of people\n * who opened\" are different claims and a bare \"12%\" is neither.\n */\nfunction rateText(rate: CampaignRate | null): { value: string; hint?: string } {\n  if (!rate) return { value: '—' }\n  return {\n    value: `${(rate.value * 100).toFixed(1)}%`,\n    hint: `${count(rate.numerator)} of ${count(rate.denominator)} ${rate.denominatorLabel}`,\n  }\n}\n\nexport function OutreachSequenceReportCard(props: OutreachSequenceReportCardProps) {\n  const report = outreachSequenceReport(\n    props.sequence.stats,\n    props.sequence.settings.trackClicks,\n  )\n  const clickRate = rateText(report.rates.click)\n  const links = outreachSequenceLinkReport(\n    props.links.status === 'ready' ? (props.links.data ?? undefined) : undefined,\n  )\n\n  return (\n    <Card variant=\"outlined\">\n      <CardContent>\n        <Stack spacing={2}>\n          <Typography variant=\"h6\" component=\"h2\">\n            Results\n          </Typography>\n          <Stack direction=\"row\" spacing={3} sx={{ flexWrap: 'wrap', rowGap: 2 }}>\n            <Figure label=\"Emails sent\" value={count(report.sent)} />\n            <Figure\n              label=\"People emailed\"\n              value={report.people === null ? '—' : count(report.people)}\n              {...(report.people === null ? { hint: 'Not counted for this sequence' } : {})}\n            />\n            <Figure\n              label=\"Clicked\"\n              value={count(report.uniqueClicks)}\n              hint={\n                report.clicks === report.uniqueClicks\n                  ? undefined\n                  : `${count(report.clicks)} clicks in all`\n              }\n            />\n            <Figure label=\"Click rate\" value={clickRate.value} hint={clickRate.hint} />\n            {report.machineClicks > 0 ? (\n              <Figure\n                label=\"Scanner clicks\"\n                value={count(report.machineClicks)}\n                hint=\"Not in the rate\"\n              />\n            ) : null}\n          </Stack>\n          {report.lastClickAtMs === null ? null : (\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              Last click {formatOutreachTime(report.lastClickAtMs, props.timeZone)}\n            </Typography>\n          )}\n\n          {report.caveats.map((entry) => (\n            <Alert key={entry.id} severity=\"info\" variant=\"outlined\">\n              {entry.message}\n            </Alert>\n          ))}\n\n          {props.links.status === 'error' || props.links.status === 'refused' ? (\n            <OutreachLoadProblem status={props.links.status} what=\"the link report\" />\n          ) : links.rows.length ? (\n            <Stack spacing={1}>\n              <Divider />\n              <Typography variant=\"subtitle2\" component=\"h3\">\n                Links followed\n              </Typography>\n              <ScrollTable size=\"small\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Destination</TableCell>\n                    <TableCell align=\"right\">Clicks</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {links.rows.map((row) => (\n                    <TableRow key={row.url}>\n                      <TableCell sx={{ wordBreak: 'break-all' }}>{row.url}</TableCell>\n                      <TableCell align=\"right\">{count(row.clicks)}</TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </ScrollTable>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                Two links to the same page are counted as one destination, whatever\n                tracking parameters follow the address.\n                {links.truncated\n                  ? ` ${count(links.overflowClicks)} more clicks went to destinations past the ones listed.`\n                  : ''}\n              </Typography>\n            </Stack>\n          ) : null}\n        </Stack>\n      </CardContent>\n    </Card>\n  )\n}\n"],"names":["Alert","Card","CardContent","Divider","Stack","TableBody","TableCell","TableHead","TableRow","Typography","ScrollTable","outreachSequenceLinkReport","outreachSequenceReport","formatOutreachTime","OutreachLoadProblem","Figure","props","spacing","sx","minWidth","variant","component","value","label","hint","color","count","toLocaleString","rateText","rate","toFixed","numerator","denominator","denominatorLabel","OutreachSequenceReportCard","report","sequence","stats","settings","trackClicks","clickRate","rates","click","links","status","data","undefined","direction","flexWrap","rowGap","sent","people","uniqueClicks","clicks","machineClicks","lastClickAtMs","timeZone","caveats","map","entry","severity","message","id","what","rows","length","size","align","row","wordBreak","url","truncated","overflowClicks"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../libs/plugins/outreach/src/lib/components/sequence-report-card.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport type { CampaignRate } from '@aglyn/shared-ui-email-campaigns/model'\nimport {\n  Alert,\n  ButtonBase,\n  Card,\n  CardContent,\n  Divider,\n  Link,\n  Stack,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableRow,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport type { ReactNode } from 'react'\n// Not a raw MUI `Table`: a destination is a long string, and a raw table is\n// cut off by the card around it with nothing able to scroll to what is past\n// the edge (AGL-3045).\nimport { ScrollTable } from '@aglyn/shared-ui-jsx/components/scroll-table.component'\nimport type { OutreachSequence } from '../model/outreach.types'\nimport {\n  outreachSequenceLinkReport,\n  outreachSequenceReport,\n} from '../model/sequence-report'\nimport { formatOutreachTime, OutreachLoadProblem } from './outreach-ui'\nimport type { OutreachSequenceLinksLoad } from './use-outreach-data'\n\n/**\n * WHAT A SEQUENCE MEASURED (AGL-3239).\n *\n * Four figures and one rate, and the sentences saying what each of them is\n * not. The decisions are all in `model/sequence-report.ts`; this renders\n * them and adds no arithmetic of its own — in particular it never divides,\n * so there is no second place a percentage can be computed differently from\n * the way a campaign's report computes it.\n *\n * The caveats are rendered as prominently as the numbers rather than as\n * small print. \"Opens aren't measured\" is the thing a reader coming from\n * the campaign report most needs told, and a blank where an open rate would\n * be says the opposite of what is true.\n */\n\nexport interface OutreachSequenceReportCardProps {\n  sequence: Pick<OutreachSequence, 'stats' | 'settings'>\n  links: OutreachSequenceLinksLoad\n  /** The mailbox's zone, which times are read in; `null` for the reader's own. */\n  timeZone: string | null\n  /** Lists the people who clicked, on the Enrollments tab (AGL-3332). */\n  onShowClickers?: () => void\n  /** Lists the people who followed one destination, on the Enrollments tab (AGL-3332). */\n  onShowLink?: (url: string) => void\n}\n\n/**\n * One figure, with what it counts under it — and where it leads, when it\n * leads somewhere. The sequence's Results and one person's page (AGL-3332)\n * draw their numbers alike.\n */\nexport function OutreachFigure(props: {\n  label: string\n  value: string\n  hint?: string\n  /** Opens the list behind the figure; named for a screen reader by `action`. */\n  onClick?: () => void\n  action?: string\n}) {\n  const body: ReactNode = (\n    <>\n      <Typography variant=\"h5\" component=\"p\" color={props.onClick ? 'primary' : undefined}>\n        {props.value}\n      </Typography>\n      <Typography variant=\"body2\">{props.label}</Typography>\n      {props.hint ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {props.hint}\n        </Typography>\n      ) : null}\n    </>\n  )\n  if (!props.onClick) {\n    return (\n      <Stack spacing={0} sx={{ minWidth: 110 }}>\n        {body}\n      </Stack>\n    )\n  }\n  return (\n    <Tooltip title={props.action}>\n      <ButtonBase\n        onClick={props.onClick}\n        aria-label={`${props.value} ${props.label}. ${props.action}`}\n        sx={{\n          minWidth: 110,\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'flex-start',\n          textAlign: 'left',\n          borderRadius: 1,\n          px: 1,\n          mx: -1,\n          '&:hover, &.Mui-focusVisible': { bgcolor: 'action.hover' },\n        }}\n      >\n        {body}\n      </ButtonBase>\n    </Tooltip>\n  )\n}\n\n/** A whole number as the card prints one. */\nconst count = (value: number): string => value.toLocaleString()\n\n/**\n * A rate and the denominator it was taken over, or the em dash that stands\n * for a rate the model refused to take. The denominator is printed beside\n * the percentage, never dropped: \"12% of people emailed\" and \"12% of people\n * who opened\" are different claims and a bare \"12%\" is neither.\n */\nfunction rateText(rate: CampaignRate | null): { value: string; hint?: string } {\n  if (!rate) return { value: '—' }\n  return {\n    value: `${(rate.value * 100).toFixed(1)}%`,\n    hint: `${count(rate.numerator)} of ${count(rate.denominator)} ${rate.denominatorLabel}`,\n  }\n}\n\nexport function OutreachSequenceReportCard(props: OutreachSequenceReportCardProps) {\n  const report = outreachSequenceReport(\n    props.sequence.stats,\n    props.sequence.settings.trackClicks,\n  )\n  const clickRate = rateText(report.rates.click)\n  const links = outreachSequenceLinkReport(\n    props.links.status === 'ready' ? (props.links.data ?? undefined) : undefined,\n  )\n\n  return (\n    <Card variant=\"outlined\">\n      <CardContent>\n        <Stack spacing={2}>\n          <Typography variant=\"h6\" component=\"h2\">\n            Results\n          </Typography>\n          <Stack direction=\"row\" spacing={3} sx={{ flexWrap: 'wrap', rowGap: 2 }}>\n            <OutreachFigure label=\"Emails sent\" value={count(report.sent)} />\n            <OutreachFigure\n              label=\"People emailed\"\n              value={report.people === null ? '—' : count(report.people)}\n              {...(report.people === null ? { hint: 'Not counted for this sequence' } : {})}\n            />\n            <OutreachFigure\n              label=\"Clicked\"\n              value={count(report.uniqueClicks)}\n              hint={\n                report.clicks === report.uniqueClicks\n                  ? undefined\n                  : `${count(report.clicks)} clicks in all`\n              }\n              {...(props.onShowClickers && report.uniqueClicks > 0\n                ? { onClick: props.onShowClickers, action: 'Show who clicked' }\n                : {})}\n            />\n            <OutreachFigure label=\"Click rate\" value={clickRate.value} hint={clickRate.hint} />\n            {report.machineClicks > 0 ? (\n              <OutreachFigure\n                label=\"Scanner clicks\"\n                value={count(report.machineClicks)}\n                hint=\"Not in the rate\"\n              />\n            ) : null}\n          </Stack>\n          {report.lastClickAtMs === null ? null : (\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              Last click {formatOutreachTime(report.lastClickAtMs, props.timeZone)}\n            </Typography>\n          )}\n\n          {report.caveats.map((entry) => (\n            <Alert key={entry.id} severity=\"info\" variant=\"outlined\">\n              {entry.message}\n            </Alert>\n          ))}\n\n          {props.links.status === 'error' || props.links.status === 'refused' ? (\n            <OutreachLoadProblem status={props.links.status} what=\"the link report\" />\n          ) : links.rows.length ? (\n            <Stack spacing={1}>\n              <Divider />\n              <Typography variant=\"subtitle2\" component=\"h3\">\n                Links followed\n              </Typography>\n              <ScrollTable size=\"small\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Destination</TableCell>\n                    <TableCell align=\"right\">Clicks</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {links.rows.map((row) => (\n                    <TableRow key={row.url} hover={Boolean(props.onShowLink)}>\n                      <TableCell sx={{ wordBreak: 'break-all' }}>\n                        {props.onShowLink ? (\n                          <Link\n                            component=\"button\"\n                            type=\"button\"\n                            variant=\"body2\"\n                            underline=\"hover\"\n                            onClick={() => props.onShowLink?.(row.url)}\n                            aria-label={`Show who followed ${row.url}`}\n                            sx={{ textAlign: 'left', wordBreak: 'break-all' }}\n                          >\n                            {row.url}\n                          </Link>\n                        ) : (\n                          row.url\n                        )}\n                      </TableCell>\n                      <TableCell align=\"right\">{count(row.clicks)}</TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </ScrollTable>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {props.onShowLink ? 'Select a destination to see who followed it. ' : ''}\n                Two links to the same page are counted as one destination, whatever\n                tracking parameters follow the address.\n                {links.truncated\n                  ? ` ${count(links.overflowClicks)} more clicks went to destinations past the ones listed.`\n                  : ''}\n              </Typography>\n            </Stack>\n          ) : null}\n        </Stack>\n      </CardContent>\n    </Card>\n  )\n}\n"],"names":["Alert","ButtonBase","Card","CardContent","Divider","Link","Stack","TableBody","TableCell","TableHead","TableRow","Tooltip","Typography","ScrollTable","outreachSequenceLinkReport","outreachSequenceReport","formatOutreachTime","OutreachLoadProblem","OutreachFigure","props","body","variant","component","color","onClick","undefined","value","label","hint","spacing","sx","minWidth","title","action","aria-label","display","flexDirection","alignItems","textAlign","borderRadius","px","mx","bgcolor","count","toLocaleString","rateText","rate","toFixed","numerator","denominator","denominatorLabel","OutreachSequenceReportCard","report","sequence","stats","settings","trackClicks","clickRate","rates","click","links","status","data","direction","flexWrap","rowGap","sent","people","uniqueClicks","clicks","onShowClickers","machineClicks","lastClickAtMs","timeZone","caveats","map","entry","severity","message","id","what","rows","length","size","align","row","hover","Boolean","onShowLink","wordBreak","type","underline","url","truncated","overflowClicks"],"mappings":"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"}

package/src/lib/components/sequences-section.d.ts

@@ -7,7 +7,10 @@ export interface OutreachSequencesSectionProps {
     org?: Record<string, unknown> | null;
     /** The section's own path: `/[orgSlug]/outreach/sequences`. */
     sectionPath: string;
-    /** The path below the section: `[]`, `['new']`, `[id]` or `[id, 'enrollments']`. */
+    /**
+     * The path below the section: `[]`, `['new']`, `[id]`, `[id, 'enrollments']`
+     * or `[id, 'enrollments', enrollmentId]` — one person's page (AGL-3332).
+     */
     subpath: readonly string[];
     /** The Mailboxes section: `/[orgSlug]/outreach/mailboxes`. */
     mailboxesPath: string;
@@ -28,6 +31,15 @@ export declare namespace OutreachSequencesSection {
 /**
  * Every sequence: its mailbox, its status, and how many people it enrolled
  * and where they stand — a table on wider screens, cards on a phone.
+ *
+ * ## Asked of Firestore, a page at a time
+ *
+ * The Filters panel and the search box are the grid's; the clauses and the
+ * words go onto ONE query over the organization's sequences, newest first,
+ * and each page is a page of that query's matches (AGL-3321). A clause the
+ * query cannot hold beside the others is not applied, and the notice above
+ * the list says which and why — never answered over the sequences that
+ * happen to be loaded.
  */
 export declare function OutreachSequenceList(props: {
     orgId: string;

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

@@ -23,17 +23,20 @@ import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.com
 import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
 import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
 import { ListTable } from "@aglyn/shared-ui-jsx/components/list-table.component";
-import { filterListRows, inMemoryListField, listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
-import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import ListQueryNotices, { listQueryRefusals } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
+import { hiddenFilterVisibility } from "@aglyn/shared-ui-jsx/const/list-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 { Alert, Button, Card, CardContent, Chip, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useEffect, useMemo, useState } from "react";
+import { Button, Card, CardContent, Chip, Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useMemo } from "react";
 import { OUTREACH_SEQUENCE_STATUSES } from "../model/outreach.types.js";
+import { OUTREACH_SEQUENCE_LIST_QUERY } from "../model/sequence-list-query.js";
 import { OUTREACH_SEQUENCE_STATUS_LABELS, OutreachLink, OutreachLoading, OutreachLoadProblem, OutreachSequenceStatusChip, useOutreachNavigate } from "./outreach-ui.js";
+import { OutreachEnrollmentDetail } from "./enrollment-detail.js";
 import { OutreachSequenceDetail } from "./sequence-detail.js";
 import { OutreachSequenceEditor } from "./sequence-editor.js";
 import { useOutreachApi } from "./use-outreach-api.js";
-import { useOutreachSequenceCounts, useOutreachSequences } from "./use-outreach-data.js";
+import { useOutreachSequenceCounts, useOutreachSequenceList } from "./use-outreach-data.js";
 import { useOutreachMailboxes } from "./use-outreach-mailboxes.js";
 import { useOutreachComplianceSettings } from "./use-outreach-settings.js";
 /** The new-sequence page's segment below the section. */ export const OUTREACH_NEW_SEQUENCE_SEGMENT = 'new';
@@ -50,7 +53,7 @@ import { useOutreachComplianceSettings } from "./use-outreach-settings.js";
     if (!orgId) return /*#__PURE__*/ _jsx(OutreachLoading, {
         label: "Loading sequences…"
     });
-    const [first, second] = subpath;
+    const [first, second, third] = subpath;
     if (first === OUTREACH_NEW_SEQUENCE_SEGMENT) {
         return /*#__PURE__*/ _jsxs(Stack, {
             spacing: 2,
@@ -77,6 +80,16 @@ import { useOutreachComplianceSettings } from "./use-outreach-settings.js";
             ]
         });
     }
+    if (first && second === 'enrollments' && third) {
+        return /*#__PURE__*/ _jsx(OutreachEnrollmentDetail, {
+            orgId: orgId,
+            orgMount: props.orgMount,
+            sectionPath: sectionPath,
+            sequenceId: first,
+            enrollmentId: third,
+            mailboxes: mailboxes
+        });
+    }
     if (first) {
         return /*#__PURE__*/ _jsx(OutreachSequenceDetail, {
             orgId: orgId,
@@ -121,85 +134,76 @@ const COUNT_COLUMNS = [
     ]
 ];
 /*
- * What the sequences grid's Filters panel offers (AGL-3317). The list holds
- * every sequence it read, so each clause and the quick search are answered
- * over that whole set before it is paged, never over the page on screen.
- */ const SEQUENCE_FILTER_FIELDS = [
-    inMemoryListField('name', 'text'),
-    inMemoryListField('mailbox', 'text'),
-    inMemoryListField('status', 'select')
-];
+ * What the sequences grid's Filters panel offers (AGL-3317), each field on
+ * the list's Firestore query (AGL-3321, `OUTREACH_SEQUENCE_LIST_QUERY`).
+ */ const SEQUENCE_FILTER_FIELDS = OUTREACH_SEQUENCE_LIST_QUERY.fields;
 const SEQUENCE_FILTER_HEADERS = {
     name: 'Name',
     mailbox: 'Mailbox',
-    status: 'Status'
+    status: 'Status',
+    created: 'Created'
 };
-const SEQUENCE_FILTER_OPTIONS = {
-    status: OUTREACH_SEQUENCE_STATUSES.map((status)=>({
-            value: status,
-            label: OUTREACH_SEQUENCE_STATUS_LABELS[status]
-        }))
-};
-/** What the quick search reads on a sequence row. */ const SEQUENCE_SEARCH_FIELDS = [
+/** `created` is no column of its own: a filter-only column, never shown. */ const SEQUENCE_HIDDEN_COLUMNS = hiddenFilterVisibility(SEQUENCE_FILTER_FIELDS, [
     'name',
-    'mailbox'
-];
+    'mailbox',
+    'status'
+]);
+const SEQUENCE_STATUS_OPTIONS = OUTREACH_SEQUENCE_STATUSES.map((status)=>({
+        value: status,
+        label: OUTREACH_SEQUENCE_STATUS_LABELS[status]
+    }));
+/** How a mailbox reads in the list: the address it sends as. */ const mailboxName = (mailbox)=>mailbox.sendAs || mailbox.email;
 /**
  * Every sequence: its mailbox, its status, and how many people it enrolled
  * and where they stand — a table on wider screens, cards on a phone.
+ *
+ * ## Asked of Firestore, a page at a time
+ *
+ * The Filters panel and the search box are the grid's; the clauses and the
+ * words go onto ONE query over the organization's sequences, newest first,
+ * and each page is a page of that query's matches (AGL-3321). A clause the
+ * query cannot hold beside the others is not applied, and the notice above
+ * the list says which and why — never answered over the sequences that
+ * happen to be loaded.
  */ export function OutreachSequenceList(props) {
     const { orgId, sectionPath } = props;
     const theme = useTheme();
     const narrow = useMediaQuery(theme.breakpoints.down('md'));
     const navigate = useOutreachNavigate();
-    const sequences = useOutreachSequences(orgId);
-    const [page, setPage] = useState(0);
-    const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
     const gridFilter = useListGridFilter({
         selectFields: [
-            'status'
+            'status',
+            'mailbox'
         ]
     });
+    const sequences = useOutreachSequenceList(orgId, {
+        clauses: gridFilter.clauses,
+        search: gridFilter.searchWords
+    });
+    const filtering = gridFilter.clauses.length > 0 || gridFilter.searchWords.some((word)=>word.trim());
+    const filterOptions = useMemo(()=>({
+            status: SEQUENCE_STATUS_OPTIONS,
+            mailbox: props.mailboxes.map((mailbox)=>({
+                    value: mailbox.id,
+                    label: mailboxName(mailbox)
+                }))
+        }), [
+        props.mailboxes
+    ]);
     const mailboxLabel = (sequence)=>{
         const mailbox = props.mailboxes.find((entry)=>entry.id === sequence.mailboxId);
-        return mailbox ? mailbox.sendAs || mailbox.email : sequence.mailboxId ? 'Mailbox removed' : 'No mailbox yet';
+        return mailbox ? mailboxName(mailbox) : sequence.mailboxId ? 'Mailbox removed' : 'No mailbox yet';
     };
-    /*
-   * Filtered BEFORE the page is cut: the list read every sequence (under
-   * `OUTREACH_SEQUENCES_LIMIT`), so a clause or a search word answers over
-   * all of them, and the footer counts the matches.
-   */ const searchKey = gridFilter.searchWords.join(' ');
-    const matching = useMemo(()=>filterListRows(sequences.data.map((sequence)=>({
-                sequence,
-                name: sequence.name || 'Untitled',
-                mailbox: mailboxLabel(sequence),
-                status: sequence.status
-            })), SEQUENCE_FILTER_FIELDS, gridFilter.clauses, {
-            paths: SEQUENCE_SEARCH_FIELDS,
-            words: gridFilter.searchWords
-        }).map((row)=>row.sequence), // `searchKey` stands for the words, which are a new array each render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-        sequences.data,
-        props.mailboxes,
-        gridFilter.clauses,
-        searchKey
-    ]);
-    // A narrowed list starts again at its first page.
-    useEffect(()=>setPage(0), [
-        gridFilter.clauses,
-        searchKey
-    ]);
-    const pageRows = matching.slice(page * pageSize, (page + 1) * pageSize);
+    const pageRows = sequences.rows;
     // Counted for the page on screen only: five aggregations a sequence.
     const counts = useOutreachSequenceCounts(orgId, pageRows.map((sequence)=>sequence.id));
     const footer = /*#__PURE__*/ _jsx(ListPagination, {
-        page: page,
-        pageSize: pageSize,
+        page: sequences.page,
+        pageSize: sequences.pageSize,
         rowCount: pageRows.length,
-        count: matching.length,
-        onPageChange: setPage,
-        onPageSizeChange: setPageSize
+        hasMore: sequences.hasMore,
+        onPageChange: sequences.setPage,
+        onPageSizeChange: sequences.setPageSize
     });
     const newHref = `${sectionPath}/${OUTREACH_NEW_SEQUENCE_SEGMENT}`;
     const newButton = /*#__PURE__*/ _jsx(Button, {
@@ -216,30 +220,38 @@ const SEQUENCE_FILTER_OPTIONS = {
         children: "New sequence"
     });
     const count = (sequence, key)=>counts[sequence.id] ? String(counts[sequence.id][key]) : '—';
-    /*
-   * The read stops at `OUTREACH_SEQUENCES_LIMIT`, newest first, and probes one
-   * past it, so this shows only when older sequences really exist.
-   */ const truncatedNotice = sequences.truncated ? /*#__PURE__*/ _jsx(Alert, {
-        severity: "info",
-        children: `Showing the ${sequences.data.length.toLocaleString()} newest sequences. ` + 'The filters and the search narrow these only; older sequences are ' + 'not listed here.'
-    }) : null;
     const chips = /*#__PURE__*/ _jsx(ListFilterChips, {
         fields: SEQUENCE_FILTER_FIELDS,
         headers: SEQUENCE_FILTER_HEADERS,
         clauses: gridFilter.clauses,
         onChange: gridFilter.setClauses,
-        options: SEQUENCE_FILTER_OPTIONS
+        options: filterOptions
     });
+    const notices = /*#__PURE__*/ _jsx(ListQueryNotices, {
+        refused: listQueryRefusals(sequences.plan.refused, {
+            fields: SEQUENCE_FILTER_FIELDS,
+            headers: SEQUENCE_FILTER_HEADERS,
+            options: filterOptions
+        }),
+        notices: sequences.plan.notices
+    });
+    /** Nothing stored at all — not a filter that matched nothing. */ const none = sequences.status === 'ready' && !pageRows.length && !filtering && sequences.page === 0;
     let body;
-    if (sequences.status === 'loading') body = /*#__PURE__*/ _jsx(OutreachLoading, {
+    if (sequences.status === 'loading' && !filtering) body = /*#__PURE__*/ _jsx(OutreachLoading, {
         label: "Loading sequences…"
     });
     else if (sequences.status === 'error' || sequences.status === 'refused') {
-        body = /*#__PURE__*/ _jsx(OutreachLoadProblem, {
-            status: sequences.status,
-            what: "sequences"
+        body = /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1,
+            children: [
+                chips,
+                /*#__PURE__*/ _jsx(OutreachLoadProblem, {
+                    status: sequences.status,
+                    what: "sequences"
+                })
+            ]
         });
-    } else if (!sequences.data.length) {
+    } else if (none) {
         body = /*#__PURE__*/ _jsx(Card, {
             variant: "outlined",
             children: /*#__PURE__*/ _jsx(EmptyStateComponent, {
@@ -253,7 +265,8 @@ const SEQUENCE_FILTER_OPTIONS = {
             spacing: 1,
             children: [
                 chips,
-                /*#__PURE__*/ _jsx(Stack, {
+                notices,
+                pageRows.length ? /*#__PURE__*/ _jsx(Stack, {
                     spacing: 1,
                     component: "ul",
                     sx: {
@@ -308,9 +321,12 @@ const SEQUENCE_FILTER_OPTIONS = {
                                 })
                             })
                         }, sequence.id))
+                }) : /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: sequences.status === 'loading' ? 'Loading sequences…' : 'No sequences match these filters'
                 }),
-                footer,
-                truncatedNotice
+                footer
             ]
         });
     } else {
@@ -342,14 +358,20 @@ const SEQUENCE_FILTER_OPTIONS = {
                     align: 'right',
                     headerAlign: 'right'
                 }))
-        ], SEQUENCE_FILTER_FIELDS, SEQUENCE_FILTER_OPTIONS, SEQUENCE_FILTER_HEADERS);
+        ], SEQUENCE_FILTER_FIELDS, filterOptions, SEQUENCE_FILTER_HEADERS);
         body = /*#__PURE__*/ _jsxs(Stack, {
             spacing: 1,
             children: [
                 chips,
+                notices,
                 /*#__PURE__*/ _jsx(ListTable, {
                     "aria-label": "Sequences",
                     columns: columns,
+                    initialState: {
+                        columns: {
+                            columnVisibilityModel: SEQUENCE_HIDDEN_COLUMNS
+                        }
+                    },
                     rows: pageRows.map((sequence)=>_extends({
                             $id: sequence.id,
                             name: sequence.name || 'Untitled',
@@ -360,18 +382,21 @@ const SEQUENCE_FILTER_OPTIONS = {
                                 count(sequence, key)
                             ])))),
                     onOpen: (id)=>navigate(`${sectionPath}/${id}`),
+                    loading: sequences.status === 'loading',
                     /*
-           * The panel and the search are the grid's; the list answers them
-           * over every sequence it read (AGL-3317).
+           * The panel and the search are the grid's; every clause and the
+           * search word are on the list's query (AGL-3321), and the grid
+           * neither filters nor sorts the page it is handed: the query's
+           * one order, newest first, is the list's.
            */ filterMode: "server",
                     filterModel: gridFilter.filterModel,
                     onFilterModelChange: gridFilter.onFilterModelChange,
                     quickFilter: true,
+                    disableColumnSorting: true,
                     noRowsLabel: "No sequences match these filters",
                     hideFooter: true
                 }),
-                footer,
-                truncatedNotice
+                footer
             ]
         });
     }
@@ -381,7 +406,7 @@ const SEQUENCE_FILTER_OPTIONS = {
             anchor: '#sequences'
         }),
         HeaderProps: {
-            action: sequences.status === 'ready' && sequences.data.length ? newButton : undefined
+            action: none || sequences.status === 'loading' ? undefined : newButton
         },
         contentGutterX: true,
         contentGutterY: true,