@rapidmx/web-client 0.2.0 → 0.3.0

package/apps/admin/retention-policy/index.tsx

@@ -0,0 +1,132 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import {
+    MIN_AUDIT_LOG_RETENTION_DAYS,
+    RetentionPolicy,
+    getRetentionPolicy,
+    updateRetentionPolicy,
+} from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+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";
+
+export default function RetentionPolicyPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="retentionPolicy">
+            <RetentionPolicyContent />
+        </AdminShell>
+    );
+}
+
+function RetentionPolicyContent() {
+    const [policy, setPolicy] = useState<RetentionPolicy | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState<string | null>(null);
+
+    useEffect(() => {
+        getRetentionPolicy()
+            .then(setPolicy)
+            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load the retention policy."))
+            .finally(() => setLoading(false));
+    }, []);
+
+    if (loading) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (loadError || !policy) {
+        return <Alert>{loadError}</Alert>;
+    }
+    return <RetentionPolicyForm policy={policy} onChange={setPolicy} />;
+}
+
+function RetentionPolicyForm({ policy, onChange }: { policy: RetentionPolicy; onChange: (p: RetentionPolicy) => void }) {
+    const [messageRetentionDays, setMessageRetentionDays] = useState(policy.messageRetentionDays?.toString() ?? "");
+    const [auditLogRetentionDays, setAuditLogRetentionDays] = useState(policy.auditLogRetentionDays?.toString() ?? "");
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const patch: Partial<RetentionPolicy> = {};
+            if (messageRetentionDays.trim() !== "") {
+                patch.messageRetentionDays = Number(messageRetentionDays);
+            }
+            if (auditLogRetentionDays.trim() !== "") {
+                patch.auditLogRetentionDays = Number(auditLogRetentionDays);
+            }
+            const updated = await updateRetentionPolicy(patch);
+            onChange(updated);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save the retention policy.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-xl">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">Retention Policy</h1>
+            <p className="text-sm text-text-muted mb-5">
+                Automatically and permanently deletes mail/audit-log entries older than the configured age.
+                Leave a field blank for no automatic purge. This does not apply to a mailbox that is a
+                custodian on an active legal hold — a held message is skipped and retried on a later run once
+                the hold is lifted.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+            {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                <label className="flex flex-col gap-1.5 text-sm">
+                    <span className="font-semibold">Message retention (days)</span>
+                    <input
+                        aria-label="Message retention (days)"
+                        type="number"
+                        min={1}
+                        className={INPUT_CLASS}
+                        value={messageRetentionDays}
+                        onChange={(e) => setMessageRetentionDays(e.target.value)}
+                        placeholder="No automatic purge"
+                    />
+                    <span className="text-xs text-text-muted">
+                        Applies to any message, in any folder, regardless of age.
+                    </span>
+                </label>
+                <label className="flex flex-col gap-1.5 text-sm">
+                    <span className="font-semibold">Audit log retention (days)</span>
+                    <input
+                        aria-label="Audit log retention (days)"
+                        type="number"
+                        min={MIN_AUDIT_LOG_RETENTION_DAYS}
+                        className={INPUT_CLASS}
+                        value={auditLogRetentionDays}
+                        onChange={(e) => setAuditLogRetentionDays(e.target.value)}
+                        placeholder="Keep forever"
+                    />
+                    <span className="text-xs text-text-muted">
+                        Cannot be set below {MIN_AUDIT_LOG_RETENTION_DAYS} days. Never applies to the
+                        tamper-evident escrow audit chain.
+                    </span>
+                </label>
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}

package/apps/escrow/_layout.tsx

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { PropsWithChildren } from "react";
+import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
+
+export interface LayoutProps {
+    /** See `apps/www/_layout.tsx`'s `LayoutProps` doc comment — identical mechanism, supplied by
+     * `EscrowConsoleRoute`'s `fetchProps()`. */
+    branding?: Branding;
+}
+
+export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>) {
+    const title = branding?.title || branding?.companyName
+        ? `${branding?.title || branding?.companyName}: Escrow Console`
+        : "RapidMX: Escrow Console";
+    const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
+    const stylesheetHref = branding?.stylesheetUrl;
+
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>{title}</title>
+                <link rel="icon" type="image/svg+xml" href={iconHref} />
+                <link rel="alternate icon" href="/favicon.ico" />
+                <link rel="preconnect" href="https://fonts.googleapis.com" />
+                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+                <link
+                    rel="stylesheet"
+                    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+                />
+                {stylesheetHref && <link rel="stylesheet" href={stylesheetHref} id={CUSTOM_STYLESHEET_LINK_ID} />}
+            </head>
+            <body>{children}</body>
+        </html>
+    );
+}

