refactor(FE-208,212): enhance PurchaseOrderDetail and PurchaseOrderStaffApprovalForm to conditionally allow updates based on approval step

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -39,7 +39,7 @@ const PurchaseOrderStaffApprovalForm = ({
     useState('');
 
   // ===== UTILITY FUNCTIONS =====
-  const canUpdatePurchase = useMemo(() => {
+  const canUpdatePurchaseItems = useMemo(() => {
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
@@ -125,7 +125,7 @@ const PurchaseOrderStaffApprovalForm = ({
     validateOnChange: true,
     validateOnBlur: true,
     onSubmit: async (values) => {
-      if (type === 'edit' && !canUpdatePurchase) {
+      if (type === 'edit' && !canUpdatePurchaseItems) {
         setPurchaseOrderFormErrorMessage(
           'Tidak bisa diupdate. Harus melewati step 4 dahulu (Tahapan Penerimaan Produk).'
         );

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -107,6 +107,13 @@ const PurchaseOrderDetail = ({
     return purchaseOrderItems.filter((item) => item.received_date);
   }, [purchaseOrderItems]);
 
+  const canUpdatePurchaseItems = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep >= 4;
+  }, [initialValues?.approval]);
+
   const {
     approvals,
     isLoading: approvalsLoading,
@@ -286,7 +293,7 @@ const PurchaseOrderDetail = ({
       cell: (props) => {
         const deleteClickHandler = () => {
           setSelectedItem(props.row.original);
-          setRowSelection({}); // Clear row selection when doing single delete
+          setRowSelection({});
           deleteModal.openModal();
         };
 
@@ -593,9 +600,11 @@ const PurchaseOrderDetail = ({
             <h3 className='text-lg font-semibold text-gray-800'>
               Item Pembelian
             </h3>
-            <RowDropdownOptions isLast2Rows>
+            {canUpdatePurchaseItems && (
-              <ItemPembelianDropdown onEdit={editModal.openModal} />
+              <RowDropdownOptions isLast2Rows>
-            </RowDropdownOptions>
+                <ItemPembelianDropdown onEdit={editModal.openModal} />
+              </RowDropdownOptions>
+            )}
           </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             {/* Product Table */}