From b82ba60a32f5ab651c55b8d77bb8bdf3d3c54078 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 17 Nov 2025 10:21:17 +0700
Subject: [PATCH] refactor(FE-208): enhance PurchaseOrderDetail layout with
 section header for goods receipt information

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index afc2dfcb..722bb0fa 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -775,26 +775,32 @@ const PurchaseOrderDetail = ({
           wrapper: 'w-full mt-8',
         }}
       >
-        <div className='rounded-lg border border-gray-200 overflow-hidden mt-8'>
-          <div className='overflow-x-auto'>
-            <Table<PurchaseItem>
-              data={goodsReceiptItems}
-              columns={goodsReceiptColumns}
-              isLoading={false}
-              className={{
-                containerClassName: 'm-0',
-                tableWrapperClassName: 'overflow-x-auto',
-                tableClassName: 'w-full table-auto',
-                headerRowClassName: 'bg-gray-50 border-b border-gray-200',
-                headerColumnClassName:
-                  'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
-                bodyRowClassName:
-                  'border-b border-gray-100 hover:bg-gray-50 transition-colors',
-                bodyColumnClassName:
-                  'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
-                paginationClassName: 'hidden',
-              }}
-            />
+        {/* 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='rounded-lg border border-gray-200 overflow-hidden'>
+            <div className='overflow-x-auto'>
+              <Table<PurchaseItem>
+                data={goodsReceiptItems}
+                columns={goodsReceiptColumns}
+                isLoading={false}
+                className={{
+                  containerClassName: 'm-0',
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto',
+                  headerRowClassName: 'bg-gray-50 border-b border-gray-200',
+                  headerColumnClassName:
+                    'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
+                  bodyRowClassName:
+                    'border-b border-gray-100 hover:bg-gray-50 transition-colors',
+                  bodyColumnClassName:
+                    'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            </div>
           </div>
         </div>
       </Card>