From 800739bd4fa48d5006e8b291c58b899640275bf2 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 26 Dec 2025 22:50:41 +0700
Subject: [PATCH] refactor(FE-316): Add expanded drawer content and dynamic
 width

---
 src/components/Drawer.tsx                      | 15 ++++++++++++---
 .../pages/uniformity/UniformityPageWrapper.tsx |  4 ++++
 .../pages/uniformity/form/UniformityForm.tsx   | 18 ++++++++++++++----
 src/stores/ui/slices/drawer.slice.ts           |  5 +++++
 src/types/stores.d.ts                          |  4 ++++
 5 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index aecb124e..7b5e2374 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -50,12 +50,21 @@ const Drawer = ({
       drawerSidebarContent: 'min-h-full bg-base-100',
     };
 
+    const getSidebarWidth = () => {
+      if (variant === 'sidebar') {
+        return expandedContent
+          ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
+          : 'w-full max-w-[300px] lg:w-[300px]';
+      }
+      return 'w-full sm:min-w-120 sm:w-fit';
+    };
+
     if (variant === 'sidebar') {
       return {
         ...baseClassNames,
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full max-w-[300px] lg:w-[300px]'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'right') {
@@ -68,7 +77,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full sm:min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     } else if (variant === 'left') {
@@ -80,7 +89,7 @@ const Drawer = ({
         ),
         drawerSidebarContent: cn(
           baseClassNames.drawerSidebarContent,
-          'w-full sm:min-w-120 sm:w-fit'
+          getSidebarWidth()
         ),
       };
     }
diff --git a/src/components/pages/uniformity/UniformityPageWrapper.tsx b/src/components/pages/uniformity/UniformityPageWrapper.tsx
index 4e71dc9c..cbdc656b 100644
--- a/src/components/pages/uniformity/UniformityPageWrapper.tsx
+++ b/src/components/pages/uniformity/UniformityPageWrapper.tsx
@@ -15,6 +15,8 @@ export default function UniformityPageWrapper({
   const router = useRouter();
   const toggleValidate = useUiStore((s) => s.toggleValidate);
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
+  const expandedDrawerOpen = useUiStore((s) => s.expandedDrawerOpen);
+  const expandedDrawerContent = useUiStore((s) => s.expandedDrawerContent);
 
   const isAdd = pathname.includes('/add');
   const isEdit = pathname.includes('/detail/edit');
@@ -57,6 +59,8 @@ export default function UniformityPageWrapper({
         variant='right'
         zIndex='99999'
         sidebarContent={isOpen ? <div className=''>{children}</div> : null}
+        expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
+        expandedWidth='w-[500px]'
       />
     </>
   );
diff --git a/src/components/pages/uniformity/form/UniformityForm.tsx b/src/components/pages/uniformity/form/UniformityForm.tsx
index 1918384b..3628cfd6 100644
--- a/src/components/pages/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/uniformity/form/UniformityForm.tsx
@@ -53,6 +53,9 @@ const UniformityForm = ({
   const setIsValid = useUiStore((s) => s.setIsValid);
   const expandedDrawerOpen = useUiStore((s) => s.expandedDrawerOpen);
   const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
+  const setExpandedDrawerContent = useUiStore(
+    (s) => s.setExpandedDrawerContent
+  );
 
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');
@@ -344,16 +347,25 @@ const UniformityForm = ({
     return () => {
       unsub();
       useUiStore.getState().setExpandedDrawerOpen(false);
+      useUiStore.getState().setExpandedDrawerContent(null);
     };
   }, [subscribeValidate, setIsValid]);
 
+  useEffect(() => {
+    if (expandedDrawerOpen) {
+      setExpandedDrawerContent(<ExpandedDrawerForm />);
+    } else {
+      setExpandedDrawerContent(null);
+    }
+  }, [expandedDrawerOpen, setExpandedDrawerContent]);
+
   // ===== EVENT HANDLERS =====
   const handleOpenExpandedDrawer = () => {
     setExpandedDrawerOpen(true);
   };
 
   return (
-    <div className='flex h-screen'>
+    <>
       <section className='w-full'>
         <DrawerHeader
           leftIcon={formType == 'add' ? 'mdi:close' : 'mdi:arrow-left'}
@@ -589,9 +601,7 @@ const UniformityForm = ({
           )}
         </section>
       </section>
-
-      {expandedDrawerOpen && <ExpandedDrawerForm />}
-    </div>
+    </>
   );
 };
 
diff --git a/src/stores/ui/slices/drawer.slice.ts b/src/stores/ui/slices/drawer.slice.ts
index 150eff4d..0e9f30f1 100644
--- a/src/stores/ui/slices/drawer.slice.ts
+++ b/src/stores/ui/slices/drawer.slice.ts
@@ -1,5 +1,6 @@
 import { DrawerUISlice } from '@/types/stores';
 import { StateCreator } from 'zustand';
+import { ReactNode } from 'react';
 
 export const createDrawerUISlice: StateCreator<
   DrawerUISlice,
@@ -44,4 +45,8 @@ export const createDrawerUISlice: StateCreator<
     const current = get().expandedDrawerOpen;
     set({ expandedDrawerOpen: !current });
   },
+
+  expandedDrawerContent: null as ReactNode | null,
+  setExpandedDrawerContent: (content: ReactNode) =>
+    set({ expandedDrawerContent: content }),
 });
diff --git a/src/types/stores.d.ts b/src/types/stores.d.ts
index 0521b40e..e082440b 100644
--- a/src/types/stores.d.ts
+++ b/src/types/stores.d.ts
@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 type MainUiSlice = {
   mainDrawerOpen: boolean;
   setMainDrawerOpen: (open: boolean) => void;
@@ -13,6 +15,8 @@ type DrawerUISlice = {
   expandedDrawerOpen: boolean;
   setExpandedDrawerOpen: (open: boolean) => void;
   toggleExpandedDrawer: () => void;
+  expandedDrawerContent: ReactNode | null;
+  setExpandedDrawerContent: (content: ReactNode) => void;
 };
 
 export type UIStore = MainUiSlice & DrawerUISlice;