refactor(FE-208): add edit functionality to Item Pembelian section in PurchaseOrderDetail

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

@@ -303,7 +303,9 @@ const PurchaseOrderStaffApprovalForm = ({
       >
         <div className='w-full'>
           <h2 className='text-lg font-semibold mb-4'>
-            Konfirmasi Approve Pembelian
+            {type === 'add'
+              ? 'Konfirmasi Item Pembelian'
+              : 'Edit Item Pembelian'}
           </h2>
           <div className='overflow-x-auto'>
             <table className='table'>

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

@@ -12,6 +12,8 @@ import { Icon } from '@iconify/react';
 import { useModal } from '@/components/Modal';
 import Modal from '@/components/Modal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import PurchaseOrderStaffApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm';
 import PurchaseOrderAcceptApprovalForm from '@/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm';
 import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
@@ -36,6 +38,22 @@ import { isResponseError } from '@/lib/api-helper';
 import { toast } from 'react-hot-toast';
 import { useSearchParams } from 'next/navigation';
 
+const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
+  return (
+    <RowOptionsMenuWrapper type='dropdown'>
+      <Button
+        onClick={onEdit}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+    </RowOptionsMenuWrapper>
+  );
+};
+
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
   data?: Purchase;
@@ -306,6 +324,7 @@ const PurchaseOrderDetail = ({
   const confirmationModalWithNotes = useModal();
   const staffApprovalModal = useModal();
   const acceptApprovalModal = useModal();
+  const editModal = useModal();
 
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
@@ -707,9 +726,14 @@ const PurchaseOrderDetail = ({
 
         {/* Item Pembelian Section */}
         <div className='mb-8'>
-          <h3 className='text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200'>
-            Item Pembelian
-          </h3>
+          <div className='flex items-center justify-between mb-4 pb-2 border-b border-gray-200'>
+            <h3 className='text-lg font-semibold text-gray-800'>
+              Item Pembelian
+            </h3>
+            <RowDropdownOptions isLast2Rows>
+              <ItemPembelianDropdown onEdit={editModal.openModal} />
+            </RowDropdownOptions>
+          </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             {/* Product Table */}
             <div className='overflow-x-auto'>
@@ -857,6 +881,21 @@ const PurchaseOrderDetail = ({
           onCancel={acceptApprovalModal.closeModal}
         />
       </Modal>
+
+      {/* Edit Modal */}
+      <Modal
+        ref={editModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderStaffApprovalForm
+          type='edit'
+          initialValues={purchaseData}
+          onCancel={editModal.closeModal}
+        />
+      </Modal>
     </section>
   );
 };