@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/RecordDetail.js

@@ -0,0 +1,244 @@
+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, useMemo, 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 { createNote, createTask, deleteNote, deleteRecord, errorMessage, getRecord, listMembers, listNotes, listProperties, listTasks, listLists, listSubscriptions, listTimeline, setSubscriptions, updateRecord, updateTask, } from "../crmApi.js";
+import { fieldValue, recordFields } from "../fields.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+import { recordName } from "./RecordList.js";
+import ContactDeals from "./deals/ContactDeals.js";
+/** The fields the record page edits besides custom properties (tags and dates are shown, not edited here). */
+const EDITABLE = {
+    contact: ["email", "firstName", "lastName", "phone", "jobTitle", "lifecycleStage", "leadStatus", "score", "source"],
+    company: ["name", "domain", "industry", "employeeCount", "phone", "website", "city", "country"],
+};
+/** A field's value as its input holds it. */
+function inputValue(value, field) {
+    if (value === undefined || value === null) {
+        return "";
+    }
+    if (field.kind === "date" && typeof value === "string") {
+        return value.slice(0, 10);
+    }
+    if (Array.isArray(value)) {
+        return value.join(", ");
+    }
+    return String(value);
+}
+/** An input's text as the value the API takes for `field`: `null` when emptied. */
+function apiValue(text, field) {
+    if (text.trim() === "") {
+        return null;
+    }
+    switch (field.kind) {
+        case "number":
+            return Number(text);
+        case "boolean":
+            return text === "true";
+        case "date":
+            return new Date(text).toISOString();
+        case "multi":
+            return text
+                .split(",")
+                .map((part) => part.trim())
+                .filter(Boolean);
+        default:
+            return text;
+    }
+}
+/**
+ * One contact or company: its fields and custom properties (editable by members who can write), its tags and owner, its notes and
+ * tasks, and its activity timeline.
+ */
+export default function RecordDetail({ objectType, uid }) {
+    const { workspace, canWrite, href } = useCrm();
+    const [record, setRecord] = useState(null);
+    const [definitions, setDefinitions] = useState([]);
+    const [members, setMembers] = useState([]);
+    const [values, setValues] = useState({});
+    const [tags, setTags] = useState("");
+    const [owner, setOwner] = useState("");
+    const [timeline, setTimeline] = useState([]);
+    const [notes, setNotes] = useState([]);
+    const [tasks, setTasks] = useState([]);
+    const [error, setError] = useState(null);
+    const [saved, setSaved] = useState(false);
+    const fields = useMemo(() => recordFields(objectType, definitions), [objectType, definitions]);
+    const editable = fields.filter((field) => field.custom || EDITABLE[objectType].includes(field.name));
+    function show(next, allFields) {
+        setRecord(next);
+        setValues(Object.fromEntries(allFields.map((field) => [field.name, inputValue(fieldValue(next, field), field)])));
+        setTags(next.tags.join(", "));
+        setOwner(next.ownerUserUid ?? "");
+    }
+    async function loadActivity() {
+        const [entries, noteList, taskList] = await Promise.all([
+            listTimeline(workspace.uid, objectType, uid),
+            listNotes(workspace.uid, uid),
+            listTasks(workspace.uid, { subjectUid: uid }),
+        ]);
+        setTimeline(entries);
+        setNotes(noteList);
+        setTasks(taskList);
+    }
+    useEffect(() => {
+        void (async () => {
+            try {
+                const [loaded, propertyList, memberList] = await Promise.all([
+                    getRecord(objectType, workspace.uid, uid),
+                    listProperties(workspace.uid, objectType),
+                    listMembers(workspace.uid),
+                ]);
+                setDefinitions(propertyList);
+                setMembers(memberList);
+                show(loaded, recordFields(objectType, propertyList));
+                await loadActivity();
+            }
+            catch (err) {
+                setError(errorMessage(err, "Could not load this record."));
+            }
+        })();
+    }, [workspace.uid, objectType, uid]);
+    async function save(event) {
+        event.preventDefault();
+        const body = { version: record.version, properties: {} };
+        for (const field of editable) {
+            const value = apiValue(values[field.name] ?? "", field);
+            if (field.custom) {
+                body.properties[field.name.slice("properties.".length)] = value;
+            }
+            else {
+                body[field.name] = value;
+            }
+        }
+        body.tags = tags
+            .split(",")
+            .map((tag) => tag.trim())
+            .filter(Boolean);
+        body.ownerUserUid = owner || null;
+        try {
+            show(await updateRecord(objectType, workspace.uid, uid, body), fields);
+            setError(null);
+            setSaved(true);
+            await loadActivity();
+        }
+        catch (err) {
+            setSaved(false);
+            setError(errorMessage(err, "Could not save the changes."));
+        }
+    }
+    async function remove() {
+        if (!window.confirm(`Delete ${recordName(record)} and everything recorded about them? This can't be undone.`)) {
+            return;
+        }
+        try {
+            await deleteRecord(objectType, workspace.uid, uid);
+            window.location.assign(href(objectType === "contact" ? "/crm" : "/crm/companies"));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete it."));
+        }
+    }
+    if (!record) {
+        return error ? _jsx(Alert, { children: error }) : _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    return (_jsxs("div", { className: "max-w-6xl grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-8", children: [_jsxs("form", { onSubmit: save, className: "flex flex-col gap-3", "aria-label": "Record", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: recordName(record) }), canWrite && (_jsx("button", { type: "button", className: "text-sm text-danger hover:underline", onClick: remove, children: "Delete" }))] }), error && _jsx(Alert, { children: error }), saved && _jsx("p", { className: "text-sm text-success", children: "Saved." }), editable.map((field) => (_jsx(FormField, { label: field.label, htmlFor: `field-${field.name}`, children: _jsx(FieldInput, { field: field, value: values[field.name] ?? "", disabled: !canWrite, onChange: (value) => setValues((current) => ({ ...current, [field.name]: value })) }) }, field.name))), _jsx(FormField, { label: "Tags (comma-separated)", htmlFor: "field-tags", children: _jsx("input", { id: "field-tags", className: INPUT_CLASS, value: tags, disabled: !canWrite, onChange: (event) => setTags(event.target.value) }) }), _jsx(FormField, { label: "Owner", htmlFor: "field-owner", children: _jsxs("select", { id: "field-owner", className: INPUT_CLASS, value: owner, disabled: !canWrite, onChange: (event) => setOwner(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)))] }) }), canWrite && (_jsx(Button, { type: "submit", className: "!w-auto self-start", children: "Save" }))] }), _jsxs("div", { className: "flex flex-col gap-6", children: [objectType === "contact" && _jsx(Subscriptions, { uid: uid, emailStatus: record.emailStatus, onChange: loadActivity }), objectType === "contact" && _jsx(ContactDeals, { contactUid: uid }), _jsx(Notes, { objectType: objectType, uid: uid, notes: notes, onChange: loadActivity }), _jsx(Tasks, { objectType: objectType, uid: uid, tasks: tasks, onChange: loadActivity }), _jsx(Activity, { timeline: timeline })] })] }));
+}
+/** The input of one field, suited to its kind. */
+function FieldInput({ field, value, disabled, onChange }) {
+    const id = `field-${field.name}`;
+    if (field.kind === "boolean" || field.kind === "select") {
+        const options = field.kind === "boolean" ? [{ value: "true", label: "Yes" }, { value: "false", label: "No" }] : field.options ?? [];
+        return (_jsxs("select", { id: id, className: INPUT_CLASS, value: value, disabled: disabled, onChange: (event) => onChange(event.target.value), children: [_jsx("option", { value: "", children: "\u2014" }), options.map((entry) => (_jsx("option", { value: entry.value, children: entry.label }, entry.value)))] }));
+    }
+    return (_jsx("input", { id: id, className: INPUT_CLASS, type: field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text", placeholder: field.kind === "multi" ? (field.options ?? []).map((entry) => entry.value).join(", ") : undefined, value: value, disabled: disabled, onChange: (event) => onChange(event.target.value) }));
+}
+const STATUS_LABELS = { subscribed: "Subscribed", pending: "Awaiting confirmation", unsubscribed: "Unsubscribed" };
+/** A contact's subscriptions: every list, with the contact's status on it and a button to subscribe or unsubscribe them. */
+function Subscriptions({ uid, emailStatus, onChange }) {
+    const { workspace, canWrite } = useCrm();
+    const [lists, setLists] = useState([]);
+    const [subscriptions, setSubscriptionList] = useState([]);
+    const [error, setError] = useState(null);
+    async function load() {
+        const [listResult, subscriptionResult] = await Promise.all([listLists(workspace.uid), listSubscriptions(workspace.uid, uid)]);
+        setLists(listResult);
+        setSubscriptionList(subscriptionResult);
+    }
+    useEffect(() => {
+        load().catch((err) => setError(errorMessage(err, "Could not load the subscriptions.")));
+    }, [workspace.uid, uid]);
+    async function toggle(listUid, subscribed) {
+        try {
+            await setSubscriptions(workspace.uid, { listUid, contactUids: [uid], status: subscribed ? "unsubscribed" : "subscribed" });
+            setError(null);
+            await load();
+            await onChange();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not change the subscription."));
+        }
+    }
+    return (_jsxs("section", { "aria-label": "Subscriptions", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "Subscriptions" }), emailStatus !== "active" && _jsxs("p", { className: "text-sm text-danger mb-2", children: ["No marketing email is sent to this contact (", emailStatus, ")."] }), error && _jsx(Alert, { children: error }), lists.length === 0 && _jsx("p", { className: "text-sm text-text-muted", children: "The workspace has no lists yet." }), _jsx("ul", { className: "flex flex-col gap-1", children: lists.map((list) => {
+                    const status = subscriptions.find((entry) => entry.listUid === list.uid)?.status;
+                    const subscribed = status === "subscribed";
+                    return (_jsxs("li", { className: "text-sm flex items-center gap-2", children: [_jsx("span", { className: "flex-1", children: list.name }), _jsx("span", { className: "text-xs text-text-muted", children: status ? STATUS_LABELS[status] : "Not subscribed" }), canWrite && (_jsx("button", { type: "button", className: "text-xs text-primary-dark hover:underline", onClick: () => void toggle(list.uid, subscribed), children: subscribed ? "Unsubscribe" : "Subscribe" }))] }, list.uid));
+                }) })] }));
+}
+/** The record's notes, and a box for a new one. */
+/** A record's activity timeline, newest first. */
+export function Activity({ timeline }) {
+    return (_jsxs("section", { "aria-label": "Activity", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "Activity" }), _jsx("ol", { className: "flex flex-col gap-2", children: timeline.map((entry) => (_jsxs("li", { className: "text-sm border-l-2 border-border pl-3", children: [_jsx("div", { children: entry.summary }), _jsx("div", { className: "text-xs text-text-muted", children: new Date(entry.occurredAt).toLocaleString() })] }, entry.uid))) })] }));
+}
+/** A record's notes, and adding and deleting them. */
+export function Notes({ objectType, uid, notes, onChange }) {
+    const { workspace, canWrite } = useCrm();
+    const [body, setBody] = useState("");
+    const [error, setError] = useState(null);
+    async function add(event) {
+        event.preventDefault();
+        try {
+            await createNote(workspace.uid, { subjectType: objectType, subjectUid: uid, body });
+            setBody("");
+            setError(null);
+            await onChange();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not add the note."));
+        }
+    }
+    return (_jsxs("section", { "aria-label": "Notes", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "Notes" }), error && _jsx(Alert, { children: error }), canWrite && (_jsxs("form", { onSubmit: add, className: "flex flex-col gap-2 mb-3", children: [_jsx("textarea", { "aria-label": "New note", className: INPUT_CLASS, rows: 3, value: body, onChange: (event) => setBody(event.target.value) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: body.trim() === "", className: "!w-auto self-end", children: "Add note" })] })), _jsx("ul", { className: "flex flex-col gap-2", children: notes.map((note) => (_jsxs("li", { className: "text-sm border border-border rounded-sm p-2 whitespace-pre-wrap", children: [note.body, canWrite && (_jsx("button", { type: "button", "aria-label": "Delete note", className: "block text-xs text-text-muted hover:text-danger mt-1", onClick: async () => {
+                                await deleteNote(workspace.uid, note.uid);
+                                await onChange();
+                            }, children: "Delete" }))] }, note.uid))) })] }));
+}
+/** The record's tasks: tick one off, or add one. */
+/** A record's tasks, and adding and completing them. */
+export function Tasks({ objectType, uid, tasks, onChange }) {
+    const { workspace, canWrite } = useCrm();
+    const [title, setTitle] = useState("");
+    const [dueAt, setDueAt] = useState("");
+    const [error, setError] = useState(null);
+    async function add(event) {
+        event.preventDefault();
+        try {
+            await createTask(workspace.uid, { title, subjectType: objectType, subjectUid: uid, ...(dueAt ? { dueAt: new Date(dueAt).toISOString() } : {}) });
+            setTitle("");
+            setDueAt("");
+            setError(null);
+            await onChange();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not add the task."));
+        }
+    }
+    return (_jsxs("section", { "aria-label": "Tasks", children: [_jsx("h2", { className: "text-sm font-semibold uppercase tracking-wide text-text-muted mb-2", children: "Tasks" }), error && _jsx(Alert, { children: error }), _jsx("ul", { className: "flex flex-col gap-1 mb-2", children: tasks.map((task) => (_jsxs("li", { className: "text-sm flex items-center gap-2", children: [_jsx("input", { type: "checkbox", "aria-label": `Done: ${task.title}`, checked: task.status === "done", disabled: !canWrite, onChange: async () => {
+                                await updateTask(workspace.uid, task.uid, { status: task.status === "done" ? "open" : "done" });
+                                await onChange();
+                            } }), _jsx("span", { className: task.status === "done" ? "line-through text-text-muted" : "", children: task.title }), task.dueAt && _jsxs("span", { className: "text-xs text-text-muted", children: ["due ", new Date(task.dueAt).toLocaleDateString()] })] }, task.uid))) }), canWrite && (_jsxs("form", { onSubmit: add, className: "flex flex-wrap gap-2", children: [_jsx("input", { "aria-label": "New task", placeholder: "New task", className: `${INPUT_CLASS} !w-56`, value: title, onChange: (event) => setTitle(event.target.value) }), _jsx("input", { "aria-label": "Due date", type: "date", className: `${INPUT_CLASS} !w-40`, value: dueAt, onChange: (event) => setDueAt(event.target.value) }), _jsx(Button, { type: "submit", variant: "secondary", disabled: title.trim() === "", className: "!w-auto", children: "Add task" })] }))] }));
+}

