@rapidmx/web-client 0.2.0 → 0.3.0

package/apps/admin/escrow-scopes/[uid].tsx

@@ -0,0 +1,237 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import {
+    deleteEscrowScope,
+    EscrowScope,
+    getEscrowScope,
+    updateEscrowScope,
+} from "@rapidmx/react-shared/admin/escrowScopesApi.js";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import EscrowScopeKeyAndHoldersFields, {
+    EscrowScopeKeyAndHoldersValue,
+} from "../../shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.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";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.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";
+
+function toFieldsValue(scope: EscrowScope): EscrowScopeKeyAndHoldersValue {
+    return {
+        publicKey: scope.publicKey.publicKey,
+        keyType: scope.publicKey.type,
+        fingerprint: scope.publicKey.fingerprint,
+        notBefore: toDatetimeLocal(new Date(scope.publicKey.notBefore).toISOString()),
+        notAfter: toDatetimeLocal(new Date(scope.publicKey.notAfter).toISOString()),
+        holderUserUids: scope.holderUserUids,
+        requiredHolders: scope.requiredHolders,
+        notifySubjectOnAccess: scope.notifySubjectOnAccess,
+    };
+}
+
+export default function EscrowScopeDetailPage(props: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
+    return (
+        <AdminShell {...props} active="escrowScopes">
+            <EscrowScopeDetailContent uid={props.params.uid} />
+        </AdminShell>
+    );
+}
+
+function EscrowScopeDetailContent({ uid }: { uid: string }) {
+    const [original, setOriginal] = useState<EscrowScope | null>(null);
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [fields, setFields] = useState<EscrowScopeKeyAndHoldersValue | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getEscrowScope(uid)
+            .then((loaded) => {
+                setOriginal(loaded);
+                if (loaded) {
+                    setName(loaded.name);
+                    setDescription(loaded.description ?? "");
+                    setFields(toFieldsValue(loaded));
+                }
+            })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this escrow scope."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+
+    // Only ever invoked from the form below, which itself only renders once `original`/`fields` are
+    // loaded (the early returns further down cover every other state) — the non-null assertions reflect
+    // that real invariant, not an unchecked assumption. Matches `TransportRuleDetailContent.handleSubmit`'s
+    // identical pattern.
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+        if (!fields!.publicKey.trim() || !fields!.keyType.trim() || !fields!.fingerprint.trim()) {
+            setError("The public key, its type, and its fingerprint are all required.");
+            return;
+        }
+        if (fields!.holderUserUids.length === 0) {
+            setError("At least one holder is required.");
+            return;
+        }
+        if (fields!.requiredHolders < 1 || fields!.requiredHolders > fields!.holderUserUids.length) {
+            setError("Required holders must be between 1 and the number of holders.");
+            return;
+        }
+
+        setSaving(true);
+        setSaved(false);
+        try {
+            const updated = await updateEscrowScope({
+                uid: original!.uid,
+                version: original!.version,
+                name: name.trim(),
+                description: description.trim() || undefined,
+                publicKey: {
+                    publicKey: fields!.publicKey.trim(),
+                    type: fields!.keyType.trim(),
+                    fingerprint: fields!.fingerprint.trim(),
+                    notBefore: new Date(fields!.notBefore).getTime(),
+                    notAfter: new Date(fields!.notAfter).getTime(),
+                },
+                holderUserUids: fields!.holderUserUids,
+                requiredHolders: fields!.requiredHolders,
+                notifySubjectOnAccess: fields!.notifySubjectOnAccess,
+            });
+            setOriginal(updated);
+            setFields(toFieldsValue(updated));
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this escrow scope.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    function closeDeleteModal() {
+        setConfirmingDelete(false);
+    }
+
+    // Only ever invoked from the delete-confirmation modal below, which itself only renders once
+    // `original` is resolved — same non-null-assertion precedent as `handleSubmit` above.
+    async function handleDelete() {
+        setDeleting(true);
+        setDeleteError(null);
+        try {
+            await deleteEscrowScope(original!.uid, original!.version);
+            window.location.href = "/admin/escrow-scopes";
+        } catch (err) {
+            // Most commonly a 409 ("referenced by an existing Matter") — see `deleteEscrowScope()`'s own
+            // doc comment - surfaced as-is rather than special-cased.
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this escrow scope.");
+            setDeleting(false);
+        }
+    }
+
+    if (loading) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error && !original) {
+        return <Alert>{error}</Alert>;
+    }
+    if (!original || !fields) {
+        return <Alert>Escrow scope not found.</Alert>;
+    }
+
+    return (
+        <div className="max-w-3xl">
+            <div className="flex items-start justify-between gap-4 mb-1">
+                <div>
+                    <a href="/admin/escrow-scopes" className="text-sm text-primary-dark hover:underline">
+                        &larr; All escrow scopes
+                    </a>
+                    <h1 className="text-xl font-bold tracking-tight mt-1">{original.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 scope
+                </Button>
+            </div>
+
+            {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-5 mt-4">
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <FormField label="Name" htmlFor="name">
+                        <input
+                            id="name"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </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>
+
+                <EscrowScopeKeyAndHoldersFields value={fields} onChange={setFields} />
+
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save changes
+                    </Button>
+                </div>
+            </form>
+
+            <Modal open={confirmingDelete} onClose={closeDeleteModal} title="Delete escrow scope">
+                <p className="text-sm mb-5">
+                    Are you sure you want to delete <strong>{original.name}</strong>? This cannot be undone, and fails
+                    if any Matter still references this scope.
+                </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/escrow-scopes/index.tsx

@@ -0,0 +1,124 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { EscrowScope, listEscrowScopes } from "@rapidmx/react-shared/admin/escrowScopesApi.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 EscrowScopesPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="escrowScopes">
+            <EscrowScopesContent />
+        </AdminShell>
+    );
+}
+
+function EscrowScopesContent() {
+    const [page, setPage] = useState(0);
+    const [scopes, setScopes] = useState<EscrowScope[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listEscrowScopes({ page, limit: PAGE_SIZE })
+            .then(setScopes)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load escrow scopes."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    const hasNextPage = scopes.length === PAGE_SIZE;
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Escrow scopes</h1>
+                <a href="/admin/escrow-scopes/new">
+                    <Button type="button" className="!w-auto">
+                        + New escrow scope
+                    </Button>
+                </a>
+            </div>
+
+            <p className="text-sm text-text-muted mb-5">
+                Configuring who counts as a holder, the dual-control threshold, and a scope's own public key is an
+                administrative act, separate from actually holding the eDiscovery/compliance role — this page never
+                grants you access to any mailbox's escrowed key material.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : scopes.length === 0 ? (
+                <p className="text-sm text-text-muted">No escrow scopes yet.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Name", "Holders", "Required holders", "Notify subject", ""].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>
+                            {scopes.map((scope) => (
+                                <tr key={scope.uid}>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{scope.name}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{scope.holderUserUids.length}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{scope.requiredHolders}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {scope.notifySubjectOnAccess ? "Yes" : "No"}
+                                    </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border text-right">
+                                        <a
+                                            href={`/admin/escrow-scopes/${encodeURIComponent(scope.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/escrow-scopes/new/index.tsx

@@ -0,0 +1,128 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { createEscrowScope } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
+import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import EscrowScopeKeyAndHoldersFields, {
+    emptyEscrowScopeKeyAndHoldersValue,
+} from "../../../shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.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 NewEscrowScopePage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="escrowScopes">
+            <NewEscrowScopeForm />
+        </AdminShell>
+    );
+}
+
+function NewEscrowScopeForm() {
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [keyAndHolders, setKeyAndHolders] = useState(emptyEscrowScopeKeyAndHoldersValue());
+    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 name is required.");
+            return;
+        }
+        if (!keyAndHolders.publicKey.trim() || !keyAndHolders.keyType.trim() || !keyAndHolders.fingerprint.trim()) {
+            setError("The public key, its type, and its fingerprint are all required.");
+            return;
+        }
+        if (keyAndHolders.holderUserUids.length === 0) {
+            setError("At least one holder is required.");
+            return;
+        }
+        if (keyAndHolders.requiredHolders < 1 || keyAndHolders.requiredHolders > keyAndHolders.holderUserUids.length) {
+            setError("Required holders must be between 1 and the number of holders.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const created = await createEscrowScope({
+                name: name.trim(),
+                description: description.trim() || undefined,
+                publicKey: {
+                    publicKey: keyAndHolders.publicKey.trim(),
+                    type: keyAndHolders.keyType.trim(),
+                    fingerprint: keyAndHolders.fingerprint.trim(),
+                    notBefore: new Date(keyAndHolders.notBefore).getTime(),
+                    notAfter: new Date(keyAndHolders.notAfter).getTime(),
+                },
+                holderUserUids: keyAndHolders.holderUserUids,
+                requiredHolders: keyAndHolders.requiredHolders,
+                notifySubjectOnAccess: keyAndHolders.notifySubjectOnAccess,
+            });
+            window.location.href = `/admin/escrow-scopes/${encodeURIComponent(created.uid)}`;
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the escrow scope.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-3xl">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New escrow scope</h1>
+            <p className="text-sm text-text-muted mb-5">
+                Configuring who counts as a holder is an administrative act, deliberately separate from actually
+                holding the eDiscovery/compliance role.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <FormField label="Name" htmlFor="name">
+                        <input
+                            id="name"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="Legal Hold Q1"
+                        />
+                    </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>
+
+                <EscrowScopeKeyAndHoldersFields value={keyAndHolders} onChange={setKeyAndHolders} />
+
+                <div className="flex gap-3">
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Create escrow scope
+                    </Button>
+                    <a href="/admin/escrow-scopes">
+                        <Button type="button" variant="secondary" className="!w-auto">
+                            Cancel
+                        </Button>
+                    </a>
+                </div>
+            </form>
+        </div>
+    );
+}

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

@@ -4,12 +4,13 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { getMailbox, impersonateUser, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { deleteMailbox, getMailbox, impersonateUser, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import ShareAccessCard from "../../shared/components/admin/mailboxes/ShareAccessCard.js";
 import ResourceSettingsCard from "../../shared/components/admin/mailboxes/ResourceSettingsCard.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";
 
 function formatBytes(bytes: number): string {
     if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(2)} GB`;
@@ -31,6 +32,9 @@ function MailboxDetailContent({ uid, impersonationBaseUrl }: { uid: string } & P
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [impersonating, setImpersonating] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState<string | null>(null);
 
     async function handleAccessMailbox(ownerUserUid: string) {
         setImpersonating(true);
@@ -43,6 +47,27 @@ function MailboxDetailContent({ uid, impersonationBaseUrl }: { uid: string } & P
         }
     }
 
+    function closeDeleteModal() {
+        setConfirmingDelete(false);
+    }
+
+    // Only ever invoked from the delete-confirmation modal below, which itself only renders once
+    // `mailbox` is resolved (the `error || !mailbox` branch below returns before this content mounts).
+    async function handleDelete() {
+        setDeleting(true);
+        setDeleteError(null);
+        try {
+            await deleteMailbox(mailbox!.uid, mailbox!.version);
+            window.location.href = "/admin";
+        } catch (err) {
+            // Most commonly a 409 if this mailbox is a custodian on an open legal hold (restapi's own
+            // `assertNotOnLegalHold()`, naming the blocking Matter uid(s)) - surfaced as-is, same as
+            // every other destructive-action error in this codebase, rather than special-cased here.
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this mailbox.");
+            setDeleting(false);
+        }
+    }
+
     useEffect(() => {
         setLoading(true);
         setError(null);
@@ -71,18 +96,28 @@ function MailboxDetailContent({ uid, impersonationBaseUrl }: { uid: string } & P
                     </a>
                     <h1 className="text-xl font-bold tracking-tight mt-1">{mailbox.primarySmtpAddress}</h1>
                 </div>
-                {mailbox.ownerUserUid && (
+                <div className="flex gap-3 shrink-0">
+                    {mailbox.ownerUserUid && (
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            loading={impersonating}
+                            disabled={impersonating}
+                            onClick={() => handleAccessMailbox(mailbox.ownerUserUid as string)}
+                        >
+                            Access this mailbox
+                        </Button>
+                    )}
                     <Button
                         type="button"
                         variant="secondary"
-                        className="!w-auto shrink-0"
-                        loading={impersonating}
-                        disabled={impersonating}
-                        onClick={() => handleAccessMailbox(mailbox.ownerUserUid as string)}
+                        className="!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger"
+                        onClick={() => setConfirmingDelete(true)}
                     >
-                        Access this mailbox
+                        Delete mailbox
                     </Button>
-                )}
+                </div>
             </div>
 
             <div className="bg-surface border border-border rounded-md p-6">
@@ -121,6 +156,29 @@ function MailboxDetailContent({ uid, impersonationBaseUrl }: { uid: string } & P
             <ShareAccessCard mailboxUid={mailbox.uid} />
 
             {mailbox.isResource && <ResourceSettingsCard mailbox={mailbox} onUpdate={setMailbox} />}
+
+            <Modal open={confirmingDelete} onClose={closeDeleteModal} title="Delete mailbox">
+                <p className="text-sm mb-5">
+                    Are you sure you want to delete <strong>{mailbox.primarySmtpAddress}</strong>? This permanently
+                    deletes the mailbox and everything in it, and cannot be undone. It fails if this mailbox is a
+                    custodian on an active legal hold.
+                </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>
     );
 }