refactor: use Modal instead of Drawer

src/app/production/project-flock/layout.tsx

@@ -2,9 +2,10 @@
 
 import { usePathname, useRouter } from 'next/navigation';
 import Drawer from '@/components/Drawer';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 import { useUiStore } from '@/stores/ui/ui.store';
+import Modal, { useModal } from '@/components/Modal';
 
 export default function ProjectFlockLayout({
   children,
@@ -23,9 +24,12 @@ export default function ProjectFlockLayout({
 
   const isOpen = isAdd || isEdit || isDetail || isChickin || isClosing;
 
+  const formModal = useModal();
+
   const handleBackdropClick = () => {
     const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
       if (isValid) {
+        formModal.closeModal();
         unsub(); // berhenti listen
         router.push('/production/project-flock');
       }
@@ -34,6 +38,14 @@ export default function ProjectFlockLayout({
     toggleValidate();
   };
 
+  useEffect(() => {
+    if (isOpen && !formModal.open) {
+      formModal.openModal();
+    } else {
+      formModal.closeModal();
+    }
+  }, [isOpen]);
+
   return (
     <>
       {/* List page always rendered */}
@@ -44,7 +56,7 @@ export default function ProjectFlockLayout({
       </div>
 
       {/* Render Drawer only on /add */}
-      <Drawer
+      {/* <Drawer
         open={isOpen}
         setOpen={(v) => {
           if (!v) router.push('/production/project-flock');
@@ -54,7 +66,20 @@ export default function ProjectFlockLayout({
         variant='right'
         zIndex='99999'
         sidebarContent={isOpen && <div className=''>{children}</div>}
-      />
+      /> */}
+
+      <Modal
+        ref={formModal.ref}
+        position='end'
+        onBackdropClick={handleBackdropClick}
+        className={{
+          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+        }}
+      >
+        <div className='w-full min-w-[446px] h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-hidden'>
+          {isOpen && children}
+        </div>
+      </Modal>
     </>
   );
 }