package/apps/escrow/audit-log/index.tsx

@@ -0,0 +1,168 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import {
+    EscrowAuditLogEntry,
+    EscrowAuditVerificationResult,
+    listAuditLogEntries,
+    verifyAuditChain,
+} from "@rapidmx/react-shared/admin/escrowAuditLogApi.js";
+import EscrowShell, { EscrowShellProps } from "../../shared/components/escrow/layout/EscrowShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const PAGE_SIZE = 25;
+
+const ACTION_LABELS: Record<EscrowAuditLogEntry["action"], string> = {
+    "escrow_access_request.created": "Access request created",
+    "escrow_access_request.approved": "Access request approved",
+    "escrow_access_request.material_read": "Material read",
+};
+
+export default function EscrowAuditLogPage(props: Omit<EscrowShellProps, "active">) {
+    return (
+        <EscrowShell {...props} active="auditLog">
+            <EscrowAuditLogContent />
+        </EscrowShell>
+    );
+}
+
+function EscrowAuditLogContent() {
+    const [page, setPage] = useState(0);
+    const [entries, setEntries] = useState<EscrowAuditLogEntry[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // `GET /admin/release-notes` is the same side-effect-free trusted-role canary `AdminShell` itself
+    // uses (any `BaseAdminRoute` endpoint works — see that route's own doc comment) — reused here only to
+    // decide whether to show the "Verify chain integrity" button at all, not to gate this whole page the
+    // way `AdminShell` gates `apps/admin`. `EscrowAuditLogRoute.verify()` is `@RequiresTrustedRole()`-only
+    // server-side regardless of what this probe finds; hiding the button for a non-trusted holder just
+    // avoids an inevitable, confusing 403 on click, it isn't itself the enforcement.
+    const [isTrustedAdmin, setIsTrustedAdmin] = useState(false);
+
+    const [verifying, setVerifying] = useState(false);
+    const [verifyError, setVerifyError] = useState<string | null>(null);
+    const [verifyResult, setVerifyResult] = useState<EscrowAuditVerificationResult | null>(null);
+
+    useEffect(() => {
+        apiFetch("/admin/release-notes")
+            .then(() => setIsTrustedAdmin(true))
+            .catch(() => setIsTrustedAdmin(false));
+    }, []);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listAuditLogEntries({ page, limit: PAGE_SIZE })
+            .then(setEntries)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load the audit log."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    async function handleVerify() {
+        setVerifying(true);
+        setVerifyError(null);
+        setVerifyResult(null);
+        try {
+            setVerifyResult(await verifyAuditChain());
+        } catch (err) {
+            setVerifyError(err instanceof ApiRequestError ? err.message : "Could not verify the audit chain.");
+        } finally {
+            setVerifying(false);
+        }
+    }
+
+    const hasNextPage = entries.length === PAGE_SIZE;
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Escrow audit log</h1>
+                {isTrustedAdmin && (
+                    <Button type="button" className="!w-auto" loading={verifying} disabled={verifying} onClick={handleVerify}>
+                        Verify chain integrity
+                    </Button>
+                )}
+            </div>
+
+            <p className="text-sm text-text-muted mb-5">
+                Every escrow access lifecycle event visible to you — matters under a scope you hold. A trusted
+                administrator sees every entry across every scope instead.
+            </p>
+
+            {verifyError && <Alert>{verifyError}</Alert>}
+            {verifyResult &&
+                (verifyResult.valid ? (
+                    <div className="mb-5 py-3 px-3.5 rounded-sm text-sm bg-success/10 text-success font-medium">
+                        Chain verified — no tampering detected.
+                    </div>
+                ) : (
+                    <Alert>Chain integrity broken at sequence {verifyResult.brokenAtSequence}.</Alert>
+                ))}
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : entries.length === 0 ? (
+                <p className="text-sm text-text-muted">No audit log entries visible to you yet.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Sequence", "Action", "Holder", "Mailbox", "Occurred"].map((h) => (
+                                    <th
+                                        key={h}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {h}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {entries.map((entry) => (
+                                <tr key={entry.uid}>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.sequence}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{ACTION_LABELS[entry.action]}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.holderUserUid}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.mailboxUid}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {new Date(entry.occurredAt).toLocaleString()}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <div className="flex gap-3 items-center mt-4">
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={page === 0 || loading}
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                >
+                    Previous
+                </Button>
+                <span className="text-sm text-text-muted">Page {page + 1}</span>
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={!hasNextPage || loading}
+                    onClick={() => setPage((p) => p + 1)}
+                >
+                    Next
+                </Button>
+            </div>
+        </>
+    );
+}

