refactor(FE-208,212): improve rendering of grouped goods receipt items in PurchaseOrderDetail

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'>
+              <div>
-                  {groupedGoodsReceiptItems.map((productData) => (
+                {groupedGoodsReceiptItems.map((productData, index) => (
+                  <div key={productData.productIndex}>
                     <div
-                      key={productData.productIndex}
+                      className='border border-gray-200 rounded-lg overflow-hidden mb-6'
-                      className='border border-gray-200 rounded-lg overflow-hidden'
                     >
                       {/* Product Header */}
                       <div className='font-semibold text-gray-900 bg-gray-100 px-6 py-4 text-lg'>
@@ -810,6 +809,12 @@ const PurchaseOrderDetail = ({
                         }}
                       />
                     </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>
             ) : (
@@ -819,7 +824,6 @@ const PurchaseOrderDetail = ({
             )}
           </div>
         </div>
-        </div>
       </Card>
 
       {/* Confirmation Modal with Notes */}