@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/campaigns/CampaignPage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } 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 { errorMessage, getCampaign } from "../../crmApi.js";
+import { useCrm } from "../CrmShell.js";
+import CampaignEditor from "./CampaignEditor.js";
+import CampaignReport from "./CampaignReport.js";
+/** One campaign: the editor while it's a draft or scheduled, its report from when it starts going out. */
+export default function CampaignPage({ uid }) {
+    const { workspace } = useCrm();
+    const [campaign, setCampaign] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        getCampaign(workspace.uid, uid).then(setCampaign, (err) => setError(errorMessage(err, "Could not load the campaign.")));
+    }, [workspace.uid, uid]);
+    if (!campaign) {
+        return error ? _jsx(Alert, { children: error }) : _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    return campaign.status === "draft" || campaign.status === "scheduled" ? (_jsx(CampaignEditor, { campaign: campaign, onChanged: setCampaign }, campaign.status)) : (_jsx(CampaignReport, { campaign: campaign, onChanged: setCampaign }));
+}

package/dist/apps/shared/components/campaigns/CampaignReport.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Campaign } from "../../crmApi.js";
+/** How often a campaign that's going out is reloaded. */
+export declare const REFRESH_MS = 10000;
+/**
+ * A campaign that has gone (or is going) out: its numbers, the A/B test's variants and winner, its links by clicks, and its
+ * recipients - filterable by what happened to their message. Pausing, resuming and cancelling while it goes out; reloaded every
+ * `REFRESH_MS` until it's done.
+ */
+export default function CampaignReport({ campaign, onChanged }: {
+    campaign: Campaign;
+    onChanged: (campaign: Campaign) => void;
+}): React.JSX.Element;

