import { useEffect, useRef } from 'react'; import { Head } from '@inertiajs/react'; import JsBarcode from 'jsbarcode'; interface PrintProps { doc: { doc_no: string; warehouse_name: string; snapshot_date: string; created_at: string; print_date: string; created_by: string; items: Array<{ id: string; product_name: string; product_code: string; specification: string; unit: string; quantity: number; counted_qty: number | null; batch_number: string | null; notes: string; }>; }; } export default function Print({ doc }: PrintProps) { const barcodeRef = useRef(null); useEffect(() => { if (barcodeRef.current) { try { JsBarcode(barcodeRef.current, doc.doc_no, { format: "CODE128", width: 2, // Thicker bars for better scanning height: 50, // Taller displayValue: false, margin: 10, // Mandatory quiet zone for scanners marginBottom: 5 }); } catch (e) { console.error("Barcode generation failed", e); } } // Delay print slightly to ensure render const timer = setTimeout(() => { window.print(); }, 500); return () => clearTimeout(timer); }, [doc.doc_no]); return (

{/* Header Section */}

{/* Barcode - Top Right */}

{/* {doc.doc_no} */}

{/* Company & Title - Center */}

台灣心零售股份有限公司

盤點單

{/* Info Section */}

單號： {doc.doc_no}

日期： {doc.created_at}

倉庫： {doc.warehouse_name}

印單日期： {doc.print_date}

{/* Table Section */} {doc.items.map((item, index) => ( ))} {/* Empty rows filler if needed, but usually not required unless strictly paging */}

序號	品號	品名	批號	規格	數量	單位	備註
{index + 1}	{item.product_code}	{item.product_name}	{item.batch_number \|\| '-'}	{item.specification \|\| '-'}	{item.counted_qty !== null ? Number(item.counted_qty).toFixed(2) : ''}	{item.unit \|\| '-'}	{item.notes}

{/* Footer Section */}

製單人員： {doc.created_by}

盤點人員：

核對人員：

製單人員：系統管理員印單人員：{doc.created_by}

第 1 頁 / 共 1 頁

); }