@aglyn/plugins-crm 1.0.0-beta.143

package/src/lib/components/reports/report-breakdown.js

@@ -0,0 +1,105 @@
+/**
+ * @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 { Box, Stack, Typography } from "@mui/material";
+/**
+ * One horizontal bar per category — contacts by source, deals by stage,
+ * the lifecycle funnel — each labeled, each with its figure at the end of
+ * the row.
+ *
+ * Horizontal rather than the vertical bars of the trend chart because the
+ * categories have NAMES, and a name under a thin vertical bar truncates
+ * while a name beside a horizontal one reads. The bar is a share of the
+ * largest row, not of the total, so a funnel's top step is always the full
+ * width and every step below it is visibly a fraction of the one above.
+ */ export function ReportBreakdown(props) {
+    const { rows, emptyText } = props;
+    if (!rows.length) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: emptyText
+        });
+    }
+    const max = Math.max(1, ...rows.map((row)=>row.value));
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 1,
+        children: rows.map((row)=>{
+            var _row_display, _row_color, _row_display1;
+            return /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1.5,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            flex: '0 0 36%',
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                children: row.label
+                            }),
+                            row.note ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                component: "div",
+                                children: row.note
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            flex: 1,
+                            height: 8,
+                            borderRadius: 0.5,
+                            bgcolor: 'action.hover',
+                            overflow: 'hidden'
+                        },
+                        children: /*#__PURE__*/ _jsx(Box, {
+                            title: (_row_display = row.display) != null ? _row_display : row.value.toLocaleString(),
+                            sx: {
+                                width: `${Math.max(row.value > 0 ? 2 : 0, Math.round(row.value / max * 100))}%`,
+                                height: '100%',
+                                bgcolor: (_row_color = row.color) != null ? _row_color : 'primary.main',
+                                opacity: 0.9
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        sx: {
+                            flex: '0 0 auto',
+                            minWidth: 64,
+                            textAlign: 'right'
+                        },
+                        children: (_row_display1 = row.display) != null ? _row_display1 : row.value.toLocaleString()
+                    })
+                ]
+            }, row.key);
+        })
+    });
+}
+ReportBreakdown.displayName = 'ReportBreakdown';
+export default ReportBreakdown;
+
+//# sourceMappingURL=report-breakdown.js.map

