@rapidmx/web-client 0.2.0

package/apps/admin/distribution-lists/new/index.tsx

@@ -0,0 +1,114 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { createDistributionList } from "@rapidmx/react-shared/admin/distributionListsApi.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";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export default function NewDistributionListPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="distributionLists">
+            <NewDistributionListForm />
+        </AdminShell>
+    );
+}
+
+function NewDistributionListForm() {
+    const [primarySmtpAddress, setPrimarySmtpAddress] = useState("");
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!primarySmtpAddress.trim()) {
+            setError("A primary SMTP address is required.");
+            return;
+        }
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const list = await createDistributionList({
+                primarySmtpAddress: primarySmtpAddress.trim(),
+                name: name.trim(),
+                description: description.trim() || undefined,
+            });
+            window.location.href = `/admin/distribution-lists/${encodeURIComponent(list.uid)}`;
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the distribution list.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-xl">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New distribution list</h1>
+            <p className="text-sm text-text-muted mb-5">
+                Members can be added once the list is created.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            <form onSubmit={handleSubmit} className="bg-surface border border-border rounded-md p-6">
+                <FormField label="Primary SMTP address" htmlFor="primarySmtpAddress">
+                    <input
+                        id="primarySmtpAddress"
+                        type="email"
+                        className={INPUT_CLASS}
+                        value={primarySmtpAddress}
+                        onChange={(e) => setPrimarySmtpAddress(e.target.value)}
+                        placeholder="team@example.com"
+                    />
+                </FormField>
+
+                <FormField label="Name" htmlFor="name">
+                    <input
+                        id="name"
+                        type="text"
+                        className={INPUT_CLASS}
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        placeholder="Team"
+                    />
+                </FormField>
+
+                <FormField label="Description (optional)" htmlFor="description">
+                    <input
+                        id="description"
+                        type="text"
+                        className={INPUT_CLASS}
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                    />
+                </FormField>
+
+                <div className="flex gap-3 mt-2">
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Create distribution list
+                    </Button>
+                    <a href="/admin/distribution-lists">
+                        <Button type="button" variant="secondary" className="!w-auto">
+                            Cancel
+                        </Button>
+                    </a>
+                </div>
+            </form>
+        </div>
+    );
+}

package/apps/admin/domains/[uid].tsx

@@ -0,0 +1,259 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { deleteDomain, DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "@rapidmx/react-shared/admin/domainsApi.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";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+
+const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
+    ownership: "Ownership (TXT)",
+    mx: "MX",
+    spf: "SPF",
+    dkim: "DKIM",
+    dmarc: "DMARC",
+};
+
+export default function DomainDetailPage(props: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
+    return (
+        <AdminShell {...props} active="domains">
+            <DomainDetailContent uid={props.params.uid} />
+        </AdminShell>
+    );
+}
+
+function DomainDetailContent({ uid }: { uid: string }) {
+    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);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState<string | null>(null);
+
+    function reload(id: string) {
+        setLoading(true);
+        setError(null);
+        Promise.all([getDomain(id), getDnsSetup(id)])
+            .then(([d, checks]) => {
+                setDomain(d);
+                setDnsSetup(checks);
+            })
+            .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 itself only renders once `domain` is
+    // resolved (children only render once loaded — see the early returns above) — the non-null assertion
+    // reflects that real invariant, not an unchecked assumption. Matches `QuarantineContent.handleRelease`'s
+    // identical pattern.
+    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);
+        }
+    }
+
+    // Only ever invoked from the "Delete domain" confirmation modal below, which itself only renders once
+    // `domain` is resolved (children only render once loaded — see the early returns above) — the non-null
+    // assertion reflects that real invariant, not an unchecked assumption. Matches `handleVerify`'s identical
+    // pattern above.
+    function closeDeleteModal() {
+        setConfirmingDelete(false);
+    }
+
+    async function handleDelete() {
+        setDeleting(true);
+        setDeleteError(null);
+        try {
+            await deleteDomain(domain!.uid, domain!.version);
+            window.location.href = "/admin/domains";
+        } catch (err) {
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this domain.");
+            setDeleting(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 ownershipCheck = dnsSetup.find((c) => c.type === "ownership");
+
+    return (
+        <div className="max-w-3xl flex flex-col gap-5">
+            <div className="flex items-start justify-between gap-4">
+                <div>
+                    <a href="/admin/domains" className="text-sm text-primary-dark hover:underline">
+                        &larr; All domains
+                    </a>
+                    <h1 className="text-xl font-bold tracking-tight mt-1">{domain.name}</h1>
+                </div>
+                <Button
+                    type="button"
+                    variant="secondary"
+                    className="!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger"
+                    onClick={() => setConfirmingDelete(true)}
+                >
+                    Delete domain
+                </Button>
+            </div>
+
+            <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">
+                                {ownershipCheck?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`}
+                            </code>
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto shrink-0"
+                                onClick={() =>
+                                    handleCopy(
+                                        ownershipCheck?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`,
+                                    )
+                                }
+                            >
+                                {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>
+            )}
+
+            <Modal open={confirmingDelete} onClose={closeDeleteModal} title="Delete domain">
+                <p className="text-sm mb-5">
+                    Are you sure you want to delete <strong>{domain.name}</strong>? This cannot be undone.
+                </p>
+                {deleteError && <Alert>{deleteError}</Alert>}
+                <div className="flex gap-3 justify-end mt-5">
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className="!w-auto"
+                        disabled={deleting}
+                        onClick={closeDeleteModal}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        type="button"
+                        className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
+                        loading={deleting}
+                        disabled={deleting}
+                        onClick={handleDelete}
+                    >
+                        Delete
+                    </Button>
+                </div>
+            </Modal>
+        </div>
+    );
+}

