chore(FE-196): use useApprovalSteps hook

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -14,6 +14,7 @@ import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 import DropFileInput from '@/components/input/DropFileInput';
 import ApprovalSteps, {
   formatGroupedApprovalsToApprovalSteps,
+  useApprovalSteps,
 } from '@/components/pages/ApprovalSteps';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -40,10 +41,17 @@ const ExpenseRequestContent = ({
 }: ExpenseRequestContentProps) => {
   const router = useRouter();
 
-  const { data: approvalHistory, isLoading: isLoadingApprovalHistory } = useSWR(
+  const { approvals: approvalHistory, isLoading: isLoadingApprovalHistory } =
-    initialValues ? [String(initialValues.id)] : null,
+    useApprovalSteps({
-    ([id]: string[]) => ExpenseApi.getApprovalHistory(Number(id))
+      latestApproval: initialValues?.latest_approval,
-  );
+      approvalLines: EXPENSE_REQUEST_APPROVAL_LINE,
+      moduleName: 'EXPENSES',
+      moduleId: initialValues?.id.toString() ?? '',
+      params: {
+        page: 1,
+        limit: 100,
+      },
+    });
 
   const isLatestApprovalRejected =
     initialValues?.latest_approval.action === 'REJECTED';
@@ -236,19 +244,11 @@ const ExpenseRequestContent = ({
   return (
     <>
       <div>
-        {initialValues &&
+        {initialValues && !isLoadingApprovalHistory && approvalHistory && (
-          !isLoadingApprovalHistory &&
+          <div className='w-full max-w-5xl my-4 mx-auto'>
-          isResponseSuccess(approvalHistory) && (
+            <ApprovalSteps approvals={approvalHistory} />
-            <div className='w-full max-w-5xl my-4 mx-auto'>
+          </div>
-              <ApprovalSteps
+        )}
-                approvals={formatGroupedApprovalsToApprovalSteps(
-                  EXPENSE_REQUEST_APPROVAL_LINE,
-                  approvalHistory.data,
-                  initialValues.latest_approval
-                )}
-              />
-            </div>
-          )}
 
         <div className='w-full mt-4 flex flex-col gap-4'>
           {/* TODO: apply RBAC */}