package/src/lib/components/reports/report-breakdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/crm/src/lib/components/reports/report-breakdown.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 { Box, Stack, Typography } from '@mui/material'\n\nexport interface ReportBreakdownRow {\n  key: string\n  label: string\n  /** What the bar's length is a share of the largest of. */\n  value: number\n  /** The figure on the right; the value itself when omitted. */\n  display?: string\n  /** A line under the label — a count, a rate with its denominator. */\n  note?: string\n  /** A theme palette path; `primary.main` when omitted. */\n  color?: string\n}\n\nexport interface ReportBreakdownProps {\n  rows: ReportBreakdownRow[]\n  emptyText: string\n}\n\n/**\n * One horizontal bar per category — contacts by source, deals by stage,\n * the lifecycle funnel — each labeled, each with its figure at the end of\n * the row.\n *\n * Horizontal rather than the vertical bars of the trend chart because the\n * categories have NAMES, and a name under a thin vertical bar truncates\n * while a name beside a horizontal one reads. The bar is a share of the\n * largest row, not of the total, so a funnel's top step is always the full\n * width and every step below it is visibly a fraction of the one above.\n */\nexport function ReportBreakdown(props: ReportBreakdownProps) {\n  const { rows, emptyText } = props\n  if (!rows.length) {\n    return (\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {emptyText}\n      </Typography>\n    )\n  }\n  const max = Math.max(1, ...rows.map((row) => row.value))\n  return (\n    <Stack spacing={1}>\n      {rows.map((row) => (\n        <Stack\n          key={row.key}\n          direction=\"row\"\n          spacing={1.5}\n          sx={{ alignItems: 'center' }}\n        >\n          <Box sx={{ flex: '0 0 36%', minWidth: 0 }}>\n            <Typography variant=\"body2\" noWrap>\n              {row.label}\n            </Typography>\n            {row.note ? (\n              <Typography\n                variant=\"caption\"\n                color=\"text.secondary\"\n                noWrap\n                component=\"div\"\n              >\n                {row.note}\n              </Typography>\n            ) : null}\n          </Box>\n          <Box\n            sx={{\n              flex: 1,\n              height: 8,\n              borderRadius: 0.5,\n              bgcolor: 'action.hover',\n              overflow: 'hidden',\n            }}\n          >\n            <Box\n              title={row.display ?? row.value.toLocaleString()}\n              sx={{\n                width: `${Math.max(row.value > 0 ? 2 : 0, Math.round((row.value / max) * 100))}%`,\n                height: '100%',\n                bgcolor: row.color ?? 'primary.main',\n                opacity: 0.9,\n              }}\n            />\n          </Box>\n          <Typography\n            variant=\"body2\"\n            sx={{ flex: '0 0 auto', minWidth: 64, textAlign: 'right' }}\n          >\n            {row.display ?? row.value.toLocaleString()}\n          </Typography>\n        </Stack>\n      ))}\n    </Stack>\n  )\n}\nReportBreakdown.displayName = 'ReportBreakdown'\n\nexport default ReportBreakdown\n"],"names":["Box","Stack","Typography","ReportBreakdown","props","rows","emptyText","length","variant","color","max","Math","map","row","value","spacing","direction","sx","alignItems","flex","minWidth","noWrap","label","note","component","height","borderRadius","bgcolor","overflow","title","display","toLocaleString","width","round","opacity","textAlign","key","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,GAAG,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AAoBtD;;;;;;;;;;CAUC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGF;IAC5B,IAAI,CAACC,KAAKE,MAAM,EAAE;QAChB,qBACE,KAACL;YAAWM,SAAQ;YAAQC,OAAM;sBAC/BH;;IAGP;IACA,MAAMI,MAAMC,KAAKD,GAAG,CAAC,MAAML,KAAKO,GAAG,CAAC,CAACC,MAAQA,IAAIC,KAAK;IACtD,qBACE,KAACb;QAAMc,SAAS;kBACbV,KAAKO,GAAG,CAAC,CAACC;gBAgCIA,cAIIA,YASZA;iCA5CL,MAACZ;gBAECe,WAAU;gBACVD,SAAS;gBACTE,IAAI;oBAAEC,YAAY;gBAAS;;kCAE3B,MAAClB;wBAAIiB,IAAI;4BAAEE,MAAM;4BAAWC,UAAU;wBAAE;;0CACtC,KAAClB;gCAAWM,SAAQ;gCAAQa,MAAM;0CAC/BR,IAAIS,KAAK;;4BAEXT,IAAIU,IAAI,iBACP,KAACrB;gCACCM,SAAQ;gCACRC,OAAM;gCACNY,MAAM;gCACNG,WAAU;0CAETX,IAAIU,IAAI;iCAET;;;kCAEN,KAACvB;wBACCiB,IAAI;4BACFE,MAAM;4BACNM,QAAQ;4BACRC,cAAc;4BACdC,SAAS;4BACTC,UAAU;wBACZ;kCAEA,cAAA,KAAC5B;4BACC6B,KAAK,GAAEhB,eAAAA,IAAIiB,OAAO,YAAXjB,eAAeA,IAAIC,KAAK,CAACiB,cAAc;4BAC9Cd,IAAI;gCACFe,OAAO,GAAGrB,KAAKD,GAAG,CAACG,IAAIC,KAAK,GAAG,IAAI,IAAI,GAAGH,KAAKsB,KAAK,CAAC,AAACpB,IAAIC,KAAK,GAAGJ,MAAO,MAAM,CAAC,CAAC;gCACjFe,QAAQ;gCACRE,OAAO,GAAEd,aAAAA,IAAIJ,KAAK,YAATI,aAAa;gCACtBqB,SAAS;4BACX;;;kCAGJ,KAAChC;wBACCM,SAAQ;wBACRS,IAAI;4BAAEE,MAAM;4BAAYC,UAAU;4BAAIe,WAAW;wBAAQ;mCAExDtB,gBAAAA,IAAIiB,OAAO,YAAXjB,gBAAeA,IAAIC,KAAK,CAACiB,cAAc;;;eA3CrClB,IAAIuB,GAAG;;;AAiDtB;AACAjC,gBAAgBkC,WAAW,GAAG;AAE9B,eAAelC,gBAAe"}

package/src/lib/components/reports/report-export.d.ts

@@ -0,0 +1,37 @@
+export interface ReportExportProps {
+    /** The file's name — see `reportFilename`. */
+    filename: string;
+    /** The header row, in the table's column order. */
+    columns: readonly string[];
+    /**
+     * The rows, one array per line in the header's order, built when the
+     * button is pressed rather than on every render: a table of a thousand
+     * rows is serialized once, on demand, and never while nobody asked.
+     */
+    rows: () => ReadonlyArray<ReadonlyArray<unknown>>;
+    /** Nothing to write yet — the window is still reading, or came back empty. */
+    disabled?: boolean;
+    /**
+     * What the table is grouped from, when that is not everything — the
+     * card's own truncation notice, drawn beside the button so the file and
+     * its limits are read together.
+     */
+    caption?: string;
+}
+/**
+ * Export CSV for one report table (AGL-2624).
+ *
+ * Client-side, from the window the card has already loaded: a report table
+ * is at most a thousand grouped rows, and the file is those rows exactly as
+ * drawn — the same names, the same counts, the same order — so a reader can
+ * check the export against the screen. It is NOT a fresh read, so when the
+ * card's window was full the caption beside the button says so, the way
+ * the card says so beneath the table; an export that quietly wrote a sample
+ * as if it were the whole would be the one thing the on-screen caption
+ * exists to prevent.
+ */
+export declare function ReportExport(props: ReportExportProps): import("react").JSX.Element;
+export declare namespace ReportExport {
+    var displayName: string;
+}
+export default ReportExport;

package/src/lib/components/reports/report-export.js

@@ -0,0 +1,66 @@
+/**
+ * @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 { csvDocument } from "@aglyn/aglyn";
+import { mdiDownloadOutline } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { Button, Stack, Typography } from "@mui/material";
+import { downloadTextFile } from "../../model/contacts-csv.js";
+/**
+ * Export CSV for one report table (AGL-2624).
+ *
+ * Client-side, from the window the card has already loaded: a report table
+ * is at most a thousand grouped rows, and the file is those rows exactly as
+ * drawn — the same names, the same counts, the same order — so a reader can
+ * check the export against the screen. It is NOT a fresh read, so when the
+ * card's window was full the caption beside the button says so, the way
+ * the card says so beneath the table; an export that quietly wrote a sample
+ * as if it were the whole would be the one thing the on-screen caption
+ * exists to prevent.
+ */ export function ReportExport(props) {
+    const { filename, columns, rows, disabled = false, caption } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1.5,
+        sx: {
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            rowGap: 0.5
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiDownloadOutline.path,
+                    size: 0.8
+                }),
+                disabled: disabled,
+                onClick: ()=>downloadTextFile(filename, 'text/csv', csvDocument(columns, rows())),
+                children: 'Export CSV'
+            }),
+            caption ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: caption
+            }) : null
+        ]
+    });
+}
+ReportExport.displayName = 'ReportExport';
+export default ReportExport;
+
+//# sourceMappingURL=report-export.js.map

