From d2a69917e7e280aa2e516a117fff1369d41077fc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 19 Nov 2025 10:55:44 +0700
Subject: [PATCH] refactor(FE-208,212): improve rendering of grouped goods
 receipt items in PurchaseOrderDetail

---
 .../purchase/order/PurchaseOrderDetail.tsx    | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 1d4867f5..a65fc054 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -774,14 +774,13 @@ const PurchaseOrderDetail = ({
               </RowDropdownOptions>
             )}
           </div>
-          <div className='rounded-lg border border-gray-200 overflow-hidden'>
-            <div className='overflow-x-auto'>
-              {groupedGoodsReceiptItems.length > 0 ? (
-                <div className='space-y-8'>
-                  {groupedGoodsReceiptItems.map((productData) => (
+          <div className='overflow-x-auto'>
+            {groupedGoodsReceiptItems.length > 0 ? (
+              <div>
+                {groupedGoodsReceiptItems.map((productData, index) => (
+                  <div key={productData.productIndex}>
                     <div
-                      key={productData.productIndex}
-                      className='border border-gray-200 rounded-lg overflow-hidden'
+                      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'>
@@ -810,14 +809,19 @@ const PurchaseOrderDetail = ({
                         }}
                       />
                     </div>
-                  ))}
-                </div>
-              ) : (
-                <div className='text-center py-8 text-gray-500'>
-                  Tidak ada data penerimaan barang
-                </div>
-              )}
-            </div>
+
+                    {/* Add divider after table except for last item */}
+                    {index < groupedGoodsReceiptItems.length - 1 && (
+                      <div className='border-t border-gray-200 my-6'></div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className='text-center py-8 text-gray-500'>
+                Tidak ada data penerimaan barang
+              </div>
+            )}
           </div>
         </div>
       </Card>