@rapidmx/web-client 0.2.0

package/apps/shared/components/admin/distributionLists/MemberListCard.tsx

@@ -0,0 +1,117 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { DistributionList, updateDistributionList } from "@rapidmx/react-shared/admin/distributionListsApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export interface MemberListCardProps {
+    list: DistributionList;
+    /** Called with the freshly-saved list (new `version`, updated `memberAddresses`) after a successful
+     * add/remove, so the parent detail page can keep its own copy of the list in sync — mirrors
+     * `ShareAccessCard`'s `reload()` pattern, just pushed up rather than re-fetched, since the caller
+     * already has everything the response would return. */
+    onUpdate: (list: DistributionList) => void;
+}
+
+/**
+ * Lets an admin view and edit a distribution list's members — same load/inline-add-row/per-row-remove
+ * interaction shape as `ShareAccessCard`, but against a plain `memberAddresses: string[]` field on the
+ * `DistributionList` itself via read-modify-write `PUT`, not a separate ACL endpoint (a distribution
+ * list has no per-record ACL to speak of — see `BaseDistributionListRoute`'s own doc comment).
+ */
+export default function MemberListCard({ list, onUpdate }: MemberListCardProps) {
+    const [newAddress, setNewAddress] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    async function handleAdd(e: FormEvent) {
+        e.preventDefault();
+        const address = newAddress.trim();
+        if (!address || list.memberAddresses.includes(address)) {
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            const updated = await updateDistributionList({
+                uid: list.uid,
+                version: list.version,
+                memberAddresses: [...list.memberAddresses, address],
+            });
+            setNewAddress("");
+            onUpdate(updated);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not add this member.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    async function handleRemove(address: string) {
+        setSaving(true);
+        setError(null);
+        try {
+            const updated = await updateDistributionList({
+                uid: list.uid,
+                version: list.version,
+                memberAddresses: list.memberAddresses.filter((a) => a !== address),
+            });
+            onUpdate(updated);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not remove this member.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="bg-surface border border-border rounded-md p-6">
+            <h2 className="text-base font-bold uppercase tracking-wide mb-1">Members</h2>
+            <p className="text-sm text-text-muted mb-4">
+                Each address may resolve to an internal mailbox, a nested distribution list, or a genuinely
+                external address relayed out.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            <ul className="flex flex-col gap-2 mb-4">
+                {list.memberAddresses.length === 0 && (
+                    <li className="text-sm text-text-muted">No members yet.</li>
+                )}
+                {list.memberAddresses.map((address) => (
+                    <li
+                        key={address}
+                        className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm"
+                    >
+                        <div className="text-sm font-medium">{address}</div>
+                        <button
+                            type="button"
+                            onClick={() => handleRemove(address)}
+                            disabled={saving}
+                            className="text-sm text-danger hover:underline disabled:opacity-55"
+                        >
+                            Remove
+                        </button>
+                    </li>
+                ))}
+            </ul>
+
+            <form onSubmit={handleAdd} className="flex gap-2">
+                <input
+                    type="text"
+                    value={newAddress}
+                    onChange={(e) => setNewAddress(e.target.value)}
+                    placeholder="Member address to add"
+                    className="flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary"
+                />
+                <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                    Add
+                </Button>
+            </form>
+        </div>
+    );
+}

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -0,0 +1,186 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import "../../../styles/app.css";
+import React, { PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import {
+    HiOutlineClipboardDocumentList,
+    HiOutlineGlobeAlt,
+    HiOutlineInboxStack,
+    HiOutlinePaintBrush,
+    HiOutlineQueueList,
+    HiOutlineShieldCheck,
+    HiOutlineShieldExclamation,
+    HiOutlineUserGroup,
+} from "react-icons/hi2";
+import { apiFetch, ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import BottomTabBar, { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import { BrandingFooter, BrandingHeader } from "../../layout/BrandingChrome.js";
+import UserMenu from "../../layout/UserMenu.js";
+
+export type AdminSection =
+    | "mailboxes"
+    | "quarantine"
+    | "ingestQueue"
+    | "domains"
+    | "auditLog"
+    | "distributionLists"
+    | "transportRules"
+    | "branding";
+
+export interface AdminShellProps {
+    /** Which icon in the rail is highlighted as the current section. */
+    active: AdminSection;
+    /** Populated automatically by the framework from an authenticated request (e.g. a valid `jwt` cookie). */
+    userUid?: string;
+    /** auth-server's base URL, injected via the route's `fetchProps` — see `src/mongo/routes/AdminConsoleRoute.ts`. */
+    authServerUrl?: string;
+    /**
+     * Where `mailApi.ts`'s `impersonateUser()`/`stopImpersonating()` should call: the real auth-server in
+     * production, or `""` under `yarn dev` to call this app's own local dev-only impersonation endpoint
+     * instead — see `AdminConsoleRoute`'s `fetchProps` and `src/dev/DevImpersonationRoute.ts`.
+     */
+    impersonationBaseUrl?: string;
+}
+
+type Status = "checking" | "denied" | "error" | "authorized";
+
+/** Sections shown in the persistent icon rail / mobile tab bar — every admin area reachable from
+ * anywhere in the console. Deliberately excludes `quarantine`/`ingestQueue`: those are scoped to a
+ * single mailbox and only ever reached via links on that mailbox's own detail page (see
+ * `apps/admin/mailboxes/[uid].tsx`), not global navigation destinations. */
+const NAV_ITEMS: NavItem[] = [
+    { id: "mailboxes", href: "/admin", label: "Mailboxes", icon: HiOutlineInboxStack },
+    { id: "domains", href: "/admin/domains", label: "Domains", icon: HiOutlineGlobeAlt },
+    { id: "auditLog", href: "/admin/audit-log", label: "Audit Log", icon: HiOutlineClipboardDocumentList },
+    {
+        id: "distributionLists",
+        href: "/admin/distribution-lists",
+        label: "Distribution Lists",
+        icon: HiOutlineUserGroup,
+    },
+    {
+        id: "transportRules",
+        href: "/admin/transport-rules",
+        label: "Transport Rules",
+        icon: HiOutlineShieldCheck,
+    },
+    { id: "branding", href: "/admin/branding", label: "Branding", icon: HiOutlinePaintBrush },
+];
+
+/** Mailbox-scoped sections — not part of the global nav rail/tab bar (see `NAV_ITEMS` above), but
+ * still need an entry here so the header can resolve a label for them when they're the active page. */
+const MAILBOX_SCOPED_ITEMS: NavItem[] = [
+    { id: "quarantine", href: "/admin/quarantine", label: "Quarantine", icon: HiOutlineShieldExclamation },
+    { id: "ingestQueue", href: "/admin/ingest-queue", label: "Ingest Queue", icon: HiOutlineQueueList },
+];
+
+const ALL_ITEMS: NavItem[] = [...NAV_ITEMS, ...MAILBOX_SCOPED_ITEMS];
+
+/**
+ * Gates every `apps/admin` page behind the `admin` trusted role. Uses `GET /api/admin/release-notes` (any
+ * `BaseAdminRoute` endpoint works — this one is side-effect-free) purely as a canary: a 200 means the
+ * caller's JWT carries a trusted role, a 403 means it doesn't. There is no local step-up/elevation flow
+ * (that would need a cross-origin call to auth-server's own elevation endpoint — not wired up yet).
+ */
+export default function AdminShell({ active, userUid, authServerUrl, children }: PropsWithChildren<AdminShellProps>) {
+    const [status, setStatus] = useState<Status>("checking");
+    const [error, setError] = useState<string | null>(null);
+    const { branding, iconSrc } = useBranding();
+
+    useRedirectIfUnauthenticated(userUid, authServerUrl);
+
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        apiFetch("/admin/release-notes")
+            .then(() => setStatus("authorized"))
+            .catch((err) => {
+                if (err instanceof ApiRequestError && (err.status === 403 || err.status === 401)) {
+                    setStatus("denied");
+                    return;
+                }
+                setError(err instanceof ApiRequestError ? err.message : "Could not verify administrator access.");
+                setStatus("error");
+            });
+    }, [userUid]);
+
+    function handleSignOut() {
+        window.location.href = authServerUrl ?? "/";
+    }
+
+    let content: ReactNode;
+    if (!userUid || status === "checking") {
+        content = <div className="min-h-screen" />;
+    } else if (status === "denied") {
+        content = (
+            <div className="min-h-screen flex items-center justify-center p-8">
+                <div className="w-full max-w-md">
+                    <Alert>You do not have administrator access.</Alert>
+                </div>
+            </div>
+        );
+    } else if (status === "error") {
+        content = (
+            <div className="min-h-screen flex items-center justify-center p-8">
+                <div className="w-full max-w-md">
+                    <Alert>{error}</Alert>
+                </div>
+            </div>
+        );
+    } else {
+        const activeItem = ALL_ITEMS.find((item) => item.id === active);
+        content = (
+            <div className="min-h-screen flex flex-col bg-surface-alt">
+                <div className="flex-1 flex min-h-0">
+                    <nav
+                        aria-label="Admin sections"
+                        className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1"
+                    >
+                        <img src={iconSrc} width="96" height="96" alt="" className="mb-3" />
+                        {NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (
+                            <a
+                                key={id}
+                                href={href}
+                                aria-label={label}
+                                aria-current={id === active ? "page" : undefined}
+                                title={label}
+                                className={[
+                                    "w-10 h-10 flex items-center justify-center rounded-sm",
+                                    id === active
+                                        ? "bg-primary/10 text-primary-dark"
+                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
+                                ].join(" ")}
+                            >
+                                <Icon size={20} aria-hidden="true" />
+                            </a>
+                        ))}
+                    </nav>
+                    <BottomTabBar apps={NAV_ITEMS} active={active} />
+                    <div className="flex-1 flex flex-col min-w-0">
+                        <header className="h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6">
+                            <span className="font-display font-bold text-lg uppercase tracking-wide">{activeItem?.label}</span>
+                            <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} />
+                        </header>
+                        <div className="flex-1 pb-14 md:pb-0">
+                            <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <BrandingHeader branding={branding} />
+            {content}
+            <BrandingFooter branding={branding} />
+        </>
+    );
+}

package/apps/shared/components/admin/mailboxes/MailboxTable.tsx

@@ -0,0 +1,73 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+
+function formatBytes(bytes: number): string {
+    if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(1)} GB`;
+    if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`;
+    if (bytes >= 1_000) return `${(bytes / 1_000).toFixed(1)} KB`;
+    return `${bytes} B`;
+}
+
+export interface MailboxTableProps {
+    mailboxes: Mailbox[];
+}
+
+export default function MailboxTable({ mailboxes }: MailboxTableProps) {
+    if (mailboxes.length === 0) {
+        return <p className="text-sm text-text-muted">No mailboxes found.</p>;
+    }
+
+    return (
+        <div className="overflow-x-auto">
+            <table className="w-full text-sm border-collapse">
+                <thead>
+                    <tr>
+                        <th className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border">
+                            Address
+                        </th>
+                        <th className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border">
+                            Display name
+                        </th>
+                        <th className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border">
+                            Owner
+                        </th>
+                        <th className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border">
+                            Quota used
+                        </th>
+                        <th className="border-b border-border" />
+                    </tr>
+                </thead>
+                <tbody>
+                    {mailboxes.map((mailbox) => (
+                        <tr key={mailbox.uid}>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.primarySmtpAddress}</td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">{mailbox.displayName}</td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                {mailbox.ownerUserUid ?? (
+                                    <span className="inline-block text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
+                                        Shared
+                                    </span>
+                                )}
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle">
+                                {formatBytes(mailbox.usedBytes)} / {formatBytes(mailbox.quotaBytes)}
+                            </td>
+                            <td className="py-2.5 px-2.5 border-b border-border align-middle text-right">
+                                <a
+                                    href={`/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`}
+                                    className="text-primary-dark font-medium hover:underline"
+                                >
+                                    View
+                                </a>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}

package/apps/shared/components/admin/mailboxes/ResourceSettingsCard.tsx

@@ -0,0 +1,154 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Mailbox, updateMailbox } from "@rapidmx/react-shared/mail/mailApi.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";
+const SELECT_CLASS =
+    "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export interface ResourceSettingsCardProps {
+    mailbox: Mailbox;
+    /** Called with the freshly-saved mailbox after a successful save — mirrors `MemberListCard`'s
+     * identical push-up-rather-than-reload pattern, since the caller already has everything the
+     * response would return. */
+    onUpdate: (mailbox: Mailbox) => void;
+}
+
+/**
+ * Lets an admin view and edit a resource mailbox's booking settings — same load/edit/PUT/reload
+ * interaction shape as `ShareAccessCard`, adapted the same way `MemberListCard` already adapted it:
+ * these seven fields live directly on the `Mailbox` the parent detail page already loaded (not a
+ * separate resource fetched by its own endpoint, unlike a mailbox's ACL), so this receives the
+ * already-loaded `mailbox` and pushes the `PUT` response back up rather than fetching independently.
+ * Only rendered by the detail page when `mailbox.isResource` is already `true` — a mailbox becomes a
+ * resource at creation time (`apps/admin/mailboxes/new`), not retroactively from here.
+ */
+export default function ResourceSettingsCard({ mailbox, onUpdate }: ResourceSettingsCardProps) {
+    const [resourceType, setResourceType] = useState<"room" | "equipment">(mailbox.resourceType ?? "room");
+    const [resourceCapacity, setResourceCapacity] = useState(mailbox.resourceCapacity?.toString() ?? "");
+    const [autoAcceptBookings, setAutoAcceptBookings] = useState(!!mailbox.autoAcceptBookings);
+    const [allowConflicts, setAllowConflicts] = useState(!!mailbox.allowConflicts);
+    const [bookingWindowDays, setBookingWindowDays] = useState(mailbox.bookingWindowDays?.toString() ?? "");
+    const [maxDurationMinutes, setMaxDurationMinutes] = useState(mailbox.maxDurationMinutes?.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 updated = await updateMailbox({
+                uid: mailbox.uid,
+                version: mailbox.version,
+                resourceType,
+                resourceCapacity: resourceCapacity ? Number(resourceCapacity) : undefined,
+                autoAcceptBookings,
+                allowConflicts,
+                bookingWindowDays: bookingWindowDays ? Number(bookingWindowDays) : undefined,
+                maxDurationMinutes: maxDurationMinutes ? Number(maxDurationMinutes) : undefined,
+            });
+            onUpdate(updated);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save resource settings.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="bg-surface border border-border rounded-md p-6">
+            <h2 className="text-base font-bold uppercase tracking-wide mb-4">Resource settings</h2>
+
+            {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">Resource type</span>
+                    <select
+                        aria-label="Resource type"
+                        className={SELECT_CLASS}
+                        value={resourceType}
+                        onChange={(e) => setResourceType(e.target.value as "room" | "equipment")}
+                    >
+                        <option value="room">Room</option>
+                        <option value="equipment">Equipment</option>
+                    </select>
+                </label>
+
+                <label className="flex flex-col gap-1.5 text-sm">
+                    <span className="font-semibold">Capacity (optional)</span>
+                    <input
+                        type="number"
+                        min={0}
+                        step={1}
+                        aria-label="Capacity"
+                        className={INPUT_CLASS}
+                        value={resourceCapacity}
+                        onChange={(e) => setResourceCapacity(e.target.value)}
+                        placeholder="Informational only"
+                    />
+                </label>
+
+                <label className="flex items-center gap-2 text-sm">
+                    <input
+                        type="checkbox"
+                        checked={autoAcceptBookings}
+                        onChange={(e) => setAutoAcceptBookings(e.target.checked)}
+                    />
+                    Automatically accept booking requests
+                </label>
+
+                <label className="flex items-center gap-2 text-sm">
+                    <input type="checkbox" checked={allowConflicts} onChange={(e) => setAllowConflicts(e.target.checked)} />
+                    Allow conflicting bookings (skip conflict checking entirely)
+                </label>
+
+                <label className="flex flex-col gap-1.5 text-sm">
+                    <span className="font-semibold">Booking window, in days (optional)</span>
+                    <input
+                        type="number"
+                        min={0}
+                        step={1}
+                        aria-label="Booking window, in days"
+                        className={INPUT_CLASS}
+                        value={bookingWindowDays}
+                        onChange={(e) => setBookingWindowDays(e.target.value)}
+                        placeholder="No limit"
+                    />
+                </label>
+
+                <label className="flex flex-col gap-1.5 text-sm">
+                    <span className="font-semibold">Maximum duration, in minutes (optional)</span>
+                    <input
+                        type="number"
+                        min={0}
+                        step={1}
+                        aria-label="Maximum duration, in minutes"
+                        className={INPUT_CLASS}
+                        value={maxDurationMinutes}
+                        onChange={(e) => setMaxDurationMinutes(e.target.value)}
+                        placeholder="No limit"
+                    />
+                </label>
+
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save resource settings
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}

package/apps/shared/components/admin/mailboxes/ShareAccessCard.tsx

@@ -0,0 +1,124 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { AccessControlList, getMailboxAcl, grantMailboxAccess, revokeMailboxAccess } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const DEFAULT_DELEGATE_ACTIONS = ["read", "list", "count", "exists"];
+
+export interface ShareAccessCardProps {
+    mailboxUid: string;
+}
+
+/**
+ * Lets an admin (or, eventually, the mailbox owner) view and edit a mailbox's delegate access — the
+ * mechanism behind Exchange-style shared mailboxes. `records` on a mailbox's own ACL doubles as both the
+ * owner's grant (if any) and every delegate's — see `BaseMailboxRoute`'s doc comment in `@rapidmx/restapi`.
+ */
+export default function ShareAccessCard({ mailboxUid }: ShareAccessCardProps) {
+    const [acl, setAcl] = useState<AccessControlList | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [newUserUid, setNewUserUid] = useState("");
+    const [saving, setSaving] = useState(false);
+
+    function reload() {
+        setLoading(true);
+        setError(null);
+        getMailboxAcl(mailboxUid)
+            .then(setAcl)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load share settings."))
+            .finally(() => setLoading(false));
+    }
+
+    useEffect(reload, [mailboxUid]);
+
+    async function handleGrant(e: FormEvent) {
+        e.preventDefault();
+        const userUid = newUserUid.trim();
+        if (!userUid) {
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            await grantMailboxAccess(mailboxUid, userUid, DEFAULT_DELEGATE_ACTIONS);
+            setNewUserUid("");
+            reload();
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    async function handleRevoke(userOrRoleId: string) {
+        setSaving(true);
+        setError(null);
+        try {
+            await revokeMailboxAccess(mailboxUid, userOrRoleId);
+            reload();
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not revoke access.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="bg-surface border border-border rounded-md p-6">
+            <h2 className="text-base font-bold uppercase tracking-wide mb-1">Shared access</h2>
+            <p className="text-sm text-text-muted mb-4">
+                Grants read access to this mailbox for another user, independent of ownership.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : (
+                <ul className="flex flex-col gap-2 mb-4">
+                    {(acl?.records ?? []).length === 0 && (
+                        <li className="text-sm text-text-muted">No grants on this mailbox yet.</li>
+                    )}
+                    {acl?.records.map((record) => (
+                        <li
+                            key={record.userOrRoleId}
+                            className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm"
+                        >
+                            <div>
+                                <div className="text-sm font-medium">{record.userOrRoleId}</div>
+                                <div className="text-xs text-text-muted">{record.actions.join(", ")}</div>
+                            </div>
+                            <button
+                                type="button"
+                                onClick={() => handleRevoke(record.userOrRoleId)}
+                                disabled={saving}
+                                className="text-sm text-danger hover:underline disabled:opacity-55"
+                            >
+                                Revoke
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+
+            <form onSubmit={handleGrant} className="flex gap-2">
+                <input
+                    type="text"
+                    value={newUserUid}
+                    onChange={(e) => setNewUserUid(e.target.value)}
+                    placeholder="User uid to grant access to"
+                    className="flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary"
+                />
+                <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                    Grant
+                </Button>
+            </form>
+        </div>
+    );
+}