feat: implement useOverlayDismiss hook for consistent modal dismissal behavior

assets/admin/components/ui/ConfirmDialog.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Portal from './Portal';
+import { useOverlayDismiss } from '../../hooks/useOverlayDismiss';
 
 interface Props {
   open: boolean;
@@ -28,12 +29,14 @@ export default function ConfirmDialog({
   onCancel,
   children,
 }: Props) {
+  const dismiss = useOverlayDismiss(onCancel, open);
+
   if (!open) return null;
 
   return (
     <Portal>
-    <div className="overlay" onClick={onCancel}>
-      <div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
+    <div className="overlay" {...dismiss}>
+      <div className="modal" style={{ maxWidth: 420 }}>
         <div className="modal-head">
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
             <span style={{