package/dist/apps/shared/components/RecordList.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { CrmObjectType, CrmRecord } from "../crmApi.js";
+/** How many records a page of the list shows. */
+export declare const PAGE_SIZE = 50;
+/**
+ * A workspace's contacts or companies: a quick search, a filter builder, a sortable table a page at a time, bulk actions on the ticked
+ * rows (add or remove a tag, delete), export of everything matching, and a form for a new record. Each row opens the record.
+ */
+export default function RecordList({ objectType }: {
+    objectType: CrmObjectType;
+}): React.JSX.Element;
+/** How a record is named in labels: a contact by its name or address, a company by its name. */
+export declare function recordName(record: CrmRecord): string;

package/dist/apps/shared/components/RecordList.js

@@ -0,0 +1,214 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useMemo, 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 Modal from "@rapidmx/web-client/lib/components/overlays/Modal.js";
+import { bulkRecords, createRecord, errorMessage, exportRecords, listLists, listProperties, searchRecords, setSubscriptions, listSegments, } from "../crmApi.js";
+import { fieldValue, formatValue, recordFields } from "../fields.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+import FilterBuilder, { EMPTY_FILTER, buildFilter } from "./FilterBuilder.js";
+/** How many records a page of the list shows. */
+export const PAGE_SIZE = 50;
+/** The columns of each kind of list, by field name. */
+const COLUMNS = {
+    contact: ["email", "firstName", "lastName", "lifecycleStage", "score", "tags", "dateCreated"],
+    company: ["name", "domain", "industry", "employeeCount", "city", "tags", "dateCreated"],
+};
+/** The columns a list may be sorted by. */
+const SORTABLE = {
+    contact: ["email", "firstName", "lastName", "score", "lifecycleStage", "dateCreated"],
+    company: ["name", "domain", "employeeCount", "dateCreated"],
+};
+const NOUNS = {
+    contact: { one: "contact", many: "Contacts", path: "/crm/contacts" },
+    company: { one: "company", many: "Companies", path: "/crm/companies" },
+};
+/**
+ * A workspace's contacts or companies: a quick search, a filter builder, a sortable table a page at a time, bulk actions on the ticked
+ * rows (add or remove a tag, delete), export of everything matching, and a form for a new record. Each row opens the record.
+ */
+export default function RecordList({ objectType }) {
+    const { workspace, canWrite, href } = useCrm();
+    const noun = NOUNS[objectType];
+    const [definitions, setDefinitions] = useState([]);
+    const [query, setQuery] = useState("");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [draft, setDraft] = useState(EMPTY_FILTER);
+    const [sort, setSort] = useState({ field: "dateCreated", direction: "desc" });
+    const [page, setPage] = useState(0);
+    const [records, setRecords] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selected, setSelected] = useState(new Set());
+    const [creating, setCreating] = useState(false);
+    const [tagAction, setTagAction] = useState(null);
+    const [lists, setLists] = useState([]);
+    const [segments, setSegments] = useState([]);
+    const [listAction, setListAction] = useState(null);
+    const fields = useMemo(() => recordFields(objectType, definitions, lists, segments), [objectType, definitions, lists, segments]);
+    const columns = COLUMNS[objectType].map((name) => fields.find((field) => field.name === name));
+    const request = { q: query.trim() || undefined, filter: buildFilter(draft, fields), sort };
+    useEffect(() => {
+        listProperties(workspace.uid, objectType)
+            .then(setDefinitions)
+            .catch(() => setDefinitions([]));
+        if (objectType === "contact") {
+            listLists(workspace.uid)
+                .then(setLists)
+                .catch(() => setLists([]));
+            listSegments(workspace.uid)
+                .then(setSegments)
+                .catch(() => setSegments([]));
+            // `?list=<uid>` (the Lists page's "Subscribers" link) opens the list's subscribers; `?segment=<uid>` a segment's members.
+            const params = new URLSearchParams(window.location.search);
+            const listUid = params.get("list");
+            const segmentUid = params.get("segment");
+            if (listUid || segmentUid) {
+                setDraft({ match: "and", conditions: [{ field: listUid ? "lists" : "segments", op: "eq", value: (listUid ?? segmentUid) }] });
+                setFilterOpen(true);
+            }
+        }
+    }, [workspace.uid, objectType]);
+    async function load() {
+        setLoading(true);
+        try {
+            const result = await searchRecords(objectType, workspace.uid, { ...request, limit: PAGE_SIZE, page });
+            setRecords(result.items);
+            setTotal(result.total);
+            setError(null);
+        }
+        catch (err) {
+            setError(errorMessage(err, `Could not load the ${noun.many.toLowerCase()}.`));
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    // Reloads whenever what the list shows changes. The filter is compared by value, since it is rebuilt on every render.
+    const requestKey = JSON.stringify(request);
+    useEffect(() => {
+        void load();
+    }, [workspace.uid, requestKey, page]);
+    function toggleSort(field) {
+        setPage(0);
+        setSort((current) => (current.field === field ? { field, direction: current.direction === "asc" ? "desc" : "asc" } : { field, direction: "asc" }));
+    }
+    function toggleRow(uid) {
+        setSelected((current) => {
+            const next = new Set(current);
+            if (next.has(uid)) {
+                next.delete(uid);
+            }
+            else {
+                next.add(uid);
+            }
+            return next;
+        });
+    }
+    async function runBulk(action, tags) {
+        try {
+            await bulkRecords(objectType, workspace.uid, { uids: [...selected], action, tags });
+            setSelected(new Set());
+            setTagAction(null);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not change the selected records."));
+        }
+    }
+    async function runListAction(listUid) {
+        try {
+            await setSubscriptions(workspace.uid, { listUid, contactUids: [...selected], status: listAction });
+            setSelected(new Set());
+            setListAction(null);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not change the selected contacts' subscriptions."));
+        }
+    }
+    async function runExport() {
+        try {
+            await exportRecords(objectType, workspace.uid, request);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not export."));
+        }
+    }
+    const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const allOnPage = records.length > 0 && records.every((record) => selected.has(record.uid));
+    return (_jsxs("div", { className: "max-w-6xl", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 mb-4", children: [_jsxs("h1", { className: "text-lg font-bold tracking-tight", children: [noun.many, " ", _jsxs("span", { className: "text-text-muted font-normal", children: ["(", total, ")"] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: runExport, children: "Export" }), canWrite && (_jsxs(Button, { type: "button", className: "!w-auto", onClick: () => setCreating(true), children: ["+ New ", noun.one] }))] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-3", children: [_jsx("input", { "aria-label": "Search", placeholder: `Search ${noun.many.toLowerCase()}`, className: `${INPUT_CLASS} !w-72`, value: query, onChange: (event) => {
+                            setPage(0);
+                            setQuery(event.target.value);
+                        } }), _jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline font-medium", onClick: () => setFilterOpen((open) => !open), children: filterOpen ? "Hide filters" : `Filters${draft.conditions.length > 0 ? ` (${draft.conditions.length})` : ""}` })] }), filterOpen && (_jsx("div", { className: "border border-border rounded-sm p-3 mb-3", children: _jsx(FilterBuilder, { fields: fields, draft: draft, onChange: (next) => {
+                        setPage(0);
+                        setDraft(next);
+                    } }) })), error && _jsx(Alert, { children: error }), selected.size > 0 && canWrite && (_jsxs("div", { className: "flex items-center gap-3 mb-2 text-sm", role: "toolbar", "aria-label": "Selected records", children: [_jsxs("span", { children: [selected.size, " selected"] }), _jsx("button", { type: "button", className: "text-primary-dark hover:underline", onClick: () => setTagAction("addTags"), children: "Add tag" }), _jsx("button", { type: "button", className: "text-primary-dark hover:underline", onClick: () => setTagAction("removeTags"), children: "Remove tag" }), objectType === "contact" && lists.length > 0 && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "text-primary-dark hover:underline", onClick: () => setListAction("subscribed"), children: "Add to list" }), _jsx("button", { type: "button", className: "text-primary-dark hover:underline", onClick: () => setListAction("unsubscribed"), children: "Remove from list" })] })), _jsx("button", { type: "button", className: "text-danger hover:underline", onClick: () => {
+                            if (window.confirm(`Delete ${selected.size} ${selected.size === 1 ? noun.one : noun.many.toLowerCase()}? This can't be undone.`)) {
+                                void runBulk("delete");
+                            }
+                        }, children: "Delete" })] })), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "w-8 py-2 px-2 border-b border-border", children: _jsx("input", { type: "checkbox", "aria-label": "Select all on this page", checked: allOnPage, onChange: () => setSelected(allOnPage ? new Set() : new Set(records.map((record) => record.uid))) }) }), columns.map((column) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border whitespace-nowrap", children: SORTABLE[objectType].includes(column.name) ? (_jsxs("button", { type: "button", className: "uppercase tracking-wide hover:text-text", onClick: () => toggleSort(column.name), children: [column.label, sort.field === column.name ? (sort.direction === "asc" ? " ▲" : " ▼") : ""] })) : (column.label) }, column.name)))] }) }), _jsx("tbody", { children: records.map((record) => (_jsxs("tr", { className: "hover:bg-surface-alt", children: [_jsx("td", { className: "py-2 px-2 border-b border-border", children: _jsx("input", { type: "checkbox", "aria-label": `Select ${recordName(record)}`, checked: selected.has(record.uid), onChange: () => toggleRow(record.uid) }) }), columns.map((column, index) => (_jsx("td", { className: "py-2 px-2.5 border-b border-border", children: index === 0 ? (_jsx("a", { className: "text-primary-dark hover:underline font-medium", href: href(`${noun.path}/${encodeURIComponent(record.uid)}`), children: formatValue(fieldValue(record, column), column) })) : (formatValue(fieldValue(record, column), column)) }, column.name)))] }, record.uid))) })] }) }), !loading && records.length === 0 && _jsxs("p", { className: "text-sm text-text-muted mt-4", children: ["No ", noun.many.toLowerCase(), " match."] }), pages > 1 && (_jsxs("div", { className: "flex items-center gap-3 mt-3 text-sm", children: [_jsx("button", { type: "button", disabled: page === 0, onClick: () => setPage(page - 1), className: "disabled:opacity-40", children: "\u2190 Previous" }), _jsxs("span", { children: ["Page ", page + 1, " of ", pages] }), _jsx("button", { type: "button", disabled: page + 1 >= pages, onClick: () => setPage(page + 1), className: "disabled:opacity-40", children: "Next \u2192" })] })), _jsx(NewRecordModal, { objectType: objectType, open: creating, onClose: () => setCreating(false), onCreated: () => void load() }), _jsx(ListModal, { action: listAction, lists: lists, onClose: () => setListAction(null), onSubmit: (listUid) => void runListAction(listUid) }), _jsx(TagModal, { action: tagAction, onClose: () => setTagAction(null), onSubmit: (tags) => void runBulk(tagAction, tags) })] }));
+}
+/** How a record is named in labels: a contact by its name or address, a company by its name. */
+export function recordName(record) {
+    if ("email" in record) {
+        const name = [record.firstName, record.lastName].filter(Boolean).join(" ");
+        return name || record.email;
+    }
+    return record.name;
+}
+/** The form for a new contact (email, names) or company (name, domain). */
+function NewRecordModal({ objectType, open, onClose, onCreated }) {
+    const { workspace } = useCrm();
+    const [values, setValues] = useState({});
+    const [error, setError] = useState(null);
+    const inputs = objectType === "contact"
+        ? [
+            ["email", "Email"],
+            ["firstName", "First name"],
+            ["lastName", "Last name"],
+        ]
+        : [
+            ["name", "Name"],
+            ["domain", "Domain"],
+        ];
+    async function submit(event) {
+        event.preventDefault();
+        try {
+            const body = Object.fromEntries(Object.entries(values).filter(([, value]) => value.trim() !== ""));
+            await createRecord(objectType, workspace.uid, body);
+            setValues({});
+            setError(null);
+            onClose();
+            onCreated();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not create it."));
+        }
+    }
+    return (_jsx(Modal, { open: open, onClose: onClose, title: objectType === "contact" ? "New contact" : "New company", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3", children: [error && _jsx(Alert, { children: error }), inputs.map(([name, label]) => (_jsx(FormField, { label: label, htmlFor: `new-${name}`, children: _jsx("input", { id: `new-${name}`, className: INPUT_CLASS, value: values[name] ?? "", onChange: (event) => setValues((current) => ({ ...current, [name]: event.target.value })) }) }, name))), _jsx(Button, { type: "submit", className: "!w-auto self-end", children: "Create" })] }) }));
+}
+/** Asks for the list to subscribe the selected contacts to, or unsubscribe them from. */
+function ListModal({ action, lists, onClose, onSubmit, }) {
+    const [listUid, setListUid] = useState("");
+    return (_jsx(Modal, { open: action !== null, onClose: onClose, title: action === "unsubscribed" ? "Remove from a list" : "Add to a list", children: _jsxs("form", { className: "flex flex-col gap-3", onSubmit: (event) => {
+                event.preventDefault();
+                onSubmit(listUid);
+                setListUid("");
+            }, children: [_jsx(FormField, { label: "List", htmlFor: "bulk-list", children: _jsxs("select", { id: "bulk-list", className: INPUT_CLASS, value: listUid, onChange: (event) => setListUid(event.target.value), required: true, children: [_jsx("option", { value: "", children: "Choose\u2026" }), lists.map((list) => (_jsx("option", { value: list.uid, children: list.name }, list.uid)))] }) }), _jsx(Button, { type: "submit", className: "!w-auto self-end", children: action === "unsubscribed" ? "Remove" : "Add" })] }) }));
+}
+/** Asks for the tag to add to or remove from the selected records. */
+function TagModal({ action, onClose, onSubmit }) {
+    const [tag, setTag] = useState("");
+    return (_jsx(Modal, { open: action !== null, onClose: onClose, title: action === "removeTags" ? "Remove a tag" : "Add a tag", children: _jsxs("form", { className: "flex flex-col gap-3", onSubmit: (event) => {
+                event.preventDefault();
+                onSubmit([tag]);
+                setTag("");
+            }, children: [_jsx(FormField, { label: "Tag", htmlFor: "bulk-tag", children: _jsx("input", { id: "bulk-tag", className: INPUT_CLASS, value: tag, onChange: (event) => setTag(event.target.value), required: true }) }), _jsx(Button, { type: "submit", className: "!w-auto self-end", children: action === "removeTags" ? "Remove" : "Add" })] }) }));
+}

package/dist/apps/shared/components/ScoringRules.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ScoringActivity, ScoringRule } from "../crmApi.js";
+export declare const ACTIVITIES: {
+    value: ScoringActivity;
+    label: string;
+}[];
+/** A rule in a sentence: "+10 each time: Opened an email (last 30 days, at most 50)". */
+export declare function describeRule(rule: ScoringRule): string;
+/**
+ * A workspace's lead scoring rules: a contact's score is the sum of the enabled rules' points. Admins add, change, switch off and
+ * delete rules and can rescore everyone at once; scores are otherwise brought up to date in the background.
+ */
+export default function ScoringRules(): React.JSX.Element;

package/dist/apps/shared/components/ScoringRules.js

@@ -0,0 +1,128 @@
+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 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 { createScoringRule, deleteScoringRule, errorMessage, listScoringRules, recalculateScores, updateScoringRule, } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+import FilterBuilder, { buildFilter, draftOf } from "./FilterBuilder.js";
+import { useSegmentFields } from "./SegmentManager.js";
+export const ACTIVITIES = [
+    { value: "opened", label: "Opened an email" },
+    { value: "clicked", label: "Clicked a link in an email" },
+    { value: "replied", label: "Replied to an email" },
+    { value: "form_submitted", label: "Submitted a form" },
+    { value: "subscribed", label: "Subscribed to a list" },
+    { value: "unsubscribed", label: "Unsubscribed from a list" },
+    { value: "bounced", label: "Had an email bounce" },
+];
+/** A rule in a sentence: "+10 each time: Opened an email (last 30 days, at most 50)". */
+export function describeRule(rule) {
+    const points = `${rule.points > 0 ? "+" : ""}${rule.points}`;
+    if (rule.kind === "property") {
+        return `${points} when the contact matches the rule's conditions`;
+    }
+    const activity = ACTIVITIES.find((entry) => entry.value === rule.activity)?.label ?? String(rule.activity);
+    const limits = [...(rule.withinDays ? [`last ${rule.withinDays} days`] : []), ...(rule.maxPoints ? [`at most ${rule.maxPoints}`] : [])];
+    return `${points} each time: ${activity}${limits.length > 0 ? ` (${limits.join(", ")})` : ""}`;
+}
+/**
+ * A workspace's lead scoring rules: a contact's score is the sum of the enabled rules' points. Admins add, change, switch off and
+ * delete rules and can rescore everyone at once; scores are otherwise brought up to date in the background.
+ */
+export default function ScoringRules() {
+    const { workspace, canManage } = useCrm();
+    const [rules, setRules] = useState([]);
+    const [editing, setEditing] = useState(null);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function load() {
+        try {
+            setRules(await listScoringRules(workspace.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not load the scoring rules."));
+        }
+    }
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+    async function toggle(rule) {
+        try {
+            await updateScoringRule(workspace.uid, rule.uid, { enabled: !rule.enabled });
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not change the rule."));
+        }
+    }
+    async function remove(rule) {
+        if (!window.confirm(`Delete the rule "${rule.name}"?`)) {
+            return;
+        }
+        try {
+            await deleteScoringRule(workspace.uid, rule.uid);
+            await load();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the rule."));
+        }
+    }
+    async function recalculate() {
+        setBusy(true);
+        setNotice(null);
+        try {
+            const { changed } = await recalculateScores(workspace.uid);
+            setNotice(`Scores recalculated: ${changed} ${changed === 1 ? "contact" : "contacts"} changed.`);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not recalculate the scores."));
+        }
+        setBusy(false);
+    }
+    return (_jsxs("div", { className: "max-w-4xl", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-2", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Lead scoring" }), canManage && (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void recalculate(), children: "Recalculate now" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => setEditing("new"), children: "+ New rule" })] }))] }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "A contact's score is the sum of the points of every rule below. Scores update in the background; filter and sort contacts by score to find your hottest leads." }), error && _jsx(Alert, { children: error }), notice && (_jsx("p", { role: "status", className: "text-sm text-success mb-3", children: notice })), rules.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No scoring rules yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: rules.map((rule) => (_jsxs("li", { className: `flex items-center gap-3 border border-border rounded-sm p-3 ${rule.enabled ? "" : "opacity-60"}`, children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium", children: rule.name }), _jsx("div", { className: "text-sm text-text-muted", children: describeRule(rule) })] }), canManage && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex items-center gap-1.5 text-sm", children: [_jsx("input", { type: "checkbox", checked: rule.enabled, onChange: () => void toggle(rule) }), "On"] }), _jsx("button", { type: "button", className: "text-sm text-primary-dark hover:underline font-medium", onClick: () => setEditing(rule), children: "Edit" }), _jsx("button", { type: "button", className: "text-sm text-danger hover:underline", onClick: () => void remove(rule), children: "Delete" })] }))] }, rule.uid))) })), editing && (_jsx(RuleEditor, { rule: editing === "new" ? undefined : editing, onClose: () => setEditing(null), onSaved: () => {
+                    setEditing(null);
+                    void load();
+                } }))] }));
+}
+/** Creates or changes a scoring rule. A rule's kind is chosen when it is created. */
+function RuleEditor({ rule, onClose, onSaved }) {
+    const { workspace } = useCrm();
+    const fields = useSegmentFields();
+    const [name, setName] = useState(rule?.name ?? "");
+    const [kind, setKind] = useState(rule?.kind ?? "property");
+    const [draft, setDraft] = useState(() => draftOf(rule?.filter));
+    const [activity, setActivity] = useState(rule?.activity ?? "opened");
+    const [points, setPoints] = useState(String(rule?.points ?? 10));
+    const [maxPoints, setMaxPoints] = useState(rule?.maxPoints ? String(rule.maxPoints) : "");
+    const [withinDays, setWithinDays] = useState(rule?.withinDays ? String(rule.withinDays) : "");
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const filter = buildFilter(draft, fields);
+    async function submit(event) {
+        event.preventDefault();
+        setSaving(true);
+        const input = {
+            name: name.trim(),
+            points: Number(points),
+            ...(kind === "property"
+                ? { filter }
+                : { activity, maxPoints: maxPoints ? Number(maxPoints) : null, withinDays: withinDays ? Number(withinDays) : null }),
+        };
+        try {
+            await (rule ? updateScoringRule(workspace.uid, rule.uid, input) : createScoringRule(workspace.uid, { ...input, kind }));
+            onSaved();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the rule."));
+            setSaving(false);
+        }
+    }
+    return (_jsx(Modal, { open: true, onClose: onClose, title: rule ? "Edit rule" : "New rule", children: _jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3 min-w-[34rem]", children: [error && _jsx(Alert, { children: error }), _jsx(FormField, { label: "Name", htmlFor: "crm-rule-name", children: _jsx("input", { id: "crm-rule-name", className: INPUT_CLASS, value: name, onChange: (event) => setName(event.target.value), required: true }) }), !rule && (_jsxs("fieldset", { className: "flex gap-4 text-sm", children: [_jsx("legend", { className: "text-xs font-semibold text-text-muted mb-1", children: "Score contacts" }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "crm-rule-kind", checked: kind === "property", onChange: () => setKind("property") }), "By who they are"] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "crm-rule-kind", checked: kind === "activity", onChange: () => setKind("activity") }), "By what they do"] })] })), kind === "property" ? (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-text-muted mb-1", children: "Contacts matching" }), _jsx(FilterBuilder, { fields: fields, draft: draft, onChange: setDraft })] })) : (_jsxs(_Fragment, { children: [_jsx(FormField, { label: "Each time the contact", htmlFor: "crm-rule-activity", children: _jsx("select", { id: "crm-rule-activity", className: INPUT_CLASS, value: activity, onChange: (event) => setActivity(event.target.value), children: ACTIVITIES.map((entry) => (_jsx("option", { value: entry.value, children: entry.label }, entry.value))) }) }), _jsxs("div", { className: "flex gap-3", children: [_jsx(FormField, { label: "In the last (days, empty: ever)", htmlFor: "crm-rule-days", children: _jsx("input", { id: "crm-rule-days", type: "number", min: 1, className: INPUT_CLASS, value: withinDays, onChange: (event) => setWithinDays(event.target.value) }) }), _jsx(FormField, { label: "At most (points, empty: no limit)", htmlFor: "crm-rule-max", children: _jsx("input", { id: "crm-rule-max", type: "number", min: 1, className: INPUT_CLASS, value: maxPoints, onChange: (event) => setMaxPoints(event.target.value) }) })] })] })), _jsx(FormField, { label: "Points (negative takes away)", htmlFor: "crm-rule-points", children: _jsx("input", { id: "crm-rule-points", type: "number", min: -100, max: 100, className: `${INPUT_CLASS} !w-32`, value: points, onChange: (event) => setPoints(event.target.value), required: true }) }), _jsx(Button, { type: "submit", loading: saving, disabled: saving || !name.trim() || (kind === "property" && !filter), className: "!w-auto self-start", children: rule ? "Save" : "Create" })] }) }));
+}