From 2ba23654ceffa3de871aca6d4deb2007f6b2ff4e Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 3 Nov 2025 09:44:50 +0700
Subject: [PATCH] refactor(FE-Storyless): simplify RowOptionsMenu by using
 RowOptionsMenuWrapper and enhance button layout

---
 .../inventory/movement/MovementTable.tsx      | 45 ++++++++-----------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index 6ed4c49a..8ff39e3d 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -20,6 +20,7 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -27,30 +28,19 @@ const RowOptionsMenu = ({
 }: {
   type: 'dropdown' | 'collapse';
   props: CellContext<Movement, unknown>;
-}) => {
-  return (
-    <div
-      tabIndex={type === 'dropdown' ? 0 : undefined}
-      className={cn(
-        {
-          'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse',
-        },
-        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-      )}
+}) => (
+  <RowOptionsMenuWrapper type={type}>
+    <Button
+      href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
+      variant='ghost'
+      color='primary'
+      className='justify-start text-sm'
     >
-      <Button
-        href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
-        variant='ghost'
-        color='primary'
-        className='justify-start text-sm'
-      >
-        <Icon icon='mdi:eye-outline' width={16} height={16} />
-        Detail
-      </Button>
-    </div>
-  );
-};
+      <Icon icon='mdi:eye-outline' width={16} height={16} />
+      Detail
+    </Button>
+  </RowOptionsMenuWrapper>
+);
 
 const MovementTable = () => {
   const {
@@ -175,7 +165,7 @@ const MovementTable = () => {
 
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
-                <RowOptionsMenu type='dropdown' props={props} />
+                <RowOptionsMenu type='collapse' props={props} />
               </RowCollapseOptions>
             )}
           </>
@@ -188,15 +178,16 @@ const MovementTable = () => {
     <>
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
-          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
-            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='w-full flex flex-row gap-2'>
               <Button
                 href='/inventory/movement/add'
+                variant='outline'
                 color='primary'
                 className='w-full sm:w-fit'
               >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Movement
+                Tambah
               </Button>
             </div>