refactor(FE): refactor UI detail from page into drawer

src/app/production/project-flock/detail/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
+import ProjectFlockDetail from '@/components/pages/production/project-flock/detail/ProjectFlockDetail';
 import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
-const ProjectFlockDetail = () => {
+const ProjectFlockDetailPage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -37,19 +38,17 @@ const ProjectFlockDetail = () => {
   }
 
   return (
-    <div className='w-full p-4 flex flex-col justify-center'>
+    <div className='w-full h-full flex flex-col justify-center'>
       {isLoadingProjectFlock && (
         <span className='loading loading-spinner loading-xl' />
       )}
       {isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm
-          formType='detail'
-          initialValues={projectFlock.data}
-          refreshProjectFlocks={refreshProjectFlock}
-        />
+        <ProjectFlockDetail projectFlock={projectFlock.data} />
       )}
     </div>
   );
 };
 
-export default ProjectFlockDetail;
+export default ProjectFlockDetailPage;
+ProjectFlockDetail;
+ProjectFlockDetail;

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

@@ -51,7 +51,7 @@ export default function ProjectFlockLayout({
         closeOnBackdropClick={isDetail ? true : false}
         onBackdropClick={handleBackdropClick}
         variant='right'
-        sidebarContent={isOpen && <div className='p-4'>{children}</div>}
+        sidebarContent={isOpen && <div className=''>{children}</div>}
       />
     </>
   );