"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 Loading inventory codes...
;
if (error) return Error: {error}
;
return (
<>
{/* On-screen Controls (Hidden in Print) */}
Print QR Labels
Designed for Avery 5160 standard labels (1" x 2-5/8", 30 per sheet).
Printer Settings to check before printing:
- Scale: 100% (Do not "Fit to Page")
- Margins: Custom / None (Layout handles margins natively)
- Paper Size: Letter (8.5x11)
- Headers and Footers: Disable
{/* Item Selection Table (Hidden in Print) */}
Select Labels to Print ({selectedIds.size} selected)
{/* Printable Sheet Area */}
{/* Printable Sheet Area */}
{Array.from({ length: Math.ceil(itemsToPrint.length / 30) }, (_, pageIndex) => (
{itemsToPrint.slice(pageIndex * 30, (pageIndex + 1) * 30).map((item) => (
{item.name}
{item.qrCodeId}
))}