From 5e3d2273d13de7b8d3200d8a34be24df3f52eb8d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 27 Feb 2026 11:25:37 +0700
Subject: [PATCH] refactor(FE): Refactor RowOptionsMenu to use PopoverButton
 and PopoverContent

---
 src/components/pages/finance/FinanceTable.tsx | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/finance/FinanceTable.tsx b/src/components/pages/finance/FinanceTable.tsx
index 988928e3..8ef90c3d 100644
--- a/src/components/pages/finance/FinanceTable.tsx
+++ b/src/components/pages/finance/FinanceTable.tsx
@@ -34,6 +34,8 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
 import { Bank } from '@/types/api/master-data/bank';
 import Modal, { useModal } from '@/components/Modal';
+import PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -64,27 +66,21 @@ const RowOptionsMenu = ({
 
   return (
     <div className='relative'>
-      <Button
+      <PopoverButton
         tabIndex={0}
         variant='ghost'
         color='none'
-        className='p-2'
         popoverTarget={popoverId}
-        style={{ anchorName: popoverAnchorName } as React.CSSProperties}
+        anchorName={popoverAnchorName}
       >
-        <Icon icon='material-symbols:more-vert' width={20} height={20} />
-      </Button>
+        <Icon icon='material-symbols:more-vert' width={16} height={16} />
+      </PopoverButton>
 
-      <div
+      <PopoverContent
         id={popoverId}
-        popover='auto'
-        style={{ positionAnchor: popoverAnchorName } as React.CSSProperties}
-        className={cn(
-          'fixed inset-auto bg-base-100 rounded-xl border border-base-content/5 shadow-sm w-full max-w-40 z-[100]',
-          popoverPosition === 'bottom'
-            ? 'top-[anchor(bottom)] left-[anchor(left)] mt-1'
-            : 'bottom-[anchor(top)] left-[anchor(left)] mb-1'
-        )}
+        anchorName={popoverAnchorName}
+        position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
+        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
       >
         <div className='flex flex-col bg-base-100 rounded-xl'>
           <RequirePermission
@@ -173,7 +169,7 @@ const RowOptionsMenu = ({
             </Button>
           </RequirePermission>
         </div>
-      </div>
+      </PopoverContent>
     </div>
   );
 };