From d0ba9eadbdb9b69e952c33c55b9324e01f04f8e8 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 11:29:17 +0700
Subject: [PATCH] refactor(FE-208): add edit functionality and modal for
 Penerimaan Barang in PurchaseOrderDetail

---
 .../order/PurchaseOrderAcceptApprovalForm.tsx |  4 +-
 .../purchase/order/PurchaseOrderDetail.tsx    | 43 +++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index a604fe8a..a1475c18 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -393,7 +393,9 @@ const PurchaseOrderAcceptApprovalForm = ({
     <form onSubmit={formik.handleSubmit} className='w-full flex flex-col gap-6'>
       <div className='w-full'>
         <h2 className='text-lg font-semibold mb-4'>
-          Konfirmasi Penerimaan Produk
+          {type === 'add'
+            ? 'Konfirmasi Penerimaan Produk'
+            : 'Edit Penerimaan Produk'}
         </h2>
         <div className='overflow-x-auto'>
           <table className='table'>
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 69a4449c..778b2071 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -54,6 +54,22 @@ const ItemPembelianDropdown = ({ onEdit }: { onEdit: () => void }) => {
   );
 };
 
+const PenerimaanBarangDropdown = ({ 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;
@@ -325,6 +341,7 @@ const PurchaseOrderDetail = ({
   const staffApprovalModal = useModal();
   const acceptApprovalModal = useModal();
   const editModal = useModal();
+  const penerimaanBarangModal = useModal();
 
   // ===== STATIC DATA =====
   const purchaseData = data || dummyPurchaseData;
@@ -801,9 +818,14 @@ const PurchaseOrderDetail = ({
       >
         {/* Detail Penerimaan Barang Section */}
         <div className='my-8'>
-          <h3 className='text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200'>
-            Informasi Penerimaan Barang
-          </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'>
+              Informasi Penerimaan Barang
+            </h3>
+            <RowDropdownOptions isLast2Rows>
+              <PenerimaanBarangDropdown onEdit={penerimaanBarangModal.openModal} />
+            </RowDropdownOptions>
+          </div>
           <div className='rounded-lg border border-gray-200 overflow-hidden'>
             <div className='overflow-x-auto'>
               <Table<PurchaseItem>
@@ -896,6 +918,21 @@ const PurchaseOrderDetail = ({
           onCancel={editModal.closeModal}
         />
       </Modal>
+
+      {/* Penerimaan Barang Modal */}
+      <Modal
+        ref={penerimaanBarangModal.ref}
+        closeOnBackdrop
+        className={{
+          modalBox: 'w-full max-w-screen-2xl max-h-[90vh] overflow-y-auto',
+        }}
+      >
+        <PurchaseOrderAcceptApprovalForm
+          type='edit'
+          initialValues={purchaseData}
+          onCancel={penerimaanBarangModal.closeModal}
+        />
+      </Modal>
     </section>
   );
 };