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'>
+        {showApprovalButton && (
           <Button
-          onClick={() => staffApprovalModal.openModal()}
+            onClick={handleApprovalClick}
-          variant='outline'
-          color='info'
-          className='w-full sm:w-fit'
-        >
-          <Icon icon='mdi:account-check-outline' width={20} height={20} />
-          Staff Approval
-        </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 icon='material-symbols:check' width={20} height={20} />
-            icon='mdi:package-variant-closed-check'
+            Approve
-            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}.{' '}