David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(pdf): repeat table headers on every page in list reports

Browse source 
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>
This commit is contained in:
SJCoetz 2026-08-03 16:23:12 +02:00
parent 45f1ec6bb7
commit 907a7414b4
2 changed files with 21 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/lib/pdf/stock-item-stocktake-document.tsx
View file

@ -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>

21
src/lib/pdf/stock-purchase-list-document.tsx
View file

@ -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>