refactor(admin): move approve/reject/delete dialogs onto shared Modal

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 ───── */}
+      <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 (
-            <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>
@@ -838,15 +846,23 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                     {actionLoading === approveModal ? "…" : t("confirmApprove")}
                   </button>
                 </div>
-              </div>
+              </>
-            </div>
             );
           })()}
+      </Modal>
 
       {/* ───── REJECT MODAL ───── */}
+      <Modal
+        open={!!rejectModal}
+        onClose={() => {
+          setRejectModal(null);
+          setRejectNotes("");
+          setActionError("");
+        }}
+        ariaLabel={t("rejectTitle")}
+      >
         {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">
             <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 ───── */}
+      <Modal
+        open={!!deleteModal}
+        onClose={() => {
+          setDeleteModal(null);
+          setActionError("");
+        }}
+        ariaLabel={t("deleteTitle")}
+      >
         {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">
             <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>
     </>
   );
 }