package/src/lib/components/reports/report-export.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/crm/src/lib/components/reports/report-export.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 { csvDocument } from '@aglyn/aglyn'\nimport { mdiDownloadOutline } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { Button, Stack, Typography } from '@mui/material'\nimport { downloadTextFile } from '../../model/contacts-csv'\n\nexport interface ReportExportProps {\n  /** The file's name — see `reportFilename`. */\n  filename: string\n  /** The header row, in the table's column order. */\n  columns: readonly string[]\n  /**\n   * The rows, one array per line in the header's order, built when the\n   * button is pressed rather than on every render: a table of a thousand\n   * rows is serialized once, on demand, and never while nobody asked.\n   */\n  rows: () => ReadonlyArray<ReadonlyArray<unknown>>\n  /** Nothing to write yet — the window is still reading, or came back empty. */\n  disabled?: boolean\n  /**\n   * What the table is grouped from, when that is not everything — the\n   * card's own truncation notice, drawn beside the button so the file and\n   * its limits are read together.\n   */\n  caption?: string\n}\n\n/**\n * Export CSV for one report table (AGL-2624).\n *\n * Client-side, from the window the card has already loaded: a report table\n * is at most a thousand grouped rows, and the file is those rows exactly as\n * drawn — the same names, the same counts, the same order — so a reader can\n * check the export against the screen. It is NOT a fresh read, so when the\n * card's window was full the caption beside the button says so, the way\n * the card says so beneath the table; an export that quietly wrote a sample\n * as if it were the whole would be the one thing the on-screen caption\n * exists to prevent.\n */\nexport function ReportExport(props: ReportExportProps) {\n  const { filename, columns, rows, disabled = false, caption } = props\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={1.5}\n      sx={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 0.5 }}\n    >\n      <Button\n        size=\"small\"\n        startIcon={<MdiIcon path={mdiDownloadOutline.path} size={0.8} />}\n        disabled={disabled}\n        onClick={() =>\n          downloadTextFile(filename, 'text/csv', csvDocument(columns, rows()))\n        }\n      >\n        {'Export CSV'}\n      </Button>\n      {caption ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {caption}\n        </Typography>\n      ) : null}\n    </Stack>\n  )\n}\nReportExport.displayName = 'ReportExport'\n\nexport default ReportExport\n"],"names":["csvDocument","mdiDownloadOutline","MdiIcon","Button","Stack","Typography","downloadTextFile","ReportExport","props","filename","columns","rows","disabled","caption","direction","spacing","sx","alignItems","flexWrap","rowGap","size","startIcon","path","onClick","variant","color","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,WAAW,QAAQ,eAAc;AAC1C,SAASC,kBAAkB,QAAQ,yBAAwB;AAC3D,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SAASC,MAAM,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AACzD,SAASC,gBAAgB,QAAQ,8BAA0B;AAuB3D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,IAAI,EAAEC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGL;IAC/D,qBACE,MAACJ;QACCU,WAAU;QACVC,SAAS;QACTC,IAAI;YAAEC,YAAY;YAAUC,UAAU;YAAQC,QAAQ;QAAI;;0BAE1D,KAAChB;gBACCiB,MAAK;gBACLC,yBAAW,KAACnB;oBAAQoB,MAAMrB,mBAAmBqB,IAAI;oBAAEF,MAAM;;gBACzDR,UAAUA;gBACVW,SAAS,IACPjB,iBAAiBG,UAAU,YAAYT,YAAYU,SAASC;0BAG7D;;YAEFE,wBACC,KAACR;gBAAWmB,SAAQ;gBAAUC,OAAM;0BACjCZ;iBAED;;;AAGV;AACAN,aAAamB,WAAW,GAAG;AAE3B,eAAenB,aAAY"}

package/src/lib/components/reports/report-format.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @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.
+ */
+import type { CrmReportPeriod } from '@aglyn/aglyn';
+/**
+ * The label under one week's bar — the day the week starts, as `Sep 1`.
+ *
+ * The start alone, because a bar is narrow: "Sep 1 – Sep 7" under thirteen
+ * bars truncates to nothing readable, and the reader knows every bar is a
+ * week because the chart said so.
+ */
+export declare function weekLabel(startMs: number): string;
+/**
+ * The name of a report table's CSV — `crm-activity-30d.csv` — so a folder
+ * of downloads says which card and which period each file came from. The
+ * cards that describe a stock rather than a flow — the open pipeline, the
+ * open tasks — have no period and name none.
+ */
+export declare function reportFilename(card: string, period?: CrmReportPeriod): string;
+/** A date in a table cell, or a dash for none. */
+export declare function shortDate(ms: number | null | undefined): string;
+/** `1 deal`, `2 deals` — a count with its noun. */
+export declare function plural(count: number, singular: string, many?: string): string;

