@rapidmx/web-client 0.3.0 → 0.4.0

package/apps/shared/components/admin/settings/BrandingForm.tsx

@@ -0,0 +1,374 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ChangeEvent, FormEvent, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import {
+    Branding,
+    deleteBrandingIcon,
+    deleteBrandingLogo,
+    deleteBrandingStylesheet,
+    updateBranding,
+    uploadBrandingIcon,
+    uploadBrandingLogo,
+    uploadBrandingStylesheet,
+} from "@rapidmx/react-shared/branding/brandingApi.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 MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
+
+/** The branding editor, shared by the Branding page and the setup wizard. */
+export default function BrandingForm({ branding, onChange }: { branding: Branding; onChange: (b: Branding) => void }) {
+    const [companyName, setCompanyName] = useState(branding.companyName);
+    const [title, setTitle] = useState(branding.title);
+    const [headerHtml, setHeaderHtml] = useState(branding.headerHtml ?? "");
+    const [footerHtml, setFooterHtml] = useState(branding.footerHtml ?? "");
+    const [logoUrlInput, setLogoUrlInput] = useState(branding.logoUrl ?? "");
+    const [iconUrlInput, setIconUrlInput] = useState(branding.iconUrl ?? "");
+    const [stylesheetUrlInput, setStylesheetUrlInput] = useState(branding.stylesheetUrl ?? "");
+
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [assetBusy, setAssetBusy] = useState<string | null>(null);
+
+    const logoFileRef = useRef<HTMLInputElement>(null);
+    const iconFileRef = useRef<HTMLInputElement>(null);
+    const stylesheetFileRef = useRef<HTMLInputElement>(null);
+
+    function runAsset(name: string, action: () => Promise<Branding>) {
+        setError(null);
+        setAssetBusy(name);
+        return action()
+            .then((updated) => {
+                onChange(updated);
+                setLogoUrlInput(updated.logoUrl ?? "");
+                setIconUrlInput(updated.iconUrl ?? "");
+                setStylesheetUrlInput(updated.stylesheetUrl ?? "");
+            })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not update branding."))
+            .finally(() => setAssetBusy(null));
+    }
+
+    function handleLogoFileChange(e: ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        if (file.size > MAX_UPLOAD_BYTES) {
+            setError(`"${file.name}" is too large — logos must be 5MB or smaller.`);
+        } else {
+            void runAsset("logo-upload", () => uploadBrandingLogo(file));
+        }
+        e.target.value = "";
+    }
+
+    function handleIconFileChange(e: ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        if (file.size > MAX_UPLOAD_BYTES) {
+            setError(`"${file.name}" is too large — icons must be 5MB or smaller.`);
+        } else {
+            void runAsset("icon-upload", () => uploadBrandingIcon(file));
+        }
+        e.target.value = "";
+    }
+
+    function handleStylesheetFileChange(e: ChangeEvent<HTMLInputElement>) {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        if (file.size > MAX_UPLOAD_BYTES) {
+            setError(`"${file.name}" is too large — stylesheets must be 5MB or smaller.`);
+        } else {
+            void runAsset("stylesheet-upload", () => uploadBrandingStylesheet(file));
+        }
+        e.target.value = "";
+    }
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const updated = await updateBranding({ companyName, title, headerHtml, footerHtml });
+            onChange(updated);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save branding.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-2xl">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">Branding</h1>
+            <p className="text-sm text-text-muted mb-5">
+                Customize the logo, nav-header icon, product name, and chrome shown to every visitor of the
+                webmail and admin console — including anonymous booking-page visitors.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+            {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+            <div className="flex flex-col gap-6">
+                <section className="flex flex-col gap-3">
+                    <h2 className="text-sm font-bold uppercase tracking-wide text-text-muted">Logo</h2>
+                    <div className="flex items-center gap-4">
+                        <img
+                            src={branding.logoUrl || "/images/logo.svg"}
+                            alt="Current logo"
+                            width="64"
+                            height="64"
+                            className="border border-border rounded-sm bg-surface-alt p-1"
+                        />
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto"
+                                loading={assetBusy === "logo-upload"}
+                                disabled={assetBusy !== null}
+                                onClick={() => logoFileRef.current?.click()}
+                            >
+                                Upload logo
+                            </Button>
+                            <input
+                                ref={logoFileRef}
+                                type="file"
+                                accept="image/*"
+                                aria-label="Upload logo"
+                                className="hidden"
+                                onChange={handleLogoFileChange}
+                            />
+                            {branding.logoUrl && (
+                                <Button
+                                    type="button"
+                                    variant="text"
+                                    disabled={assetBusy !== null}
+                                    loading={assetBusy === "logo-delete"}
+                                    onClick={() => void runAsset("logo-delete", async () => {
+                                        await deleteBrandingLogo();
+                                        return { ...branding, logoUrl: undefined };
+                                    })}
+                                >
+                                    Remove logo
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Or use an external image URL</span>
+                        <div className="flex gap-2">
+                            <input
+                                aria-label="Logo URL"
+                                className={INPUT_CLASS}
+                                value={logoUrlInput}
+                                onChange={(e) => setLogoUrlInput(e.target.value)}
+                            />
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto"
+                                disabled={assetBusy !== null || logoUrlInput === (branding.logoUrl ?? "")}
+                                loading={assetBusy === "logo-url"}
+                                onClick={() => void runAsset("logo-url", () => updateBranding({ logoUrl: logoUrlInput }))}
+                            >
+                                Set
+                            </Button>
+                        </div>
+                    </label>
+                </section>
+
+                <section className="flex flex-col gap-3">
+                    <h2 className="text-sm font-bold uppercase tracking-wide text-text-muted">Icon</h2>
+                    <p className="text-xs text-text-muted -mt-1">
+                        A compact mark for navigation headers, independent of the full logo above. Falls back to
+                        the logo, then a default asset, when not set.
+                    </p>
+                    <div className="flex items-center gap-4">
+                        <img
+                            src={branding.iconUrl || branding.logoUrl || "/images/logo.svg"}
+                            alt="Current icon"
+                            width="64"
+                            height="64"
+                            className="border border-border rounded-sm bg-surface-alt p-1"
+                        />
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto"
+                                loading={assetBusy === "icon-upload"}
+                                disabled={assetBusy !== null}
+                                onClick={() => iconFileRef.current?.click()}
+                            >
+                                Upload icon
+                            </Button>
+                            <input
+                                ref={iconFileRef}
+                                type="file"
+                                accept="image/*"
+                                aria-label="Upload icon"
+                                className="hidden"
+                                onChange={handleIconFileChange}
+                            />
+                            {branding.iconUrl && (
+                                <Button
+                                    type="button"
+                                    variant="text"
+                                    disabled={assetBusy !== null}
+                                    loading={assetBusy === "icon-delete"}
+                                    onClick={() => void runAsset("icon-delete", async () => {
+                                        await deleteBrandingIcon();
+                                        return { ...branding, iconUrl: undefined };
+                                    })}
+                                >
+                                    Remove icon
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Or use an external image URL</span>
+                        <div className="flex gap-2">
+                            <input
+                                aria-label="Icon URL"
+                                className={INPUT_CLASS}
+                                value={iconUrlInput}
+                                onChange={(e) => setIconUrlInput(e.target.value)}
+                            />
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto"
+                                disabled={assetBusy !== null || iconUrlInput === (branding.iconUrl ?? "")}
+                                loading={assetBusy === "icon-url"}
+                                onClick={() => void runAsset("icon-url", () => updateBranding({ iconUrl: iconUrlInput }))}
+                            >
+                                Set
+                            </Button>
+                        </div>
+                    </label>
+                </section>
+
+                <section className="flex flex-col gap-3">
+                    <h2 className="text-sm font-bold uppercase tracking-wide text-text-muted">Custom stylesheet</h2>
+                    <div className="flex items-center gap-3">
+                        <span className="text-sm text-text-muted truncate">
+                            {branding.stylesheetUrl || "None configured"}
+                        </span>
+                    </div>
+                    <div className="flex gap-2">
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            loading={assetBusy === "stylesheet-upload"}
+                            disabled={assetBusy !== null}
+                            onClick={() => stylesheetFileRef.current?.click()}
+                        >
+                            Upload CSS file
+                        </Button>
+                        <input
+                            ref={stylesheetFileRef}
+                            type="file"
+                            accept="text/css,.css"
+                            aria-label="Upload stylesheet"
+                            className="hidden"
+                            onChange={handleStylesheetFileChange}
+                        />
+                        {branding.stylesheetUrl && (
+                            <Button
+                                type="button"
+                                variant="text"
+                                disabled={assetBusy !== null}
+                                loading={assetBusy === "stylesheet-delete"}
+                                onClick={() => void runAsset("stylesheet-delete", async () => {
+                                    await deleteBrandingStylesheet();
+                                    return { ...branding, stylesheetUrl: undefined };
+                                })}
+                            >
+                                Remove stylesheet
+                            </Button>
+                        )}
+                    </div>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Or use an external stylesheet URL</span>
+                        <div className="flex gap-2">
+                            <input
+                                aria-label="Stylesheet URL"
+                                className={INPUT_CLASS}
+                                value={stylesheetUrlInput}
+                                onChange={(e) => setStylesheetUrlInput(e.target.value)}
+                            />
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto"
+                                disabled={assetBusy !== null || stylesheetUrlInput === (branding.stylesheetUrl ?? "")}
+                                loading={assetBusy === "stylesheet-url"}
+                                onClick={() =>
+                                    void runAsset("stylesheet-url", () => updateBranding({ stylesheetUrl: stylesheetUrlInput }))
+                                }
+                            >
+                                Set
+                            </Button>
+                        </div>
+                    </label>
+                </section>
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-4 pt-2 border-t border-border">
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Company name</span>
+                        <input
+                            aria-label="Company name"
+                            className={INPUT_CLASS}
+                            value={companyName}
+                            onChange={(e) => setCompanyName(e.target.value)}
+                        />
+                    </label>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Product title</span>
+                        <input
+                            aria-label="Product title"
+                            className={INPUT_CLASS}
+                            value={title}
+                            onChange={(e) => setTitle(e.target.value)}
+                        />
+                        <span className="text-xs text-text-muted">Shown as the browser tab title.</span>
+                    </label>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Header HTML (optional)</span>
+                        <textarea
+                            aria-label="Header HTML"
+                            className={`${INPUT_CLASS} font-mono`}
+                            rows={3}
+                            value={headerHtml}
+                            onChange={(e) => setHeaderHtml(e.target.value)}
+                        />
+                    </label>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Footer HTML (optional)</span>
+                        <textarea
+                            aria-label="Footer HTML"
+                            className={`${INPUT_CLASS} font-mono`}
+                            rows={3}
+                            value={footerHtml}
+                            onChange={(e) => setFooterHtml(e.target.value)}
+                        />
+                    </label>
+                    <div>
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Save
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -0,0 +1,176 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "@rapidmx/react-shared/admin/domainsApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
+    ownership: "Ownership (TXT)",
+    mx: "MX",
+    spf: "SPF",
+    dkim: "DKIM",
+    dmarc: "DMARC",
+};
+
+export interface DomainDnsSetupProps {
+    uid: string;
+    /** Called with the domain every time it's (re)loaded - e.g. after "Verify now". */
+    onLoaded?: (domain: Domain) => void;
+}
+
+/**
+ * A domain's status, its ownership TXT record with "Verify now", and the DNS setup checklist - shared by the domain
+ * detail page and the setup wizard.
+ */
+export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
+    const [domain, setDomain] = useState<Domain | null>(null);
+    const [dnsSetup, setDnsSetup] = useState<DnsRecordCheck[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [verifying, setVerifying] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    function reload(id: string) {
+        setLoading(true);
+        setError(null);
+        Promise.all([getDomain(id), getDnsSetup(id)])
+            .then(([d, checks]) => {
+                setDomain(d);
+                setDnsSetup(checks);
+                onLoaded?.(d);
+            })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this domain."))
+            .finally(() => setLoading(false));
+    }
+
+    useEffect(() => {
+        reload(uid);
+    }, [uid]);
+
+    // Only ever invoked from the "Verify now" button below, which only renders once `domain` is loaded.
+    async function handleVerify() {
+        setVerifying(true);
+        setError(null);
+        try {
+            await verifyDomain(domain!.uid);
+            reload(domain!.uid);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not verify this domain.");
+        } finally {
+            setVerifying(false);
+        }
+    }
+
+    async function handleCopy(value: string) {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch {
+            // Clipboard access can be denied by the browser — the value is still selectable/copyable by hand.
+        }
+    }
+
+    if (loading) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error || !domain) {
+        return <Alert>{error ?? "Domain not found."}</Alert>;
+    }
+
+    const ownershipValue =
+        dnsSetup.find((c) => c.type === "ownership")?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`;
+
+    return (
+        <div className="flex flex-col gap-5">
+            <div className="bg-surface border border-border rounded-md p-6">
+                <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                    <dt className="text-text-muted">Enabled</dt>
+                    <dd>{domain.enabled ? "Yes" : "No"}</dd>
+                    <dt className="text-text-muted">Verification</dt>
+                    <dd>
+                        {domain.verified ? (
+                            <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white">
+                                Verified
+                            </span>
+                        ) : (
+                            <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
+                                Unverified
+                            </span>
+                        )}
+                    </dd>
+                    <dt className="text-text-muted">Last checked</dt>
+                    <dd>{domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never"}</dd>
+                </dl>
+
+                {!domain.verified && (
+                    <div className="mt-5 pt-5 border-t border-border">
+                        <p className="text-sm mb-2">
+                            Add the following TXT record to <strong>{domain.name}</strong> to prove ownership, then verify:
+                        </p>
+                        <div className="flex items-center gap-2">
+                            <code className="flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap">
+                                {ownershipValue}
+                            </code>
+                            <Button type="button" variant="secondary" className="!w-auto shrink-0" onClick={() => handleCopy(ownershipValue)}>
+                                {copied ? "Copied" : "Copy"}
+                            </Button>
+                        </div>
+                        <Button type="button" className="!w-auto mt-3" loading={verifying} disabled={verifying} onClick={handleVerify}>
+                            Verify now
+                        </Button>
+                    </div>
+                )}
+            </div>
+
+            {dnsSetup.length > 0 && (
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <h2 className="text-sm font-bold uppercase tracking-wide mb-3">DNS setup checklist</h2>
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm border-collapse">
+                            <thead>
+                                <tr>
+                                    {["Record", "Status", "Recommended value"].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>
+                                {dnsSetup.map((check) => (
+                                    <tr key={check.type}>
+                                        <td className="py-2.5 px-2.5 border-b border-border">{RECORD_TYPE_LABELS[check.type]}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">
+                                            {!check.configured ? (
+                                                <span className="text-xs text-text-muted">Not configured</span>
+                                            ) : check.matches ? (
+                                                <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white">
+                                                    Live
+                                                </span>
+                                            ) : (
+                                                <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
+                                                    Not found
+                                                </span>
+                                            )}
+                                        </td>
+                                        <td className="py-2.5 px-2.5 border-b border-border text-text-muted">
+                                            <code className="text-xs">{check.recommendedValue ?? "—"}</code>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/shared/components/admin/settings/EncryptionPolicyForm.tsx

@@ -0,0 +1,104 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { EncryptionPolicy, PolicyState, updateEncryptionPolicy } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const SELECT_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 TIERS: { key: keyof EncryptionPolicy; label: string; help: string }[] = [
+    { key: "encryptSameOrg", label: "Mail within this server", help: "Messages between mailboxes hosted on this server." },
+    {
+        key: "encryptFederated",
+        label: "Mail to other RapidMX servers",
+        help: "Messages to people on another RapidMX server that publishes its encryption keys.",
+    },
+    { key: "encryptExternal", label: "Mail to everyone else", help: "Messages to any other email provider, using S/MIME." },
+];
+
+const STATES: { value: PolicyState; label: string }[] = [
+    { value: "automatic", label: "Always encrypt when possible" },
+    { value: "optional", label: "Let people choose" },
+    { value: "prohibited", label: "Never encrypt" },
+];
+
+/** Whether end-to-end encryption can be used at all under `policy` - i.e. any tier allows it. */
+export function isEncryptionEnabled(policy: EncryptionPolicy): boolean {
+    return TIERS.some((tier) => policy[tier.key] !== "prohibited");
+}
+
+export interface EncryptionPolicyFormProps {
+    policy: EncryptionPolicy;
+    onChange: (policy: EncryptionPolicy) => void;
+}
+
+/** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
+export default function EncryptionPolicyForm({ policy, onChange }: EncryptionPolicyFormProps) {
+    const [values, setValues] = useState<EncryptionPolicy>(policy);
+    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 updateEncryptionPolicy(values);
+            onChange(updated);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save the encryption policy.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-xl">
+            <h2 className="text-lg font-bold uppercase tracking-wide mb-1">End-to-end encryption</h2>
+            <p className="text-sm text-text-muted mb-5">
+                Encrypted messages can only be read by their senders and recipients - not by this server or its
+                administrators. Choose how encryption applies to each kind of mail.
+            </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">
+                {TIERS.map((tier) => (
+                    <label key={tier.key} className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">{tier.label}</span>
+                        <select
+                            aria-label={tier.label}
+                            className={SELECT_CLASS}
+                            value={values[tier.key]}
+                            onChange={(e) => {
+                                setSaved(false);
+                                setValues({ ...values, [tier.key]: e.target.value as PolicyState });
+                            }}
+                        >
+                            {STATES.map((state) => (
+                                <option key={state.value} value={state.value}>
+                                    {state.label}
+                                </option>
+                            ))}
+                        </select>
+                        <span className="text-xs text-text-muted">{tier.help}</span>
+                    </label>
+                ))}
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}