@aglyn/plugins-crm 1.0.0-beta.143

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

@@ -0,0 +1,308 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Aglyn from "@aglyn/aglyn";
+import { mdiRefresh } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { CardColumns } from "@aglyn/shared-ui-jsx/components/card-columns";
+import { Button, Stack, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { getCountFromServer, query } from "firebase/firestore";
+import { useCallback, useMemo, useState } from "react";
+import { useFirestore } from "@aglyn/tenant-feature-instance";
+import { useCrmScope } from "../hooks/use-crm-scope.js";
+import { crmRoutes } from "../model/crm-routes.js";
+import { ActivityCard } from "./reports/activity-card.js";
+import { ClosedDealsCard } from "./reports/closed-deals-card.js";
+import { ContactsMixCard } from "./reports/contacts-mix-card.js";
+import { ContactsTrendCard } from "./reports/contacts-trend-card.js";
+import { ForecastCard } from "./reports/forecast-card.js";
+import { LeadFunnelCard } from "./reports/lead-funnel-card.js";
+import { PipelineCard } from "./reports/pipeline-card.js";
+import { SourceConversionCard } from "./reports/source-conversion-card.js";
+import { WonLostByOwnerCard } from "./reports/won-lost-by-owner-card.js";
+import { reportCacheKey, reportCachePrefix, scopedCollection, visibleToClause } from "./reports/report-scope.js";
+import { TasksCard } from "./reports/tasks-card.js";
+import { invalidateAggregateReads, useAggregateRead } from "./reports/use-aggregate-read.js";
+/**
+ * `/crm/reports` — the CRM in aggregate (AGL-2604, AGL-2624).
+ *
+ * Nine cards, each reading its own collection: contacts over time, contacts
+ * by source and stage, which sources convert, this site's lead funnel, the
+ * open pipeline, what closed, who logged what, the forecast by close month
+ * (AGL-2620, over the pipeline card's own window), and the task load. This
+ * section resolves what they share and hands it down — see `CrmReportScope`
+ * — so that every card counts the same reader's records over the same
+ * clock. The lead funnel is the one card handed the site as well: leads live
+ * under the host, not the org.
+ *
+ * ## The period is a control, and the reads follow it
+ *
+ * Nothing on this page reads a year on mount. The picker names the period,
+ * the period sizes every read (one count per week of it, the deals closed
+ * within it), and the default is thirty days. The three cards that are
+ * stocks rather than flows — the open pipeline, its forecast, the open
+ * tasks — ignore the period because "what is open" has no period.
+ *
+ * ## Scoped like the list
+ *
+ * Every query carries `visibleTo array-contains-any` over the group's
+ * tokens, the predicate the rules evaluate, so a report can never count a
+ * record its reader could not open — and the total here is the reader's
+ * total, not the org's billable audience, which is the head-count the
+ * contacts list keeps for the quota.
+ *
+ * ## Read once a minute, not once an arrival
+ *
+ * Every read on this page is keyed by the scope and the period and kept
+ * for `AGGREGATE_READ_TTL_MS` — see `useAggregateRead` — so leaving to open
+ * a deal the report named and coming straight back costs nothing. Refresh
+ * forgets this reader's answers for this org and anchors the period again,
+ * which is what makes every card ask afresh.
+ */ export function ContactsReportsSection(props) {
+    var _ref;
+    const { hostId, org, basePath } = props;
+    const firestore = useFirestore();
+    // The org data root — null until the org lookup settles, and the page
+    // reads nothing until it does — and the controller this page is viewed
+    // as, resolved the way every CRM surface resolves them so the facet a
+    // stage is read from here is the facet the contacts list edits it in.
+    const { scope: dataScope, consentGroup, visibleTo } = useCrmScope({
+        hostId,
+        org
+    });
+    // `null` at the organization level (AGL-2630): no clause, and every card
+    // totals every site; the holder is then each contact's own.
+    const tokens = useMemo(()=>visibleTo ? [
+            ...visibleTo
+        ] : null, [
+        visibleTo
+    ]);
+    const groupId = (_ref = consentGroup == null ? void 0 : consentGroup.groupId) != null ? _ref : null;
+    const orgRecord = org != null ? org : null;
+    /*
+   * The period AND the moment it was chosen, as one value: the range is
+   * anchored when the reader picks, not re-derived from a moving `Date.now()`
+   * per render, which would rebuild every query on every pass.
+   */ const [view, setView] = useState(()=>({
+            period: '30d',
+            nowMs: Date.now()
+        }));
+    const range = useMemo(()=>Aglyn.crmReportRange(view.period, view.nowMs), [
+        view
+    ]);
+    const routes = useMemo(()=>crmRoutes(basePath != null ? basePath : ''), [
+        basePath
+    ]);
+    const refresh = useCallback(()=>{
+        if (dataScope) {
+            invalidateAggregateReads(reportCachePrefix({
+                scope: dataScope,
+                tokens,
+                groupId
+            }));
+        }
+        // A new anchor is what changes every card's dependencies, so each read
+        // runs again and — its key forgotten — reaches the server.
+        setView((current)=>({
+                period: current.period,
+                nowMs: Date.now()
+            }));
+    }, [
+        dataScope,
+        tokens,
+        groupId
+    ]);
+    const report = useMemo(()=>dataScope ? {
+            scope: dataScope,
+            tokens,
+            groupId,
+            org: orgRecord,
+            period: view.period,
+            range,
+            nowMs: view.nowMs,
+            routes
+        } : null, [
+        dataScope,
+        tokens,
+        groupId,
+        orgRecord,
+        view,
+        range,
+        routes
+    ]);
+    /**
+   * Every contact this reader may see, counted once for the two cards that
+   * quote it — the tile, and the sample notice that compares the read to it.
+   */ const totalContacts = useAggregateRead(()=>dataScope ? getCountFromServer(query(scopedCollection(firestore, dataScope, 'contacts'), ...visibleToClause(tokens))).then((snapshot)=>snapshot.data().count) : null, // The anchor is a dependency so Refresh re-asks; the key, which omits
+    // it, is what answers a reopened section from memory.
+    [
+        firestore,
+        dataScope,
+        tokens,
+        view.nowMs
+    ], report ? {
+        cacheKey: reportCacheKey(report, 'contacts:total')
+    } : {});
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 2,
+                sx: {
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h6",
+                        component: "h2",
+                        children: 'Reports'
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            rowGap: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+                                exclusive: true,
+                                size: "small",
+                                color: "primary",
+                                value: view.period,
+                                onChange: (_event, next)=>{
+                                    if (next) {
+                                        setView({
+                                            period: next,
+                                            nowMs: Date.now()
+                                        });
+                                    }
+                                },
+                                "aria-label": "Report period",
+                                children: Aglyn.CRM_REPORT_PERIODS.map((period)=>/*#__PURE__*/ _jsx(ToggleButton, {
+                                        value: period,
+                                        children: Aglyn.CRM_REPORT_PERIOD_LABELS[period]
+                                    }, period))
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiRefresh.path,
+                                    size: 0.8
+                                }),
+                                disabled: !report,
+                                onClick: refresh,
+                                children: 'Refresh'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            report ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(CardColumns, {
+                        spacing: 2,
+                        items: [
+                            {
+                                key: 'trend',
+                                children: /*#__PURE__*/ _jsx(ContactsTrendCard, {
+                                    report: report,
+                                    totalContacts: totalContacts
+                                })
+                            },
+                            {
+                                key: 'mix',
+                                children: /*#__PURE__*/ _jsx(ContactsMixCard, {
+                                    report: report,
+                                    totalContacts: totalContacts
+                                })
+                            },
+                            {
+                                key: 'source-conversion',
+                                children: /*#__PURE__*/ _jsx(SourceConversionCard, {
+                                    report: report
+                                })
+                            },
+                            {
+                                key: 'lead-funnel',
+                                children: /*#__PURE__*/ _jsx(LeadFunnelCard, {
+                                    report: report,
+                                    hostId: hostId
+                                })
+                            },
+                            {
+                                key: 'pipeline',
+                                children: /*#__PURE__*/ _jsx(PipelineCard, {
+                                    report: report
+                                })
+                            },
+                            {
+                                key: 'closed',
+                                /*
+                  One column item carrying two cards, because multicol picks
+                  its own break: two consecutive items are only USUALLY
+                  adjacent, and a card that is a footnote to the one above it
+                  cannot be left to that. Won and lost by owner asks a second
+                  question of the very rows Won and lost already read — the
+                  same window under the same `closed:won` and `closed:lost`
+                  keys — so it is read as that card's breakdown, and
+                  `break-inside: avoid` keeps the pair whole in one column.
+                */ children: /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 2,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(ClosedDealsCard, {
+                                            report: report
+                                        }),
+                                        /*#__PURE__*/ _jsx(WonLostByOwnerCard, {
+                                            report: report
+                                        })
+                                    ]
+                                })
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(ActivityCard, {
+                                report: report
+                            }),
+                            /*#__PURE__*/ _jsx(ForecastCard, {
+                                report: report
+                            }),
+                            /*#__PURE__*/ _jsx(TasksCard, {
+                                report: report
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Loading…'
+            })
+        ]
+    });
+}
+ContactsReportsSection.displayName = 'ContactsReportsSection';
+export default ContactsReportsSection;
+
+//# sourceMappingURL=reports-section.js.map