package/apps/admin/domains/index.tsx

@@ -0,0 +1,125 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Domain, listDomains } from "@rapidmx/react-shared/admin/domainsApi.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 PAGE_SIZE = 25;
+
+export default function DomainsListPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="domains">
+            <DomainsListContent />
+        </AdminShell>
+    );
+}
+
+function DomainsListContent() {
+    const [page, setPage] = useState(0);
+    const [domains, setDomains] = useState<Domain[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listDomains({ page, limit: PAGE_SIZE })
+            .then(setDomains)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load domains."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    const hasNextPage = domains.length === PAGE_SIZE;
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Domains</h1>
+                <a href="/admin/domains/new">
+                    <Button type="button" className="!w-auto">
+                        + New domain
+                    </Button>
+                </a>
+            </div>
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : domains.length === 0 ? (
+                <p className="text-sm text-text-muted">No domains configured yet.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Name", "Enabled", "Verified", ""].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>
+                            {domains.map((domain) => (
+                                <tr key={domain.uid}>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{domain.name}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{domain.enabled ? "Yes" : "No"}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {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>
+                                        )}
+                                    </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border text-right">
+                                        <a
+                                            href={`/admin/domains/${encodeURIComponent(domain.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>
+        </>
+    );
+}

package/apps/admin/domains/new/index.tsx

@@ -0,0 +1,84 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { createDomain } from "@rapidmx/react-shared/admin/domainsApi.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";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export default function NewDomainPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="domains">
+            <NewDomainForm />
+        </AdminShell>
+    );
+}
+
+function NewDomainForm() {
+    const [name, setName] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A domain name is required.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const domain = await createDomain({ name: name.trim() });
+            window.location.href = `/admin/domains/${encodeURIComponent(domain.uid)}`;
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the domain.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-xl">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New domain</h1>
+            <p className="text-sm text-text-muted mb-5">
+                A new domain starts unverified. Once created, its detail page shows the DNS TXT record to publish
+                to prove ownership before mail can be accepted on it.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            <form onSubmit={handleSubmit} className="bg-surface border border-border rounded-md p-6">
+                <FormField label="Domain name" htmlFor="name">
+                    <input
+                        id="name"
+                        type="text"
+                        className={INPUT_CLASS}
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        placeholder="example.com"
+                    />
+                </FormField>
+
+                <div className="flex gap-3 mt-2">
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Create domain
+                    </Button>
+                    <a href="/admin/domains">
+                        <Button type="button" variant="secondary" className="!w-auto">
+                            Cancel
+                        </Button>
+                    </a>
+                </div>
+            </form>
+        </div>
+    );
+}

package/apps/admin/index.tsx

@@ -0,0 +1,82 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { listMailboxes, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import AdminShell, { AdminShellProps } from "../shared/components/admin/layout/AdminShell.js";
+import MailboxTable from "../shared/components/admin/mailboxes/MailboxTable.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 MailboxesListPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="mailboxes">
+            <MailboxesListContent />
+        </AdminShell>
+    );
+}
+
+function MailboxesListContent() {
+    const [page, setPage] = useState(0);
+    const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listMailboxes({ page, limit: PAGE_SIZE })
+            .then(setMailboxes)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load mailboxes."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    const hasNextPage = mailboxes.length === PAGE_SIZE;
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Mailboxes</h1>
+                <a href="/admin/mailboxes/new">
+                    <Button type="button" className="!w-auto">
+                        + New mailbox
+                    </Button>
+                </a>
+            </div>
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : (
+                <MailboxTable mailboxes={mailboxes} />
+            )}
+
+            <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>
+        </>
+    );
+}