package/apps/escrow/index.tsx

@@ -0,0 +1,139 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listMatters, Matter } from "@rapidmx/react-shared/admin/mattersApi.js";
+import EscrowShell, { EscrowShellProps } from "../shared/components/escrow/layout/EscrowShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const PAGE_SIZE = 25;
+
+export default function MattersPage(props: Omit<EscrowShellProps, "active">) {
+    return (
+        <EscrowShell {...props} active="matters">
+            <MattersContent />
+        </EscrowShell>
+    );
+}
+
+function MattersContent() {
+    const [page, setPage] = useState(0);
+    const [matters, setMatters] = useState<Matter[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listMatters({ page, limit: PAGE_SIZE })
+            .then(setMatters)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load matters."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    const hasNextPage = matters.length === PAGE_SIZE;
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Matters</h1>
+                <a href="/escrow/matters/new">
+                    <Button type="button" className="!w-auto">
+                        + New matter
+                    </Button>
+                </a>
+            </div>
+
+            <p className="text-sm text-text-muted mb-5">
+                Only matters under an escrow scope you hold are ever shown here — this list is already scoped to
+                you server-side.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : matters.length === 0 ? (
+                <p className="text-sm text-text-muted">
+                    No matters yet — either none exist under a scope you hold, or you don't currently hold any
+                    escrow scope.
+                </p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Name", "Custodians", "Date range", "Status", ""].map((h) => (
+                                    <th
+                                        key={h}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {h}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {matters.map((matter) => (
+                                <tr key={matter.uid}>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{matter.name}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {matter.custodianMailboxUids.length}
+                                    </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {new Date(matter.dateRangeStart).toLocaleDateString()} &ndash;{" "}
+                                        {new Date(matter.dateRangeEnd).toLocaleDateString()}
+                                    </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {matter.closedAt ? (
+                                            <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
+                                                Closed
+                                            </span>
+                                        ) : (
+                                            <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white">
+                                                Open
+                                            </span>
+                                        )}
+                                    </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border text-right">
+                                        <a
+                                            href={`/escrow/matters/${encodeURIComponent(matter.uid)}`}
+                                            className="text-primary-dark hover:underline font-medium"
+                                        >
+                                            View
+                                        </a>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <div className="flex gap-3 items-center mt-4">
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={page === 0 || loading}
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                >
+                    Previous
+                </Button>
+                <span className="text-sm text-text-muted">Page {page + 1}</span>
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={!hasNextPage || loading}
+                    onClick={() => setPage((p) => p + 1)}
+                >
+                    Next
+                </Button>
+            </div>
+        </>
+    );
+}