feat: implement useOverlayDismiss hook for consistent modal dismissal behavior

assets/admin/pages/ClinicsPage.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 { useNavigate } from 'react-router';
 import {
@@ -26,6 +26,7 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
 import ChangeLoginMobileModal from '../components/ChangeLoginMobileModal';
 import { latinDigitsField } from '../lib/forms';
 import TourButton from '../components/ui/TourButton';
+import { useOverlayDismiss } from '../hooks/useOverlayDismiss';
 
 const HUES_LIST = [256, 205, 162, 295, 272];
 
@@ -43,6 +44,8 @@ export default function ClinicsPage() {
   const isRepresentation = primaryRole === 'representation';
   // وضعیت لیست در URL می‌ماند تا «بازگشت» از صفحهٔ جزئیات، همین فیلترها و صفحه را برگرداند.
   const [urlState, setUrlState] = useUrlState({ page: '1', search: '', status: '' });
+  const closeAdd = useCallback(() => setAddOpen(false), []);
+  const addDismiss = useOverlayDismiss(closeAdd);
   const page = pageOf(urlState.page);
   const search = urlState.search;
   const statusFilter = urlState.status;
@@ -264,8 +267,8 @@ export default function ClinicsPage() {
       {/* Add Modal */}
       {addOpen && (
         <Portal>
-        <div className="overlay" onClick={() => setAddOpen(false)}>
-          <div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
+        <div className="overlay" {...addDismiss}>
+          <div className="modal" style={{ maxWidth: 420 }}>
             <div className="modal-head">
               <b>افزودن کلینیک</b>
             </div>