package/dist/apps/shared/components/campaigns/CampaignReport.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import { campaignRecipients, campaignReport, changeCampaign, duplicateCampaign, errorMessage, } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import { StatusBadge, percent, when } from "./campaignUi.js";
+/** How often a campaign that's going out is reloaded. */
+export const REFRESH_MS = 10000;
+const RECIPIENTS_PAGE = 50;
+const LIVE = new Set(["scheduled", "preparing", "sending"]);
+const STATUSES = ["queued", "held", "sent", "failed", "suppressed", "cancelled"];
+const ENGAGEMENTS = ["opened", "clicked", "replied", "bounced", "unsubscribed", "complained"];
+function Tile({ 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.toLocaleString() }), detail && _jsx("div", { className: "text-xs text-text-muted", children: detail })] }));
+}
+/** The tiles of a campaign's numbers. Rates are of the messages sent. */
+function Tiles({ counts }) {
+    return (_jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6", children: [_jsx(Tile, { label: "Recipients", value: counts.recipients, detail: counts.suppressed ? `${counts.suppressed} skipped` : undefined }), _jsx(Tile, { label: "Sent", value: counts.sent, detail: counts.failed ? `${counts.failed} failed` : undefined }), _jsx(Tile, { label: "Opened", value: counts.opened, detail: percent(counts.opened, counts.sent) }), _jsx(Tile, { label: "Clicked", value: counts.clicked, detail: percent(counts.clicked, counts.sent) }), _jsx(Tile, { label: "Replied", value: counts.replied, detail: percent(counts.replied, counts.sent) }), _jsx(Tile, { label: "Bounced", value: counts.bounced, detail: percent(counts.bounced, counts.sent) }), _jsx(Tile, { label: "Unsubscribed", value: counts.unsubscribed, detail: percent(counts.unsubscribed, counts.sent) }), _jsx(Tile, { label: "Spam complaints", value: counts.complained, detail: percent(counts.complained, counts.sent) })] }));
+}
+/**
+ * A campaign that has gone (or is going) out: its numbers, the A/B test's variants and winner, its links by clicks, and its
+ * recipients - filterable by what happened to their message. Pausing, resuming and cancelling while it goes out; reloaded every
+ * `REFRESH_MS` until it's done.
+ */
+export default function CampaignReport({ campaign, onChanged }) {
+    const { workspace, canWrite, href } = useCrm();
+    const [report, setReport] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function load() {
+        try {
+            const loaded = await campaignReport(workspace.uid, campaign.uid);
+            setReport(loaded);
+            if (loaded.campaign.status !== campaign.status) {
+                onChanged(loaded.campaign);
+            }
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the campaign's results."));
+        }
+    }
+    useEffect(() => {
+        void load();
+        if (!LIVE.has(campaign.status)) {
+            return;
+        }
+        const timer = window.setInterval(() => void load(), REFRESH_MS);
+        return () => window.clearInterval(timer);
+    }, [campaign.uid, campaign.status]);
+    async function act(action) {
+        if (action === "cancel" && !window.confirm("Cancel the campaign? Messages not sent yet won't be.")) {
+            return;
+        }
+        setBusy(true);
+        try {
+            onChanged(await changeCampaign(workspace.uid, campaign.uid, action));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not change the campaign."));
+        }
+        setBusy(false);
+    }
+    async function duplicate() {
+        try {
+            const copy = await duplicateCampaign(workspace.uid, campaign.uid);
+            window.location.assign(href(`/crm/campaigns/${encodeURIComponent(copy.uid)}`));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not duplicate the campaign."));
+        }
+    }
+    const stats = report?.stats ?? campaign.stats;
+    const test = campaign.abTest;
+    return (_jsxs("div", { className: "max-w-6xl", children: [_jsx("a", { href: href("/crm/campaigns"), className: "text-sm text-primary-dark hover:underline", children: "\u2190 Campaigns" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 mt-2 mb-1", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: campaign.name }), _jsx(StatusBadge, { status: campaign.status }), canWrite && (_jsxs("div", { className: "flex gap-2 ml-auto", children: [(campaign.status === "sending" || campaign.status === "preparing") && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", disabled: busy, onClick: () => void act("pause"), children: "Pause" })), campaign.status === "paused" && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", disabled: busy, onClick: () => void act("resume"), children: "Resume" })), LIVE.has(campaign.status) || campaign.status === "paused" ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5 !text-danger", disabled: busy, onClick: () => void act("cancel"), children: "Cancel" })) : null, _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", onClick: () => void duplicate(), children: "Duplicate" })] }))] }), _jsxs("p", { className: "text-sm text-text-muted mb-4", children: ["Started ", when(campaign.startedAt), campaign.finishedAt ? ` · finished ${when(campaign.finishedAt)}` : ""] }), campaign.error && _jsx(Alert, { children: campaign.error }), error && _jsx(Alert, { children: error }), _jsx(Tiles, { counts: stats }), test && (_jsxs("section", { className: "mb-6", children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "A/B test" }), _jsx("p", { className: "text-sm text-text-muted mb-2", children: test.winnerId
+                            ? `Variant ${test.winnerId} won by ${test.metric}s and went to the rest of the audience.`
+                            : `${test.testPercent}% of the audience gets a variant; the one with the most ${test.metric}s after ${test.testHours} hours goes to the rest.` }), _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Variant", "Subject", "Sent", "Opened", "Clicked", "Replied"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: test.variants.map((variant) => {
+                                    const counts = stats.variants?.[variant.id];
+                                    return (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border font-semibold", children: [variant.id, test.winnerId === variant.id && _jsx("span", { className: "ml-2 text-xs text-success", children: "winner" })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: variant.subject ?? "The template's" }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: counts?.sent ?? 0 }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: percent(counts?.opened ?? 0, counts?.sent ?? 0) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: percent(counts?.clicked ?? 0, counts?.sent ?? 0) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: percent(counts?.replied ?? 0, counts?.sent ?? 0) })] }, variant.id));
+                                }) })] })] })), report && report.links.length > 0 && (_jsxs("section", { className: "mb-6", children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Links" }), _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Link", "Clicks", "People"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: report.links.map((link) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border break-all", children: link.url }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: link.clicks }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: link.uniqueClicks })] }, link.url))) })] })] })), _jsx(Recipients, { campaign: campaign })] }));
+}
+/** A campaign's messages, filterable by status, by what happened, and by address. */
+function Recipients({ campaign }) {
+    const { workspace, href } = useCrm();
+    const [status, setStatus] = useState("");
+    const [engagement, setEngagement] = useState("");
+    const [q, setQ] = useState("");
+    const [page, setPage] = useState(0);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let current = true;
+        campaignRecipients(workspace.uid, campaign.uid, { status: status || undefined, engagement: engagement || undefined, q: q.trim() || undefined, page, limit: RECIPIENTS_PAGE }).then((loaded) => current && setResult(loaded), (err) => current && setError(errorMessage(err, "Could not load the recipients.")));
+        return () => {
+            current = false;
+        };
+    }, [campaign.uid, status, engagement, q, page]);
+    const pages = result ? Math.max(1, Math.ceil(result.total / RECIPIENTS_PAGE)) : 1;
+    return (_jsxs("section", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Recipients" }), _jsxs("div", { className: "flex flex-wrap gap-2 mb-2", children: [_jsxs("select", { "aria-label": "Status", className: `${INPUT_CLASS} !w-40`, value: status, onChange: (event) => {
+                            setStatus(event.target.value);
+                            setPage(0);
+                        }, children: [_jsx("option", { value: "", children: "Any status" }), STATUSES.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] }), _jsxs("select", { "aria-label": "What happened", className: `${INPUT_CLASS} !w-40`, value: engagement, onChange: (event) => {
+                            setEngagement(event.target.value);
+                            setPage(0);
+                        }, children: [_jsx("option", { value: "", children: "Anything" }), ENGAGEMENTS.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] }), _jsx("input", { "aria-label": "Find an address", placeholder: "Find an address\u2026", className: `${INPUT_CLASS} !w-56`, value: q, onChange: (event) => {
+                            setQ(event.target.value);
+                            setPage(0);
+                        } })] }), error && _jsx(Alert, { children: error }), result && result.items.length === 0 && _jsx("p", { className: "text-sm text-text-muted", children: "No recipients match." }), result && result.items.length > 0 && (_jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Address", "Status", "Sent", "Opened", "Clicked", "Replied", "Problem"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: result.items.map((item) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("a", { className: "text-primary-dark hover:underline", href: href(`/crm/contacts/${encodeURIComponent(item.contactUid)}`), children: item.email }), campaign.abTest && item.variantId && _jsx("span", { className: "ml-2 text-xs text-text-muted", children: item.variantId })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: item.status }), _jsx("td", { className: "py-2 px-2.5 border-b border-border whitespace-nowrap", children: when(item.sentAt) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: item.firstOpenedAt ? item.openCount : "–" }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: item.firstClickedAt ? item.clickCount : "–" }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: item.repliedAt ? "Yes" : "–" }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-xs", children: item.bouncedAt
+                                        ? `Bounced (${item.bounceType})`
+                                        : item.complainedAt
+                                            ? "Complained"
+                                            : item.unsubscribedAt
+                                                ? "Unsubscribed"
+                                                : (item.error ?? "") })] }, item.uid))) })] })), pages > 1 && (_jsxs("div", { className: "flex items-center gap-3 mt-2 text-sm", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1", disabled: page === 0, onClick: () => setPage(page - 1), children: "Previous" }), _jsxs("span", { children: ["Page ", page + 1, " of ", pages] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1", disabled: page + 1 >= pages, onClick: () => setPage(page + 1), children: "Next" })] }))] }));
+}

