Refactor code structure for improved readability and maintainability

assets/admin/components/ui/Modal.tsx

@@ -4,10 +4,10 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 const sizeMap: Record<ModalSize, string> = {
-  sm: 'max-w-sm',
-  md: 'max-w-lg',
-  lg: 'max-w-2xl',
-  xl: 'max-w-4xl',
+  sm: '420px',
+  md: '540px',
+  lg: '720px',
+  xl: '960px',
 };
 
 interface Props {
@@ -30,43 +30,20 @@ export default function Modal({ open, title, size = 'md', onClose, children, foo
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
-      {/* Backdrop */}
+    <div className="overlay" onClick={onClose}>
       <div
-        className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm"
-        onClick={onClose}
-      />
-
-      {/* Panel */}
-      <div
-        className={`
-          relative bg-white dark:bg-gray-900
-          rounded-2xl shadow-2xl dark:shadow-black/40
-          border border-slate-200/60 dark:border-gray-700/50
-          w-full ${sizeMap[size]} flex flex-col max-h-[90vh]
-          animate-scale-in
-        `}
+        className="modal"
+        style={{ maxWidth: sizeMap[size] }}
+        onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-gray-700/50 shrink-0">
-          <h2 className="font-semibold text-slate-900 dark:text-slate-100 text-base">{title}</h2>
-          <button
-            onClick={onClose}
-            className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
-          >
-            <XMarkIcon className="w-5 h-5" />
+        <div className="modal-head">
+          <h2>{title}</h2>
+          <button className="mini-btn" onClick={onClose}>
+            <XMarkIcon style={{ width: 18, height: 18 }} />
           </button>
         </div>
-
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
-
-        {/* Footer */}
-        {footer && (
-          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 dark:border-gray-700/50 shrink-0 bg-slate-50/50 dark:bg-gray-800/30 rounded-b-2xl">
-            {footer}
-          </div>
-        )}
+        <div className="modal-body">{children}</div>
+        {footer && <div className="modal-foot">{footer}</div>}
       </div>
     </div>
   );