Update genetic front

src/Managing.WebApp/src/components/mollecules/Modal/Modal.tsx

@@ -10,27 +10,42 @@ const Modal: React.FC<IModalProps> = ({
   onClose,
   titleHeader,
   children,
+  size = '4xl',
 }) => {
+  const getSizeClass = (size: string) => {
+    switch (size) {
+      case 'sm':
+        return '!max-w-sm'
+      case 'md':
+        return '!max-w-md'
+      case 'lg':
+        return '!max-w-lg'
+      case 'xl':
+        return '!max-w-xl'
+      case '2xl':
+        return '!max-w-2xl'
+      case '3xl':
+        return '!max-w-3xl'
+      case '4xl':
+        return '!max-w-4xl'
+      case '5xl':
+        return '!max-w-5xl'
+      case '6xl':
+        return '!max-w-6xl'
+      case '7xl':
+        return '!max-w-7xl'
+      default:
+        return '!max-w-4xl'
+    }
+  }
+  if (!showModal) return null
+
   return (
-    <div className="container mx-auto">
-      {showModal ? (
-        onSubmit ? (
-          <form onSubmit={onSubmit}>
-            <div className="modal modal-bottom sm:modal-middle modal-open">
-              <div className="modal-box !max-w-4xl !w-11/12">
-                <ModalHeader
-                  titleHeader={titleHeader}
-                  onClose={onClose}
-                  onSubmit={onSubmit}
-                  showModal={showModal}
-                />
-                {children}
-              </div>
-            </div>
-          </form>
-        ) : (
-          <div className="modal modal-bottom sm:modal-middle modal-open">
-            <div className="modal-box !max-w-4xl !w-11/12">
+    <>
+      {onSubmit ? (
+        <form onSubmit={onSubmit}>
+          <div className="modal modal-open">
+            <div className={`modal-box ${getSizeClass(size)} w-11/12`}>
               <ModalHeader
                 titleHeader={titleHeader}
                 onClose={onClose}
@@ -40,9 +55,21 @@ const Modal: React.FC<IModalProps> = ({
               {children}
             </div>
           </div>
-        )
-      ) : null}
-    </div>
+        </form>
+      ) : (
+        <div className="modal modal-open">
+          <div className={`modal-box ${getSizeClass(size)} w-11/12`}>
+            <ModalHeader
+              titleHeader={titleHeader}
+              onClose={onClose}
+              onSubmit={onSubmit}
+              showModal={showModal}
+            />
+            {children}
+          </div>
+        </div>
+      )}
+    </>
   )
 }
 

src/Managing.WebApp/src/global/type.tsx

@@ -147,6 +147,7 @@ export type IModalProps = {
   children?: React.ReactNode
   toggleModal?: React.MouseEventHandler<HTMLButtonElement>
   moneyManagement?: MoneyManagement
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
 }
 
 export type  IMoneyManagementModalProps = {