From 74d276b6565c757ea966524b00ba8711c26b9fcd Mon Sep 17 00:00:00 2001
From: admin <admin@c5ai.ch>
Date: Fri, 29 May 2026 23:37:32 +0200
Subject: [PATCH] refactor(admin): move approve/reject/delete dialogs onto
 shared Modal

---
 src/components/admin/admin-panel.tsx | 75 +++++++++++++++++++---------
 1 file changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/components/admin/admin-panel.tsx b/src/components/admin/admin-panel.tsx
index 323f8e6..01a3f60 100644
--- a/src/components/admin/admin-panel.tsx
+++ b/src/components/admin/admin-panel.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import type { PiecedTenant, TenantRequest } from "@/types";
 import { StatusBadge } from "@/components/ui/status-badge";
+import { Modal } from "@/components/ui/modal";
 import { formatDateTime, formatRelative } from "@/lib/format";
 import Link from "next/link";
 
@@ -794,13 +795,20 @@ 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">
+      <Modal
+        open={!!approveModal}
+        onClose={() => {
+          setApproveModal(null);
+          setActionError("");
+        }}
+        ariaLabel={t("approveTitle")}
+      >
+        {approveModal &&
+          (() => {
+            const req = requests.find((r) => r.id === approveModal);
+            const isReapprove = req?.status === "rejected";
+            return (
+              <>
                 <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
                   {t("approveTitle")}
                 </h3>
@@ -838,15 +846,23 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                     {actionLoading === approveModal ? "…" : t("confirmApprove")}
                   </button>
                 </div>
-              </div>
-            </div>
-          );
-        })()}
+              </>
+            );
+          })()}
+      </Modal>
 
       {/* ───── REJECT MODAL ───── */}
-      {rejectModal && (
-        <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">
+      <Modal
+        open={!!rejectModal}
+        onClose={() => {
+          setRejectModal(null);
+          setRejectNotes("");
+          setActionError("");
+        }}
+        ariaLabel={t("rejectTitle")}
+      >
+        {rejectModal && (
+          <>
             <h3 className="font-display text-lg font-semibold text-text-primary mb-4">
               {t("rejectTitle")}
             </h3>
@@ -870,6 +886,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                 onClick={() => {
                   setRejectModal(null);
                   setRejectNotes("");
+                  setActionError("");
                 }}
                 className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
               >
@@ -883,14 +900,21 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                 {actionLoading === rejectModal ? "…" : t("confirmReject")}
               </button>
             </div>
-          </div>
-        </div>
-      )}
+          </>
+        )}
+      </Modal>
 
       {/* ───── DELETE MODAL ───── */}
-      {deleteModal && (
-        <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">
+      <Modal
+        open={!!deleteModal}
+        onClose={() => {
+          setDeleteModal(null);
+          setActionError("");
+        }}
+        ariaLabel={t("deleteTitle")}
+      >
+        {deleteModal && (
+          <>
             <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
               {t("deleteTitle")}
             </h3>
@@ -907,7 +931,10 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
             )}
             <div className="flex gap-2 justify-end">
               <button
-                onClick={() => setDeleteModal(null)}
+                onClick={() => {
+                  setDeleteModal(null);
+                  setActionError("");
+                }}
                 className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
               >
                 {t("cancelAction")}
@@ -920,9 +947,9 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                 {actionLoading === deleteModal ? "…" : t("confirmDelete")}
               </button>
             </div>
-          </div>
-        </div>
-      )}
+          </>
+        )}
+      </Modal>
     </>
   );
 }