@rapidmx/crm-plugin 0.1.0

package/apps/shared/components/CrmShell.tsx

@@ -0,0 +1,229 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, PropsWithChildren, createContext, useContext, useEffect, useState } from "react";
+import {
+    HiOutlineArrowUpTray,
+    HiOutlineBuildingOffice2,
+    HiOutlineClipboardDocumentCheck,
+    HiOutlineCog6Tooth,
+    HiOutlineDocumentText,
+    HiOutlineEnvelope,
+    HiOutlinePaperAirplane,
+    HiOutlineFunnel,
+    HiOutlineChartBar,
+    HiOutlineCodeBracket,
+    HiOutlinePresentationChartLine,
+    HiOutlineBolt,
+    HiOutlineCurrencyDollar,
+    HiOutlineViewColumns,
+    HiOutlineQueueList,
+    HiOutlineUsers,
+} from "react-icons/hi2";
+import type { IconType } from "react-icons";
+import AppShell, { AppShellProps } from "@rapidmx/web-client/shared/components/layout/AppShell.js";
+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 { Workspace, createWorkspace, errorMessage, listWorkspaces } from "../crmApi.js";
+
+/** The props every CRM page receives from the server (the `www` host's), passed straight to its shell. */
+export type CrmPageProps = Omit<AppShellProps, "active">;
+
+/** The CRM's sections, each a page under `/crm`. */
+export type CrmSection = "contacts" | "companies" | "lists" | "deals" | "pipelines" | "segments" | "forms" | "templates" | "campaigns" | "automations" | "scoring" | "tasks" | "imports" | "reports" | "integrations" | "settings";
+
+/** Where the selected workspace is remembered between visits (per browser). */
+export const WORKSPACE_STORAGE_KEY = "rapidmx.crm.workspace";
+
+export const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+const SECTIONS: { id: CrmSection; label: string; path: string; icon: IconType }[] = [
+    { id: "contacts", label: "Contacts", path: "/crm", icon: HiOutlineUsers },
+    { id: "companies", label: "Companies", path: "/crm/companies", icon: HiOutlineBuildingOffice2 },
+    { id: "deals", label: "Deals", path: "/crm/deals", icon: HiOutlineCurrencyDollar },
+    { id: "lists", label: "Lists", path: "/crm/lists", icon: HiOutlineQueueList },
+    { id: "segments", label: "Segments", path: "/crm/segments", icon: HiOutlineFunnel },
+    { id: "forms", label: "Forms", path: "/crm/forms", icon: HiOutlineDocumentText },
+    { id: "templates", label: "Templates", path: "/crm/templates", icon: HiOutlineEnvelope },
+    { id: "campaigns", label: "Campaigns", path: "/crm/campaigns", icon: HiOutlinePaperAirplane },
+    { id: "automations", label: "Automations", path: "/crm/automations", icon: HiOutlineBolt },
+    { id: "scoring", label: "Lead scoring", path: "/crm/scoring", icon: HiOutlineChartBar },
+    { id: "tasks", label: "Tasks", path: "/crm/tasks", icon: HiOutlineClipboardDocumentCheck },
+    { id: "imports", label: "Import", path: "/crm/imports", icon: HiOutlineArrowUpTray },
+    { id: "pipelines", label: "Pipelines", path: "/crm/pipelines", icon: HiOutlineViewColumns },
+    { id: "reports", label: "Reports", path: "/crm/reports", icon: HiOutlinePresentationChartLine },
+    { id: "integrations", label: "Integrations", path: "/crm/integrations", icon: HiOutlineCodeBracket },
+    { id: "settings", label: "Settings", path: "/crm/settings", icon: HiOutlineCog6Tooth },
+];
+
+export interface CrmContextValue {
+    /** The selected workspace. */
+    workspace: Workspace;
+    workspaces: Workspace[];
+    /** The caller may create and change records. */
+    canWrite: boolean;
+    /** The caller may change the workspace's settings, members and properties. */
+    canManage: boolean;
+    /** `path` with the selected workspace in its query (`?w=`), for links between CRM pages. */
+    href: (path: string) => string;
+    /** Loads the workspace list again (after a rename, say). */
+    reload: () => Promise<void>;
+}
+
+const CrmContext = createContext<CrmContextValue | null>(null);
+
+/** The CRM context of the page (inside a `CrmShell` that has a workspace). */
+export function useCrm(): CrmContextValue {
+    const value: CrmContextValue | null = useContext(CrmContext);
+    if (!value) {
+        throw new Error("useCrm() must be used inside a CrmShell with a workspace.");
+    }
+    return value;
+}
+
+/** `path` with `w=<workspaceUid>` added to its query. */
+export function workspaceHref(path: string, workspaceUid: string): string {
+    return `${path}${path.includes("?") ? "&" : "?"}w=${encodeURIComponent(workspaceUid)}`;
+}
+
+/** The workspace uid of the page's `?w=`, else the one last used in this browser. */
+function preferredWorkspace(): string | null {
+    const fromUrl: string | null = new URLSearchParams(window.location.search).get("w");
+    if (fromUrl) {
+        return fromUrl;
+    }
+    try {
+        return window.localStorage.getItem(WORKSPACE_STORAGE_KEY);
+    } catch {
+        return null;
+    }
+}
+
+function remember(workspaceUid: string): void {
+    try {
+        window.localStorage.setItem(WORKSPACE_STORAGE_KEY, workspaceUid);
+    } catch {
+        // Storage blocked: the workspace is simply not remembered.
+    }
+}
+
+/**
+ * The frame of every CRM page: the web client's app chrome (with CRM highlighted on the app rail), a sidebar with the workspace
+ * switcher and the CRM's sections, and the page. It loads the caller's workspaces and picks one (`?w=`, else the last used, else the
+ * first); a caller with none is asked to create one. Pages read the selection with `useCrm()`.
+ */
+export default function CrmShell({ section, children, ...props }: PropsWithChildren<CrmPageProps & { section: CrmSection }>) {
+    const [workspaces, setWorkspaces] = useState<Workspace[] | null>(null);
+    const [selected, setSelected] = useState<Workspace | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    async function load(preferred: string | null): Promise<void> {
+        try {
+            const list: Workspace[] = await listWorkspaces();
+            setWorkspaces(list);
+            const choice: Workspace | undefined = list.find((workspace) => workspace.uid === preferred) ?? list[0];
+            setSelected(choice ?? null);
+            if (choice) {
+                remember(choice.uid);
+            }
+        } catch (err) {
+            setError(errorMessage(err, "Could not load your CRM workspaces."));
+        }
+    }
+
+    useEffect(() => {
+        void load(preferredWorkspace());
+    }, []);
+
+    function switchTo(workspaceUid: string): void {
+        remember(workspaceUid);
+        window.location.assign(workspaceHref(window.location.pathname, workspaceUid));
+    }
+
+    const context: CrmContextValue | null = selected
+        ? {
+              workspace: selected,
+              workspaces: workspaces ?? [],
+              canWrite: selected.role !== "viewer",
+              canManage: selected.role === "owner" || selected.role === "admin",
+              href: (path: string) => workspaceHref(path, selected.uid),
+              reload: () => load(selected.uid),
+          }
+        : null;
+
+    return (
+        <AppShell {...props} active="crm">
+            <div className="flex flex-1 min-w-0 min-h-0">
+                {context && (
+                    <nav aria-label="CRM" className="w-56 shrink-0 border-r border-border p-3 flex flex-col gap-1 overflow-y-auto">
+                        <label htmlFor="crm-workspace" className="text-xs uppercase tracking-wide text-text-muted px-2">
+                            Workspace
+                        </label>
+                        <select id="crm-workspace" className={`${INPUT_CLASS} mb-3`} value={context.workspace.uid} onChange={(event) => switchTo(event.target.value)}>
+                            {context.workspaces.map((workspace) => (
+                                <option key={workspace.uid} value={workspace.uid}>
+                                    {workspace.name}
+                                </option>
+                            ))}
+                        </select>
+                        {SECTIONS.map(({ id, label, path, icon: Icon }) => (
+                            <a
+                                key={id}
+                                href={context.href(path)}
+                                aria-current={id === section ? "page" : undefined}
+                                className={`flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm ${
+                                    id === section ? "bg-primary-lightest text-primary-dark font-semibold" : "text-text hover:bg-surface-alt"
+                                }`}
+                            >
+                                <Icon aria-hidden className="w-4 h-4" />
+                                {label}
+                            </a>
+                        ))}
+                    </nav>
+                )}
+                <main className="flex-1 min-w-0 overflow-y-auto p-6">
+                    {error && <Alert>{error}</Alert>}
+                    {!error && workspaces === null && <p className="text-sm text-text-muted">Loading&hellip;</p>}
+                    {workspaces !== null && !context && <CreateFirstWorkspace onCreated={(workspace) => switchTo(workspace.uid)} />}
+                    {context && <CrmContext.Provider value={context}>{children}</CrmContext.Provider>}
+                </main>
+            </div>
+        </AppShell>
+    );
+}
+
+/** The form a caller with no workspace sees. */
+export function CreateFirstWorkspace({ onCreated }: { onCreated: (workspace: Workspace) => void }) {
+    const [name, setName] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function submit(event: FormEvent): Promise<void> {
+        event.preventDefault();
+        setSaving(true);
+        try {
+            onCreated(await createWorkspace({ name, timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }));
+        } catch (err) {
+            setError(errorMessage(err, "Could not create the workspace."));
+            setSaving(false);
+        }
+    }
+
+    return (
+        <form onSubmit={submit} className="max-w-md">
+            <h1 className="text-lg font-bold tracking-tight mb-2">Create your CRM workspace</h1>
+            <p className="text-sm text-text-muted mb-4">
+                A workspace holds your team&apos;s contacts, companies and tasks. You can invite colleagues to it once it exists.
+            </p>
+            {error && <Alert>{error}</Alert>}
+            <FormField label="Name" htmlFor="crm-new-workspace">
+                <input id="crm-new-workspace" className={INPUT_CLASS} value={name} onChange={(event) => setName(event.target.value)} required />
+            </FormField>
+            <Button type="submit" loading={saving} disabled={saving || name.trim().length === 0} className="!w-auto mt-3">
+                Create workspace
+            </Button>
+        </form>
+    );
+}

