@rapidmx/crm-plugin 0.1.0

package/apps/shared/components/ScoringRules.tsx

@@ -0,0 +1,262 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, 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 {
+    FilterNode,
+    ScoringActivity,
+    ScoringKind,
+    ScoringRule,
+    ScoringRuleInput,
+    createScoringRule,
+    deleteScoringRule,
+    errorMessage,
+    listScoringRules,
+    recalculateScores,
+    updateScoringRule,
+} from "../crmApi.js";
+import { FieldInfo } from "../fields.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+import FilterBuilder, { FilterDraft, buildFilter, draftOf } from "./FilterBuilder.js";
+import { useSegmentFields } from "./SegmentManager.js";
+
+export const ACTIVITIES: { value: ScoringActivity; label: string }[] = [
+    { 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: ScoringRule): string {
+    const points: string = `${rule.points > 0 ? "+" : ""}${rule.points}`;
+    if (rule.kind === "property") {
+        return `${points} when the contact matches the rule's conditions`;
+    }
+    const activity: string = ACTIVITIES.find((entry) => entry.value === rule.activity)?.label ?? String(rule.activity);
+    const limits: string[] = [...(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<ScoringRule[]>([]);
+    const [editing, setEditing] = useState<ScoringRule | "new" | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [notice, setNotice] = useState<string | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    async function load(): Promise<void> {
+        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: ScoringRule): Promise<void> {
+        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: ScoringRule): Promise<void> {
+        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(): Promise<void> {
+        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 (
+        <div className="max-w-4xl">
+            <div className="flex items-center justify-between gap-2 mb-2">
+                <h1 className="text-lg font-bold tracking-tight">Lead scoring</h1>
+                {canManage && (
+                    <div className="flex gap-2">
+                        <Button type="button" variant="secondary" className="!w-auto" loading={busy} disabled={busy} onClick={() => void recalculate()}>
+                            Recalculate now
+                        </Button>
+                        <Button type="button" className="!w-auto" onClick={() => setEditing("new")}>
+                            + New rule
+                        </Button>
+                    </div>
+                )}
+            </div>
+            <p className="text-sm text-text-muted mb-4">
+                A contact&apos;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.
+            </p>
+            {error && <Alert>{error}</Alert>}
+            {notice && (
+                <p role="status" className="text-sm text-success mb-3">
+                    {notice}
+                </p>
+            )}
+            {rules.length === 0 ? (
+                <p className="text-sm text-text-muted">No scoring rules yet.</p>
+            ) : (
+                <ul className="flex flex-col gap-2">
+                    {rules.map((rule) => (
+                        <li key={rule.uid} className={`flex items-center gap-3 border border-border rounded-sm p-3 ${rule.enabled ? "" : "opacity-60"}`}>
+                            <div className="flex-1 min-w-0">
+                                <div className="font-medium">{rule.name}</div>
+                                <div className="text-sm text-text-muted">{describeRule(rule)}</div>
+                            </div>
+                            {canManage && (
+                                <>
+                                    <label className="flex items-center gap-1.5 text-sm">
+                                        <input type="checkbox" checked={rule.enabled} onChange={() => void toggle(rule)} />
+                                        On
+                                    </label>
+                                    <button type="button" className="text-sm text-primary-dark hover:underline font-medium" onClick={() => setEditing(rule)}>
+                                        Edit
+                                    </button>
+                                    <button type="button" className="text-sm text-danger hover:underline" onClick={() => void remove(rule)}>
+                                        Delete
+                                    </button>
+                                </>
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            )}
+            {editing && (
+                <RuleEditor
+                    rule={editing === "new" ? undefined : editing}
+                    onClose={() => setEditing(null)}
+                    onSaved={() => {
+                        setEditing(null);
+                        void load();
+                    }}
+                />
+            )}
+        </div>
+    );
+}
+
+/** Creates or changes a scoring rule. A rule's kind is chosen when it is created. */
+function RuleEditor({ rule, onClose, onSaved }: { rule?: ScoringRule; onClose: () => void; onSaved: () => void }) {
+    const { workspace } = useCrm();
+    const fields: FieldInfo[] = useSegmentFields();
+    const [name, setName] = useState(rule?.name ?? "");
+    const [kind, setKind] = useState<ScoringKind>(rule?.kind ?? "property");
+    const [draft, setDraft] = useState<FilterDraft>(() => draftOf(rule?.filter));
+    const [activity, setActivity] = useState<ScoringActivity>(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<string | null>(null);
+    const filter: FilterNode | undefined = buildFilter(draft, fields);
+
+    async function submit(event: FormEvent): Promise<void> {
+        event.preventDefault();
+        setSaving(true);
+        const input: ScoringRuleInput = {
+            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 (
+        <Modal open onClose={onClose} title={rule ? "Edit rule" : "New rule"}>
+            <form onSubmit={submit} className="flex flex-col gap-3 min-w-[34rem]">
+                {error && <Alert>{error}</Alert>}
+                <FormField label="Name" htmlFor="crm-rule-name">
+                    <input id="crm-rule-name" className={INPUT_CLASS} value={name} onChange={(event) => setName(event.target.value)} required />
+                </FormField>
+                {!rule && (
+                    <fieldset className="flex gap-4 text-sm">
+                        <legend className="text-xs font-semibold text-text-muted mb-1">Score contacts</legend>
+                        <label className="flex items-center gap-1.5">
+                            <input type="radio" name="crm-rule-kind" checked={kind === "property"} onChange={() => setKind("property")} />
+                            By who they are
+                        </label>
+                        <label className="flex items-center gap-1.5">
+                            <input type="radio" name="crm-rule-kind" checked={kind === "activity"} onChange={() => setKind("activity")} />
+                            By what they do
+                        </label>
+                    </fieldset>
+                )}
+                {kind === "property" ? (
+                    <div>
+                        <div className="text-xs font-semibold text-text-muted mb-1">Contacts matching</div>
+                        <FilterBuilder fields={fields} draft={draft} onChange={setDraft} />
+                    </div>
+                ) : (
+                    <>
+                        <FormField label="Each time the contact" htmlFor="crm-rule-activity">
+                            <select id="crm-rule-activity" className={INPUT_CLASS} value={activity} onChange={(event) => setActivity(event.target.value as ScoringActivity)}>
+                                {ACTIVITIES.map((entry) => (
+                                    <option key={entry.value} value={entry.value}>
+                                        {entry.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </FormField>
+                        <div className="flex gap-3">
+                            <FormField label="In the last (days, empty: ever)" htmlFor="crm-rule-days">
+                                <input id="crm-rule-days" type="number" min={1} className={INPUT_CLASS} value={withinDays} onChange={(event) => setWithinDays(event.target.value)} />
+                            </FormField>
+                            <FormField label="At most (points, empty: no limit)" htmlFor="crm-rule-max">
+                                <input id="crm-rule-max" type="number" min={1} className={INPUT_CLASS} value={maxPoints} onChange={(event) => setMaxPoints(event.target.value)} />
+                            </FormField>
+                        </div>
+                    </>
+                )}
+                <FormField label="Points (negative takes away)" htmlFor="crm-rule-points">
+                    <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 />
+                </FormField>
+                <Button type="submit" loading={saving} disabled={saving || !name.trim() || (kind === "property" && !filter)} className="!w-auto self-start">
+                    {rule ? "Save" : "Create"}
+                </Button>
+            </form>
+        </Modal>
+    );
+}

package/apps/shared/components/SegmentManager.tsx

@@ -0,0 +1,245 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, 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 {
+    FilterNode,
+    MailingList,
+    PropertyDefinition,
+    Segment,
+    SegmentKind,
+    SegmentPreview,
+    createSegment,
+    deleteSegment,
+    errorMessage,
+    listLists,
+    listProperties,
+    listSegments,
+    previewSegment,
+    refreshSegment,
+    updateSegment,
+} from "../crmApi.js";
+import { FieldInfo, recordFields } from "../fields.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+import FilterBuilder, { FilterDraft, buildFilter, draftOf } from "./FilterBuilder.js";
+
+/**
+ * A workspace's segments: how many contacts each holds and when that was worked out, a link to its members, and (for editors)
+ * creating, changing, refreshing and deleting them. A dynamic segment keeps up with its filter by itself; a static one is a snapshot,
+ * refreshed only by hand.
+ */
+export default function SegmentManager() {
+    const { workspace, canWrite, href } = useCrm();
+    const [segments, setSegments] = useState<Segment[]>([]);
+    const [editing, setEditing] = useState<Segment | "new" | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    async function load(): Promise<void> {
+        try {
+            setSegments(await listSegments(workspace.uid));
+        } catch (err) {
+            setError(errorMessage(err, "Could not load the segments."));
+        }
+    }
+
+    useEffect(() => {
+        void load();
+    }, [workspace.uid]);
+
+    async function refresh(segment: Segment): Promise<void> {
+        try {
+            const refreshed: Segment = await refreshSegment(workspace.uid, segment.uid);
+            setSegments(segments.map((entry) => (entry.uid === refreshed.uid ? refreshed : entry)));
+        } catch (err) {
+            setError(errorMessage(err, "Could not refresh the segment."));
+        }
+    }
+
+    async function remove(segment: Segment): Promise<void> {
+        if (!window.confirm(`Delete the segment "${segment.name}"? Its contacts stay.`)) {
+            return;
+        }
+        try {
+            await deleteSegment(workspace.uid, segment.uid);
+            await load();
+        } catch (err) {
+            setError(errorMessage(err, "Could not delete the segment."));
+        }
+    }
+
+    return (
+        <div className="max-w-5xl">
+            <div className="flex items-center justify-between mb-4">
+                <h1 className="text-lg font-bold tracking-tight">Segments</h1>
+                {canWrite && (
+                    <Button type="button" className="!w-auto" onClick={() => setEditing("new")}>
+                        + New segment
+                    </Button>
+                )}
+            </div>
+            {error && <Alert>{error}</Alert>}
+            {segments.length === 0 ? (
+                <p className="text-sm text-text-muted">No segments yet. A segment groups the contacts matching a filter, to find them again or email them.</p>
+            ) : (
+                <table className="w-full text-sm border-collapse">
+                    <thead>
+                        <tr>
+                            {["Name", "Kind", "Contacts", "Worked out", ""].map((heading) => (
+                                <th key={heading} className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border">
+                                    {heading}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {segments.map((segment) => (
+                            <tr key={segment.uid}>
+                                <td className="py-2 px-2.5 border-b border-border">
+                                    <span className="font-medium">{segment.name}</span>
+                                    {segment.description && <div className="text-xs text-text-muted">{segment.description}</div>}
+                                </td>
+                                <td className="py-2 px-2.5 border-b border-border">{segment.kind === "dynamic" ? "Dynamic" : "Static"}</td>
+                                <td className="py-2 px-2.5 border-b border-border">
+                                    {segment.memberCount.toLocaleString()}
+                                    {segment.capped && <span className="ml-1 text-xs text-warning">(limit reached)</span>}
+                                </td>
+                                <td className="py-2 px-2.5 border-b border-border whitespace-nowrap">{segment.refreshedAt ? new Date(segment.refreshedAt).toLocaleString() : "–"}</td>
+                                <td className="py-2 px-2.5 border-b border-border text-right whitespace-nowrap">
+                                    <a className="text-primary-dark hover:underline font-medium mr-4" href={href(`/crm?segment=${encodeURIComponent(segment.uid)}`)}>
+                                        Contacts
+                                    </a>
+                                    {canWrite && (
+                                        <>
+                                            <button type="button" className="text-primary-dark hover:underline font-medium mr-4" onClick={() => void refresh(segment)}>
+                                                Refresh
+                                            </button>
+                                            <button type="button" className="text-primary-dark hover:underline font-medium mr-4" onClick={() => setEditing(segment)}>
+                                                Edit
+                                            </button>
+                                            <button type="button" className="text-danger hover:underline" onClick={() => void remove(segment)}>
+                                                Delete
+                                            </button>
+                                        </>
+                                    )}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            )}
+            {editing && (
+                <SegmentEditor
+                    segment={editing === "new" ? undefined : editing}
+                    onClose={() => setEditing(null)}
+                    onSaved={() => {
+                        setEditing(null);
+                        void load();
+                    }}
+                />
+            )}
+        </div>
+    );
+}
+
+/** The fields a contact filter may use: every contact field - but segments, unless `withSegments` (a segment's own filter can't). */
+export function useSegmentFields(withSegments: boolean = false): FieldInfo[] {
+    const { workspace } = useCrm();
+    const [definitions, setDefinitions] = useState<PropertyDefinition[]>([]);
+    const [lists, setLists] = useState<MailingList[]>([]);
+    const [segments, setSegments] = useState<Segment[]>([]);
+    useEffect(() => {
+        listProperties(workspace.uid, "contact").then(setDefinitions, () => setDefinitions([]));
+        listLists(workspace.uid).then(setLists, () => setLists([]));
+        if (withSegments) {
+            listSegments(workspace.uid).then(setSegments, () => setSegments([]));
+        }
+    }, [workspace.uid]);
+    return useMemo(() => recordFields("contact", definitions, lists, withSegments ? segments : null), [definitions, lists, segments]);
+}
+
+/** Creates or changes a segment, counting the contacts its filter matches as it is edited. */
+function SegmentEditor({ segment, onClose, onSaved }: { segment?: Segment; onClose: () => void; onSaved: () => void }) {
+    const { workspace } = useCrm();
+    const fields: FieldInfo[] = useSegmentFields();
+    const [name, setName] = useState(segment?.name ?? "");
+    const [description, setDescription] = useState(segment?.description ?? "");
+    const [kind, setKind] = useState<SegmentKind>(segment?.kind ?? "dynamic");
+    const [draft, setDraft] = useState<FilterDraft>(() => draftOf(segment?.filter));
+    const [preview, setPreview] = useState<SegmentPreview | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const filter: FilterNode | undefined = buildFilter(draft, fields);
+    const filterKey: string = JSON.stringify(filter ?? null);
+
+    useEffect(() => {
+        if (!filter) {
+            setPreview(null);
+            return;
+        }
+        let current = true;
+        previewSegment(workspace.uid, filter).then(
+            (result) => current && setPreview(result),
+            () => current && setPreview(null),
+        );
+        return () => {
+            current = false;
+        };
+    }, [filterKey]);
+
+    async function submit(event: FormEvent): Promise<void> {
+        event.preventDefault();
+        setSaving(true);
+        const input = { name: name.trim(), description: description.trim() || null, kind, filter };
+        try {
+            await (segment ? updateSegment(workspace.uid, segment.uid, input) : createSegment(workspace.uid, input));
+            onSaved();
+        } catch (err) {
+            setError(errorMessage(err, "Could not save the segment."));
+            setSaving(false);
+        }
+    }
+
+    return (
+        <Modal open onClose={onClose} title={segment ? "Edit segment" : "New segment"}>
+            <form onSubmit={submit} className="flex flex-col gap-3 min-w-[36rem]">
+                {error && <Alert>{error}</Alert>}
+                <FormField label="Name" htmlFor="crm-segment-name">
+                    <input id="crm-segment-name" className={INPUT_CLASS} value={name} onChange={(event) => setName(event.target.value)} required />
+                </FormField>
+                <FormField label="Description" htmlFor="crm-segment-description">
+                    <input id="crm-segment-description" className={INPUT_CLASS} value={description} onChange={(event) => setDescription(event.target.value)} />
+                </FormField>
+                <fieldset className="flex gap-4 text-sm">
+                    <legend className="text-xs font-semibold text-text-muted mb-1">Kind</legend>
+                    <label className="flex items-center gap-1.5">
+                        <input type="radio" name="crm-segment-kind" checked={kind === "dynamic"} onChange={() => setKind("dynamic")} />
+                        Dynamic - keeps up with the filter
+                    </label>
+                    <label className="flex items-center gap-1.5">
+                        <input type="radio" name="crm-segment-kind" checked={kind === "static"} onChange={() => setKind("static")} />
+                        Static - the contacts matching now
+                    </label>
+                </fieldset>
+                <div>
+                    <div className="text-xs font-semibold text-text-muted mb-1">Contacts matching</div>
+                    <FilterBuilder fields={fields} draft={draft} onChange={setDraft} />
+                </div>
+                <div role="status" className="text-sm text-text-muted">
+                    {!filter
+                        ? "Add a condition to choose the contacts."
+                        : preview
+                          ? `${preview.capped ? "More than " : ""}${preview.count.toLocaleString()} ${preview.count === 1 ? "contact matches" : "contacts match"} now${preview.contacts.length > 0 ? `, such as ${preview.contacts.map((entry) => entry.email).join(", ")}` : ""}.`
+                          : "Counting…"}
+                </div>
+                <Button type="submit" loading={saving} disabled={saving || !name.trim() || !filter} className="!w-auto self-start">
+                    {segment ? "Save" : "Create"}
+                </Button>
+            </form>
+        </Modal>
+    );
+}

package/apps/shared/components/TaskList.tsx

@@ -0,0 +1,140 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, 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 { Task, TaskPriority, TaskStatus, WorkspaceMember, createTask, deleteTask, errorMessage, listMembers, listTasks, updateTask } from "../crmApi.js";
+import { INPUT_CLASS, useCrm } from "./CrmShell.js";
+
+/** The workspace's tasks: open or done, anyone's or one member's, with a form for a new one. A task about a record links to it. */
+export default function TaskList() {
+    const { workspace, canWrite, href } = useCrm();
+    const [status, setStatus] = useState<TaskStatus>("open");
+    const [assignee, setAssignee] = useState("");
+    const [tasks, setTasks] = useState<Task[]>([]);
+    const [members, setMembers] = useState<WorkspaceMember[]>([]);
+    const [title, setTitle] = useState("");
+    const [priority, setPriority] = useState<TaskPriority>("normal");
+    const [dueAt, setDueAt] = useState("");
+    const [error, setError] = useState<string | null>(null);
+
+    async function load(): Promise<void> {
+        try {
+            setTasks(await listTasks(workspace.uid, { status, assigneeUserUid: assignee || undefined }));
+            setError(null);
+        } catch (err) {
+            setError(errorMessage(err, "Could not load the tasks."));
+        }
+    }
+
+    useEffect(() => {
+        listMembers(workspace.uid)
+            .then(setMembers)
+            .catch(() => setMembers([]));
+    }, [workspace.uid]);
+
+    useEffect(() => {
+        void load();
+    }, [workspace.uid, status, assignee]);
+
+    async function add(event: FormEvent): Promise<void> {
+        event.preventDefault();
+        try {
+            await createTask(workspace.uid, { title, priority, ...(dueAt ? { dueAt: new Date(dueAt).toISOString() } : {}), ...(assignee ? { assigneeUserUid: assignee } : {}) });
+            setTitle("");
+            setDueAt("");
+            await load();
+        } catch (err) {
+            setError(errorMessage(err, "Could not add the task."));
+        }
+    }
+
+    const memberName = (userUid?: string): string => {
+        const member: WorkspaceMember | undefined = members.find((entry) => entry.userUid === userUid);
+        return member?.displayName || member?.address || userUid || "";
+    };
+
+    return (
+        <div className="max-w-4xl">
+            <h1 className="text-lg font-bold tracking-tight mb-4">Tasks</h1>
+            <div className="flex flex-wrap gap-2 mb-4">
+                <select aria-label="Status" className={`${INPUT_CLASS} !w-36`} value={status} onChange={(event) => setStatus(event.target.value as TaskStatus)}>
+                    <option value="open">Open</option>
+                    <option value="done">Done</option>
+                </select>
+                <select aria-label="Assignee" className={`${INPUT_CLASS} !w-56`} value={assignee} onChange={(event) => setAssignee(event.target.value)}>
+                    <option value="">Everyone</option>
+                    {members.map((member) => (
+                        <option key={member.userUid} value={member.userUid}>
+                            {memberName(member.userUid)}
+                        </option>
+                    ))}
+                </select>
+            </div>
+            {error && <Alert>{error}</Alert>}
+            {canWrite && (
+                <form onSubmit={add} className="flex flex-wrap gap-2 mb-4" aria-label="New task">
+                    <input aria-label="Title" placeholder="New task" className={`${INPUT_CLASS} !w-72`} value={title} onChange={(event) => setTitle(event.target.value)} />
+                    <select aria-label="Priority" className={`${INPUT_CLASS} !w-32`} value={priority} onChange={(event) => setPriority(event.target.value as TaskPriority)}>
+                        <option value="low">Low</option>
+                        <option value="normal">Normal</option>
+                        <option value="high">High</option>
+                    </select>
+                    <input aria-label="Due" type="date" className={`${INPUT_CLASS} !w-40`} value={dueAt} onChange={(event) => setDueAt(event.target.value)} />
+                    <Button type="submit" disabled={title.trim() === ""} className="!w-auto">
+                        Add task
+                    </Button>
+                </form>
+            )}
+            {tasks.length === 0 ? (
+                <p className="text-sm text-text-muted">No {status} tasks.</p>
+            ) : (
+                <ul className="flex flex-col divide-y divide-border border-y border-border">
+                    {tasks.map((task) => (
+                        <li key={task.uid} className="flex items-center gap-3 py-2 text-sm">
+                            <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 load();
+                                }}
+                            />
+                            <span className="flex-1">
+                                {task.title}
+                                {task.priority === "high" && <span className="ml-2 text-xs text-danger font-semibold">High</span>}
+                                {task.subjectUid && (
+                                    <a
+                                        className="ml-2 text-xs text-primary-dark hover:underline"
+                                        href={href(`/crm/${task.subjectType === "company" ? "companies" : "contacts"}/${encodeURIComponent(task.subjectUid)}`)}
+                                    >
+                                        Open {task.subjectType}
+                                    </a>
+                                )}
+                            </span>
+                            <span className="text-xs text-text-muted">{memberName(task.assigneeUserUid)}</span>
+                            <span className="text-xs text-text-muted w-24 text-right">{task.dueAt ? new Date(task.dueAt).toLocaleDateString() : ""}</span>
+                            {canWrite && (
+                                <button
+                                    type="button"
+                                    aria-label={`Delete ${task.title}`}
+                                    className="text-xs text-text-muted hover:text-danger"
+                                    onClick={async () => {
+                                        await deleteTask(workspace.uid, task.uid);
+                                        await load();
+                                    }}
+                                >
+                                    Delete
+                                </button>
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}