From e421c7d4221d23896d82b2af981a1635535b3581 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Sat, 15 Nov 2025 10:54:59 +0700
Subject: [PATCH] refactor(FE-208): enhance PurchaseOrderInvoice layout with
 improved cell styling and add inner table header

---
 .../purchase/order/PurchaseOrderInvoice.tsx   | 55 +++++++++++++++----
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index 635e30f8..5c019edf 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -172,17 +172,42 @@ const pdfStyles = StyleSheet.create({
   },
   innerTable: {
     marginTop: 5,
+    borderWidth: 1,
+    borderColor: '#000000',
   },
   innerRow: {
     flexDirection: 'row',
-    borderBottomWidth: 0.5,
-    borderBottomColor: '#ccc',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000000',
     borderBottomStyle: 'solid',
   },
   innerCell: {
     flex: 1,
-    padding: 4,
-    fontSize: 8,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+  },
+  innerCellRight: {
+    flex: 1,
+    borderRightWidth: 1,
+    borderRightColor: '#000000',
+    borderRightStyle: 'solid',
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
+  },
+  innerCellRightLast: {
+    flex: 1,
+    padding: 8,
+    fontSize: 9,
+    textAlign: 'right',
   },
   footer: {
     marginTop: 30,
@@ -398,17 +423,25 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                   <View style={pdfStyles.tableCellLast}>
                     {/* Inner table for product allocation */}
                     <View style={pdfStyles.innerTable}>
+                      {/* Header for inner table */}
+                      <View
+                        style={[
+                          pdfStyles.innerRow,
+                          { backgroundColor: '#F5F5F5' },
+                        ]}
+                      >
+                        <Text style={pdfStyles.innerCell}>Item</Text>
+                        <Text style={pdfStyles.innerCellRightLast}>
+                          Quantity
+                        </Text>
+                      </View>
+                      {/* Data rows */}
                       {purchaseData?.items?.map((item, index) => (
                         <View key={index} style={pdfStyles.innerRow}>
                           <Text style={pdfStyles.innerCell}>
                             {item.product?.name || '-'}
                           </Text>
-                          <Text
-                            style={[
-                              pdfStyles.innerCell,
-                              { textAlign: 'right' },
-                            ]}
-                          >
+                          <Text style={pdfStyles.innerCellRightLast}>
                             {formatNumber(item.total_qty || 0)}
                           </Text>
                         </View>
@@ -424,7 +457,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
               <View style={pdfStyles.specialInstructionTable}>
                 <View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
                   <View style={pdfStyles.tableCellHeaderLast}>
-                    <Text>Special Instruction</Text>
+                    <Text>Notes</Text>
                   </View>
                 </View>
                 <View style={pdfStyles.tableRow}>