filter labels
This commit is contained in:
@ -2,11 +2,13 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import QRCode from "react-qr-code";
|
||||
import { Printer, AlertCircle } from "lucide-react";
|
||||
import { Printer, AlertCircle, Filter, Search, Tag, CheckCircle2 } from "lucide-react";
|
||||
|
||||
export default function PrintPage() {
|
||||
const [items, setItems] = useState([]);
|
||||
const [selectedIds, setSelectedIds] = useState(new Set());
|
||||
const [selectedCategory, setSelectedCategory] = useState("");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
@ -27,6 +29,21 @@ export default function PrintPage() {
|
||||
fetchItems();
|
||||
}, []);
|
||||
|
||||
const uniqueCategories = [
|
||||
...new Set(items.map(item => item.category?.trim() || "Uncategorized"))
|
||||
].filter(Boolean).sort();
|
||||
|
||||
const filteredItems = items.filter(item => {
|
||||
const itemCat = item.category?.trim() || "Uncategorized";
|
||||
const matchesCategory = selectedCategory === "" || itemCat === selectedCategory;
|
||||
const matchesSearch = searchQuery === "" ||
|
||||
item.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
(item.qrCodeId && item.qrCodeId.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
|
||||
const isAllFilteredSelected = filteredItems.length > 0 && filteredItems.every(i => selectedIds.has(i.id));
|
||||
|
||||
const handlePrint = () => {
|
||||
if (selectedIds.size === 0) return alert("Please select at least one label to print.");
|
||||
window.print();
|
||||
@ -39,12 +56,32 @@ export default function PrintPage() {
|
||||
setSelectedIds(next);
|
||||
};
|
||||
|
||||
const toggleAll = () => {
|
||||
if (selectedIds.size === items.length) setSelectedIds(new Set());
|
||||
else setSelectedIds(new Set(items.map(i => i.id)));
|
||||
const toggleFilteredAll = () => {
|
||||
const next = new Set(selectedIds);
|
||||
if (isAllFilteredSelected) {
|
||||
filteredItems.forEach(i => next.delete(i.id));
|
||||
} else {
|
||||
filteredItems.forEach(i => next.add(i.id));
|
||||
}
|
||||
setSelectedIds(next);
|
||||
};
|
||||
|
||||
const selectOnlyCurrentFiltered = () => {
|
||||
const next = new Set();
|
||||
filteredItems.forEach(i => next.add(i.id));
|
||||
setSelectedIds(next);
|
||||
};
|
||||
|
||||
const selectAll = () => {
|
||||
setSelectedIds(new Set(items.map(i => i.id)));
|
||||
};
|
||||
|
||||
const deselectAll = () => {
|
||||
setSelectedIds(new Set());
|
||||
};
|
||||
|
||||
const itemsToPrint = items.filter(i => selectedIds.has(i.id));
|
||||
const sheetCount = Math.ceil(itemsToPrint.length / 30);
|
||||
|
||||
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>;
|
||||
@ -52,8 +89,8 @@ export default function PrintPage() {
|
||||
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 className="glass no-print" style={{ padding: "2rem", marginBottom: "1.5rem" }}>
|
||||
<div className="flex justify-between items-center flex-wrap gap-4">
|
||||
<div>
|
||||
<h2 className="flex items-center gap-2 mb-2">
|
||||
<Printer size={24} className="text-primary" />
|
||||
@ -63,10 +100,21 @@ export default function PrintPage() {
|
||||
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 className="flex items-center gap-3">
|
||||
<div className="text-right" style={{ fontSize: "0.9rem" }}>
|
||||
<div style={{ fontWeight: 600, color: itemsToPrint.length > 0 ? "var(--text-main)" : "var(--danger)" }}>
|
||||
{itemsToPrint.length} of {items.length} selected
|
||||
</div>
|
||||
<div className="text-muted" style={{ fontSize: "0.8rem" }}>
|
||||
{sheetCount} {sheetCount === 1 ? "sheet" : "sheets"} required
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={handlePrint} disabled={itemsToPrint.length === 0}>
|
||||
<Printer size={18} /> Print Now
|
||||
</button>
|
||||
</div>
|
||||
</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" }}>
|
||||
@ -81,73 +129,245 @@ export default function PrintPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter and Category Selection Toolbar (Hidden in Print) */}
|
||||
<div className="glass no-print mb-6" style={{ padding: "1.5rem" }}>
|
||||
<div className="flex justify-between items-center flex-wrap gap-4 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter size={18} className="text-primary" />
|
||||
<h3 style={{ fontSize: "1.1rem", margin: 0 }}>Filter & Select Labels</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{selectedCategory && (
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ padding: "0.4rem 0.8rem", fontSize: "0.85rem", borderColor: "var(--primary)" }}
|
||||
onClick={selectOnlyCurrentFiltered}
|
||||
title={`Select only items in "${selectedCategory}"`}
|
||||
>
|
||||
<CheckCircle2 size={15} className="text-primary" />
|
||||
Select Only "{selectedCategory}" ({filteredItems.length})
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ padding: "0.4rem 0.8rem", fontSize: "0.85rem" }}
|
||||
onClick={selectAll}
|
||||
>
|
||||
Select All ({items.length})
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ padding: "0.4rem 0.8rem", fontSize: "0.85rem" }}
|
||||
onClick={deselectAll}
|
||||
>
|
||||
Deselect All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Inputs */}
|
||||
<div className="flex gap-4 flex-wrap" style={{ alignItems: "center" }}>
|
||||
<div style={{ position: "relative", flex: 1, minWidth: "220px" }}>
|
||||
<Search size={16} className="text-muted" style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)" }} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or QR..."
|
||||
className="input-field"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{ width: "100%", paddingLeft: "36px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", minWidth: "220px" }}>
|
||||
<Tag size={16} className="text-muted flex-shrink-0" />
|
||||
<select
|
||||
className="input-field"
|
||||
value={selectedCategory}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<option value="">All Categories ({items.length})</option>
|
||||
{uniqueCategories.map(cat => {
|
||||
const count = items.filter(i => (i.category?.trim() || "Uncategorized") === cat).length;
|
||||
return (
|
||||
<option key={cat} value={cat}>
|
||||
{cat} ({count})
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Category Badges */}
|
||||
{uniqueCategories.length > 1 && (
|
||||
<div className="flex gap-2 mt-3 flex-wrap" style={{ alignItems: "center" }}>
|
||||
<span className="text-muted" style={{ fontSize: "0.8rem", marginRight: "4px" }}>Quick Category Filter:</span>
|
||||
<button
|
||||
onClick={() => setSelectedCategory("")}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
padding: "0.2rem 0.6rem",
|
||||
fontSize: "0.78rem",
|
||||
borderRadius: "20px",
|
||||
background: selectedCategory === "" ? "var(--primary)" : "rgba(255, 255, 255, 0.05)",
|
||||
color: selectedCategory === "" ? "white" : "var(--text-muted)",
|
||||
border: "1px solid " + (selectedCategory === "" ? "var(--primary)" : "var(--border)")
|
||||
}}
|
||||
>
|
||||
All ({items.length})
|
||||
</button>
|
||||
{uniqueCategories.map(cat => {
|
||||
const count = items.filter(i => (i.category?.trim() || "Uncategorized") === cat).length;
|
||||
const isSelected = selectedCategory === cat;
|
||||
return (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(isSelected ? "" : cat)}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
padding: "0.2rem 0.6rem",
|
||||
fontSize: "0.78rem",
|
||||
borderRadius: "20px",
|
||||
background: isSelected ? "var(--primary)" : "rgba(255, 255, 255, 0.05)",
|
||||
color: isSelected ? "white" : "var(--text-muted)",
|
||||
border: "1px solid " + (isSelected ? "var(--primary)" : "var(--border)")
|
||||
}}
|
||||
>
|
||||
{cat} ({count})
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</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"}
|
||||
<div className="flex justify-between items-center mb-3" style={{ padding: "1rem 1rem 0" }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted" style={{ fontSize: "0.9rem" }}>
|
||||
Showing {filteredItems.length} of {items.length} items
|
||||
{selectedCategory && ` in "${selectedCategory}"`}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
style={{ padding: "0.25rem 0.75rem", fontSize: "0.85rem" }}
|
||||
onClick={toggleFilteredAll}
|
||||
>
|
||||
{isAllFilteredSelected ? "Deselect Visible" : "Select Visible"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="table-container" style={{ maxHeight: "300px", overflowY: "auto" }}>
|
||||
|
||||
<div className="table-container" style={{ maxHeight: "380px", 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}
|
||||
checked={isAllFilteredSelected}
|
||||
onChange={toggleFilteredAll}
|
||||
/>
|
||||
</th>
|
||||
<th>Name</th>
|
||||
<th>QR ID</th>
|
||||
<th>Category</th>
|
||||
<th>Location</th>
|
||||
<th>Status</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 */
|
||||
/>
|
||||
{filteredItems.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="6" style={{ textAlign: "center", padding: "2rem", color: "var(--text-muted)" }}>
|
||||
No items found matching the selected filters.
|
||||
</td>
|
||||
<td style={{ fontWeight: 500 }}>{item.name}</td>
|
||||
<td><code className="text-muted">{item.qrCodeId}</code></td>
|
||||
<td>{item.category || "-"}</td>
|
||||
</tr>
|
||||
))}
|
||||
) : (
|
||||
filteredItems.map(item => {
|
||||
const isSelected = selectedIds.has(item.id);
|
||||
return (
|
||||
<tr
|
||||
key={item.id}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
backgroundColor: isSelected ? "rgba(59, 130, 246, 0.08)" : "transparent",
|
||||
opacity: isSelected ? 1 : 0.6
|
||||
}}
|
||||
onClick={() => toggleSelection(item.id)}
|
||||
>
|
||||
<td style={{ textAlign: "center" }} onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => toggleSelection(item.id)}
|
||||
/>
|
||||
</td>
|
||||
<td style={{ fontWeight: 500 }}>{item.name}</td>
|
||||
<td><code className="text-muted" style={{ background: "rgba(255,255,255,0.05)", padding: "2px 6px", borderRadius: "4px" }}>{item.qrCodeId}</code></td>
|
||||
<td>
|
||||
<span style={{
|
||||
padding: "2px 8px",
|
||||
borderRadius: "12px",
|
||||
fontSize: "0.8rem",
|
||||
background: "rgba(255, 255, 255, 0.07)",
|
||||
border: "1px solid var(--border)"
|
||||
}}>
|
||||
{item.category || "Uncategorized"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-muted">{item.location || "-"}</td>
|
||||
<td>
|
||||
{isSelected ? (
|
||||
<span className="text-success" style={{ fontSize: "0.8rem", fontWeight: 500 }}>
|
||||
To Print
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted" style={{ fontSize: "0.8rem" }}>
|
||||
Excluded
|
||||
</span>
|
||||
)}
|
||||
</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>
|
||||
))}
|
||||
{itemsToPrint.length === 0 ? (
|
||||
<div className="glass text-center p-8 no-print" style={{ padding: "3rem", color: "var(--text-muted)" }}>
|
||||
<p>No labels selected to print. Select items above to generate printable sheets.</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
) : (
|
||||
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>
|
||||
{item.category && <div className="item-category">{item.category}</div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
/* Standard View Adjustments */
|
||||
@ -160,6 +380,7 @@ export default function PrintPage() {
|
||||
border-radius: 8px;
|
||||
min-height: 50vh;
|
||||
overflow-y: hidden;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.label-cell {
|
||||
@ -203,6 +424,15 @@ export default function PrintPage() {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-category {
|
||||
font-size: 0.5rem;
|
||||
color: #777;
|
||||
margin-top: 0.05rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
size: letter;
|
||||
@ -232,7 +462,8 @@ export default function PrintPage() {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
break-after:page;
|
||||
break-after: page;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.print-container {
|
||||
|
||||
Reference in New Issue
Block a user