package/src/lib/components/reports/report-format.js

@@ -0,0 +1,43 @@
+/**
+ * @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.
+ */ /**
+ * The label under one week's bar — the day the week starts, as `Sep 1`.
+ *
+ * The start alone, because a bar is narrow: "Sep 1 – Sep 7" under thirteen
+ * bars truncates to nothing readable, and the reader knows every bar is a
+ * week because the chart said so.
+ */ export function weekLabel(startMs) {
+    return new Date(startMs).toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric'
+    });
+}
+/**
+ * The name of a report table's CSV — `crm-activity-30d.csv` — so a folder
+ * of downloads says which card and which period each file came from. The
+ * cards that describe a stock rather than a flow — the open pipeline, the
+ * open tasks — have no period and name none.
+ */ export function reportFilename(card, period) {
+    return `crm-${card}${period ? `-${period}` : ''}.csv`;
+}
+/** A date in a table cell, or a dash for none. */ export function shortDate(ms) {
+    return typeof ms === 'number' && Number.isFinite(ms) && ms > 0 ? new Date(ms).toLocaleDateString() : '—';
+}
+/** `1 deal`, `2 deals` — a count with its noun. */ export function plural(count, singular, many = `${singular}s`) {
+    return `${count.toLocaleString()} ${count === 1 ? singular : many}`;
+}
+
+//# sourceMappingURL=report-format.js.map

package/src/lib/components/reports/report-format.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/crm/src/lib/components/reports/report-format.ts"],"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\nimport type { CrmReportPeriod } from '@aglyn/aglyn'\n\n/**\n * The label under one week's bar — the day the week starts, as `Sep 1`.\n *\n * The start alone, because a bar is narrow: \"Sep 1 – Sep 7\" under thirteen\n * bars truncates to nothing readable, and the reader knows every bar is a\n * week because the chart said so.\n */\nexport function weekLabel(startMs: number): string {\n  return new Date(startMs).toLocaleDateString(undefined, {\n    month: 'short',\n    day: 'numeric',\n  })\n}\n\n/**\n * The name of a report table's CSV — `crm-activity-30d.csv` — so a folder\n * of downloads says which card and which period each file came from. The\n * cards that describe a stock rather than a flow — the open pipeline, the\n * open tasks — have no period and name none.\n */\nexport function reportFilename(card: string, period?: CrmReportPeriod): string {\n  return `crm-${card}${period ? `-${period}` : ''}.csv`\n}\n\n/** A date in a table cell, or a dash for none. */\nexport function shortDate(ms: number | null | undefined): string {\n  return typeof ms === 'number' && Number.isFinite(ms) && ms > 0\n    ? new Date(ms).toLocaleDateString()\n    : '—'\n}\n\n/** `1 deal`, `2 deals` — a count with its noun. */\nexport function plural(count: number, singular: string, many = `${singular}s`): string {\n  return `${count.toLocaleString()} ${count === 1 ? singular : many}`\n}\n"],"names":["weekLabel","startMs","Date","toLocaleDateString","undefined","month","day","reportFilename","card","period","shortDate","ms","Number","isFinite","plural","count","singular","many","toLocaleString"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAID;;;;;;CAMC,GACD,OAAO,SAASA,UAAUC,OAAe;IACvC,OAAO,IAAIC,KAAKD,SAASE,kBAAkB,CAACC,WAAW;QACrDC,OAAO;QACPC,KAAK;IACP;AACF;AAEA;;;;;CAKC,GACD,OAAO,SAASC,eAAeC,IAAY,EAAEC,MAAwB;IACnE,OAAO,CAAC,IAAI,EAAED,OAAOC,SAAS,CAAC,CAAC,EAAEA,QAAQ,GAAG,GAAG,IAAI,CAAC;AACvD;AAEA,gDAAgD,GAChD,OAAO,SAASC,UAAUC,EAA6B;IACrD,OAAO,OAAOA,OAAO,YAAYC,OAAOC,QAAQ,CAACF,OAAOA,KAAK,IACzD,IAAIT,KAAKS,IAAIR,kBAAkB,KAC/B;AACN;AAEA,iDAAiD,GACjD,OAAO,SAASW,OAAOC,KAAa,EAAEC,QAAgB,EAAEC,OAAO,GAAGD,SAAS,CAAC,CAAC;IAC3E,OAAO,GAAGD,MAAMG,cAAc,GAAG,CAAC,EAAEH,UAAU,IAAIC,WAAWC,MAAM;AACrE"}

