refactor(FE): Refactor row options menu to use popover components

src/components/pages/expense/ExpensesTable.tsx

@@ -16,9 +16,8 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
+import PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
 import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
 import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
@@ -35,16 +34,21 @@ import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 
 const RowOptionsMenu = ({
-  type = 'dropdown',
+  popoverPosition = 'bottom',
   props,
   deleteClickHandler,
 }: {
-  type: 'dropdown' | 'collapse';
+  popoverPosition: 'bottom' | 'top';
   props: CellContext<Expense, unknown>;
-  approveClickHandler: () => void;
-  rejectClickHandler: () => void;
   deleteClickHandler: () => void;
 }) => {
+  const popoverId = `expense#${props.row.original.id}`;
+  const popoverAnchorName = `--anchor-expense#${props.row.original.id}`;
+
+  const closePopover = () => {
+    document.getElementById(popoverId)?.hidePopover();
+  };
+
   const showEditButton = props.row.original.latest_approval
     ? props.row.original.latest_approval.step_number !== 6 &&
       (props.row.original.latest_approval.step_number === 1 ||
@@ -53,81 +57,95 @@ const RowOptionsMenu = ({
         props.row.original.latest_approval.step_number === 4)
     : false;
 
-  // TODO: apply RBAC
   const showRealizationButton = props.row.original.latest_approval
     ? props.row.original.latest_approval.action !== 'REJECTED' &&
       props.row.original.latest_approval.step_number === 4
     : false;
 
   return (
-    <RowOptionsMenuWrapper type={type}>
-      <div className='w-full max-h-40 overflow-auto flex flex-col gap-1'>
-        <RequirePermission permissions='lti.expense.detail'>
-          <Button
-            href={`/expense/detail/?expenseId=${props.row.original.id}`}
-            variant='ghost'
-            color='primary'
-            className='justify-start text-sm'
-          >
-            <Icon icon='mdi:eye-outline' width={16} height={16} />
-            Detail
-          </Button>
-        </RequirePermission>
+    <div className='relative'>
+      <PopoverButton
+        tabIndex={0}
+        variant='ghost'
+        color='none'
+        popoverTarget={popoverId}
+        anchorName={popoverAnchorName}
+      >
+        <Icon icon='material-symbols:more-vert' width={16} height={16} />
+      </PopoverButton>
 
-        {showEditButton && (
-          <RequirePermission permissions='lti.expense.update'>
+      <PopoverContent
+        id={popoverId}
+        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 permissions='lti.expense.detail'>
             <Button
-              href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+              href={`/expense/detail/?expenseId=${props.row.original.id}`}
               variant='ghost'
-              color='warning'
-              className='justify-start text-sm'
+              color='none'
+              className='p-3 justify-start text-sm font-semibold w-full'
+              onClick={closePopover}
             >
-              <Icon
-                icon='material-symbols:edit-outline'
-                width={16}
-                height={16}
-              />
-              Edit
+              <Icon icon='heroicons:eye' width={20} height={20} />
+              Detail
             </Button>
           </RequirePermission>
-        )}
 
-        {showRealizationButton && (
-          <RequirePermission permissions='lti.expense.create.realization'>
+          {showEditButton && (
+            <RequirePermission permissions='lti.expense.update'>
+              <Button
+                href={`/expense/detail/edit/?expenseId=${props.row.original.id}`}
+                variant='ghost'
+                color='none'
+                className='p-3 justify-start text-sm font-semibold w-full'
+                onClick={closePopover}
+              >
+                <Icon icon='mdi:pencil-outline' width={20} height={20} />
+                Edit
+              </Button>
+            </RequirePermission>
+          )}
+
+          {showRealizationButton && (
+            <RequirePermission permissions='lti.expense.create.realization'>
+              <Button
+                href={`/expense/realization/?expenseId=${props.row.original.id}`}
+                variant='ghost'
+                color='none'
+                className='p-3 justify-start text-sm font-semibold w-full'
+                onClick={closePopover}
+              >
+                <Icon
+                  icon='material-symbols:money-bag-rounded'
+                  width={20}
+                  height={20}
+                  className='text-info'
+                />
+                Realisasi
+              </Button>
+            </RequirePermission>
+          )}
+
+          <RequirePermission permissions='lti.expense.delete'>
             <Button
-              href={`/expense/realization/?expenseId=${props.row.original.id}`}
+              onClick={() => {
+                deleteClickHandler();
+                closePopover();
+              }}
               variant='ghost'
-              color='info'
-              className='justify-start text-sm text-info focus-visible:text-info-content hover:text-info-content'
+              color='error'
+              className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
             >
-              <Icon
-                icon='material-symbols:money-bag-rounded'
-                width={16}
-                height={16}
-              />
-              Realisasi
+              <Icon icon='mdi:delete-outline' width={20} height={20} />
+              Delete
             </Button>
           </RequirePermission>
-        )}
-
-        <RequirePermission permissions='lti.expense.delete'>
-          <Button
-            onClick={deleteClickHandler}
-            variant='ghost'
-            color='error'
-            className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
-          >
-            <Icon
-              icon='material-symbols:delete-outline-rounded'
-              width={16}
-              height={16}
-              className='justify-start text-sm'
-            />
-            Delete
-          </Button>
-        </RequirePermission>
-      </div>
-    </RowOptionsMenuWrapper>
+        </div>
+      </PopoverContent>
+    </div>
   );
 };
 
@@ -337,31 +355,7 @@ const ExpensesTable = () => {
         const currentRowRelativeIndex =
           currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
 
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;
-
-        const approveClickHandler = () => {
-          setSelectedExpense(props.row.original);
-
-          // Set row selection
-          setRowSelection({
-            [String(props.row.original.id)]: true,
-          });
-
-          setApprovalNotes('');
-          approveModal.openModal();
-        };
-
-        const rejectClickHandler = () => {
-          setSelectedExpense(props.row.original);
-
-          // Set row selection
-          setRowSelection({
-            [String(props.row.original.id)]: true,
-          });
-
-          setApprovalNotes('');
-          rejectModal.openModal();
-        };
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
         const deleteClickHandler = () => {
           setSelectedExpense(props.row.original);
@@ -369,31 +363,11 @@ const ExpensesTable = () => {
         };
 
         return (
-          <>
-            {currentPageSize > 3 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  approveClickHandler={approveClickHandler}
-                  rejectClickHandler={rejectClickHandler}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 3 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='collapse'
-                  props={props}
-                  approveClickHandler={approveClickHandler}
-                  rejectClickHandler={rejectClickHandler}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
+          <RowOptionsMenu
+            popoverPosition={isLast2Rows ? 'top' : 'bottom'}
+            props={props}
+            deleteClickHandler={deleteClickHandler}
+          />
         );
       },
     },