diff --git a/src/lib/pdf/stock-item-stocktake-document.tsx b/src/lib/pdf/stock-item-stocktake-document.tsx index e99b105..abbd46d 100644 --- a/src/lib/pdf/stock-item-stocktake-document.tsx +++ b/src/lib/pdf/stock-item-stocktake-document.tsx @@ -55,16 +55,25 @@ const styles = StyleSheet.create({ // and bold, right-aligned at the right edge of the row so "Out of // stock" sits as the visual anchor the operator scans for. tdStatus: { fontSize: 9, fontFamily: "Helvetica-Bold", textAlign: "right" }, - // Columns mirror the on-screen /stock table — Location dropped, Target - // renamed to "Max". Layout is landscape A4: Name gets the lion's share - // of the row, the numeric columns (Current/Min/Max) are narrow, and - // Status is the rightmost column (no trailing spacer). - cSku: { width: "8%" }, - cName: { width: "34%" }, - cSupplier: { width: "14%" }, - cCurrent: { width: "8%", paddingRight: 6 }, - cMin: { width: "6%", paddingRight: 6 }, - cMax: { width: "8%", paddingRight: 6 }, + // The empty `gap*` styles are intentional separator columns. React- + // pdf's flexbox doesn't support per-child gaps, so we render the + // gaps as zero-content `` elements. The small gap between SKU + // and Name visually separates the identifier from the label; the + // larger gaps between Name/Supplier/Current/Min/Max push the numeric + // columns further to the right so the eye groups {SKU, Name, + // Supplier} as "what" and {Current, Min, Max, Status} as "how much + // / how urgent". + cSku: { width: "6%" }, + gapSkuName: { width: "2%" }, + cName: { width: "30%" }, + gapNameSupplier: { width: "4%" }, + cSupplier: { width: "11%" }, + gapSupplierCurrent: { width: "4%" }, + cCurrent: { width: "6%" }, + gapCurrentMin: { width: "4%" }, + cMin: { width: "5%" }, + gapMinMax: { width: "4%" }, + cMax: { width: "6%" }, cStatus: { width: "18%" }, empty: { marginTop: 24, color: "#666", fontSize: 10, textAlign: "center" }, }); @@ -99,14 +108,19 @@ export function StockItemStocktakeDocument({ SKU + {""} Name + {""} Supplier + {""} Current + {""} Min + {""} Max @@ -136,15 +150,20 @@ export function StockItemStocktakeDocument({ return ( {item.sku || "—"} + {""} {item.name} + {""} {item.expand?.supplier?.suppliername || "—"} + {""} {currentQty} {item.unit ? ` ${item.unit}` : ""} + {""} {minQty} + {""} {maxQty !== null && maxQty > 0 ? maxQty : "—"}