package/src/lib/components/reports/report-scope.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @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.
+ */
+import type { CrmReportPeriod, CrmReportRange } from '@aglyn/aglyn';
+import { type CollectionReference, type Firestore, type QueryConstraint } from 'firebase/firestore';
+import type { CrmRoutes } from '../../model/crm-routes';
+/**
+ * What every report card is handed, resolved once by the section (AGL-2604).
+ *
+ * The cards are independent — each opens its own reads and draws its own
+ * figures — but they must agree on four things or the page contradicts
+ * itself: WHICH org's collections they read, WHO the reader is (the scope
+ * tokens every query filters on), WHICH holder's facet a contact field is
+ * read through, and WHEN the period starts and ends. Resolving those in the
+ * section and passing them down is what keeps a card from computing its own
+ * "now" a second after its neighbor's, or its own token list without the
+ * org-wide token.
+ */
+export interface CrmReportScope {
+    /** `['orgs', orgId]` — the org-shared data root every CRM collection lives under. */
+    scope: readonly ['orgs', string];
+    /**
+     * The scope tokens this reader may see — the `array-contains-any` operand
+     * of every query a card runs, and the same predicate the rules evaluate
+     * — or `null` at the ORGANIZATION level (AGL-2630), where an org-wide
+     * member's reports carry no clause and total every site at once.
+     */
+    tokens: readonly string[] | null;
+    /**
+     * The consent group whose facet the contact fields are read through, or
+     * `null` at the organization level, where each contact's own primary
+     * holder is read instead (`contactPrimaryGroup`, from {@link org}).
+     */
+    groupId: string | null;
+    /** The org document, for the per-contact holder when {@link groupId} is null. */
+    org: Record<string, unknown> | null;
+    period: CrmReportPeriod;
+    range: CrmReportRange;
+    /** The moment the period was anchored at, so every card shares one clock. */
+    nowMs: number;
+    routes: CrmRoutes;
+}
+/**
+ * What every remembered report answer is keyed by: the org, the reader's
+ * tokens, the holder's facet and the period — never the clock. A reopened
+ * section anchors a new `nowMs`, and the whole point of remembering is that
+ * the reopening is the same question; the TTL, not the key, decides when the
+ * answer has aged out. `cardKey` names the read within the card so that two
+ * counts on one card do not overwrite each other.
+ */
+export declare function reportCacheKey(report: Pick<CrmReportScope, 'scope' | 'tokens' | 'groupId' | 'period'>, cardKey: string): string;
+/** Everything one reader's reports of one org are remembered under — what Refresh forgets. */
+export declare function reportCachePrefix(report: Pick<CrmReportScope, 'scope' | 'tokens' | 'groupId'>): string;
+/** One CRM collection under the report's org. */
+export declare function scopedCollection(firestore: Firestore, scope: CrmReportScope['scope'], name: string): CollectionReference;
+/**
+ * The visibility predicate, as the clause every report query starts with —
+ * spread into the query, because at the organization level it is NOTHING.
+ *
+ * A function rather than a convention so that a card cannot forget it: a
+ * query on a CRM collection without it is permission-denied rather than a
+ * leak, per the rules, but a denied aggregate renders as a dash and a
+ * missing clause would be diagnosed as "the count is broken" rather than as
+ * what it is. The org level (AGL-2630) drops it on purpose: the rules admit
+ * an org-wide member to every row, and a report there is a total over
+ * every site.
+ */
+export declare function visibleToClause(tokens: readonly string[] | null): QueryConstraint[];

package/src/lib/components/reports/report-scope.js

@@ -0,0 +1,58 @@
+/**
+ * @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.
+ */ import { collection, where } from "firebase/firestore";
+/**
+ * What every remembered report answer is keyed by: the org, the reader's
+ * tokens, the holder's facet and the period — never the clock. A reopened
+ * section anchors a new `nowMs`, and the whole point of remembering is that
+ * the reopening is the same question; the TTL, not the key, decides when the
+ * answer has aged out. `cardKey` names the read within the card so that two
+ * counts on one card do not overwrite each other.
+ */ export function reportCacheKey(report, cardKey) {
+    return `${reportCachePrefix(report)}${report.period}|${cardKey}`;
+}
+/** Everything one reader's reports of one org are remembered under — what Refresh forgets. */ export function reportCachePrefix(report) {
+    var _report_groupId;
+    // `*` for the org level's "every token" and "every holder": a real token
+    // list never contains it, so the two levels cannot share an answer.
+    const tokens = report.tokens ? [
+        ...report.tokens
+    ].sort().join(',') : '*';
+    return `crm-report|${report.scope[1]}|${tokens}|${(_report_groupId = report.groupId) != null ? _report_groupId : '*'}|`;
+}
+/** One CRM collection under the report's org. */ export function scopedCollection(firestore, scope, name) {
+    return collection(firestore, scope[0], scope[1], name);
+}
+/**
+ * The visibility predicate, as the clause every report query starts with —
+ * spread into the query, because at the organization level it is NOTHING.
+ *
+ * A function rather than a convention so that a card cannot forget it: a
+ * query on a CRM collection without it is permission-denied rather than a
+ * leak, per the rules, but a denied aggregate renders as a dash and a
+ * missing clause would be diagnosed as "the count is broken" rather than as
+ * what it is. The org level (AGL-2630) drops it on purpose: the rules admit
+ * an org-wide member to every row, and a report there is a total over
+ * every site.
+ */ export function visibleToClause(tokens) {
+    return tokens ? [
+        where('visibleTo', 'array-contains-any', [
+            ...tokens
+        ])
+    ] : [];
+}
+
+//# sourceMappingURL=report-scope.js.map

