@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/reports/Reports.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import { emailReport, errorMessage, growthReport, listPipelines, salesReport } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import { percent } from "../campaigns/campaignUi.js";
+import { ColumnChart, LineChart, VIZ_STYLE } from "./Charts.js";
+/** The report periods offered, in days. */
+export const PERIODS = [7, 30, 90, 365];
+/** A headline number, with what it is of beneath. */
+function Stat({ label, value, detail }) {
+    return (_jsxs("div", { className: "border border-border rounded-sm p-3", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-text-muted", children: label }), _jsx("div", { className: "text-xl font-bold", children: value }), detail && _jsx("div", { className: "text-xs text-text-muted", children: detail })] }));
+}
+const count = (value) => value.toLocaleString();
+/**
+ * The workspace's reports over a period: email performance by day (sent, opened, clicked) with its rates and the recipient domains
+ * mailed most; audience growth (new contacts, subscribes and unsubscribes) with each list's subscribers; and sales (deals won by
+ * value, what is open, the win rate) for all pipelines or one. Days are UTC days.
+ */
+export default function Reports() {
+    const { workspace } = useCrm();
+    const [days, setDays] = useState(30);
+    const [pipelineUid, setPipelineUid] = useState("");
+    const [pipelines, setPipelines] = useState([]);
+    const [email, setEmail] = useState(null);
+    const [growth, setGrowth] = useState(null);
+    const [sales, setSales] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        listPipelines(workspace.uid).then(setPipelines, () => setPipelines([]));
+    }, [workspace.uid]);
+    useEffect(() => {
+        let current = true;
+        setError(null);
+        Promise.all([emailReport(workspace.uid, days), growthReport(workspace.uid, days), salesReport(workspace.uid, days, pipelineUid || undefined)]).then(([nextEmail, nextGrowth, nextSales]) => {
+            if (current) {
+                setEmail(nextEmail);
+                setGrowth(nextGrowth);
+                setSales(nextSales);
+            }
+        }, (err) => current && setError(errorMessage(err, "Could not load the reports.")));
+        return () => {
+            current = false;
+        };
+    }, [workspace.uid, days, pipelineUid]);
+    const dates = email?.days.map((day) => day.date) ?? [];
+    const closed = sales ? sales.won.count + sales.lost : 0;
+    return (_jsxs("div", { children: [_jsx("style", { children: VIZ_STYLE }), _jsxs("div", { className: "flex items-center gap-3 mb-4 flex-wrap", children: [_jsx("h1", { className: "text-xl font-bold mr-auto", children: "Reports" }), _jsxs("label", { className: "text-sm flex items-center gap-2", children: ["Period", _jsx("select", { className: INPUT_CLASS, value: days, onChange: (event) => setDays(Number(event.target.value)), children: PERIODS.map((period) => (_jsxs("option", { value: period, children: ["Last ", period, " days"] }, period))) })] }), _jsxs("label", { className: "text-sm flex items-center gap-2", children: ["Pipeline", _jsxs("select", { className: INPUT_CLASS, value: pipelineUid, onChange: (event) => setPipelineUid(event.target.value), children: [_jsx("option", { value: "", children: "All pipelines" }), pipelines.map((pipeline) => (_jsx("option", { value: pipeline.uid, children: pipeline.name }, pipeline.uid)))] })] })] }), error && _jsx(Alert, { children: error }), !error && !email && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }), email && growth && sales && (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("section", { "aria-labelledby": "crm-report-email", children: [_jsx("h2", { id: "crm-report-email", className: "text-lg font-semibold mb-3", children: "Email" }), _jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4", children: [_jsx(Stat, { label: "Sent", value: count(email.totals.sent) }), _jsx(Stat, { label: "Open rate", value: percent(email.totals.opened, email.totals.sent), detail: `${count(email.totals.opened)} opened` }), _jsx(Stat, { label: "Click rate", value: percent(email.totals.clicked, email.totals.sent), detail: `${count(email.totals.clicked)} clicked` }), _jsx(Stat, { label: "Reply rate", value: percent(email.totals.replied, email.totals.sent), detail: `${count(email.totals.replied)} replied` }), _jsx(Stat, { label: "Bounce rate", value: percent(email.totals.bounced, email.totals.sent), detail: `${count(email.totals.bounced)} bounced` }), _jsx(Stat, { label: "Unsubscribe rate", value: percent(email.totals.unsubscribed, email.totals.sent), detail: `${count(email.totals.unsubscribed)} unsubscribed` }), _jsx(Stat, { label: "Spam complaints", value: count(email.totals.complained) })] }), _jsx(LineChart, { title: "Messages per day", days: dates, series: [
+                                    { key: "sent", label: "Sent", slot: 1, values: email.days.map((day) => day.sent) },
+                                    { key: "opened", label: "Opened", slot: 2, values: email.days.map((day) => day.opened) },
+                                    { key: "clicked", label: "Clicked", slot: 3, values: email.days.map((day) => day.clicked) },
+                                ] }), _jsx("h3", { className: "text-sm font-semibold mt-4 mb-1", children: "Top recipient domains" }), email.domains.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "Nothing was sent in this period." })) : (_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-left text-text-muted", children: [_jsx("th", { className: "font-normal py-1", children: "Domain" }), _jsx("th", { className: "font-normal py-1 text-right", children: "Sent" }), _jsx("th", { className: "font-normal py-1 text-right", children: "Open rate" }), _jsx("th", { className: "font-normal py-1 text-right", children: "Click rate" })] }) }), _jsx("tbody", { children: email.domains.map((domain) => (_jsxs("tr", { className: "border-t border-border", children: [_jsx("td", { className: "py-1", children: domain.domain }), _jsx("td", { className: "py-1 text-right tabular-nums", children: count(domain.sent) }), _jsx("td", { className: "py-1 text-right tabular-nums", children: percent(domain.opened, domain.sent) }), _jsx("td", { className: "py-1 text-right tabular-nums", children: percent(domain.clicked, domain.sent) })] }, domain.domain))) })] }))] }), _jsxs("section", { "aria-labelledby": "crm-report-growth", children: [_jsx("h2", { id: "crm-report-growth", className: "text-lg font-semibold mb-3", children: "Audience" }), _jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4", children: [_jsx(Stat, { label: "Contacts", value: count(growth.contacts) }), _jsx(Stat, { label: "New contacts", value: count(growth.days.reduce((sum, day) => sum + day.contacts, 0)) }), _jsx(Stat, { label: "Subscribes", value: count(growth.days.reduce((sum, day) => sum + day.subscribed, 0)) }), _jsx(Stat, { label: "Unsubscribes", value: count(growth.days.reduce((sum, day) => sum + day.unsubscribed, 0)) })] }), _jsx(LineChart, { title: "Audience per day", days: growth.days.map((day) => day.date), series: [
+                                    { key: "contacts", label: "New contacts", slot: 1, values: growth.days.map((day) => day.contacts) },
+                                    { key: "subscribed", label: "Subscribes", slot: 2, values: growth.days.map((day) => day.subscribed) },
+                                    { key: "unsubscribed", label: "Unsubscribes", slot: 3, values: growth.days.map((day) => day.unsubscribed) },
+                                ] }), growth.lists.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h3", { className: "text-sm font-semibold mt-4 mb-1", children: "Subscribers by list" }), _jsx("ul", { className: "text-sm list-none m-0 p-0", children: growth.lists.map((list) => (_jsxs("li", { className: "flex border-t border-border py-1", children: [_jsx("span", { children: list.name }), _jsx("span", { className: "ml-auto tabular-nums", children: count(list.subscribed) })] }, list.uid))) })] }))] }), _jsxs("section", { "aria-labelledby": "crm-report-sales", children: [_jsx("h2", { id: "crm-report-sales", className: "text-lg font-semibold mb-3", children: "Sales" }), _jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4", children: [_jsx(Stat, { label: "Open deals", value: count(sales.open.count), detail: `${count(sales.open.amount)} in value` }), _jsx(Stat, { label: "Won", value: count(sales.won.count), detail: `${count(sales.won.amount)} in value` }), _jsx(Stat, { label: "Lost", value: count(sales.lost) }), _jsx(Stat, { label: "Win rate", value: percent(sales.won.count, closed), detail: `of ${count(closed)} closed` })] }), _jsx(ColumnChart, { title: "Value won per day", label: "Value won", days: sales.days.map((day) => day.date), values: sales.days.map((day) => day.wonAmount) }), _jsx("p", { className: "text-xs text-text-muted mt-2", children: "Values add up deal amounts as they are, whatever their currency." })] })] }))] }));
+}