255 lines
8.4 KiB
JavaScript
255 lines
8.4 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import QRCode from "react-qr-code";
|
|
import { Printer, AlertCircle } from "lucide-react";
|
|
|
|
export default function PrintPage() {
|
|
const [items, setItems] = useState([]);
|
|
const [selectedIds, setSelectedIds] = useState(new Set());
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const fetchItems = async () => {
|
|
try {
|
|
const res = await fetch("/api/inventory");
|
|
if (!res.ok) throw new Error("Failed to fetch inventory from database");
|
|
const data = await res.json();
|
|
setItems(data);
|
|
setSelectedIds(new Set(data.map(i => i.id)));
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchItems();
|
|
}, []);
|
|
|
|
const handlePrint = () => {
|
|
if (selectedIds.size === 0) return alert("Please select at least one label to print.");
|
|
window.print();
|
|
};
|
|
|
|
const toggleSelection = (id) => {
|
|
const next = new Set(selectedIds);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
setSelectedIds(next);
|
|
};
|
|
|
|
const toggleAll = () => {
|
|
if (selectedIds.size === items.length) setSelectedIds(new Set());
|
|
else setSelectedIds(new Set(items.map(i => i.id)));
|
|
};
|
|
|
|
const itemsToPrint = items.filter(i => selectedIds.has(i.id));
|
|
|
|
if (loading) return <div className="p-8 text-center">Loading inventory codes...</div>;
|
|
if (error) return <div className="p-8 text-danger">Error: {error}</div>;
|
|
|
|
return (
|
|
<>
|
|
{/* On-screen Controls (Hidden in Print) */}
|
|
<div className="glass no-print" style={{ padding: "2rem", marginBottom: "2rem" }}>
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h2 className="flex items-center gap-2 mb-2">
|
|
<Printer size={24} className="text-primary" />
|
|
Print QR Labels
|
|
</h2>
|
|
<p className="text-muted">
|
|
Designed for <strong>Avery 5160</strong> standard labels (1" x 2-5/8", 30 per sheet).
|
|
</p>
|
|
</div>
|
|
<button className="btn btn-primary" onClick={handlePrint}>
|
|
<Printer size={18} /> Print Now
|
|
</button>
|
|
</div>
|
|
<div className="flex items-start gap-4 mt-4" style={{ backgroundColor: "rgba(59, 130, 246, 0.1)", padding: "1rem", borderRadius: "8px", border: "1px solid var(--primary)" }}>
|
|
<AlertCircle size={24} className="text-primary flex-shrink-0" />
|
|
<div style={{ fontSize: "0.9rem" }}>
|
|
<strong>Printer Settings to check before printing:</strong>
|
|
<ul style={{ listStyleType: "disc", marginLeft: "1.5rem", marginTop: "0.5rem" }}>
|
|
<li>Scale: <strong>100%</strong> (Do not "Fit to Page")</li>
|
|
<li>Margins: <strong>Custom / None</strong> (Layout handles margins natively)</li>
|
|
<li>Paper Size: <strong>Letter (8.5x11)</strong></li>
|
|
<li>Headers and Footers: <strong>Disable</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Item Selection Table (Hidden in Print) */}
|
|
<div className="glass no-print mb-6">
|
|
<div className="flex justify-between items-center mb-4" style={{ padding: "0 1rem" }}>
|
|
<h3 className="text-muted">Select Labels to Print ({selectedIds.size} selected)</h3>
|
|
<button className="btn btn-secondary" style={{ padding: "0.25rem 0.75rem", fontSize: "0.85rem" }} onClick={toggleAll}>
|
|
{selectedIds.size === items.length ? "Deselect All" : "Select All"}
|
|
</button>
|
|
</div>
|
|
<div className="table-container" style={{ maxHeight: "300px", overflowY: "auto" }}>
|
|
<table className="data-table">
|
|
<thead style={{ position: "sticky", top: 0, zIndex: 1, backgroundColor: "var(--bg-card)" }}>
|
|
<tr>
|
|
<th style={{ width: "50px", textAlign: "center" }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedIds.size === items.length && items.length > 0}
|
|
onChange={toggleAll}
|
|
/>
|
|
</th>
|
|
<th>Name</th>
|
|
<th>QR ID</th>
|
|
<th>Category</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map(item => (
|
|
<tr key={item.id} style={{ cursor: "pointer", opacity: selectedIds.has(item.id) ? 1 : 0.6 }} onClick={() => toggleSelection(item.id)}>
|
|
<td style={{ textAlign: "center" }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedIds.has(item.id)}
|
|
onChange={() => {}} /* Handled by row click */
|
|
/>
|
|
</td>
|
|
<td style={{ fontWeight: 500 }}>{item.name}</td>
|
|
<td><code className="text-muted">{item.qrCodeId}</code></td>
|
|
<td>{item.category || "-"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Printable Sheet Area */}
|
|
{/* Printable Sheet Area */}
|
|
{Array.from({ length: Math.ceil(itemsToPrint.length / 30) }, (_, pageIndex) => (
|
|
<div key={pageIndex} className="print-container">
|
|
{itemsToPrint.slice(pageIndex * 30, (pageIndex + 1) * 30).map((item) => (
|
|
<div key={item.id} className="label-cell">
|
|
<div className="qr-wrapper">
|
|
<QRCode
|
|
value={item.qrCodeId || item.id}
|
|
size={64}
|
|
level="H"
|
|
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
|
|
/>
|
|
</div>
|
|
<div className="label-text">
|
|
<div className="item-name">{item.name}</div>
|
|
<div className="item-sku">{item.qrCodeId}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
|
|
|
|
<style>{`
|
|
/* Standard View Adjustments */
|
|
.print-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: white;
|
|
border-radius: 8px;
|
|
min-height: 50vh;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.label-cell {
|
|
width: calc(33.333% - 1rem); /* Desktop preview layout */
|
|
height: 1in;
|
|
border: 1px dashed #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.125in;
|
|
box-sizing: border-box;
|
|
color: black;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.qr-wrapper {
|
|
flex-shrink: 0;
|
|
width: 0.75in;
|
|
height: 0.75in;
|
|
margin-right: 0.1in;
|
|
}
|
|
|
|
.label-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item-name {
|
|
font-weight: bold;
|
|
font-size: 0.55rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-sku {
|
|
font-size: 0.65rem;
|
|
color: #555;
|
|
margin-top: 0.1rem;
|
|
word-break: break-all;
|
|
}
|
|
|
|
@media print {
|
|
@page {
|
|
size: letter;
|
|
margin: 0; /* Reset browser margins entirely */
|
|
}
|
|
|
|
body {
|
|
background-color: white !important;
|
|
-webkit-print-color-adjust: exact;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.no-print, nav, .navbar {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Avery 5160 Layout Grid */
|
|
.print-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 2.625in);
|
|
grid-template-rows: repeat(10, 1in);
|
|
gap: 0;
|
|
padding: 0.5in 0.1250in; /* Top/Bottom 0.5", Left/Right approx 0.1250" */
|
|
width: 8.5in;
|
|
height: 11in;
|
|
background: white;
|
|
border: none;
|
|
border-radius: 0;
|
|
break-after:page;
|
|
}
|
|
|
|
.print-container {
|
|
column-gap: 0.125in;
|
|
row-gap: 0;
|
|
}
|
|
|
|
.label-cell {
|
|
width: 2.625in !important;
|
|
height: 1in !important;
|
|
border: none !important; /* Remove borders for actual print */
|
|
margin: 0;
|
|
page-break-inside: avoid;
|
|
}
|
|
}
|
|
`}</style>
|
|
</>
|
|
);
|
|
}
|