refactor(FE-208,212): enhance PurchaseOrderDetail and PurchaseOrderStaffApprovalForm to conditionally render invoice and item receipt based on approval steps

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

@@ -43,7 +43,7 @@ const PurchaseOrderStaffApprovalForm = ({
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
-    return currentStep >= 4;
+    return currentStep >= 3;
   }, [initialValues?.approval]);
 
   const getPurchaseItemError = (
@@ -127,7 +127,7 @@ const PurchaseOrderStaffApprovalForm = ({
     onSubmit: async (values) => {
       if (type === 'edit' && !canUpdatePurchaseItems) {
         setPurchaseOrderFormErrorMessage(
-          'Tidak bisa diupdate. Harus melewati step 4 dahulu (Tahapan Penerimaan Produk).'
+          'Tidak bisa diupdate. Harus melewati step 3 dahulu (Approval dari Manager Purchasing).'
         );
         return;
       }

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

@@ -113,6 +113,20 @@ const PurchaseOrderDetail = ({
     return currentStep >= 4;
   }, [initialValues?.approval]);
 
+  const canShowPurchaseOrderInvoice = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep >= 3;
+  }, [initialValues?.approval]);
+
+  const canShowPenerimaanBarang = useMemo(() => {
+    if (!initialValues?.approval) return false;
+
+    const currentStep = initialValues.approval.step_number;
+    return currentStep === 5;
+  }, [initialValues?.approval]);
+
   const {
     approvals,
     isLoading: approvalsLoading,
@@ -162,6 +176,17 @@ const PurchaseOrderDetail = ({
     [initialValues?.id, searchParams]
   );
 
+  // ===== MODAL HANDLERS =====
+  const handleStaffApprovalModalClose = useCallback(() => {
+    refreshApprovals();
+    staffApprovalModal.closeModal();
+  }, [refreshApprovals]);
+
+  const handleEditModalClose = useCallback(() => {
+    refreshApprovals();
+    editModal.closeModal();
+  }, [refreshApprovals]);
+
   // ===== DELETE HANDLER =====
   const deleteItemsHandler = useCallback(async () => {
     const purchaseRequestId = searchParams.get('purchaseId')
@@ -197,7 +222,7 @@ const PurchaseOrderDetail = ({
         : `Berhasil menghapus ${itemIdsToDelete.length} item pembelian`;
 
       toast.success(successMessage);
-
+      refreshApprovals();
       deleteModal.closeModal();
       setSelectedItem(null);
       setRowSelection({});
@@ -574,7 +599,7 @@ const PurchaseOrderDetail = ({
                     Nomor PO
                   </span>
                   <div className='ml-3'>
-                    {canUpdatePurchaseItems &&
+                    {canShowPurchaseOrderInvoice &&
                     purchaseData.po_number &&
                     purchaseData.po_number !== 'Belum dibuat' ? (
                       <PurchaseOrderInvoice data={purchaseData} />
@@ -596,7 +621,7 @@ const PurchaseOrderDetail = ({
             <h3 className='text-lg font-semibold text-gray-800'>
               Item Pembelian
             </h3>
-            {canUpdatePurchaseItems && (
+            {canShowPurchaseOrderInvoice && (
               <RowDropdownOptions isLast2Rows>
                 <ItemPembelianDropdown onEdit={editModal.openModal} />
               </RowDropdownOptions>
@@ -697,11 +722,13 @@ const PurchaseOrderDetail = ({
             <h3 className='text-lg font-semibold text-gray-800'>
               Informasi Penerimaan Barang
             </h3>
-            <RowDropdownOptions isLast2Rows>
+            {canShowPenerimaanBarang && (
-              <PenerimaanBarangDropdown
+              <RowDropdownOptions isLast2Rows>
-                onEdit={penerimaanBarangModal.openModal}
+                <PenerimaanBarangDropdown
-              />
+                  onEdit={penerimaanBarangModal.openModal}
-            </RowDropdownOptions>
+                />
+              </RowDropdownOptions>
+            )}
           </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             <div className='overflow-x-auto'>
@@ -764,7 +791,7 @@ const PurchaseOrderDetail = ({
         <PurchaseOrderStaffApprovalForm
           type='add'
           initialValues={purchaseData}
-          onCancel={staffApprovalModal.closeModal}
+          onCancel={handleStaffApprovalModalClose}
         />
       </Modal>
 
@@ -794,7 +821,7 @@ const PurchaseOrderDetail = ({
         <PurchaseOrderStaffApprovalForm
           type='edit'
           initialValues={purchaseData}
-          onCancel={editModal.closeModal}
+          onCancel={handleEditModalClose}
         />
       </Modal>