package/src/lib/components/reports/report-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/crm/src/lib/components/reports/report-scope.ts"],"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\nimport type { CrmReportPeriod, CrmReportRange } from '@aglyn/aglyn'\nimport {\n  collection,\n  type CollectionReference,\n  type Firestore,\n  type QueryConstraint,\n  where,\n} from 'firebase/firestore'\nimport type { CrmRoutes } from '../../model/crm-routes'\n\n/**\n * What every report card is handed, resolved once by the section (AGL-2604).\n *\n * The cards are independent — each opens its own reads and draws its own\n * figures — but they must agree on four things or the page contradicts\n * itself: WHICH org's collections they read, WHO the reader is (the scope\n * tokens every query filters on), WHICH holder's facet a contact field is\n * read through, and WHEN the period starts and ends. Resolving those in the\n * section and passing them down is what keeps a card from computing its own\n * \"now\" a second after its neighbor's, or its own token list without the\n * org-wide token.\n */\nexport interface CrmReportScope {\n  /** `['orgs', orgId]` — the org-shared data root every CRM collection lives under. */\n  scope: readonly ['orgs', string]\n  /**\n   * The scope tokens this reader may see — the `array-contains-any` operand\n   * of every query a card runs, and the same predicate the rules evaluate\n   * — or `null` at the ORGANIZATION level (AGL-2630), where an org-wide\n   * member's reports carry no clause and total every site at once.\n   */\n  tokens: readonly string[] | null\n  /**\n   * The consent group whose facet the contact fields are read through, or\n   * `null` at the organization level, where each contact's own primary\n   * holder is read instead (`contactPrimaryGroup`, from {@link org}).\n   */\n  groupId: string | null\n  /** The org document, for the per-contact holder when {@link groupId} is null. */\n  org: Record<string, unknown> | null\n  period: CrmReportPeriod\n  range: CrmReportRange\n  /** The moment the period was anchored at, so every card shares one clock. */\n  nowMs: number\n  routes: CrmRoutes\n}\n\n/**\n * What every remembered report answer is keyed by: the org, the reader's\n * tokens, the holder's facet and the period — never the clock. A reopened\n * section anchors a new `nowMs`, and the whole point of remembering is that\n * the reopening is the same question; the TTL, not the key, decides when the\n * answer has aged out. `cardKey` names the read within the card so that two\n * counts on one card do not overwrite each other.\n */\nexport function reportCacheKey(\n  report: Pick<CrmReportScope, 'scope' | 'tokens' | 'groupId' | 'period'>,\n  cardKey: string,\n): string {\n  return `${reportCachePrefix(report)}${report.period}|${cardKey}`\n}\n\n/** Everything one reader's reports of one org are remembered under — what Refresh forgets. */\nexport function reportCachePrefix(\n  report: Pick<CrmReportScope, 'scope' | 'tokens' | 'groupId'>,\n): string {\n  // `*` for the org level's \"every token\" and \"every holder\": a real token\n  // list never contains it, so the two levels cannot share an answer.\n  const tokens = report.tokens ? [...report.tokens].sort().join(',') : '*'\n  return `crm-report|${report.scope[1]}|${tokens}|${report.groupId ?? '*'}|`\n}\n\n/** One CRM collection under the report's org. */\nexport function scopedCollection(\n  firestore: Firestore,\n  scope: CrmReportScope['scope'],\n  name: string,\n): CollectionReference {\n  return collection(firestore, scope[0], scope[1], name)\n}\n\n/**\n * The visibility predicate, as the clause every report query starts with —\n * spread into the query, because at the organization level it is NOTHING.\n *\n * A function rather than a convention so that a card cannot forget it: a\n * query on a CRM collection without it is permission-denied rather than a\n * leak, per the rules, but a denied aggregate renders as a dash and a\n * missing clause would be diagnosed as \"the count is broken\" rather than as\n * what it is. The org level (AGL-2630) drops it on purpose: the rules admit\n * an org-wide member to every row, and a report there is a total over\n * every site.\n */\nexport function visibleToClause(\n  tokens: readonly string[] | null,\n): QueryConstraint[] {\n  return tokens ? [where('visibleTo', 'array-contains-any', [...tokens])] : []\n}\n"],"names":["collection","where","reportCacheKey","report","cardKey","reportCachePrefix","period","tokens","sort","join","scope","groupId","scopedCollection","firestore","name","visibleToClause"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAGD,SACEA,UAAU,EAIVC,KAAK,QACA,qBAAoB;AAwC3B;;;;;;;CAOC,GACD,OAAO,SAASC,eACdC,MAAuE,EACvEC,OAAe;IAEf,OAAO,GAAGC,kBAAkBF,UAAUA,OAAOG,MAAM,CAAC,CAAC,EAAEF,SAAS;AAClE;AAEA,4FAA4F,GAC5F,OAAO,SAASC,kBACdF,MAA4D;QAKVA;IAHlD,yEAAyE;IACzE,oEAAoE;IACpE,MAAMI,SAASJ,OAAOI,MAAM,GAAG;WAAIJ,OAAOI,MAAM;KAAC,CAACC,IAAI,GAAGC,IAAI,CAAC,OAAO;IACrE,OAAO,CAAC,WAAW,EAAEN,OAAOO,KAAK,CAAC,EAAE,CAAC,CAAC,EAAEH,OAAO,CAAC,GAAEJ,kBAAAA,OAAOQ,OAAO,YAAdR,kBAAkB,IAAI,CAAC,CAAC;AAC5E;AAEA,+CAA+C,GAC/C,OAAO,SAASS,iBACdC,SAAoB,EACpBH,KAA8B,EAC9BI,IAAY;IAEZ,OAAOd,WAAWa,WAAWH,KAAK,CAAC,EAAE,EAAEA,KAAK,CAAC,EAAE,EAAEI;AACnD;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,gBACdR,MAAgC;IAEhC,OAAOA,SAAS;QAACN,MAAM,aAAa,sBAAsB;eAAIM;SAAO;KAAE,GAAG,EAAE;AAC9E"}

package/src/lib/components/reports/report-stat-tile.d.ts

@@ -0,0 +1,47 @@
+export interface ReportStatTileProps {
+    /** Caption above the figure, e.g. `New contacts`. */
+    label: string;
+    /**
+     * The figure, already formatted, or `null` when it has not been measured —
+     * the read is pending or was refused. `null` draws a dash, never a zero.
+     */
+    value: string | null;
+    /**
+     * Change against the previous period, in percent, or `null` when there is
+     * no baseline. `null` renders NOTHING — see below.
+     */
+    deltaPct?: number | null;
+    /** What the delta is measured against, for the tooltip. */
+    deltaCaption?: string;
+    /** A line under the figure naming what it counts. */
+    note?: string;
+    /** Whether a rise is good. A rise in overdue tasks is not. */
+    riseIsGood?: boolean;
+    /** Where the figure leads — the list it summarizes. */
+    href?: string;
+    /** Paints the figure, e.g. `error.main` for an overdue count above zero. */
+    color?: string;
+}
+/**
+ * One report figure with an optional period-over-period delta, the shape
+ * the commerce stat tile draws revenue in.
+ *
+ * Two rules carried over from there and from the shared `Figure`:
+ *
+ *  - **A `null` value draws a dash, not a zero.** A count that has not
+ *    arrived, or that the server refused, is not zero of anything, and a
+ *    zero would be read as a measurement.
+ *  - **A `null` delta renders nothing — not `+0%`, not `—`.** The delta is
+ *    `null` exactly when the previous period held nothing, and every way of
+ *    drawing that is a lie: `+100%` reads as growth, `+0%` reads as flat,
+ *    and a dash reads as "we could not work it out". A first contact has no
+ *    growth rate.
+ *
+ * The tile links to the list it summarizes when it can, because a figure
+ * a reader cannot open is a figure they cannot check.
+ */
+export declare function ReportStatTile(props: ReportStatTileProps): import("react").JSX.Element;
+export declare namespace ReportStatTile {
+    var displayName: string;
+}
+export default ReportStatTile;

package/src/lib/components/reports/report-stat-tile.js

@@ -0,0 +1,96 @@
+/**
+ * @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 { AppLink } from "@aglyn/shared-ui-jsx";
+import { Stack, Tooltip, Typography } from "@mui/material";
+/**
+ * One report figure with an optional period-over-period delta, the shape
+ * the commerce stat tile draws revenue in.
+ *
+ * Two rules carried over from there and from the shared `Figure`:
+ *
+ *  - **A `null` value draws a dash, not a zero.** A count that has not
+ *    arrived, or that the server refused, is not zero of anything, and a
+ *    zero would be read as a measurement.
+ *  - **A `null` delta renders nothing — not `+0%`, not `—`.** The delta is
+ *    `null` exactly when the previous period held nothing, and every way of
+ *    drawing that is a lie: `+100%` reads as growth, `+0%` reads as flat,
+ *    and a dash reads as "we could not work it out". A first contact has no
+ *    growth rate.
+ *
+ * The tile links to the list it summarizes when it can, because a figure
+ * a reader cannot open is a figure they cannot check.
+ */ export function ReportStatTile(props) {
+    const { label, value, deltaPct = null, deltaCaption = 'vs the previous period', note, riseIsGood = true, href, color } = props;
+    const rose = (deltaPct != null ? deltaPct : 0) > 0;
+    const flat = deltaPct === 0;
+    const deltaColor = flat ? 'text.secondary' : rose === riseIsGood ? 'success.main' : 'error.main';
+    const figure = /*#__PURE__*/ _jsx(Typography, {
+        variant: "h6",
+        sx: color ? {
+            color
+        } : undefined,
+        children: value === null ? '—' : value
+    });
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            minWidth: 120
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 0.75,
+                sx: {
+                    alignItems: 'baseline'
+                },
+                children: [
+                    href ? /*#__PURE__*/ _jsx(AppLink, {
+                        href: href,
+                        underline: "hover",
+                        color: "inherit",
+                        children: figure
+                    }) : figure,
+                    deltaPct === null || value === null ? null : /*#__PURE__*/ _jsx(Tooltip, {
+                        title: deltaCaption,
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            sx: {
+                                color: deltaColor,
+                                fontWeight: 'fontWeightMedium'
+                            },
+                            children: `${deltaPct > 0 ? '+' : ''}${deltaPct}%`
+                        })
+                    })
+                ]
+            }),
+            note ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: value === null ? 'not measured yet' : note
+            }) : null
+        ]
+    });
+}
+ReportStatTile.displayName = 'ReportStatTile';
+export default ReportStatTile;
+
+//# sourceMappingURL=report-stat-tile.js.map

