diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 46550f24..5e2813aa 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -3,7 +3,9 @@
 import { useCallback, useMemo, useState } from 'react';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
-import ApprovalSteps from '@/components/pages/ApprovalSteps';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
 import Table from '@/components/Table';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -33,6 +35,7 @@ import { isResponseError } from '@/lib/api-helper';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
+import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
 
 const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
   return (
@@ -104,30 +107,21 @@ const PurchaseOrderDetail = ({
     return purchaseOrderItems.filter((item) => item.received_date);
   }, [purchaseOrderItems]);
 
-  const approvalSteps = useMemo(() => {
-    if (!initialValues?.approval) return [];
-
-    const status =
-      initialValues.approval.action === 'APPROVED'
-        ? 'APPROVED'
-        : initialValues.approval.action === 'REJECTED'
-          ? 'REJECTED'
-          : 'WAITING';
-
-    return [
-      {
-        name: initialValues.approval.step_name,
-        status: status as ApprovalStepStatus,
-        logs: [
-          {
-            action_by: initialValues.approval.action_by?.name,
-            date: initialValues.approval.action_at,
-            notes: initialValues.approval.notes,
-          },
-        ],
-      },
-    ];
-  }, [initialValues?.approval]);
+  const {
+    approvals,
+    isLoading: approvalsLoading,
+    rawDataApprovals,
+    refresh: refreshApprovals,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.approval,
+    approvalLines: PURCHASE_ORDER_APPROVAL_LINE,
+    moduleName: 'PURCHASES',
+    moduleId: initialValues?.id?.toString() ?? '',
+    params: {
+      limit: 100,
+      group_step_number: true,
+    },
+  });
 
   const totalBeforeTax = useMemo(() => {
     return purchaseOrderItems.reduce(
@@ -262,7 +256,7 @@ const PurchaseOrderDetail = ({
       },
     },
     {
-      accessorKey: 'quantity',
+      accessorKey: 'sub_qty',
       header: 'Jumlah',
       cell: (props) => formatNumber(props.getValue() as number),
     },
@@ -370,12 +364,7 @@ const PurchaseOrderDetail = ({
           cell: (props) => props.row.original.vehicle_number || '-',
         },
         {
-          accessorKey: 'pengangkut',
-          header: 'Pengangkut',
-          cell: (props) => props.row.original.product?.name || '-',
-        },
-        {
-          accessorKey: 'quantity',
+          accessorKey: 'total_qty',
           header: 'Jumlah Total',
           cell: (props) => formatNumber(props.getValue() as number),
         },
@@ -384,11 +373,6 @@ const PurchaseOrderDetail = ({
           header: 'Jumlah Diterima',
           cell: (props) => formatNumber(props.getValue() as number),
         },
-        {
-          accessorKey: 'ekspedisi',
-          header: 'Ekspedisi',
-          cell: (props) => 'Ekspedisi 1',
-        },
         {
           accessorKey: 'price',
           header: 'Transport /Item',
@@ -475,13 +459,9 @@ const PurchaseOrderDetail = ({
       </div>
 
       {/* Steps */}
-      {approvalSteps.length > 0 ? (
+      {approvals && !approvalsLoading && (
         <div className='my-8'>
-          <ApprovalSteps approvals={approvalSteps} />
-        </div>
-      ) : (
-        <div className='text-center py-8'>
-          <p className='text-gray-500'>Status approval tidak tersedia</p>
+          <ApprovalSteps approvals={approvals} />
         </div>
       )}
 
@@ -543,17 +523,18 @@ const PurchaseOrderDetail = ({
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Nama Supplier
+                    Nama Vendor
                   </span>
                   <span className='text-gray-900 font-medium ml-3 break-all'>
-                    : {purchaseData.supplier?.name || '-'}
+                    : {purchaseData.supplier?.name || '-'} (
+                    {purchaseData.supplier?.alias || ''})
                   </span>
                 </div>
               </div>
               <div className='group'>
                 <div className='flex items-start'>
                   <span className='font-medium text-gray-600 min-w-[140px] flex-shrink-0'>
-                    Kategori Supplier
+                    Kategori Vendor
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
                     : {purchaseData.supplier?.category || '-'}
diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts
index 80a906e0..f0806bf8 100644
--- a/src/config/approval-line.ts
+++ b/src/config/approval-line.ts
@@ -40,15 +40,15 @@ export const PURCHASE_ORDER_APPROVAL_LINE: ApprovalLine = [
   },
   {
     step_number: 2,
-    step_name: 'Approval Purchasing',
+    step_name: 'Staff Purchase',
   },
   {
     step_number: 3,
-    step_name: 'Approval Manager Purchasing',
+    step_name: 'Manager Purchase',
   },
   {
     step_number: 4,
-    step_name: 'Produk Diterima',
+    step_name: 'Penerimaan Produk',
   },
   {
     step_number: 5,