package/dist/apps/shared/components/campaigns/campaignUi.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { CampaignStatus } from "../../crmApi.js";
+/** A campaign's status as a small coloured label. */
+export declare function StatusBadge({ status }: {
+    status: CampaignStatus;
+}): React.JSX.Element;
+/** `part` of `whole` as a percentage with one decimal, or a dash when `whole` is 0. */
+export declare function percent(part: number, whole: number): string;
+/** A date and time in the reader's locale, or a dash. */
+export declare function when(value: string | null | undefined): string;

package/dist/apps/shared/components/campaigns/campaignUi.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const STATUS = {
+    draft: { label: "Draft", tone: "bg-surface-alt text-text-muted" },
+    scheduled: { label: "Scheduled", tone: "bg-primary-lightest text-primary-dark" },
+    preparing: { label: "Preparing", tone: "bg-primary-lightest text-primary-dark" },
+    sending: { label: "Sending", tone: "bg-primary-lightest text-primary-dark" },
+    paused: { label: "Paused", tone: "bg-warning/15 text-warning" },
+    sent: { label: "Sent", tone: "bg-success/15 text-success" },
+    cancelled: { label: "Cancelled", tone: "bg-surface-alt text-text-muted" },
+    failed: { label: "Failed", tone: "bg-danger/15 text-danger" },
+};
+/** A campaign's status as a small coloured label. */
+export function StatusBadge({ status }) {
+    const { label, tone } = STATUS[status];
+    return _jsx("span", { className: `inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${tone}`, children: label });
+}
+/** `part` of `whole` as a percentage with one decimal, or a dash when `whole` is 0. */
+export function percent(part, whole) {
+    return whole === 0 ? "–" : `${((part / whole) * 100).toFixed(1)}%`;
+}
+/** A date and time in the reader's locale, or a dash. */
+export function when(value) {
+    return value ? new Date(value).toLocaleString() : "–";
+}

package/dist/apps/shared/components/deals/ContactDeals.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/** The deals a contact is on, on the contact's page. */
+export default function ContactDeals({ contactUid }: {
+    contactUid: string;
+}): React.JSX.Element;