package/src/lib/components/reports/report-stat-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/crm/src/lib/components/reports/report-stat-tile.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 { AppLink } from '@aglyn/shared-ui-jsx'\nimport { Stack, Tooltip, Typography } from '@mui/material'\n\nexport interface ReportStatTileProps {\n  /** Caption above the figure, e.g. `New contacts`. */\n  label: string\n  /**\n   * The figure, already formatted, or `null` when it has not been measured —\n   * the read is pending or was refused. `null` draws a dash, never a zero.\n   */\n  value: string | null\n  /**\n   * Change against the previous period, in percent, or `null` when there is\n   * no baseline. `null` renders NOTHING — see below.\n   */\n  deltaPct?: number | null\n  /** What the delta is measured against, for the tooltip. */\n  deltaCaption?: string\n  /** A line under the figure naming what it counts. */\n  note?: string\n  /** Whether a rise is good. A rise in overdue tasks is not. */\n  riseIsGood?: boolean\n  /** Where the figure leads — the list it summarizes. */\n  href?: string\n  /** Paints the figure, e.g. `error.main` for an overdue count above zero. */\n  color?: string\n}\n\n/**\n * One report figure with an optional period-over-period delta, the shape\n * the commerce stat tile draws revenue in.\n *\n * Two rules carried over from there and from the shared `Figure`:\n *\n *  - **A `null` value draws a dash, not a zero.** A count that has not\n *    arrived, or that the server refused, is not zero of anything, and a\n *    zero would be read as a measurement.\n *  - **A `null` delta renders nothing — not `+0%`, not `—`.** The delta is\n *    `null` exactly when the previous period held nothing, and every way of\n *    drawing that is a lie: `+100%` reads as growth, `+0%` reads as flat,\n *    and a dash reads as \"we could not work it out\". A first contact has no\n *    growth rate.\n *\n * The tile links to the list it summarizes when it can, because a figure\n * a reader cannot open is a figure they cannot check.\n */\nexport function ReportStatTile(props: ReportStatTileProps) {\n  const {\n    label,\n    value,\n    deltaPct = null,\n    deltaCaption = 'vs the previous period',\n    note,\n    riseIsGood = true,\n    href,\n    color,\n  } = props\n  const rose = (deltaPct ?? 0) > 0\n  const flat = deltaPct === 0\n  const deltaColor = flat\n    ? 'text.secondary'\n    : rose === riseIsGood\n      ? 'success.main'\n      : 'error.main'\n  const figure = (\n    <Typography variant=\"h6\" sx={color ? { color } : undefined}>\n      {value === null ? '—' : value}\n    </Typography>\n  )\n  return (\n    <Stack sx={{ minWidth: 120 }}>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {label}\n      </Typography>\n      <Stack direction=\"row\" spacing={0.75} sx={{ alignItems: 'baseline' }}>\n        {href ? (\n          <AppLink href={href} underline=\"hover\" color=\"inherit\">\n            {figure}\n          </AppLink>\n        ) : (\n          figure\n        )}\n        {deltaPct === null || value === null ? null : (\n          <Tooltip title={deltaCaption}>\n            <Typography\n              variant=\"caption\"\n              sx={{ color: deltaColor, fontWeight: 'fontWeightMedium' }}\n            >\n              {`${deltaPct > 0 ? '+' : ''}${deltaPct}%`}\n            </Typography>\n          </Tooltip>\n        )}\n      </Stack>\n      {note ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {value === null ? 'not measured yet' : note}\n        </Typography>\n      ) : null}\n    </Stack>\n  )\n}\nReportStatTile.displayName = 'ReportStatTile'\n\nexport default ReportStatTile\n"],"names":["AppLink","Stack","Tooltip","Typography","ReportStatTile","props","label","value","deltaPct","deltaCaption","note","riseIsGood","href","color","rose","flat","deltaColor","figure","variant","sx","undefined","minWidth","direction","spacing","alignItems","underline","title","fontWeight","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,OAAO,QAAQ,uBAAsB;AAC9C,SAASC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAe;AA2B1D;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,KAAK,EACLC,KAAK,EACLC,WAAW,IAAI,EACfC,eAAe,wBAAwB,EACvCC,IAAI,EACJC,aAAa,IAAI,EACjBC,IAAI,EACJC,KAAK,EACN,GAAGR;IACJ,MAAMS,OAAO,CAACN,mBAAAA,WAAY,KAAK;IAC/B,MAAMO,OAAOP,aAAa;IAC1B,MAAMQ,aAAaD,OACf,mBACAD,SAASH,aACP,iBACA;IACN,MAAMM,uBACJ,KAACd;QAAWe,SAAQ;QAAKC,IAAIN,QAAQ;YAAEA;QAAM,IAAIO;kBAC9Cb,UAAU,OAAO,MAAMA;;IAG5B,qBACE,MAACN;QAAMkB,IAAI;YAAEE,UAAU;QAAI;;0BACzB,KAAClB;gBAAWe,SAAQ;gBAAUL,OAAM;0BACjCP;;0BAEH,MAACL;gBAAMqB,WAAU;gBAAMC,SAAS;gBAAMJ,IAAI;oBAAEK,YAAY;gBAAW;;oBAChEZ,qBACC,KAACZ;wBAAQY,MAAMA;wBAAMa,WAAU;wBAAQZ,OAAM;kCAC1CI;yBAGHA;oBAEDT,aAAa,QAAQD,UAAU,OAAO,qBACrC,KAACL;wBAAQwB,OAAOjB;kCACd,cAAA,KAACN;4BACCe,SAAQ;4BACRC,IAAI;gCAAEN,OAAOG;gCAAYW,YAAY;4BAAmB;sCAEvD,GAAGnB,WAAW,IAAI,MAAM,KAAKA,SAAS,CAAC,CAAC;;;;;YAKhDE,qBACC,KAACP;gBAAWe,SAAQ;gBAAUL,OAAM;0BACjCN,UAAU,OAAO,qBAAqBG;iBAEvC;;;AAGV;AACAN,eAAewB,WAAW,GAAG;AAE7B,eAAexB,eAAc"}