From 907a7414b4332d7f580e99f60239ff712872a9e1 Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Mon, 3 Aug 2026 16:23:12 +0200
Subject: [PATCH] fix(pdf): repeat table headers on every page in list reports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the thead <View> out of the table and onto the page itself
with the @react-pdf/renderer 'fixed' prop, so reports that span
multiple A4 pages still label their columns. Without this, page 2+
of a long stock-orders report or stocktake would show data without
column headers — making the right-hand 'Actual' column on the
stocktake and the value columns on the orders list unreadable.

Co-authored-by: Orca <help@stably.ai>
---
 src/lib/pdf/stock-item-stocktake-document.tsx | 19 +++++++++--------
 src/lib/pdf/stock-purchase-list-document.tsx  | 21 ++++++++++---------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/lib/pdf/stock-item-stocktake-document.tsx b/src/lib/pdf/stock-item-stocktake-document.tsx
index 04e476e..2fb67ac 100644
--- a/src/lib/pdf/stock-item-stocktake-document.tsx
+++ b/src/lib/pdf/stock-item-stocktake-document.tsx
@@ -65,21 +65,22 @@ export function StockItemStocktakeDocument({
           </Text>
         </View>
 
+        <View style={styles.thead} fixed>
+          <Text style={[styles.th, styles.cName]}>Name</Text>
+          <Text style={[styles.th, styles.cSku]}>SKU</Text>
+          <Text style={[styles.th, styles.cLocation]}>Location</Text>
+          <Text style={[styles.th, styles.cUnit]}>Unit</Text>
+          <Text style={[styles.th, styles.cQty, { textAlign: "right" }]}>Current qty</Text>
+          <Text style={[styles.th, styles.cActual, { textAlign: "right" }]}>Actual</Text>
+          <Text style={[styles.th, styles.cSupplier]}>Supplier</Text>
+        </View>
+
         {items.length === 0 ? (
           <Text style={{ marginTop: 24, color: "#666", fontSize: 10, textAlign: "center" }}>
             No active stock items.
           </Text>
         ) : (
           <View style={styles.table}>
-            <View style={styles.thead}>
-              <Text style={[styles.th, styles.cName]}>Name</Text>
-              <Text style={[styles.th, styles.cSku]}>SKU</Text>
-              <Text style={[styles.th, styles.cLocation]}>Location</Text>
-              <Text style={[styles.th, styles.cUnit]}>Unit</Text>
-              <Text style={[styles.th, styles.cQty, { textAlign: "right" }]}>Current qty</Text>
-              <Text style={[styles.th, styles.cActual, { textAlign: "right" }]}>Actual</Text>
-              <Text style={[styles.th, styles.cSupplier]}>Supplier</Text>
-            </View>
             {items.map((item) => (
               <View key={item.id} style={styles.tr} wrap={false}>
                 <Text style={[styles.td, styles.cName]}>{item.name}</Text>
diff --git a/src/lib/pdf/stock-purchase-list-document.tsx b/src/lib/pdf/stock-purchase-list-document.tsx
index 6154d47..1dd622c 100644
--- a/src/lib/pdf/stock-purchase-list-document.tsx
+++ b/src/lib/pdf/stock-purchase-list-document.tsx
@@ -74,20 +74,21 @@ export function StockPurchaseListDocument({
           </Text>
         </View>
 
+        <View style={styles.thead} fixed>
+          <Text style={[styles.th, styles.cNumber]}>Number</Text>
+          <Text style={[styles.th, styles.cSupplier]}>Supplier</Text>
+          <Text style={[styles.th, styles.cStatus]}>Status</Text>
+          <Text style={[styles.th, styles.cOrdered, { textAlign: "right" }]}>Ordered (R)</Text>
+          <Text style={[styles.th, styles.cReceived, { textAlign: "right" }]}>Received (R)</Text>
+          <Text style={[styles.th, styles.cItems, { textAlign: "right" }]}>Items</Text>
+          <Text style={[styles.th, styles.cCreated]}>Created</Text>
+          <Text style={[styles.th, styles.spacer]} />
+        </View>
+
         {rows.length === 0 ? (
           <Text style={styles.empty}>No stock orders.</Text>
         ) : (
           <View style={styles.table}>
-            <View style={styles.thead}>
-              <Text style={[styles.th, styles.cNumber]}>Number</Text>
-              <Text style={[styles.th, styles.cSupplier]}>Supplier</Text>
-              <Text style={[styles.th, styles.cStatus]}>Status</Text>
-              <Text style={[styles.th, styles.cOrdered, { textAlign: "right" }]}>Ordered (R)</Text>
-              <Text style={[styles.th, styles.cReceived, { textAlign: "right" }]}>Received (R)</Text>
-              <Text style={[styles.th, styles.cItems, { textAlign: "right" }]}>Items</Text>
-              <Text style={[styles.th, styles.cCreated]}>Created</Text>
-              <Text style={[styles.th, styles.spacer]} />
-            </View>
             {rows.map((row) => (
               <View key={row.id} style={styles.tr} wrap={false}>
                 <Text style={[styles.td, styles.cNumber]}>{row.purchase_number}</Text>