feat: implement paid off expense feature

src/components/pages/expense/ExpensesTable.tsx

@@ -36,6 +36,7 @@ import ButtonFilter from '@/components/helper/ButtonFilter';
 import ExpensesFilterModal from '@/components/pages/expense/filter/ExpensesFilterModal';
 import ExpenseTableSkeleton from '@/components/pages/expense/skeleton/ExpenseTableSkeleton';
 import Dropdown from '@/components/dropdown/Dropdown';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 import { Expense } from '@/types/api/expense';
 import { ExpenseApi } from '@/services/api/expense';
@@ -87,10 +88,12 @@ const RowOptionsMenu = ({
   popoverPosition = 'bottom',
   props,
   deleteClickHandler,
+  paidOffClickHandler,
 }: {
   popoverPosition: 'bottom' | 'top';
   props: CellContext<Expense, unknown>;
   deleteClickHandler: () => void;
+  paidOffClickHandler: () => void;
 }) => {
   const popoverId = `expense#${props.row.original.id}`;
   const popoverAnchorName = `--anchor-expense#${props.row.original.id}`;
@@ -112,6 +115,11 @@ const RowOptionsMenu = ({
       props.row.original.latest_approval.step_number === 4
     : false;
 
+  const showPaidOffButton = props.row.original.latest_approval
+    ? props.row.original.latest_approval.step_number > 4 &&
+      !props.row.original.is_paid
+    : false;
+
   return (
     <div className='relative'>
       <PopoverButton
@@ -179,6 +187,28 @@ const RowOptionsMenu = ({
             </RequirePermission>
           )}
 
+          {showPaidOffButton && (
+            <RequirePermission permissions='lti.expense.create.realization'>
+              <Button
+                onClick={() => {
+                  paidOffClickHandler();
+                  closePopover();
+                }}
+                variant='ghost'
+                color='none'
+                className='p-3 justify-start text-sm font-semibold w-full'
+              >
+                <Icon
+                  icon='material-symbols:check-circle-outline'
+                  width={20}
+                  height={20}
+                  className='text-success'
+                />
+                Tandai Lunas
+              </Button>
+            </RequirePermission>
+          )}
+
           <RequirePermission permissions='lti.expense.delete'>
             <Button
               onClick={() => {
@@ -264,6 +294,7 @@ const ExpensesTable = () => {
   const deleteModal = useModal();
   const approveModal = useModal();
   const rejectModal = useModal();
+  const paidOffModal = useModal();
   const bulkApproveFormModal = useModal();
   const exportProgressInputModal = useModal();
 
@@ -276,6 +307,7 @@ const ExpensesTable = () => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
+  const [isPaidOffLoading, setIsPaidOffLoading] = useState(false);
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
     useState(false);
   const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
@@ -432,6 +464,20 @@ const ExpensesTable = () => {
         <ExpenseStatusBadge approval={props.row.original.latest_approval} />
       ),
     },
+    {
+      header: 'Status Lunas',
+      cell: (props) => {
+        return (
+          <StatusBadge
+            color={props.row.original.is_paid ? 'primary' : 'warning'}
+            text={props.row.original.is_paid ? 'Lunas' : 'Belum Lunas'}
+            className={{
+              badge: 'w-fit whitespace-nowrap',
+            }}
+          />
+        );
+      },
+    },
     {
       header: 'Aksi',
       cell: (props) => {
@@ -447,11 +493,17 @@ const ExpensesTable = () => {
           deleteModal.openModal();
         };
 
+        const paidOffClickHandler = () => {
+          setSelectedExpense(props.row.original);
+          paidOffModal.openModal();
+        };
+
         return (
           <RowOptionsMenu
             popoverPosition={isLast2Rows ? 'top' : 'bottom'}
             props={props}
             deleteClickHandler={deleteClickHandler}
+            paidOffClickHandler={paidOffClickHandler}
           />
         );
       },
@@ -593,6 +645,29 @@ const ExpensesTable = () => {
     setIsDeleteLoading(false);
   };
 
+  const confirmationModalPaidOffClickHandler = async () => {
+    setIsPaidOffLoading(true);
+
+    const paidOffResponse = await ExpenseApi.setExpensePaidOff(
+      selectedExpense?.id as number
+    );
+
+    if (isResponseSuccess(paidOffResponse)) {
+      refreshExpenses();
+      paidOffModal.closeModal();
+      toast.success('Berhasil menandai biaya operasional sebagai lunas!');
+      refreshExpenses();
+    } else {
+      paidOffModal.closeModal();
+      toast.error(
+        'Gagal menandai biaya operasional sebagai lunas!: ' +
+          paidOffResponse?.message
+      );
+    }
+
+    setIsPaidOffLoading(false);
+  };
+
   const confirmationModalApproveClickHandler = async (notes: string) => {
     setIsApproveLoading(true);
 
@@ -1105,6 +1180,21 @@ const ExpensesTable = () => {
         }}
       />
 
+      <ConfirmationModal
+        ref={paidOffModal.ref}
+        type='success'
+        text='Apakah anda yakin ingin menandai biaya operasional ini sebagai lunas?'
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isPaidOffLoading,
+          onClick: confirmationModalPaidOffClickHandler,
+        }}
+      />
+
       <ConfirmationModalWithNotes
         ref={approveModal.ref}
         type='success'