@aglyn/plugins-marketing 1.0.0-beta.143

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

@@ -0,0 +1,667 @@
+/**
+ * @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 { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PageHeaderRecord, pluginDocsHelp } from "@aglyn/aglyn";
+import { AppLink, CardDisplay } from "@aglyn/shared-ui-jsx";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { Alert, Box, Button, Chip, Divider, Stack, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import { doc } from "firebase/firestore";
+import { useFirestore, useFirestoreDoc } from "@aglyn/tenant-feature-instance";
+import { campaignLinkReport, campaignReport } from "@aglyn/shared-ui-email-campaigns/model/campaign-report";
+import { campaignRevenueReport } from "@aglyn/shared-ui-email-campaigns/model/campaign-revenue";
+import { campaignConversionsReport } from "@aglyn/shared-ui-email-campaigns/model/campaign-conversions";
+/*
+ * The three renderers every email report shares. Imported rather than kept
+ * here, so "a rate prints its denominator" is one implementation and not a
+ * convention each new card has to remember.
+ */ import { Figure, MoneyFigure, MoneyPerMessageRow, percent, RateRow, Section } from "@aglyn/shared-ui-email-campaigns/components/report-figures";
+import { emailSendTimeMs } from "@aglyn/shared-ui-email-campaigns/model/email-record";
+import { campaignSendDisplay, campaignSendProgress } from "@aglyn/shared-ui-email-campaigns/model/campaign-container";
+import { useEmailsHubPath } from "./use-emails-hub-path.js";
+/**
+ * The help affordance, hoisted so BOTH headers carry it.
+ *
+ * The unreadable-campaign branch below renders its own `CardDisplay`, and a
+ * header without help is a header a reader has no way out of — which is
+ * exactly the state that branch describes.
+ */ const reportDocsHelp = pluginDocsHelp('emailCampaigns', {
+    anchor: '#the-campaign-report',
+    excerpt: 'What one campaign did: delivery, opens, clicks, bounces, complaints, ' + 'unsubscribes and the revenue it was credited with, each with the ' + 'population it is measured against.'
+});
+/**
+ * ONE CAMPAIGN, MEASURED — and every denominator on screen.
+ *
+ * ## What was missing
+ *
+ * Opens and clicks have been recorded on the campaign document since AGL-268
+ * and displayed as two words in a history row: `12 opens · 3 clicks`. Nothing
+ * anywhere showed a rate, a delivery count, a bounce, a complaint or an
+ * unsubscribe, and the populations the send itself measured — how large the
+ * audience was, how many the consent rule refused, how many were already
+ * suppressed — were computed on every send and written nowhere.
+ *
+ * ## The rule this screen is built around
+ *
+ * **Every rate names its denominator, in the same breath as the number.**
+ *
+ * That is not decoration. An open rate over `sent` and an open rate over
+ * `delivered` are different numbers that share a label, and the difference
+ * between them is exactly the mail that bounced — so a report that showed one
+ * while the reader assumed the other would be wrong by however bad the
+ * address list is, which is the case where being wrong matters most. Worse,
+ * "click rate" is used in the wild for two unrelated quantities — clicks over
+ * delivered, and clicks over openers — and they differ by a factor of three
+ * or four on ordinary mail.
+ *
+ * So the arithmetic is not done here at all. `campaign-report.ts` returns
+ * each rate as a triple carrying `denominatorLabel`, this file renders that
+ * label, and a rate whose denominator is zero or unrecorded comes back `null`
+ * and is drawn as "—" with a caveat naming the reason. There is no path
+ * through this component that prints a percentage without saying what it is a
+ * percentage of.
+ *
+ * ## What the page is about comes before how the mail did
+ *
+ * A campaign of one email is the ordinary shape, and this card is the page it
+ * gets: the URL names a send, so there is no container above it and no list of
+ * emails to draw. That collapse is honest, but it decided what the page was
+ * ABOUT — delivery, engagement and rates are mechanics of a message, and a
+ * page that led with them at length read as a mail report wearing the word
+ * campaign.
+ *
+ * So the outcomes lead: what it caused, what it earned, where it sent people.
+ * Two of those headings are the ones `campaign-reach-sections.tsx` puts at the
+ * top of a campaign holding SEVERAL emails, and they are the same words here
+ * deliberately — a merchant who opens a campaign of one and a campaign of six
+ * is asking the same question and should not have to learn two vocabularies to
+ * find the answer. The email's own figures follow, under a row that names the
+ * message they belong to.
+ *
+ * Nothing about the reads changed with the order. The conversions, revenue and
+ * destination figures were already on this page and already came from the four
+ * documents below; they were simply underneath the mail.
+ *
+ * ## Three documents, whatever the campaign's size
+ *
+ * The whole screen is one campaign document plus one link-rollup document
+ * plus one revenue-rollup document. All three are single-document listens, so
+ * the cost does not move with the audience — a report over a 50,000-recipient
+ * send reads the same three documents as one over ten. Aggregating the
+ * per-recipient delivery log on mount would have been the obvious
+ * implementation and would have read one document per recipient, every time
+ * anybody opened the page; joining orders to campaigns at read time would
+ * have been the same mistake one collection along, which is why the join is
+ * done once at the sale and stored.
+ *
+ * ## No per-recipient view here, deliberately
+ *
+ * Every number on this screen is an aggregate that carries no address, and
+ * that is what makes it three single-document reads. A per-recipient list is a
+ * different read and a different question, so it lives where it is asked:
+ * the design report's recipients table, which resolves the campaigns from the
+ * design on a server that has already checked the reader's site role, and
+ * returns only rows tagged with that site.
+ *
+ * The other per-recipient view — the staff delivery log on the user detail
+ * page — spans every site on the install and is behind a staff claim that
+ * records who looked. Neither reaches this card: adding a recipient list here
+ * would put an unbounded read behind a widget whose whole cost model is that
+ * it has none.
+ */ export function CampaignReportCard(props) {
+    var _ref;
+    const { hostId, campaignId, basePath } = props;
+    // The sibling hub: the message's own page belongs to the Emails console.
+    const emailsHub = useEmailsHubPath();
+    const firestore = useFirestore();
+    const { data: campaign } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'campaigns', campaignId), [
+        firestore,
+        hostId,
+        campaignId
+    ]);
+    /*
+   * The link rollup, its own document rather than a field on the campaign.
+   *
+   * A map of destinations grows with the campaign's content and a campaign
+   * document is read by the history list, the glance widget and the send
+   * path; putting an unbounded map on it would make every one of those reads
+   * larger. Split, the rollup is read by exactly the screen that renders it.
+   */ const { data: links } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'campaigns', campaignId, 'reports', 'links'), [
+        firestore,
+        hostId,
+        campaignId
+    ]);
+    /*
+   * The revenue rollup, a third single-document listen.
+   *
+   * Its own document beside the link rollup rather than a field on the
+   * campaign, for the reason the link rollup is: the campaign document is
+   * read by the history list, the glance widget and the send path, and a map
+   * that grows with the campaign's sales would enlarge every one of those
+   * reads. The cost model in this file's header is unchanged in the way that
+   * matters — the page still reads a fixed number of documents whatever the
+   * audience, and no per-order or per-recipient read exists anywhere on it.
+   */ const { data: revenue } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'campaigns', campaignId, 'reports', 'revenue'), [
+        firestore,
+        hostId,
+        campaignId
+    ]);
+    /*
+   * The conversions rollup, a fourth single-document listen.
+   *
+   * Beside `reports/revenue` and read the same way, because it is the same
+   * join answering the other half of the question: revenue is what a campaign
+   * EARNED from people who named themselves at checkout, and this is what it
+   * CAUSED among people who were anonymous until the moment they submitted,
+   * signed up or booked. The cost model in this file's header is unchanged in
+   * the way that matters — a fixed number of documents whatever the audience,
+   * and no per-conversion read anywhere on the page.
+   */ const { data: conversions } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'campaigns', campaignId, 'reports', 'conversions'), [
+        firestore,
+        hostId,
+        campaignId
+    ]);
+    const report = campaignReport(campaign == null ? void 0 : campaign.stats);
+    const linkReport = campaignLinkReport(links);
+    const revenueReport = campaignRevenueReport({
+        rollup: revenue,
+        /*
+     * The DENOMINATOR, handed over from the same document read at the same
+     * instant rather than re-read here. `report.delivered` is `null` when no
+     * delivery event was ever recorded, and it is passed as `null` so the
+     * revenue figures over it are withheld for exactly the reason every other
+     * rate over it is.
+     */ delivered: report.delivered,
+        midFlight: campaign ? campaignSendProgress(campaign).state === 'sending' : false
+    });
+    /*
+   * No denominator is handed in, unlike the revenue report. A conversion RATE
+   * over delivered messages would repeat the defect the revenue section
+   * refuses for orders — one visitor can submit two forms, so the quotient
+   * passes 100% without anything being wrong — and counting distinct people
+   * instead needs a document per person per campaign, which is the
+   * per-recipient read this screen's cost model exists to refuse.
+   */ const conversionsReport = campaignConversionsReport({
+        rollup: conversions
+    });
+    const subject = String((_ref = campaign == null ? void 0 : campaign.subject) != null ? _ref : 'Campaign');
+    const sendTimeMs = campaign ? emailSendTimeMs(campaign) : 0;
+    const backButton = /*#__PURE__*/ _jsx(Button, _extends({
+        component: AppLink
+    }, {
+        componentVariant: 'naked',
+        nativeButton: false
+    }, {
+        href: `${basePath}/campaigns`,
+        size: "small",
+        color: "primary",
+        children: 'All campaigns'
+    }));
+    if (!campaign) {
+        return /*#__PURE__*/ _jsx(CardDisplay, {
+            header: 'Campaign report',
+            help: reportDocsHelp,
+            contentGutterX: true,
+            contentGutterY: true,
+            HeaderProps: {
+                action: backButton
+            },
+            children: /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'This campaign could not be loaded. It may have been deleted.'
+            })
+        });
+    }
+    /* The card, named so the page chrome above it is a plain list of
+     what this surface publishes upward. */ const card = /*#__PURE__*/ _jsx(CardDisplay, {
+        header: 'Campaign report',
+        help: reportDocsHelp,
+        contentGutterX: true,
+        contentGutterY: true,
+        HeaderProps: {
+            action: backButton
+        },
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 3,
+            children: [
+                report.caveats.map((caveat)=>/*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        children: caveat.message
+                    }, caveat.id)),
+                /*#__PURE__*/ _jsxs(Section, {
+                    title: "What it caused",
+                    children: [
+                        conversionsReport.caveats.map((caveat)=>/*#__PURE__*/ _jsx(Alert, {
+                                severity: "info",
+                                children: caveat.message
+                            }, caveat.id)),
+                        conversionsReport.any ? /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(Stack, {
+                                    direction: "row",
+                                    spacing: 4,
+                                    useFlexGap: true,
+                                    sx: {
+                                        flexWrap: 'wrap'
+                                    },
+                                    children: conversionsReport.kinds.map((entry)=>/*#__PURE__*/ _jsx(Figure, {
+                                            label: entry.label,
+                                            value: entry.value,
+                                            note: entry.note
+                                        }, entry.kind))
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: `Credited ${conversionsReport.model === 'last-click' ? 'to the last campaign whose link the visitor clicked' : `under the ${conversionsReport.model} model`}, ` + `within ${conversionsReport.windowDays} days of that click. ` + 'Somebody who converted without ever following a campaign ' + 'link is credited to no campaign at all — nothing is ' + 'inferred from a referrer — so these are a floor rather ' + 'than everything this campaign influenced. The ones ' + 'credited to nobody are counted under Conversions in the ' + 'marketing console.'
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    children: /*#__PURE__*/ _jsx(Button, _extends({
+                                        component: AppLink
+                                    }, {
+                                        componentVariant: 'naked',
+                                        nativeButton: false
+                                    }, {
+                                        href: `${basePath}/conversions/${campaignId}`,
+                                        size: "small",
+                                        color: "primary",
+                                        children: 'See these conversions'
+                                    }))
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: conversionsReport.recorded ? 'Nothing has been credited to this campaign yet.' : 'No conversions have been attributed to this campaign. A ' + 'form submission, lead, contact or booking is credited to ' + 'the last campaign whose link the visitor clicked, within ' + `${conversionsReport.windowDays} days — a campaign sent ` + 'before that was recorded will never show a figure here.'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Divider, {}),
+                /*#__PURE__*/ _jsxs(Section, {
+                    title: "Revenue",
+                    children: [
+                        revenueReport.caveats.map((caveat)=>/*#__PURE__*/ _jsx(Alert, {
+                                severity: "info",
+                                children: caveat.message
+                            }, caveat.id)),
+                        revenueReport.currencies.length ? /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 3,
+                            children: [
+                                revenueReport.currencies.map((entry)=>/*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 1,
+                                        children: [
+                                            revenueReport.multiCurrency ? /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "subtitle2",
+                                                children: entry.currency.toUpperCase()
+                                            }) : null,
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                direction: "row",
+                                                spacing: 4,
+                                                useFlexGap: true,
+                                                sx: {
+                                                    flexWrap: 'wrap'
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(MoneyFigure, {
+                                                        label: "Net revenue",
+                                                        cents: entry.netCents,
+                                                        currency: entry.currency,
+                                                        note: "after refunds"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(MoneyFigure, {
+                                                        label: "Gross revenue",
+                                                        cents: entry.grossCents,
+                                                        currency: entry.currency,
+                                                        note: "as charged"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(MoneyFigure, {
+                                                        label: "Refunded",
+                                                        cents: entry.refundedCents,
+                                                        currency: entry.currency,
+                                                        note: "handed back"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Figure, {
+                                                        label: "Orders",
+                                                        value: entry.orders,
+                                                        note: "credited to this campaign"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Figure, {
+                                                        label: "Fully refunded",
+                                                        value: entry.refundedOrders,
+                                                        note: "of those orders"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(MoneyPerMessageRow, {
+                                                label: "Net revenue per delivered message",
+                                                figure: entry.netPerDelivered
+                                            })
+                                        ]
+                                    }, entry.currency)),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: `Credited ${revenueReport.model === 'last-click' ? 'to the last campaign whose link the buyer clicked' : `under the ${revenueReport.model} model`}, ` + `within ${revenueReport.windowDays} days of that click. ` + 'Clicks only — an open is not treated as evidence that ' + 'anybody read the email. An order placed by somebody who ' + 'never clicked, or who checked out without giving an ' + 'address, is credited to no campaign, so this is a floor ' + 'rather than every sale this campaign influenced.'
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: revenueReport.recorded ? 'No orders have been credited to this campaign.' : 'No revenue has been attributed to this campaign. Orders ' + 'are credited to the last campaign whose link the buyer ' + `clicked, within ${revenueReport.windowDays} days — a ` + 'campaign sent before that was recorded, or one on a site ' + 'with no store, will never show a figure here.'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Divider, {}),
+                /*#__PURE__*/ _jsxs(Section, {
+                    title: "Where it sent people",
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: 'The pages this campaign’s links were followed to.'
+                        }),
+                        linkReport.rows.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsxs(ScrollTable, {
+                                    size: "small",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TableHead, {
+                                            children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: 'Destination'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: 'Clicks'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: 'Share'
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableBody, {
+                                            children: linkReport.rows.map((row)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            sx: {
+                                                                wordBreak: 'break-all'
+                                                            },
+                                                            children: row.url
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            sx: {
+                                                                fontWeight: 'bold'
+                                                            },
+                                                            children: row.clicks.toLocaleString()
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: row.share ? `${percent(row.share.value)} of ${row.share.denominator.toLocaleString()} ${row.share.denominatorLabel}` : '—'
+                                                        })
+                                                    ]
+                                                }, row.url))
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: 'Counted by address and path — query strings are dropped, so ' + 'two links to the same page with different tracking ' + 'parameters count as one row.'
+                                }),
+                                linkReport.unattributedClicks ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: `${linkReport.unattributedClicks.toLocaleString()} clicks ` + 'arrived without a destination and are not in this table.'
+                                }) : null,
+                                linkReport.overflowClicks ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "info",
+                                    children: `This campaign has more distinct destinations than the ` + `rollup keeps. ${linkReport.overflowClicks.toLocaleString()} ` + 'clicks landed on links past that limit and are counted ' + 'in the click total above but not in this table.'
+                                }) : null
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: report.clicks ? 'Clicks were recorded for this campaign, but none of them ' + 'carried a destination, so there is nothing to break down ' + 'by link.' : 'No link clicks have been recorded for this campaign.'
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Divider, {}),
+                /*#__PURE__*/ _jsx(Section, {
+                    title: "The email in this campaign",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 1,
+                        children: [
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                useFlexGap: true,
+                                sx: {
+                                    alignItems: 'center',
+                                    flexWrap: 'wrap'
+                                },
+                                children: [
+                                    emailsHub ? /*#__PURE__*/ _jsx(AppLink, {
+                                        href: `${emailsHub}/messages/${campaignId}`,
+                                        children: subject
+                                    }) : /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        children: subject
+                                    }),
+                                    /*#__PURE__*/ _jsx(Chip, {
+                                        size: "small",
+                                        label: campaignSendDisplay(campaign).label
+                                    }),
+                                    /*#__PURE__*/ _jsx(Chip, {
+                                        size: "small",
+                                        variant: "outlined",
+                                        label: "Single send",
+                                        title: 'One email, sent on its own rather than as part of a ' + 'campaign of several. Its report and its unsubscribe links ' + 'are unchanged.'
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: "text.secondary",
+                                        children: sendTimeMs ? new Date(sendTimeMs).toLocaleString() : 'not recorded'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: 'This campaign is one email, so the sections above are what ' + 'that one email caused. What follows is the mail itself — ' + 'how it was delivered and how it was read. Open the message ' + 'for its body and the people it reached.'
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Divider, {}),
+                /*#__PURE__*/ _jsx(Section, {
+                    title: "Delivery",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 4,
+                        useFlexGap: true,
+                        sx: {
+                            flexWrap: 'wrap'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Addressed",
+                                value: report.recipients,
+                                note: "after the per-send cap"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Sent",
+                                value: report.sent,
+                                note: "accepted by the provider"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Delivered",
+                                value: report.delivered,
+                                note: "accepted by the receiving server"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Bounced",
+                                value: report.bounced,
+                                note: "of sent"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Marked as spam",
+                                value: report.complained,
+                                note: "of delivered"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Divider, {}),
+                /*#__PURE__*/ _jsx(Section, {
+                    title: "Engagement",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 4,
+                        useFlexGap: true,
+                        sx: {
+                            flexWrap: 'wrap'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Opens",
+                                value: report.opens,
+                                note: "every open, repeats included"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Readers who opened",
+                                value: report.uniqueOpens,
+                                note: "distinct recipients"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Clicks",
+                                value: report.clicks,
+                                note: "every click, repeats included"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Readers who clicked",
+                                value: report.uniqueClicks,
+                                note: "distinct recipients"
+                            }),
+                            /*#__PURE__*/ _jsx(Figure, {
+                                label: "Unsubscribed",
+                                value: report.unsubscribes,
+                                note: "through this campaign's link"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Divider, {}),
+                /*#__PURE__*/ _jsx(Section, {
+                    title: "Rates",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Delivery rate",
+                                rate: report.rates.delivery
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Open rate",
+                                rate: report.rates.open
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Click rate",
+                                rate: report.rates.click
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Click-to-open rate",
+                                rate: report.rates.clickToOpen
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Bounce rate",
+                                rate: report.rates.bounce
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Complaint rate",
+                                rate: report.rates.complaint
+                            }),
+                            /*#__PURE__*/ _jsx(RateRow, {
+                                label: "Unsubscribe rate",
+                                rate: report.rates.unsubscribe
+                            })
+                        ]
+                    })
+                }),
+                report.populations.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        /*#__PURE__*/ _jsxs(Section, {
+                            title: "Who this went to",
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: 'Measured when this campaign was sent, and stored as it was ' + 'then. These figures describe the send, not the audience ' + 'as it stands today.'
+                                }),
+                                /*#__PURE__*/ _jsx(ScrollTable, {
+                                    size: "small",
+                                    children: /*#__PURE__*/ _jsx(TableBody, {
+                                        children: report.populations.map((population)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: population.label
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        sx: {
+                                                            fontWeight: 'bold'
+                                                        },
+                                                        children: population.count.toLocaleString()
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "caption",
+                                                            color: "text.secondary",
+                                                            children: `of ${population.of.toLocaleString()} ${population.ofLabel}`
+                                                        })
+                                                    })
+                                                ]
+                                            }, population.id))
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }) : null
+            ]
+        })
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(PageHeaderRecord, {
+                title: campaign ? String(campaign.subject || '') || campaignId : undefined
+            }),
+            card
+        ]
+    });
+}
+CampaignReportCard.displayName = 'CampaignReportCard';
+export default CampaignReportCard;
+
+//# sourceMappingURL=campaign-report-card.js.map