refactor(FE-316): Add expandable secondary drawer panel

src/components/pages/uniformity/UniformityPageWrapper.tsx

@@ -14,6 +14,7 @@ export default function UniformityPageWrapper({
   const pathname = usePathname();
   const router = useRouter();
   const toggleValidate = useUiStore((s) => s.toggleValidate);
+  const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
 
   const isAdd = pathname.includes('/add');
   const isEdit = pathname.includes('/detail/edit');
@@ -25,6 +26,7 @@ export default function UniformityPageWrapper({
     const unsub = useUiStore.getState().subscribeIsValid((isValid) => {
       if (isValid) {
         router.push('/uniformity');
+        setExpandedDrawerOpen(false);
       }
     });
 
@@ -46,13 +48,16 @@ export default function UniformityPageWrapper({
       <Drawer
         open={isOpen}
         setOpen={(v) => {
-          if (!v) router.push('/uniformity');
+          if (!v) {
+            router.push('/uniformity');
+            setExpandedDrawerOpen(false);
+          }
         }}
         closeOnBackdropClick={isDetail ? true : false}
         onBackdropClick={handleBackdropClick}
         variant='right'
         zIndex='99999'
-        sidebarContent={isOpen && <div className=''>{children}</div>}
+        sidebarContent={isOpen ? <div className=''>{children}</div> : null}
       />
     </>
   );

src/components/pages/uniformity/form/ExpandedDrawerForm.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
+import { useUiStore } from '@/stores/ui/ui.store';
+
+const ExpandedDrawerForm = () => {
+  const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
+
+  const handleClose = () => {
+    setExpandedDrawerOpen(false);
+  };
+
+  return (
+    <section className='w-full h-full bg-white border-l border-gray-200'>
+      {/* Header */}
+      <DrawerHeader
+        leftIcon='mdi:arrow-left'
+        leftIconSize={24}
+        leftIconOnClick={handleClose}
+        leftIconClassName='hover:text-gray-400 cursor-pointer'
+        subtitle='Add Body Weight'
+        subtitleClassName='text-sm text-neutral'
+        showDivider
+      />
+
+      {/* Form Section */}
+      <div className='divider mt-3'></div>
+      <section className='w-full px-6'></section>
+    </section>
+  );
+};
+
+export default ExpandedDrawerForm;

src/components/pages/uniformity/form/UniformityForm.tsx

@@ -3,6 +3,9 @@
 import { useEffect } from 'react';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { useUiStore } from '@/stores/ui/ui.store';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import ExpandedDrawerForm from '@/components/pages/uniformity/form/ExpandedDrawerForm';
 
 interface UniformityFormProps {
   formType?: 'add' | 'edit';
@@ -11,6 +14,8 @@ interface UniformityFormProps {
 const UniformityForm = ({ formType = 'add' }: UniformityFormProps) => {
   const subscribeValidate = useUiStore((s) => s.subscribeValidate);
   const setIsValid = useUiStore((s) => s.setIsValid);
+  const expandedDrawerOpen = useUiStore((s) => s.expandedDrawerOpen);
+  const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
 
   useEffect(() => {
     const unsub = subscribeValidate(() => {
@@ -20,8 +25,13 @@ const UniformityForm = ({ formType = 'add' }: UniformityFormProps) => {
     return unsub;
   }, []);
 
+  const handleOpenExpandedDrawer = () => {
+    setExpandedDrawerOpen(true);
+  };
+
   return (
-    <>
+    <div className='flex h-screen'>
+      {/* Primary Drawer Content */}
       <section className='w-full'>
         {/* Header */}
         <DrawerHeader
@@ -43,10 +53,22 @@ const UniformityForm = ({ formType = 'add' }: UniformityFormProps) => {
             onSubmit={(e) => {
               e.preventDefault();
             }}
-          ></form>
+          >
+            <Button
+              color='primary'
+              onClick={handleOpenExpandedDrawer}
+              className='mt-6 w-full'
+            >
+              <Icon icon='ic:round-plus' width={18} height={18} />
+              Expand Drawer
+            </Button>
+          </form>
         </section>
       </section>
-    </>
+
+      {/* Expanded Drawer - shown when open */}
+      {expandedDrawerOpen && <ExpandedDrawerForm />}
+    </div>
   );
 };