feat: implement useOverlayDismiss hook for consistent modal dismissal behavior

assets/admin/pages/PreRegistrationsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { CheckIcon, XMarkIcon, PhoneIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
@@ -9,6 +9,7 @@ import { formatDate } from '../lib/utils';
 import PageHeader from '../components/ui/PageHeader';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
+import { useOverlayDismiss } from '../hooks/useOverlayDismiss';
 
 interface PreRegistration {
   uuid: string;
@@ -49,6 +50,8 @@ export default function PreRegistrationsPage() {
   const [approveTarget, setApproveTarget] = useState<PreRegistration | null>(null);
   const [rejectTarget, setRejectTarget]   = useState<PreRegistration | null>(null);
   const [rejectNote, setRejectNote]       = useState('');
+  const closeReject = useCallback(() => setRejectTarget(null), []);
+  const rejectDismiss = useOverlayDismiss(closeReject);
   const limit = 20;
 
   const { data, isLoading } = useQuery<PaginatedResponse<PreRegistration>>({
@@ -206,8 +209,8 @@ export default function PreRegistrationsPage() {
       {/* Reject Dialog */}
       {rejectTarget && (
         <Portal>
-        <div className="overlay" onClick={() => setRejectTarget(null)}>
-          <div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
+        <div className="overlay" {...rejectDismiss}>
+          <div className="modal" style={{ maxWidth: 420 }}>
             <div className="modal-head">
               <b>رد درخواست — {rejectTarget.name}</b>
             </div>