refactor(FE-208,212): streamline approval button handling in PurchaseOrderDetail

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

@@ -149,13 +149,38 @@ const PurchaseOrderDetail = ({
     });
   }, [goodsReceiptItems]);
 
-  const canUpdatePurchaseItems = useMemo(() => {
+  const approvalStep = useMemo(() => {
+    if (!initialValues?.approval) return null;
+    return initialValues.approval.step_number;
+  }, [initialValues?.approval]);
+
+  const showApprovalButton =
+    approvalStep !== null && approvalStep >= 1 && approvalStep <= 3;
+
+  const handleApprovalClick = () => {
+    if (!approvalStep) return;
+
+    switch (approvalStep) {
+      case 1:
+        staffApprovalModal.openModal();
+        break;
+      case 2:
+        confirmationModalWithNotes.openModal();
+        break;
+      case 3:
+        acceptApprovalModal.openModal();
+        break;
+      default:
+        break;
+    }
+  };
+
+  useMemo(() => {
     if (!initialValues?.approval) return false;
 
     const currentStep = initialValues.approval.step_number;
     return currentStep >= 4;
   }, [initialValues?.approval]);
-
   const canShowPurchaseOrderInvoice = useMemo(() => {
     if (!initialValues?.approval) return false;
 
@@ -498,39 +523,17 @@ const PurchaseOrderDetail = ({
     <section className='w-full'>
       {/* Approval and Action Buttons */}
       <div className='flex flex-wrap gap-3 my-6'>
-        <Button
+        {showApprovalButton && (
-          onClick={() => staffApprovalModal.openModal()}
+          <Button
-          variant='outline'
+            onClick={handleApprovalClick}
-          color='info'
+            variant='outline'
-          className='w-full sm:w-fit'
+            color='success'
-        >
+            className='w-full sm:w-fit'
-          <Icon icon='mdi:account-check-outline' width={20} height={20} />
+          >
-          Staff Approval
+            <Icon icon='material-symbols:check' width={20} height={20} />
-        </Button>
+            Approve
-
+          </Button>
-        <Button
+        )}
-          onClick={() => confirmationModalWithNotes.openModal()}
-          variant='outline'
-          color='warning'
-          className='w-full sm:w-fit'
-        >
-          <Icon icon='mdi:note-edit-outline' width={20} height={20} />
-          Manager Approval
-        </Button>
-
-        <Button
-          onClick={() => acceptApprovalModal.openModal()}
-          variant='outline'
-          color='success'
-          className='w-full sm:w-fit'
-        >
-          <Icon
-            icon='mdi:package-variant-closed-check'
-            width={20}
-            height={20}
-          />
-          Accept Approval
-        </Button>
       </div>
 
       {/* Steps */}
@@ -779,9 +782,7 @@ const PurchaseOrderDetail = ({
               <div>
                 {groupedGoodsReceiptItems.map((productData, index) => (
                   <div key={productData.productIndex}>
-                    <div
+                    <div className='border border-gray-200 rounded-lg overflow-hidden mb-6'>
-                      className='border border-gray-200 rounded-lg overflow-hidden mb-6'
-                    >
                       {/* Product Header */}
                       <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
                         {productData.productIndex}.{' '}