package/src/lib/components/reports-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/crm/src/lib/components/reports-section.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 * as Aglyn from '@aglyn/aglyn'\nimport type { ConsolePluginPageProps } from '@aglyn/aglyn'\nimport { mdiRefresh } from '@aglyn/shared-data-mdi'\nimport {\n  MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { CardColumns } from '@aglyn/shared-ui-jsx/components/card-columns'\nimport {\n  Button,\n  Stack,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n} from '@mui/material'\nimport { getCountFromServer, query } from 'firebase/firestore'\nimport { useCallback, useMemo, useState } from 'react'\nimport { useFirestore } from '@aglyn/tenant-feature-instance'\nimport { useCrmScope } from '../hooks/use-crm-scope'\nimport { crmRoutes } from '../model/crm-routes'\nimport { ActivityCard } from './reports/activity-card'\nimport { ClosedDealsCard } from './reports/closed-deals-card'\nimport { ContactsMixCard } from './reports/contacts-mix-card'\nimport { ContactsTrendCard } from './reports/contacts-trend-card'\nimport { ForecastCard } from './reports/forecast-card'\nimport { LeadFunnelCard } from './reports/lead-funnel-card'\nimport { PipelineCard } from './reports/pipeline-card'\nimport { SourceConversionCard } from './reports/source-conversion-card'\nimport { WonLostByOwnerCard } from './reports/won-lost-by-owner-card'\nimport {\n  type CrmReportScope,\n  reportCacheKey,\n  reportCachePrefix,\n  scopedCollection,\n  visibleToClause,\n} from './reports/report-scope'\nimport { TasksCard } from './reports/tasks-card'\nimport { invalidateAggregateReads, useAggregateRead } from './reports/use-aggregate-read'\n\n/**\n * `/crm/reports` — the CRM in aggregate (AGL-2604, AGL-2624).\n *\n * Nine cards, each reading its own collection: contacts over time, contacts\n * by source and stage, which sources convert, this site's lead funnel, the\n * open pipeline, what closed, who logged what, the forecast by close month\n * (AGL-2620, over the pipeline card's own window), and the task load. This\n * section resolves what they share and hands it down — see `CrmReportScope`\n * — so that every card counts the same reader's records over the same\n * clock. The lead funnel is the one card handed the site as well: leads live\n * under the host, not the org.\n *\n * ## The period is a control, and the reads follow it\n *\n * Nothing on this page reads a year on mount. The picker names the period,\n * the period sizes every read (one count per week of it, the deals closed\n * within it), and the default is thirty days. The three cards that are\n * stocks rather than flows — the open pipeline, its forecast, the open\n * tasks — ignore the period because \"what is open\" has no period.\n *\n * ## Scoped like the list\n *\n * Every query carries `visibleTo array-contains-any` over the group's\n * tokens, the predicate the rules evaluate, so a report can never count a\n * record its reader could not open — and the total here is the reader's\n * total, not the org's billable audience, which is the head-count the\n * contacts list keeps for the quota.\n *\n * ## Read once a minute, not once an arrival\n *\n * Every read on this page is keyed by the scope and the period and kept\n * for `AGGREGATE_READ_TTL_MS` — see `useAggregateRead` — so leaving to open\n * a deal the report named and coming straight back costs nothing. Refresh\n * forgets this reader's answers for this org and anchors the period again,\n * which is what makes every card ask afresh.\n */\nexport function ContactsReportsSection(props: ConsolePluginPageProps) {\n  const { hostId, org, basePath } = props\n  const firestore = useFirestore()\n  // The org data root — null until the org lookup settles, and the page\n  // reads nothing until it does — and the controller this page is viewed\n  // as, resolved the way every CRM surface resolves them so the facet a\n  // stage is read from here is the facet the contacts list edits it in.\n  const { scope: dataScope, consentGroup, visibleTo } = useCrmScope({ hostId, org })\n  // `null` at the organization level (AGL-2630): no clause, and every card\n  // totals every site; the holder is then each contact's own.\n  const tokens = useMemo(() => (visibleTo ? [...visibleTo] : null), [visibleTo])\n  const groupId = consentGroup?.groupId ?? null\n  const orgRecord = (org ?? null) as Record<string, unknown> | null\n  /*\n   * The period AND the moment it was chosen, as one value: the range is\n   * anchored when the reader picks, not re-derived from a moving `Date.now()`\n   * per render, which would rebuild every query on every pass.\n   */\n  const [view, setView] = useState<{\n    period: Aglyn.CrmReportPeriod\n    nowMs: number\n  }>(() => ({ period: '30d', nowMs: Date.now() }))\n  const range = useMemo(\n    () => Aglyn.crmReportRange(view.period, view.nowMs),\n    [view],\n  )\n  const routes = useMemo(() => crmRoutes(basePath ?? ''), [basePath])\n  const refresh = useCallback(() => {\n    if (dataScope) {\n      invalidateAggregateReads(reportCachePrefix({ scope: dataScope, tokens, groupId }))\n    }\n    // A new anchor is what changes every card's dependencies, so each read\n    // runs again and — its key forgotten — reaches the server.\n    setView((current) => ({ period: current.period, nowMs: Date.now() }))\n  }, [dataScope, tokens, groupId])\n\n  const report = useMemo<CrmReportScope | null>(\n    () =>\n      dataScope\n        ? {\n            scope: dataScope,\n            tokens,\n            groupId,\n            org: orgRecord,\n            period: view.period,\n            range,\n            nowMs: view.nowMs,\n            routes,\n          }\n        : null,\n    [dataScope, tokens, groupId, orgRecord, view, range, routes],\n  )\n\n  /**\n   * Every contact this reader may see, counted once for the two cards that\n   * quote it — the tile, and the sample notice that compares the read to it.\n   */\n  const totalContacts = useAggregateRead<number>(\n    () =>\n      dataScope\n        ? getCountFromServer(\n            query(\n              scopedCollection(firestore, dataScope, 'contacts'),\n              ...visibleToClause(tokens),\n            ),\n          ).then((snapshot) => snapshot.data().count)\n        : null,\n    // The anchor is a dependency so Refresh re-asks; the key, which omits\n    // it, is what answers a reopened section from memory.\n    [firestore, dataScope, tokens, view.nowMs],\n    report ? { cacheKey: reportCacheKey(report, 'contacts:total') } : {},\n  )\n\n  return (\n    <Stack spacing={2}>\n      <Stack\n        direction=\"row\"\n        spacing={2}\n        sx={{\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n        }}\n      >\n        <Typography variant=\"h6\" component=\"h2\">\n          {'Reports'}\n        </Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 1 }}>\n          <ToggleButtonGroup\n            exclusive\n            size=\"small\"\n            color=\"primary\"\n            value={view.period}\n            onChange={(_event, next) => {\n              if (next) {\n                setView({ period: next as Aglyn.CrmReportPeriod, nowMs: Date.now() })\n              }\n            }}\n            aria-label=\"Report period\"\n          >\n            {Aglyn.CRM_REPORT_PERIODS.map((period) => (\n              <ToggleButton key={period} value={period}>\n                {Aglyn.CRM_REPORT_PERIOD_LABELS[period]}\n              </ToggleButton>\n            ))}\n          </ToggleButtonGroup>\n          <Button\n            size=\"small\"\n            startIcon={<MdiIcon path={mdiRefresh.path} size={0.8} />}\n            disabled={!report}\n            onClick={refresh}\n          >\n            {'Refresh'}\n          </Button>\n        </Stack>\n      </Stack>\n      {report ? (\n        <>\n          {/*\n            The same masonry the billing and staff pages use: columns as tall\n            as their own contents, so a short card beside a tall one leaves no\n            hole. Measured live before this changed — 271, 272 and 111 pixels\n            of dead space down one report, and an odd card stranded with an\n            empty column beside it.\n          */}\n          <CardColumns\n            spacing={2}\n            items={[\n              {\n                key: 'trend',\n                children: (\n                  <ContactsTrendCard report={report} totalContacts={totalContacts} />\n                ),\n              },\n              {\n                key: 'mix',\n                children: (\n                  <ContactsMixCard report={report} totalContacts={totalContacts} />\n                ),\n              },\n              { key: 'source-conversion', children: <SourceConversionCard report={report} /> },\n              { key: 'lead-funnel', children: <LeadFunnelCard report={report} hostId={hostId} /> },\n              { key: 'pipeline', children: <PipelineCard report={report} /> },\n              {\n                key: 'closed',\n                /*\n                  One column item carrying two cards, because multicol picks\n                  its own break: two consecutive items are only USUALLY\n                  adjacent, and a card that is a footnote to the one above it\n                  cannot be left to that. Won and lost by owner asks a second\n                  question of the very rows Won and lost already read — the\n                  same window under the same `closed:won` and `closed:lost`\n                  keys — so it is read as that card's breakdown, and\n                  `break-inside: avoid` keeps the pair whole in one column.\n                */\n                children: (\n                  <Stack spacing={2}>\n                    <ClosedDealsCard report={report} />\n                    <WonLostByOwnerCard report={report} />\n                  </Stack>\n                ),\n              },\n            ]}\n          />\n          {/*\n            Outside the columns: multicol cannot span, and these three read\n            across the full width.\n          */}\n          <Stack spacing={2}>\n            <ActivityCard report={report} />\n            <ForecastCard report={report} />\n            <TasksCard report={report} />\n          </Stack>\n        </>\n      ) : (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {'Loading…'}\n        </Typography>\n      )}\n    </Stack>\n  )\n}\nContactsReportsSection.displayName = 'ContactsReportsSection'\n\nexport default ContactsReportsSection\n"],"names":["Aglyn","mdiRefresh","MdiIcon","CardColumns","Button","Stack","ToggleButton","ToggleButtonGroup","Typography","getCountFromServer","query","useCallback","useMemo","useState","useFirestore","useCrmScope","crmRoutes","ActivityCard","ClosedDealsCard","ContactsMixCard","ContactsTrendCard","ForecastCard","LeadFunnelCard","PipelineCard","SourceConversionCard","WonLostByOwnerCard","reportCacheKey","reportCachePrefix","scopedCollection","visibleToClause","TasksCard","invalidateAggregateReads","useAggregateRead","ContactsReportsSection","props","hostId","org","basePath","firestore","scope","dataScope","consentGroup","visibleTo","tokens","groupId","orgRecord","view","setView","period","nowMs","Date","now","range","crmReportRange","routes","refresh","current","report","totalContacts","then","snapshot","data","count","cacheKey","spacing","direction","sx","alignItems","justifyContent","flexWrap","variant","component","rowGap","exclusive","size","color","value","onChange","_event","next","aria-label","CRM_REPORT_PERIODS","map","CRM_REPORT_PERIOD_LABELS","startIcon","path","disabled","onClick","items","key","children","displayName"],"mappings":"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"}

package/src/lib/components/sending-addresses-card.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface SendingAddressesCardProps {
+    /** The workspace the list is kept in, or `null` until the scope resolves. */
+    orgId: string | null;
+    /** Whether the scope is known, so the list may be asked for. */
+    ready: boolean;
+}
+/** The one sentence that says what the list is for. */
+export declare const SENDING_ADDRESSES_EXPLANATION = "Emails you send from these addresses and BCC to your capture address are filed under the person you wrote to.";
+/** The state of an address whose confirmation email has gone out. */
+export declare const VERIFICATION_SENT_LABEL = "Verification email sent";
+/** The state of an address the member has confirmed. */
+export declare const VERIFIED_LABEL = "Verified";
+/**
+ * "Your sending addresses" — the signed-in member's own addresses in this
+ * workspace (AGL-2975), beside the Email capture card they are for.
+ *
+ * A member who sends outreach from an address they do not sign in with — a
+ * Gmail send-as alias on an outbound domain — adds it here. It is sent a
+ * verification email, and once the member opens that link while signed in
+ * the address is theirs: a message from it copied to the capture address is
+ * filed under the person it was written to, not under the alias. Until
+ * then the address does nothing, which is why its state is printed on the
+ * row rather than implied.
+ *
+ * The list is each member's own, so every member sees and edits only theirs,
+ * under a site or at the organization level alike. The verification link
+ * lands back on this page, and this card is what redeems it.
+ */
+export declare function SendingAddressesCard(props: SendingAddressesCardProps): import("react").JSX.Element;
+export declare namespace SendingAddressesCard {
+    var displayName: string;
+}
+export default SendingAddressesCard;

package/src/lib/components/sending-addresses-card.js

@@ -0,0 +1,262 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pluginDocsHelp } from "@aglyn/aglyn";
+import { MEMBER_EMAIL_ALIAS_CONFIRM_PARAM, MEMBER_EMAIL_ALIASES_MAX } from "@aglyn/aglyn/app-utils/member-email-aliases";
+import { CardDisplay, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Box, Button, Chip, List, ListItem, ListItemText, Stack, TextField, Typography } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { useMemberEmailAliases } from "./use-member-email-aliases.js";
+/** The one sentence that says what the list is for. */ export const SENDING_ADDRESSES_EXPLANATION = 'Emails you send from these addresses and BCC to your capture address are filed under the person you wrote to.';
+/** The state of an address whose confirmation email has gone out. */ export const VERIFICATION_SENT_LABEL = 'Verification email sent';
+/** The state of an address the member has confirmed. */ export const VERIFIED_LABEL = 'Verified';
+/**
+ * "Your sending addresses" — the signed-in member's own addresses in this
+ * workspace (AGL-2975), beside the Email capture card they are for.
+ *
+ * A member who sends outreach from an address they do not sign in with — a
+ * Gmail send-as alias on an outbound domain — adds it here. It is sent a
+ * verification email, and once the member opens that link while signed in
+ * the address is theirs: a message from it copied to the capture address is
+ * filed under the person it was written to, not under the alias. Until
+ * then the address does nothing, which is why its state is printed on the
+ * row rather than implied.
+ *
+ * The list is each member's own, so every member sees and edits only theirs,
+ * under a site or at the organization level alike. The verification link
+ * lands back on this page, and this card is what redeems it.
+ */ export function SendingAddressesCard(props) {
+    const { orgId, ready } = props;
+    const enabled = ready && Boolean(orgId);
+    const aliases = useMemberEmailAliases(orgId, {
+        enabled
+    });
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const [draft, setDraft] = useState('');
+    // The verification link, redeemed once. The token leaves the address bar
+    // at once, so a copied or bookmarked URL does not carry it around.
+    const redeemed = useRef(false);
+    const confirmAddress = aliases.confirm;
+    useEffect(()=>{
+        if (!enabled || redeemed.current || typeof window === 'undefined') return;
+        const params = new URLSearchParams(window.location.search);
+        const token = params.get(MEMBER_EMAIL_ALIAS_CONFIRM_PARAM);
+        if (!token) return;
+        redeemed.current = true;
+        params.delete(MEMBER_EMAIL_ALIAS_CONFIRM_PARAM);
+        const query = params.toString();
+        window.history.replaceState(window.history.state, '', `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`);
+        void confirmAddress(token).then((result)=>{
+            var _result_payload_address;
+            if (result.ok === false) {
+                enqueueSnackbar(result.error, {
+                    variant: 'error',
+                    allowDuplicate: true
+                });
+                return;
+            }
+            enqueueSnackbar(`${String((_result_payload_address = result.payload['address']) != null ? _result_payload_address : 'Address')} verified`, {
+                variant: 'success'
+            });
+        });
+    }, [
+        enabled,
+        confirmAddress,
+        enqueueSnackbar
+    ]);
+    const handleAdd = async ()=>{
+        const address = draft.trim();
+        if (!address) return;
+        const result = await aliases.add(address);
+        if (result.ok === false) {
+            enqueueSnackbar(result.error, {
+                variant: 'error',
+                allowDuplicate: true
+            });
+            return;
+        }
+        setDraft('');
+        enqueueSnackbar(VERIFICATION_SENT_LABEL, {
+            variant: 'success'
+        });
+    };
+    const handleResend = async (address)=>{
+        const result = await aliases.resend(address);
+        if (result.ok === false) {
+            enqueueSnackbar(result.error, {
+                variant: 'error',
+                allowDuplicate: true
+            });
+            return;
+        }
+        enqueueSnackbar(VERIFICATION_SENT_LABEL, {
+            variant: 'success'
+        });
+    };
+    const handleRemove = async (address, verified)=>{
+        if (verified) {
+            const confirmed = await confirm({
+                title: `Remove ${address}?`,
+                description: 'Email you send from it stops being filed as yours. Adding it again ' + 'sends a new verification email.',
+                confirmationText: 'Remove',
+                confirmationButtonProps: {
+                    color: 'error'
+                }
+            }).then(()=>true).catch(()=>false);
+            if (!confirmed) return;
+        }
+        const result = await aliases.remove(address);
+        if (result.ok === false) {
+            enqueueSnackbar(result.error, {
+                variant: 'error',
+                allowDuplicate: true
+            });
+            return;
+        }
+        enqueueSnackbar('Address removed', {
+            variant: 'success',
+            persist: false
+        });
+    };
+    const atCap = aliases.aliases.length >= MEMBER_EMAIL_ALIASES_MAX;
+    const canEdit = enabled && aliases.status === 'ready' && !aliases.busy;
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: 'Your sending addresses',
+        help: pluginDocsHelp('crmSettings', {
+            anchor: '#your-sending-addresses'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1.5,
+            sx: {
+                maxWidth: 560
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: SENDING_ADDRESSES_EXPLANATION
+                }),
+                aliases.signInEmail ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: `You sign in as ${aliases.signInEmail}, which already counts as yours.`
+                }) : null,
+                aliases.status === 'error' ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "error",
+                    children: aliases.error
+                }) : null,
+                aliases.aliases.length > 0 ? /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        border: 1,
+                        borderColor: 'divider',
+                        borderRadius: 2,
+                        overflow: 'hidden'
+                    },
+                    children: /*#__PURE__*/ _jsx(List, {
+                        dense: true,
+                        disablePadding: true,
+                        "aria-label": "Your sending addresses",
+                        children: aliases.aliases.map((row)=>/*#__PURE__*/ _jsx(ListItem, {
+                                divider: true,
+                                secondaryAction: /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    sx: {
+                                        alignItems: 'center'
+                                    },
+                                    children: [
+                                        !row.verified ? /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            disabled: !canEdit,
+                                            "aria-label": `Resend the verification email to ${row.address}`,
+                                            onClick: ()=>void handleResend(row.address),
+                                            children: 'Resend'
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            color: "error",
+                                            disabled: !canEdit,
+                                            "aria-label": `Remove ${row.address}`,
+                                            onClick: ()=>void handleRemove(row.address, row.verified),
+                                            children: 'Remove'
+                                        })
+                                    ]
+                                }),
+                                children: /*#__PURE__*/ _jsx(ListItemText, {
+                                    primary: row.address,
+                                    secondary: /*#__PURE__*/ _jsx(Chip, {
+                                        size: "small",
+                                        variant: "outlined",
+                                        color: row.verified ? 'success' : 'warning',
+                                        label: row.verified ? VERIFIED_LABEL : VERIFICATION_SENT_LABEL,
+                                        sx: {
+                                            mt: 0.5
+                                        }
+                                    }),
+                                    slotProps: {
+                                        secondary: {
+                                            component: 'div'
+                                        }
+                                    }
+                                })
+                            }, row.address))
+                    })
+                }) : null,
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'flex-start'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(TextField, {
+                            size: "small",
+                            fullWidth: true,
+                            type: "email",
+                            label: "Add an address you send from",
+                            value: draft,
+                            disabled: !canEdit || atCap,
+                            onChange: (event)=>setDraft(event.target.value),
+                            onKeyDown: (event)=>{
+                                if (event.key === 'Enter') void handleAdd();
+                            },
+                            helperText: atCap ? `You can keep up to ${MEMBER_EMAIL_ALIASES_MAX} addresses.` : 'We email it a link. It counts once you open that link while signed in.'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "outlined",
+                            disabled: !canEdit || atCap || !draft.trim(),
+                            onClick: ()=>void handleAdd(),
+                            sx: {
+                                mt: 0.25
+                            },
+                            children: 'Add'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+SendingAddressesCard.displayName = 'SendingAddressesCard';
+export default SendingAddressesCard;
+
+//# sourceMappingURL=sending-addresses-card.js.map