require confirmation before approving tenant requests

2026-05-29 23:20:51 +02:00
parent 7fac3c3aa8
commit 322cfae824
5 changed files with 118 additions and 21 deletions
--- a/src/components/admin/admin-panel.tsx
+++ b/src/components/admin/admin-panel.tsx
@@ -35,6 +35,11 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  const [rejectModal, setRejectModal] = useState<string | null>(null);
  const [rejectNotes, setRejectNotes] = useState("");
+  // Approve is the highest-consequence request action — it provisions
+  // real infrastructure and triggers the billable setup fee — so it now
+  // goes through a confirmation modal like reject/delete, instead of
+  // firing on a single click.
+  const [approveModal, setApproveModal] = useState<string | null>(null);

  // Tenants state
  const [tenants, setTenants] = useState<PiecedTenant[]>(initialTenants);
@@ -47,6 +52,11 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {

  // Shared
  const [error, setError] = useState("");
+  // Action-scoped error — shown inside the active confirmation modal so
+  // a failed approve/reject/delete surfaces next to the action that
+  // caused it (and keeps the modal open), rather than as a detached
+  // panel-level banner that isn't tied to any row.
+  const [actionError, setActionError] = useState("");

  // ─── Requests fetching ───
  const fetchRequests = useCallback(async () => {
@@ -125,18 +135,21 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
  // ─── Request actions ───
  const handleApprove = async (id: string) => {
    setActionLoading(id);
-    setError("");
+    setActionError("");
    try {
      const res = await fetch(`/api/admin/requests/${id}/approve`, {
        method: "POST",
      });
      if (!res.ok) {
-        const data = await res.json();
+        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "Approve failed");
      }
+      setApproveModal(null);
      await fetchRequests();
    } catch (e: any) {
-      setError(e.message);
+      // Keep the modal open so the admin sees why provisioning didn't
+      // start; the error renders inside the dialog next to the action.
+      setActionError(e.message);
    } finally {
      setActionLoading(null);
    }
@@ -144,7 +157,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {

  const handleReject = async (id: string) => {
    setActionLoading(id);
-    setError("");
+    setActionError("");
    try {
      const res = await fetch(`/api/admin/requests/${id}/reject`, {
        method: "POST",
@@ -152,14 +165,14 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
        body: JSON.stringify({ adminNotes: rejectNotes || undefined }),
      });
      if (!res.ok) {
-        const data = await res.json();
+        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "Reject failed");
      }
      setRejectModal(null);
      setRejectNotes("");
      await fetchRequests();
    } catch (e: any) {
-      setError(e.message);
+      setActionError(e.message);
    } finally {
      setActionLoading(null);
    }
@@ -189,7 +202,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {

  const handleDelete = async (name: string) => {
    setActionLoading(name);
-    setError("");
+    setActionError("");
    try {
      const res = await fetch(`/api/admin/tenants/${name}/delete`, {
        method: "POST",
@@ -216,7 +229,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
      fetchTenants();
      setTimeout(() => fetchTenants(), 1500);
    } catch (e: any) {
-      setError(e.message);
+      setActionError(e.message);
    } finally {
      setActionLoading(null);
    }
@@ -436,16 +449,20 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                            {req.status === "pending" && (
                              <>
                                <button
-                                  onClick={() => handleApprove(req.id)}
+                                  onClick={() => {
+                                    setActionError("");
+                                    setApproveModal(req.id);
+                                  }}
                                  disabled={actionLoading === req.id}
                                  className="px-2.5 py-1 text-xs font-medium bg-emerald-500/15 text-emerald-400 rounded-md hover:bg-emerald-500/25 transition-colors disabled:opacity-50"
                                >
-                                  {actionLoading === req.id
-                                    ? "…"
-                                    : t("approve")}
+                                  {t("approve")}
                                </button>
                                <button
-                                  onClick={() => setRejectModal(req.id)}
+                                  onClick={() => {
+                                    setActionError("");
+                                    setRejectModal(req.id);
+                                  }}
                                  disabled={actionLoading === req.id}
                                  className="px-2.5 py-1 text-xs font-medium bg-red-500/15 text-red-400 rounded-md hover:bg-red-500/25 transition-colors disabled:opacity-50"
                                >
@@ -466,7 +483,10 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                              )}
                            {req.status === "rejected" && (
                              <button
-                                onClick={() => handleApprove(req.id)}
+                                onClick={() => {
+                                  setActionError("");
+                                  setApproveModal(req.id);
+                                }}
                                disabled={actionLoading === req.id}
                                className="px-2.5 py-1 text-xs font-medium bg-amber-500/15 text-amber-400 rounded-md hover:bg-amber-500/25 transition-colors disabled:opacity-50"
                              >
@@ -642,9 +662,10 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                                    : t("suspend")}
                              </button>
                              <button
-                                onClick={() =>
-                                  setDeleteModal(tenant.metadata.name)
-                                }
+                                onClick={() => {
+                                  setActionError("");
+                                  setDeleteModal(tenant.metadata.name);
+                                }}
                                disabled={actionLoading === tenant.metadata.name}
                                className="px-2.5 py-1 text-xs font-medium bg-red-500/15 text-red-400 rounded-md hover:bg-red-500/25 transition-colors disabled:opacity-50"
                              >
@@ -772,6 +793,56 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
        </>
      )}

+      {/* ───── APPROVE MODAL ───── */}
+      {approveModal &&
+        (() => {
+          const req = requests.find((r) => r.id === approveModal);
+          const isReapprove = req?.status === "rejected";
+          return (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+              <div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
+                <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
+                  {t("approveTitle")}
+                </h3>
+                <p className="text-sm text-text-secondary mb-2">
+                  {isReapprove
+                    ? t("approveReapproveWarning")
+                    : t("approveWarning")}
+                </p>
+                {req && (
+                  <p className="text-xs font-mono text-accent bg-surface-2 border border-border rounded-lg px-3 py-2 mb-4">
+                    {req.companyName}
+                    {req.agentName ? ` · ${req.agentName}` : ""}
+                  </p>
+                )}
+                {actionError && (
+                  <p className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-4">
+                    {actionError}
+                  </p>
+                )}
+                <div className="flex gap-2 justify-end">
+                  <button
+                    onClick={() => {
+                      setApproveModal(null);
+                      setActionError("");
+                    }}
+                    className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
+                  >
+                    {t("cancelAction")}
+                  </button>
+                  <button
+                    onClick={() => handleApprove(approveModal)}
+                    disabled={actionLoading === approveModal}
+                    className="px-4 py-2 text-sm font-medium bg-emerald-500/15 text-emerald-400 rounded-lg hover:bg-emerald-500/25 transition-colors disabled:opacity-50"
+                  >
+                    {actionLoading === approveModal ? "…" : t("confirmApprove")}
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })()}
+
      {/* ───── REJECT MODAL ───── */}
      {rejectModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
@@ -789,6 +860,11 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
              rows={3}
              className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors resize-none mb-4"
            />
+            {actionError && (
+              <p className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-4">
+                {actionError}
+              </p>
+            )}
            <div className="flex gap-2 justify-end">
              <button
                onClick={() => {
@@ -824,6 +900,11 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
            <p className="text-xs font-mono text-accent bg-surface-2 border border-border rounded-lg px-3 py-2 mb-4">
              {deleteModal}
            </p>
+            {actionError && (
+              <p className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mb-4">
+                {actionError}
+              </p>
+            )}
            <div className="flex gap-2 justify-end">
              <button
                onClick={() => setDeleteModal(null)}
--- a/src/messages/de.json
+++ b/src/messages/de.json
@@ -421,7 +421,11 @@
    "openclawTool": "OpenClaw-Versionen",
    "billingTool": "Abrechnung →",
    "skillsQueueTool": "Aktivierungs-Warteschlange",
-    "cronTool": "Automatisierung"
+    "cronTool": "Automatisierung",
+    "approveTitle": "Anfrage genehmigen?",
+    "approveWarning": "Dadurch wird die Infrastruktur des Mandanten bereitgestellt, die Einrichtungsgebühr berechnet und der Kunde benachrichtigt. Bitte prüfen Sie die Angaben, bevor Sie fortfahren.",
+    "approveReapproveWarning": "Dies genehmigt eine zuvor abgelehnte Anfrage erneut: Die Infrastruktur des Mandanten wird bereitgestellt, die Einrichtungsgebühr berechnet und der Kunde benachrichtigt.",
+    "confirmApprove": "Genehmigen & bereitstellen"
  },
  "channelUsers": {
    "title": "Autorisierte Benutzer",
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -421,7 +421,11 @@
    "openclawTool": "OpenClaw versions",
    "billingTool": "Billing →",
    "skillsQueueTool": "Activation Queue",
-    "cronTool": "Automation"
+    "cronTool": "Automation",
+    "approveTitle": "Approve request?",
+    "approveWarning": "This provisions the tenant's infrastructure, charges the setup fee, and notifies the customer. Check the request details are correct before continuing.",
+    "approveReapproveWarning": "This re-approves a previously rejected request: it provisions the tenant's infrastructure, charges the setup fee, and notifies the customer.",
+    "confirmApprove": "Approve & provision"
  },
  "channelUsers": {
    "title": "Authorized Users",
--- a/src/messages/fr.json
+++ b/src/messages/fr.json
@@ -421,7 +421,11 @@
    "openclawTool": "Versions OpenClaw",
    "billingTool": "Facturation →",
    "skillsQueueTool": "File d'activation",
-    "cronTool": "Automatisation"
+    "cronTool": "Automatisation",
+    "approveTitle": "Approuver la demande ?",
+    "approveWarning": "Cela provisionne l'infrastructure du locataire, facture les frais d'installation et notifie le client. Vérifiez l'exactitude des détails de la demande avant de continuer.",
+    "approveReapproveWarning": "Ceci réapprouve une demande précédemment rejetée : l'infrastructure du locataire est provisionnée, les frais d'installation sont facturés et le client est notifié.",
+    "confirmApprove": "Approuver et provisionner"
  },
  "channelUsers": {
    "title": "Utilisateurs autorisés",
--- a/src/messages/it.json
+++ b/src/messages/it.json
@@ -421,7 +421,11 @@
    "openclawTool": "Versioni OpenClaw",
    "billingTool": "Fatturazione →",
    "skillsQueueTool": "Coda di attivazione",
-    "cronTool": "Automazione"
+    "cronTool": "Automazione",
+    "approveTitle": "Approvare la richiesta?",
+    "approveWarning": "Questa operazione effettua il provisioning dell'infrastruttura del tenant, addebita il costo di attivazione e notifica il cliente. Verifica che i dettagli della richiesta siano corretti prima di continuare.",
+    "approveReapproveWarning": "Questo riapprova una richiesta precedentemente rifiutata: effettua il provisioning dell'infrastruttura del tenant, addebita il costo di attivazione e notifica il cliente.",
+    "confirmApprove": "Approva e avvia provisioning"
  },
  "channelUsers": {
    "title": "Utenti autorizzati",