package/apps/shared/components/FilterBuilder.tsx

@@ -0,0 +1,204 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineXMark } from "react-icons/hi2";
+import { FilterCondition, FilterGroup, FilterNode } from "../crmApi.js";
+import { FieldInfo, OPERATORS } from "../fields.js";
+import { INPUT_CLASS } from "./CrmShell.js";
+
+/** One condition as the builder edits it: the value is kept as typed, and converted when the filter is built. */
+export interface ConditionDraft {
+    field: string;
+    op: string;
+    value: string;
+}
+
+export interface FilterDraft {
+    match: "and" | "or";
+    conditions: ConditionDraft[];
+}
+
+export const EMPTY_FILTER: FilterDraft = { match: "and", conditions: [] };
+
+/** Whether a comparison takes a value. */
+function takesValue(op: string): boolean {
+    return op !== "isSet" && op !== "isNotSet";
+}
+
+/**
+ * The API filter of a draft (`undefined` when it has no complete condition): each condition's typed value converted to its field's
+ * type - numbers, booleans, dates as ISO strings - and the conditions combined by `match`. A condition still missing its value is left
+ * out.
+ */
+export function buildFilter(draft: FilterDraft, fields: FieldInfo[]): FilterNode | undefined {
+    const conditions: FilterCondition[] = [];
+    for (const condition of draft.conditions) {
+        const field: FieldInfo | undefined = fields.find((entry) => entry.name === condition.field);
+        if (!field) {
+            continue;
+        }
+        if (!takesValue(condition.op)) {
+            conditions.push({ field: field.name, op: condition.op });
+            continue;
+        }
+        if (condition.value.trim() === "") {
+            continue;
+        }
+        let value: unknown = condition.value;
+        if (field.kind === "number") {
+            value = Number(condition.value);
+            if (!Number.isFinite(value)) {
+                continue;
+            }
+        } else if (field.kind === "boolean") {
+            value = condition.value === "true";
+        } else if (field.kind === "date") {
+            value = new Date(condition.value).toISOString();
+        }
+        conditions.push({ field: field.name, op: condition.op, value });
+    }
+    if (conditions.length === 0) {
+        return undefined;
+    }
+    return conditions.length === 1 ? conditions[0] : { [draft.match]: conditions };
+}
+
+/**
+ * The draft of an API filter `buildFilter()` made - a condition, or an `and`/`or` group of conditions - for editing it again. Dates
+ * come back as their day; anything deeper than one group is left out.
+ */
+export function draftOf(filter: FilterNode | null | undefined): FilterDraft {
+    if (!filter) {
+        return EMPTY_FILTER;
+    }
+    const match: "and" | "or" = "or" in filter && filter.or ? "or" : "and";
+    const nodes: FilterNode[] = "field" in filter ? [filter] : ((filter)[match] ?? []);
+    return {
+        match,
+        conditions: nodes
+            .filter((node): node is FilterCondition => "field" in node)
+            .map((node) => ({
+                field: node.field,
+                op: node.op,
+                value: node.value === undefined || node.value === null ? "" : typeof node.value === "string" && /^\d{4}-\d{2}-\d{2}T/.test(node.value) ? node.value.slice(0, 10) : String(node.value),
+            })),
+    };
+}
+
+/** A new condition on `field`, with its kind's first comparison. */
+function newCondition(field: FieldInfo): ConditionDraft {
+    return { field: field.name, op: OPERATORS[field.kind][0].op, value: field.kind === "boolean" ? "true" : "" };
+}
+
+/**
+ * Edits a list of filter conditions, all of which (`and`) or any of which (`or`) a record must match. Each row picks a field (the
+ * record's own, tags, or a custom property), a comparison suited to it, and a value in an input suited to it.
+ */
+export default function FilterBuilder({ fields, draft, onChange }: { fields: FieldInfo[]; draft: FilterDraft; onChange: (draft: FilterDraft) => void }) {
+    const update = (index: number, change: Partial<ConditionDraft>): void => {
+        const conditions: ConditionDraft[] = draft.conditions.map((condition, position) => (position === index ? { ...condition, ...change } : condition));
+        onChange({ ...draft, conditions });
+    };
+
+    return (
+        <div className="flex flex-col gap-2" role="group" aria-label="Filters">
+            {draft.conditions.length > 1 && (
+                <label className="text-sm flex items-center gap-2">
+                    Match
+                    <select
+                        aria-label="Match"
+                        className={`${INPUT_CLASS} !w-auto`}
+                        value={draft.match}
+                        onChange={(event) => onChange({ ...draft, match: event.target.value as "and" | "or" })}
+                    >
+                        <option value="and">all conditions</option>
+                        <option value="or">any condition</option>
+                    </select>
+                </label>
+            )}
+            {draft.conditions.map((condition, index) => {
+                const field: FieldInfo = fields.find((entry) => entry.name === condition.field) ?? fields[0];
+                return (
+                    <div key={index} className="flex flex-wrap items-center gap-2">
+                        <select
+                            aria-label={`Field ${index + 1}`}
+                            className={`${INPUT_CLASS} !w-48`}
+                            value={field.name}
+                            onChange={(event) => {
+                                const next: FieldInfo = fields.find((entry) => entry.name === event.target.value)!;
+                                update(index, newCondition(next));
+                            }}
+                        >
+                            {fields.map((entry) => (
+                                <option key={entry.name} value={entry.name}>
+                                    {entry.label}
+                                </option>
+                            ))}
+                        </select>
+                        <select aria-label={`Comparison ${index + 1}`} className={`${INPUT_CLASS} !w-40`} value={condition.op} onChange={(event) => update(index, { op: event.target.value })}>
+                            {OPERATORS[field.kind].map(({ op, label }) => (
+                                <option key={op} value={op}>
+                                    {label}
+                                </option>
+                            ))}
+                        </select>
+                        {takesValue(condition.op) && <ValueInput field={field} index={index} value={condition.value} onChange={(value) => update(index, { value })} />}
+                        <button
+                            type="button"
+                            aria-label={`Remove condition ${index + 1}`}
+                            className="text-text-muted hover:text-danger"
+                            onClick={() => onChange({ ...draft, conditions: draft.conditions.filter((_entry, position) => position !== index) })}
+                        >
+                            <HiOutlineXMark aria-hidden className="w-4 h-4" />
+                        </button>
+                    </div>
+                );
+            })}
+            <div>
+                <button
+                    type="button"
+                    className="text-sm text-primary-dark hover:underline font-medium"
+                    onClick={() => onChange({ ...draft, conditions: [...draft.conditions, newCondition(fields[0])] })}
+                >
+                    + Add condition
+                </button>
+            </div>
+        </div>
+    );
+}
+
+/** The value input of a condition, suited to its field. */
+function ValueInput({ field, index, value, onChange }: { field: FieldInfo; index: number; value: string; onChange: (value: string) => void }) {
+    const label: string = `Value ${index + 1}`;
+    if (field.kind === "boolean") {
+        return (
+            <select aria-label={label} className={`${INPUT_CLASS} !w-28`} value={value} onChange={(event) => onChange(event.target.value)}>
+                <option value="true">Yes</option>
+                <option value="false">No</option>
+            </select>
+        );
+    }
+    if (field.options && field.options.length > 0) {
+        return (
+            <select aria-label={label} className={`${INPUT_CLASS} !w-48`} value={value} onChange={(event) => onChange(event.target.value)}>
+                <option value="">Choose&hellip;</option>
+                {field.options.map((entry) => (
+                    <option key={entry.value} value={entry.value}>
+                        {entry.label}
+                    </option>
+                ))}
+            </select>
+        );
+    }
+    return (
+        <input
+            aria-label={label}
+            className={`${INPUT_CLASS} !w-48`}
+            type={field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text"}
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+        />
+    );
+}