diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 9a61448b..dd8e42d2 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -18,8 +18,10 @@ import { isResponseError } from '@/lib/api-helper';
 import { StaffApprovalApi } from '@/services/api/purchase';
 import {
   CreateStaffApprovalRequestPayload,
+  UpdateStaffApprovalRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
+import { router } from 'next/client';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -37,6 +39,13 @@ const PurchaseOrderStaffApprovalForm = ({
     useState('');
 
   // ===== UTILITY FUNCTIONS =====
+  const canUpdatePurchase = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep >= 4;
+  }, [initialValues?.approval]);
+
   const getPurchaseItemError = (
     idx: number,
     field: 'price' | 'total_price'
@@ -87,8 +96,8 @@ const PurchaseOrderStaffApprovalForm = ({
   );
 
   const updateStaffApprovalHandler = useCallback(
-    async (purchaseId: number, payload: CreateStaffApprovalRequestPayload) => {
-      const res = await StaffApprovalApi.createStaffApproval(
+    async (purchaseId: number, payload: UpdateStaffApprovalRequestPayload) => {
+      const res = await StaffApprovalApi.updateStaffApproval(
         purchaseId,
         payload
       );
@@ -98,7 +107,7 @@ const PurchaseOrderStaffApprovalForm = ({
       }
       toast.success(res?.message as string);
       onCancel?.();
-      window.location.href = '/purchase';
+      await router.push(`/purchase/detail?purchaseId=${purchaseId}`);
     },
     []
   );
@@ -116,36 +125,60 @@ const PurchaseOrderStaffApprovalForm = ({
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      const payload: CreateStaffApprovalRequestPayload = {
-        notes: values.notes || '',
-        items: purchaseItems.map((purchaseItem, idx) => {
-          const formItem = values.items?.[idx];
-          return {
-            product_id: purchaseItem.product_id || 0,
-            warehouse_id: purchaseItem.warehouse_id || 0,
-            qty: purchaseItem.quantity || 0,
-            price:
-              typeof formItem?.price === 'string'
-                ? parseFloat(formItem.price) || 0
-                : formItem?.price || 0,
-            total_price:
-              typeof formItem?.total_price === 'string'
-                ? parseFloat(formItem.total_price) || 0
-                : formItem?.total_price || 0,
-          };
-        }),
-      };
+      if (type === 'edit' && !canUpdatePurchase) {
+        setPurchaseOrderFormErrorMessage(
+          'Tidak bisa diupdate. Harus melewati step 4 dahulu (Tahapan Penerimaan Produk).'
+        );
+        return;
+      }
 
-      switch (type) {
-        case 'add':
-          await createStaffApprovalHandler(payload);
-          break;
-        case 'edit':
-          await updateStaffApprovalHandler(
-            initialValues?.id as number,
-            payload
-          );
-          break;
+      if (type === 'add') {
+        const createPayload: CreateStaffApprovalRequestPayload = {
+          notes: values.notes || '',
+          items: purchaseItems.map((purchaseItem, idx) => {
+            const formItem = values.items?.[idx];
+            return {
+              product_id: purchaseItem.product_id || 0,
+              warehouse_id: purchaseItem.warehouse_id || 0,
+              qty: purchaseItem.quantity || 0,
+              price:
+                typeof formItem?.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : formItem?.price || 0,
+              total_price:
+                typeof formItem?.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : formItem?.total_price || 0,
+            };
+          }),
+        };
+
+        await createStaffApprovalHandler(createPayload);
+      } else if (type === 'edit') {
+        const updatePayload: UpdateStaffApprovalRequestPayload = {
+          'notes?': values.notes || null,
+          items: purchaseItems.map((purchaseItem, idx) => {
+            const formItem = values.items?.[idx];
+            return {
+              purchase_item_id:
+                formItem?.purchase_item_id || purchaseItem.value || 0,
+              qty: purchaseItem.quantity || 0,
+              price:
+                typeof formItem?.price === 'string'
+                  ? parseFloat(formItem.price) || 0
+                  : formItem?.price || 0,
+              total_price:
+                typeof formItem?.total_price === 'string'
+                  ? parseFloat(formItem.total_price) || 0
+                  : formItem?.total_price || 0,
+            };
+          }),
+        };
+
+        await updateStaffApprovalHandler(
+          initialValues?.id as number,
+          updatePayload
+        );
       }
     },
   });
@@ -175,17 +208,22 @@ const PurchaseOrderStaffApprovalForm = ({
   }, [initialValues?.items]);
 
   useEffect(() => {
-    if (purchaseItems.length > 0) {
-      const updatedItems = purchaseItems.map((purchaseItem) => ({
-        product_id: purchaseItem.product_id || 0,
-        warehouse_id: purchaseItem.warehouse_id || 0,
-        qty: purchaseItem.quantity || 0,
-        price: '',
-        total_price: '',
-      }));
+    if (purchaseItems.length > 0 && initialValues?.items) {
+      const updatedItems = purchaseItems.map((purchaseItem, idx) => {
+        const originalItem = initialValues.items?.[idx];
+        return {
+          purchase_item_id: type === 'edit' ? purchaseItem.value : undefined,
+          product_id: purchaseItem.product_id || 0,
+          warehouse_id: purchaseItem.warehouse_id || 0,
+          qty: purchaseItem.quantity || 0,
+          price: type === 'edit' && originalItem ? originalItem.price : '',
+          total_price:
+            type === 'edit' && originalItem ? originalItem.total_price : '',
+        };
+      });
       formik.setFieldValue('items', updatedItems);
     }
-  }, [purchaseItems]);
+  }, [purchaseItems, type, initialValues]);
 
   // ===== PURCHASE ITEM OPERATIONS =====
   const handlePurchaseItemChange = (