package/dist/apps/shared/components/deals/ContactDeals.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { listDeals } from "../../crmApi.js";
+import { useCrm } from "../CrmShell.js";
+import { money } from "./dealUi.js";
+/** The deals a contact is on, on the contact's page. */
+export default function ContactDeals({ contactUid }) {
+    const { workspace, href } = useCrm();
+    const [deals, setDeals] = useState([]);
+    useEffect(() => {
+        listDeals(workspace.uid, { contactUid }).then(setDeals, () => setDeals([]));
+    }, [workspace.uid, contactUid]);
+    return (_jsxs("section", { "aria-label": "Deals", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "Deals" }), deals.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No deals." })) : (_jsx("ul", { className: "flex flex-col gap-1 text-sm", children: deals.map((deal) => (_jsxs("li", { className: "flex justify-between gap-2", children: [_jsx("a", { className: "text-primary-dark hover:underline", href: href(`/crm/deals/${encodeURIComponent(deal.uid)}`), children: deal.name }), _jsxs("span", { className: "text-text-muted", children: [money(deal.amount, deal.currency), " \u00B7 ", deal.status] })] }, deal.uid))) }))] }));
+}

package/dist/apps/shared/components/deals/DealBoard.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * A pipeline's deals as a board: a column per stage, with each open stage's total and weighted total, the pipeline's forecast, and
+ * deals rotting in their stage flagged. Deals move by dragging (pointer or keyboard) or with their "Move to" menu; moving one to a
+ * lost stage asks why.
+ */
+export default function DealBoard(): React.JSX.Element;

package/dist/apps/shared/components/deals/DealBoard.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { DndContext, KeyboardSensor, PointerSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
+import Modal from "@rapidmx/web-client/lib/components/overlays/Modal.js";
+import { createDeal, dealForecast, errorMessage, listDeals, listMembers, listPipelines, updateDeal, } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import { daysInStage, isRotting, money } from "./dealUi.js";
+/** How far back won and lost deals show on the board, and count in the forecast. */
+const CLOSED_DAYS = 30;
+function memberName(members, userUid) {
+    const member = members.find((entry) => entry.userUid === userUid);
+    return member ? member.displayName || member.address || member.userUid : undefined;
+}
+/** One deal's card: dragged to another stage, or moved with its "Move to" menu. */
+function DealCard({ deal, stage, stages, members, canWrite, onMove }) {
+    const { href } = useCrm();
+    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: deal.uid, disabled: !canWrite });
+    const rotting = isRotting(deal, stage);
+    return (_jsxs("li", { ref: setNodeRef, style: { transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined, opacity: isDragging ? 0.6 : 1 }, className: `rounded-sm border bg-surface p-2 text-sm ${rotting ? "border-warning" : "border-border"}`, children: [_jsxs("div", { className: "flex items-start gap-1", children: [canWrite && (_jsx("button", { type: "button", "aria-label": `Drag ${deal.name}`, className: "cursor-grab text-text-muted px-0.5", ...attributes, ...listeners, children: "\u22EE\u22EE" })), _jsx("a", { className: "font-medium text-primary-dark hover:underline flex-1 min-w-0", href: href(`/crm/deals/${encodeURIComponent(deal.uid)}`), children: deal.name })] }), _jsxs("div", { className: "text-xs text-text-muted mt-1", children: [money(deal.amount, deal.currency), memberName(members, deal.ownerUserUid) ? ` · ${memberName(members, deal.ownerUserUid)}` : ""] }), rotting && _jsxs("div", { className: "text-xs text-warning mt-1", children: [daysInStage(deal), " days in this stage"] }), canWrite && (_jsx("select", { "aria-label": `Move ${deal.name} to`, className: "mt-1 w-full text-xs border border-border rounded-sm bg-surface", value: deal.stageId, onChange: (event) => onMove(deal, event.target.value), children: stages.map((entry) => (_jsx("option", { value: entry.id, children: entry.name }, entry.id))) }))] }));
+}
+/** One stage's column: its numbers, and its deals. Deals are dropped on it to move there. */
+function StageColumn({ stage, deals, forecast, children }) {
+    const { setNodeRef, isOver } = useDroppable({ id: stage.id });
+    const currency = deals[0]?.currency ?? "USD";
+    return (_jsxs("section", { ref: setNodeRef, "aria-label": stage.name, className: `w-64 shrink-0 rounded-sm bg-surface-alt p-2 ${isOver ? "ring-2 ring-primary" : ""}`, children: [_jsxs("header", { className: "mb-2", children: [_jsxs("div", { className: "flex justify-between text-sm font-semibold", children: [_jsx("span", { children: stage.name }), _jsx("span", { className: "text-text-muted", children: deals.length })] }), _jsx("div", { className: "text-xs text-text-muted", children: stage.kind === "open" ? `${stage.probability}% · ${money(forecast?.amount ?? 0, currency)} (${money(forecast?.weighted ?? 0, currency)} weighted)` : `last ${CLOSED_DAYS} days` })] }), _jsx("ul", { className: "flex flex-col gap-2", children: children })] }));
+}
+/**
+ * A pipeline's deals as a board: a column per stage, with each open stage's total and weighted total, the pipeline's forecast, and
+ * deals rotting in their stage flagged. Deals move by dragging (pointer or keyboard) or with their "Move to" menu; moving one to a
+ * lost stage asks why.
+ */
+export default function DealBoard() {
+    const { workspace, canWrite } = useCrm();
+    const [pipelines, setPipelines] = useState([]);
+    const [pipelineUid, setPipelineUid] = useState("");
+    const [deals, setDeals] = useState([]);
+    const [members, setMembers] = useState([]);
+    const [owner, setOwner] = useState("");
+    const [forecast, setForecast] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const [error, setError] = useState(null);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor));
+    const pipeline = pipelines.find((entry) => entry.uid === pipelineUid);
+    useEffect(() => {
+        listPipelines(workspace.uid).then((loaded) => {
+            setPipelines(loaded);
+            setPipelineUid((loaded.find((entry) => entry.isDefault) ?? loaded[0])?.uid ?? "");
+        }, (err) => setError(errorMessage(err, "Could not load the pipelines.")));
+        listMembers(workspace.uid).then(setMembers, () => setMembers([]));
+    }, [workspace.uid]);
+    async function load() {
+        if (!pipelineUid) {
+            return;
+        }
+        try {
+            const since = Date.now() - CLOSED_DAYS * 86400000;
+            const loaded = await listDeals(workspace.uid, { pipelineUid, ...(owner ? { ownerUserUid: owner } : {}) });
+            setDeals(loaded.filter((deal) => deal.status === "open" || new Date(deal.closedAt ?? 0).getTime() >= since));
+            setForecast(await dealForecast(workspace.uid, pipelineUid, CLOSED_DAYS));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the deals."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [pipelineUid, owner]);
+    async function move(deal, stageId) {
+        if (stageId === deal.stageId) {
+            return;
+        }
+        const stage = pipeline?.stages.find((entry) => entry.id === stageId);
+        let lostReason;
+        if (stage?.kind === "lost") {
+            const reason = window.prompt(`Why was "${deal.name}" lost?`, "");
+            if (reason === null) {
+                return;
+            }
+            lostReason = reason.trim() || undefined;
+        }
+        // Moved on the board at once; put back if the server refuses.
+        setDeals(deals.map((entry) => (entry.uid === deal.uid ? { ...entry, stageId } : entry)));
+        try {
+            await updateDeal(workspace.uid, deal.uid, { stageId, ...(lostReason ? { lostReason } : {}) });
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not move the deal."));
+        }
+        await load();
+    }
+    function dragEnd(event) {
+        const deal = deals.find((entry) => entry.uid === event.active.id);
+        if (deal && event.over) {
+            void move(deal, String(event.over.id));
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-3", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mr-2", children: "Deals" }), _jsx("select", { "aria-label": "Pipeline", className: `${INPUT_CLASS} !w-48`, value: pipelineUid, onChange: (event) => setPipelineUid(event.target.value), children: pipelines.map((entry) => (_jsx("option", { value: entry.uid, children: entry.name }, entry.uid))) }), _jsxs("select", { "aria-label": "Owner", className: `${INPUT_CLASS} !w-48`, value: owner, onChange: (event) => setOwner(event.target.value), children: [_jsx("option", { value: "", children: "Everyone's deals" }), members.map((member) => (_jsx("option", { value: member.userUid, children: memberName(members, member.userUid) }, member.userUid)))] }), forecast && (_jsxs("p", { role: "status", className: "text-sm text-text-muted", children: [forecast.open.count, " open \u00B7 ", money(forecast.open.amount, deals[0]?.currency ?? "USD"), " (", money(forecast.open.weighted, deals[0]?.currency ?? "USD"), " weighted)", forecast.winRate !== undefined && ` · ${Math.round(forecast.winRate * 100)}% won in the last ${CLOSED_DAYS} days`, forecast.averageDaysToWin !== undefined && ` · ${Math.round(forecast.averageDaysToWin)} days to win`] })), canWrite && pipeline && (_jsx(Button, { type: "button", className: "!w-auto ml-auto", onClick: () => setCreating(true), children: "+ New deal" }))] }), error && _jsx(Alert, { children: error }), pipeline && (_jsx(DndContext, { sensors: sensors, onDragEnd: dragEnd, children: _jsx("div", { className: "flex gap-3 overflow-x-auto pb-4", children: pipeline.stages.map((stage) => {
+                        const here = deals.filter((deal) => deal.stageId === stage.id);
+                        return (_jsx(StageColumn, { stage: stage, deals: here, forecast: forecast?.stages.find((entry) => entry.stageId === stage.id), children: here.map((deal) => (_jsx(DealCard, { deal: deal, stage: stage, stages: pipeline.stages, members: members, canWrite: canWrite, onMove: (target, stageId) => void move(target, stageId) }, deal.uid))) }, stage.id));
+                    }) }) })), creating && pipeline && (_jsx(NewDealModal, { pipeline: pipeline, onClose: () => setCreating(false), onCreated: () => {
+                    setCreating(false);
+                    void load();
+                } }))] }));
+}
+/** Asks for a new deal's name, amount and stage. */
+function NewDealModal({ pipeline, onClose, onCreated }) {
+    const { workspace } = useCrm();
+    const [name, setName] = useState("");
+    const [amount, setAmount] = useState("");
+    const [currency, setCurrency] = useState("USD");
+    const [stageId, setStageId] = useState(pipeline.stages[0].id);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    async function submit(event) {
+        event.preventDefault();
+        setSaving(true);
+        try {
+            await createDeal(workspace.uid, { name: name.trim(), amount: Number(amount) || 0, currency, pipelineUid: pipeline.uid, stageId });
+            onCreated();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not create the deal."));
+            setSaving(false);
+        }
+    }
+    return (_jsx(Modal, { open: true, onClose: onClose, title: "New deal", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3 min-w-[22rem]", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "crm-deal-name", children: _jsx("input", { id: "crm-deal-name", className: INPUT_CLASS, value: name, onChange: (event) => setName(event.target.value), required: true }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(FormField, { label: "Amount", htmlFor: "crm-deal-amount", children: _jsx("input", { id: "crm-deal-amount", type: "number", min: 0, className: INPUT_CLASS, value: amount, onChange: (event) => setAmount(event.target.value) }) }), _jsx(FormField, { label: "Currency", htmlFor: "crm-deal-currency", children: _jsx("input", { id: "crm-deal-currency", className: `${INPUT_CLASS} !w-20 uppercase`, maxLength: 3, value: currency, onChange: (event) => setCurrency(event.target.value.toUpperCase()) }) })] }), _jsx(FormField, { label: "Stage", htmlFor: "crm-deal-stage", children: _jsx("select", { id: "crm-deal-stage", className: INPUT_CLASS, value: stageId, onChange: (event) => setStageId(event.target.value), children: pipeline.stages.map((stage) => (_jsx("option", { value: stage.id, children: stage.name }, stage.id))) }) }), _jsx(Button, { type: "submit", loading: saving, disabled: saving || !name.trim(), className: "!w-auto self-start", children: "Create" })] }) }));
+}

package/dist/apps/shared/components/deals/DealDetail.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * One deal: its details (moving it between stages and pipelines), the people and company it involves, how it moved through the
+ * stages, and its notes, tasks and activity.
+ */
+export default function DealDetail({ uid }: {
+    uid: string;
+}): React.JSX.Element;

package/dist/apps/shared/components/deals/DealDetail.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
+import { deleteDeal, errorMessage, getDeal, getRecord, listMembers, listNotes, listPipelines, listTasks, listTimeline, searchRecords, updateDeal, } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import { Activity, Notes, Tasks } from "../RecordDetail.js";
+import { money } from "./dealUi.js";
+function formOf(deal) {
+    return {
+        name: deal.name,
+        amount: String(deal.amount),
+        currency: deal.currency,
+        pipelineUid: deal.pipelineUid,
+        stageId: deal.stageId,
+        ownerUserUid: deal.ownerUserUid ?? "",
+        expectedCloseDate: deal.expectedCloseDate ? deal.expectedCloseDate.slice(0, 10) : "",
+        lostReason: deal.lostReason ?? "",
+    };
+}
+/**
+ * One deal: its details (moving it between stages and pipelines), the people and company it involves, how it moved through the
+ * stages, and its notes, tasks and activity.
+ */
+export default function DealDetail({ uid }) {
+    const { workspace, canWrite, href } = useCrm();
+    const [deal, setDeal] = useState(null);
+    const [form, setForm] = useState(null);
+    const [pipelines, setPipelines] = useState([]);
+    const [members, setMembers] = useState([]);
+    const [contacts, setContacts] = useState([]);
+    const [company, setCompany] = useState(null);
+    const [notes, setNotes] = useState([]);
+    const [tasks, setTasks] = useState([]);
+    const [timeline, setTimeline] = useState([]);
+    const [error, setError] = useState(null);
+    const [saved, setSaved] = useState(false);
+    async function loadActivity() {
+        const [noteList, taskList, entries] = await Promise.all([listNotes(workspace.uid, uid), listTasks(workspace.uid, { subjectUid: uid }), listTimeline(workspace.uid, "deal", uid)]);
+        setNotes(noteList);
+        setTasks(taskList);
+        setTimeline(entries);
+    }
+    async function show(loaded) {
+        setDeal(loaded);
+        setForm(formOf(loaded));
+        const people = [];
+        for (const contactUid of loaded.contactUids) {
+            try {
+                people.push(await getRecord("contact", workspace.uid, contactUid));
+            }
+            catch {
+                // Gone: left out.
+            }
+        }
+        setContacts(people);
+        setCompany(loaded.companyUid ? await getRecord("company", workspace.uid, loaded.companyUid).catch(() => null) : null);
+    }
+    useEffect(() => {
+        void (async () => {
+            try {
+                const [loaded, pipelineList] = await Promise.all([getDeal(workspace.uid, uid), listPipelines(workspace.uid)]);
+                setPipelines(pipelineList);
+                await show(loaded);
+                setMembers(await listMembers(workspace.uid).catch(() => []));
+                await loadActivity();
+            }
+            catch (err) {
+                setError(errorMessage(err, "Could not load the deal."));
+            }
+        })();
+    }, [workspace.uid, uid]);
+    if (!deal || !form) {
+        return error ? _jsx(Alert, { children: error }) : _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    const pipeline = pipelines.find((entry) => entry.uid === form.pipelineUid);
+    const stageName = (stageId) => pipelines.flatMap((entry) => entry.stages).find((stage) => stage.id === stageId)?.name ?? "a stage no longer there";
+    async function save(input) {
+        setError(null);
+        setSaved(false);
+        try {
+            await show(await updateDeal(workspace.uid, uid, { ...input, version: deal.version }));
+            setSaved(true);
+            await loadActivity();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the deal."));
+        }
+    }
+    async function submit(event) {
+        event.preventDefault();
+        const current = form;
+        const stage = pipeline?.stages.find((entry) => entry.id === current.stageId);
+        await save({
+            name: current.name.trim(),
+            amount: Number(current.amount) || 0,
+            currency: current.currency,
+            pipelineUid: current.pipelineUid,
+            stageId: current.stageId,
+            ownerUserUid: current.ownerUserUid || null,
+            expectedCloseDate: current.expectedCloseDate ? new Date(current.expectedCloseDate).toISOString() : null,
+            ...(stage?.kind === "lost" ? { lostReason: current.lostReason.trim() || null } : {}),
+        });
+    }
+    async function remove() {
+        if (!window.confirm(`Delete the deal "${deal.name}"?`)) {
+            return;
+        }
+        try {
+            await deleteDeal(workspace.uid, uid);
+            window.location.assign(href("/crm/deals"));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the deal."));
+        }
+    }
+    const set = (patch) => setForm({ ...form, ...patch });
+    const selectedStage = pipeline?.stages.find((entry) => entry.id === form.stageId);
+    return (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl", children: [_jsxs("div", { children: [_jsx("a", { href: href("/crm/deals"), className: "text-sm text-primary-dark hover:underline", children: "\u2190 Deals" }), _jsx("h1", { className: "text-lg font-bold tracking-tight mt-2", children: deal.name }), _jsxs("p", { className: "text-sm text-text-muted mb-4", children: [money(deal.amount, deal.currency), " \u00B7 ", deal.status === "open" ? stageName(deal.stageId) : deal.status === "won" ? "Won" : "Lost", deal.lostReason ? ` - ${deal.lostReason}` : ""] }), error && _jsx(Alert, { children: error }), saved && (_jsx("p", { role: "status", className: "text-sm text-success mb-2", children: "Saved." })), _jsx("form", { onSubmit: submit, children: _jsxs("fieldset", { disabled: !canWrite, className: "flex flex-col gap-3", children: [_jsx(FormField, { label: "Name", htmlFor: "crm-deal-edit-name", children: _jsx("input", { id: "crm-deal-edit-name", className: INPUT_CLASS, value: form.name, onChange: (event) => set({ name: event.target.value }), required: true }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(FormField, { label: "Amount", htmlFor: "crm-deal-edit-amount", children: _jsx("input", { id: "crm-deal-edit-amount", type: "number", min: 0, className: INPUT_CLASS, value: form.amount, onChange: (event) => set({ amount: event.target.value }) }) }), _jsx(FormField, { label: "Currency", htmlFor: "crm-deal-edit-currency", children: _jsx("input", { id: "crm-deal-edit-currency", maxLength: 3, className: `${INPUT_CLASS} !w-20`, value: form.currency, onChange: (event) => set({ currency: event.target.value.toUpperCase() }) }) })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(FormField, { label: "Pipeline", htmlFor: "crm-deal-edit-pipeline", children: _jsx("select", { id: "crm-deal-edit-pipeline", className: INPUT_CLASS, value: form.pipelineUid, onChange: (event) => {
+                                                    const next = pipelines.find((entry) => entry.uid === event.target.value);
+                                                    set({ pipelineUid: next.uid, stageId: next.stages[0].id });
+                                                }, children: pipelines.map((entry) => (_jsx("option", { value: entry.uid, children: entry.name }, entry.uid))) }) }), _jsx(FormField, { label: "Stage", htmlFor: "crm-deal-edit-stage", children: _jsx("select", { id: "crm-deal-edit-stage", className: INPUT_CLASS, value: form.stageId, onChange: (event) => set({ stageId: event.target.value }), children: pipeline?.stages.map((stage) => (_jsx("option", { value: stage.id, children: stage.name }, stage.id))) }) })] }), selectedStage?.kind === "lost" && (_jsx(FormField, { label: "Why it was lost", htmlFor: "crm-deal-edit-lost", children: _jsx("input", { id: "crm-deal-edit-lost", className: INPUT_CLASS, value: form.lostReason, onChange: (event) => set({ lostReason: event.target.value }) }) })), _jsxs("div", { className: "flex gap-2", children: [_jsx(FormField, { label: "Owner", htmlFor: "crm-deal-edit-owner", children: _jsxs("select", { id: "crm-deal-edit-owner", className: INPUT_CLASS, value: form.ownerUserUid, onChange: (event) => set({ ownerUserUid: event.target.value }), children: [_jsx("option", { value: "", children: "Nobody" }), members.map((member) => (_jsx("option", { value: member.userUid, children: member.displayName || member.address || member.userUid }, member.userUid)))] }) }), _jsx(FormField, { label: "Expected to close", htmlFor: "crm-deal-edit-close", children: _jsx("input", { id: "crm-deal-edit-close", type: "date", className: INPUT_CLASS, value: form.expectedCloseDate, onChange: (event) => set({ expectedCloseDate: event.target.value }) }) })] }), canWrite && (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", className: "!w-auto", children: "Save" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !text-danger", onClick: () => void remove(), children: "Delete" })] }))] }) }), _jsx(People, { deal: deal, contacts: contacts, company: company, canWrite: canWrite, onSave: save }), _jsxs("section", { "aria-label": "Stage history", className: "mt-6", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "Stage history" }), _jsx("ol", { className: "flex flex-col gap-1 text-sm", children: [...deal.stageHistory].reverse().map((change) => (_jsxs("li", { children: [stageName(change.stageId), " ", _jsx("span", { className: "text-xs text-text-muted", children: new Date(change.at).toLocaleString() })] }, `${change.stageId}-${change.at}`))) })] })] }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Notes, { objectType: "deal", uid: uid, notes: notes, onChange: loadActivity }), _jsx(Tasks, { objectType: "deal", uid: uid, tasks: tasks, onChange: loadActivity }), _jsx(Activity, { timeline: timeline })] })] }));
+}
+/** The contacts and company of a deal: adding a contact by searching, removing one, and choosing the company. */
+function People({ deal, contacts, company, canWrite, onSave, }) {
+    const { workspace, href } = useCrm();
+    const [query, setQuery] = useState("");
+    const [found, setFound] = useState([]);
+    const [kind, setKind] = useState("contact");
+    async function search(event) {
+        event.preventDefault();
+        try {
+            setFound((await searchRecords(kind, workspace.uid, { q: query, limit: 8 })).items);
+        }
+        catch {
+            setFound([]);
+        }
+    }
+    return (_jsxs("section", { "aria-label": "People", className: "mt-6", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "People" }), _jsxs("ul", { className: "flex flex-col gap-1 text-sm mb-2", children: [contacts.map((contact) => (_jsxs("li", { className: "flex justify-between", children: [_jsx("a", { className: "text-primary-dark hover:underline", href: href(`/crm/contacts/${encodeURIComponent(contact.uid)}`), children: [contact.firstName, contact.lastName].filter(Boolean).join(" ") || contact.email }), canWrite && (_jsx("button", { type: "button", "aria-label": `Remove ${contact.email}`, className: "text-danger", onClick: () => void onSave({ contactUids: deal.contactUids.filter((uid) => uid !== contact.uid) }), children: "\u00D7" }))] }, contact.uid))), company && (_jsxs("li", { className: "flex justify-between", children: [_jsx("a", { className: "text-primary-dark hover:underline", href: href(`/crm/companies/${encodeURIComponent(company.uid)}`), children: company.name }), canWrite && (_jsx("button", { type: "button", "aria-label": `Remove ${company.name}`, className: "text-danger", onClick: () => void onSave({ companyUid: null }), children: "\u00D7" }))] }))] }), canWrite && (_jsxs("form", { onSubmit: search, className: "flex gap-1", children: [_jsxs("select", { "aria-label": "Add a", className: `${INPUT_CLASS} !w-28`, value: kind, onChange: (event) => setKind(event.target.value), children: [_jsx("option", { value: "contact", children: "Contact" }), _jsx("option", { value: "company", children: "Company" })] }), _jsx("input", { "aria-label": "Find", placeholder: "Find\u2026", className: INPUT_CLASS, value: query, onChange: (event) => setQuery(event.target.value) }), _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto", children: "Find" })] })), found.length > 0 && (_jsx("ul", { className: "mt-1 flex flex-col gap-1 text-sm", children: found.map((record) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "text-primary-dark hover:underline", onClick: () => {
+                            setFound([]);
+                            void onSave(kind === "contact" ? { contactUids: [...new Set([...deal.contactUids, record.uid])] } : { companyUid: record.uid });
+                        }, children: ["+ ", "email" in record ? record.email : record.name] }) }, record.uid))) }))] }));
+}

package/dist/apps/shared/components/deals/PipelineManager.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * A workspace's pipelines and their stages: renaming, reordering, adding and removing stages (each with its probability, kind and
+ * "rotting" days), choosing the default pipeline, and creating and deleting pipelines. Changing them takes an admin; everyone sees
+ * them.
+ */
+export default function PipelineManager(): React.JSX.Element;