fix: use RowOptionsMenuWrapper component for RowOptionsMenu

src/components/pages/master-data/location/LocationsTable.tsx

@@ -19,6 +19,7 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 
 import { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
@@ -37,16 +38,7 @@ const RowOptionsMenu = ({
   deleteClickHandler: () => void;
 }) => {
   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={`/master-data/location/detail/?locationId=${props.row.original.id}`}
         variant='ghost'
@@ -71,7 +63,7 @@ const RowOptionsMenu = ({
         onClick={deleteClickHandler}
         variant='ghost'
         color='error'
-        className='text-error hover:text-inherit'
+        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
       >
         <Icon
           icon='material-symbols:delete-outline-rounded'
@@ -81,7 +73,7 @@ const RowOptionsMenu = ({
         />
         Delete
       </Button>
-    </div>
+    </RowOptionsMenuWrapper>
   );
 };
 
@@ -172,7 +164,7 @@ const LocationsTable = () => {
             {currentPageSize <= 2 && (
               <RowCollapseOptions>
                 <RowOptionsMenu
-                  type='dropdown'
+                  type='collapse'
                   props={props}
                   deleteClickHandler={deleteClickHandler}
                 />
@@ -237,10 +229,15 @@ const LocationsTable = () => {
       <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 sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/master-data/location/add' color='primary'>
+            <div className='w-full flex flex-row'>
+              <Button
+                href='/master-data/location/add'
+                variant='outline'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah Location
+                Tambah
               </Button>
             </div>