diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
new file mode 100644
index 00000000..dc9a3355
--- /dev/null
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import ApprovalSteps, {
+  formatGroupedApprovalsToApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+
+import { BaseGroupedApproval } from '@/types/api/api-general';
+import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
+
+interface PurchaseOrderDetailProps {
+  type?: 'detail' | 'edit' | 'approval-purchasing' | 'approval-manager';
+}
+
+const dummyGroupedApprovals: BaseGroupedApproval[] = [
+  {
+    step_number: 1,
+    step_name: 'Pengajuan',
+    approvals: [
+      {
+        step_number: 1,
+        step_name: 'Pengajuan',
+        action: 'submit',
+        notes: 'Pengajuan purchase order dibuat',
+        action_by: {
+          id: 1,
+          id_user: 1,
+          email: 'staff@company.com',
+          name: 'Staff Pengajuan',
+        },
+        action_at: '2025-01-10T08:00:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 2,
+    step_name: 'Approval Purchasing',
+    approvals: [
+      {
+        step_number: 2,
+        step_name: 'Approval Purchasing',
+        action: 'approve',
+        notes: 'Purchase order disetujui oleh purchasing',
+        action_by: {
+          id: 2,
+          id_user: 2,
+          email: 'purchasing@company.com',
+          name: 'Ahmad Purchasing',
+        },
+        action_at: '2025-01-10T10:30:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 3,
+    step_name: 'Approval Manager Purchasing',
+    approvals: [
+      {
+        step_number: 3,
+        step_name: 'Approval Manager Purchasing',
+        action: 'approve',
+        notes: 'Purchase order disetujui oleh manager purchasing',
+        action_by: {
+          id: 3,
+          id_user: 3,
+          email: 'manager.purchasing@company.com',
+          name: 'Budi Manager Purchasing',
+        },
+        action_at: '2025-01-10T14:15:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 4,
+    step_name: 'Produk Diterima',
+    approvals: [
+      {
+        step_number: 4,
+        step_name: 'Produk Diterima',
+        action: 'receive',
+        notes: 'Produk telah diterima sesuai pesanan',
+        action_by: {
+          id: 4,
+          id_user: 4,
+          email: 'warehouse@company.com',
+          name: 'Candra Warehouse',
+        },
+        action_at: '2025-01-12T09:00:00Z',
+      },
+    ],
+  },
+  {
+    step_number: 5,
+    step_name: 'Selesai',
+    approvals: [
+      {
+        step_number: 5,
+        step_name: 'Selesai',
+        action: 'complete',
+        notes: 'Purchase order telah selesai diproses',
+        action_by: {
+          id: 5,
+          id_user: 5,
+          email: 'finance@company.com',
+          name: 'Diana Finance',
+        },
+        action_at: '2025-01-12T16:00:00Z',
+      },
+    ],
+  },
+];
+
+const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
+  // ===== STATIC DATA =====
+  const groupedApprovals = dummyGroupedApprovals;
+  const latestApproval =
+    groupedApprovals[groupedApprovals.length - 1]?.approvals[0];
+
+  // ===== COMPUTED VALUES =====
+  const approvalSteps = useMemo(() => {
+    if (!groupedApprovals.length || !latestApproval) return [];
+
+    try {
+      return formatGroupedApprovalsToApprovalSteps(
+        PURCHASE_ORDER_APPROVAL_LINE,
+        groupedApprovals,
+        latestApproval
+      );
+    } catch (error) {
+      console.error('Error formatting approval steps:', error);
+      return [];
+    }
+  }, [groupedApprovals, latestApproval]);
+
+  return (
+    <section className='w-full'>
+      {/* Steps */}
+      {approvalSteps.length > 0 ? (
+        <ApprovalSteps approvals={approvalSteps} />
+      ) : (
+        <div className='text-center py-8'>
+          <p className='text-gray-500'>Status approval tidak tersedia</p>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default PurchaseOrderDetail;