786 lines
35 KiB
TypeScript
786 lines
35 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { db, Item } from '@/lib/db';
|
|
import { inventoryApi } from '@/lib/api';
|
|
import PageShell from '@/components/PageShell';
|
|
import Scanner from '@/components/Scanner';
|
|
import StatCard from '@/components/StatCard';
|
|
import InventoryTable from '@/components/InventoryTable';
|
|
import FilterBar from '@/components/FilterBar';
|
|
import { useInventoryFilter } from '@/hooks/useInventoryFilter';
|
|
import { toast } from 'react-hot-toast';
|
|
import {
|
|
Package,
|
|
BarChart3,
|
|
Layers,
|
|
Plus,
|
|
Minus,
|
|
Trash2,
|
|
X,
|
|
AlertTriangle,
|
|
Tag,
|
|
Edit2,
|
|
Camera,
|
|
Layout,
|
|
Printer,
|
|
Download,
|
|
Box
|
|
} from 'lucide-react';
|
|
import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
export default function InventoryPage() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [inventory, setInventory] = useState<Item[]>([]);
|
|
const [stats, setStats] = useState<any>(null);
|
|
const [currentUser, setCurrentUser] = useState<any | null>(null);
|
|
|
|
const {
|
|
searchQuery,
|
|
setSearchQuery,
|
|
expandedCategory,
|
|
setExpandedCategory,
|
|
boxSearchQuery,
|
|
setBoxSearchQuery,
|
|
categories,
|
|
filteredCategories,
|
|
getFilteredItems,
|
|
getFilteredBoxes
|
|
} = useInventoryFilter(inventory);
|
|
|
|
// Stock Adjustment State
|
|
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
|
|
const [adjustQty, setAdjustQty] = useState<number>(1);
|
|
const [adjustType, setAdjustType] = useState<'ADD' | 'REMOVE' | 'TRASH'>('ADD');
|
|
const [trashReason, setTrashReason] = useState('Damaged');
|
|
|
|
// Item Editing state
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editedItem, setEditedItem] = useState<Partial<Item>>({});
|
|
const [categoriesList, setCategoriesList] = useState<any[]>([]);
|
|
|
|
// Category Editing state
|
|
const [editingCategory, setEditingCategory] = useState<any | null>(null);
|
|
const [catEditedName, setCatEditedName] = useState('');
|
|
const [catEditedDesc, setCatEditedDesc] = useState('');
|
|
|
|
// Scanner state
|
|
const [showScanner, setShowScanner] = useState(false);
|
|
const [fieldScanning, setFieldScanning] = useState<{ active: boolean, field: string } | null>(null);
|
|
|
|
// Box Manager State
|
|
const [showBoxManager, setShowBoxManager] = useState(false);
|
|
const [selectedBoxLabel, setSelectedBoxLabel] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const savedUser = localStorage.getItem('inventory_user');
|
|
if (savedUser) {
|
|
setCurrentUser(JSON.parse(savedUser));
|
|
}
|
|
|
|
loadData();
|
|
}, []);
|
|
|
|
const loadData = async () => {
|
|
// Load local items
|
|
const cached = await db.items.toArray();
|
|
setInventory(cached);
|
|
|
|
try {
|
|
// Load backend stats
|
|
const s = await inventoryApi.getStats();
|
|
setStats(s);
|
|
|
|
const cats = await inventoryApi.getCategories();
|
|
setCategoriesList(cats);
|
|
|
|
// Load fresh items
|
|
const res = await inventoryApi.getItems();
|
|
setInventory(res);
|
|
// Sync local DB
|
|
await db.items.clear();
|
|
await db.items.bulkPut(res);
|
|
} catch (err: any) {
|
|
console.error("Failed to load backend data", err);
|
|
}
|
|
};
|
|
|
|
const handleAdjustStock = async () => {
|
|
if (!selectedItem) return;
|
|
const toastId = toast.loading("Processing...");
|
|
|
|
try {
|
|
const isOnline = navigator.onLine;
|
|
const finalAdjustQty = adjustQty;
|
|
const newQty = selectedItem.quantity + (adjustType === 'ADD' ? adjustQty : -adjustQty);
|
|
|
|
// Local Update
|
|
await db.items.update(selectedItem.id!, { quantity: newQty });
|
|
setInventory(prev => prev.map(i => i.id === selectedItem.id ? { ...i, quantity: newQty } : i));
|
|
|
|
if (isOnline) {
|
|
const endpoint = adjustType === 'ADD' ? 'check-in' : (adjustType === 'TRASH' ? 'trash' : 'check-out');
|
|
const payload: any = {
|
|
barcode: selectedItem.barcode,
|
|
quantity: finalAdjustQty,
|
|
user_id: currentUser?.id || 1
|
|
};
|
|
if (adjustType === 'TRASH') payload.reason = trashReason;
|
|
|
|
await inventoryApi.adjustStock(endpoint, payload);
|
|
toast.success("Inventory updated & synced", { id: toastId });
|
|
} else {
|
|
await db.pendingOperations.add({
|
|
type: adjustType === 'ADD' ? 'CHECK_IN' : (adjustType === 'TRASH' ? 'TRASH' : 'CHECK_OUT'),
|
|
barcode: selectedItem.barcode,
|
|
quantity: finalAdjustQty,
|
|
timestamp: Date.now(),
|
|
synced: 0,
|
|
uuid: crypto.randomUUID()
|
|
} as any);
|
|
toast.success("Saved locally (Offline)", { id: toastId });
|
|
}
|
|
|
|
setSelectedItem(null);
|
|
setAdjustQty(1);
|
|
} catch (error: any) {
|
|
console.error("Adjustment failure:", error);
|
|
toast.error("Error saving operation", { id: toastId });
|
|
}
|
|
};
|
|
|
|
const handleUpdateItem = async () => {
|
|
if (!selectedItem) return;
|
|
try {
|
|
const updated = { ...selectedItem, ...editedItem };
|
|
if (updated.part_number) updated.part_number = updated.part_number.toUpperCase();
|
|
|
|
await db.items.update(selectedItem.id!, updated);
|
|
if (navigator.onLine) {
|
|
await inventoryApi.updateItem(selectedItem.id!, updated);
|
|
}
|
|
|
|
toast.success("Item updated successfully");
|
|
setIsEditing(false);
|
|
setSelectedItem(updated as Item);
|
|
await loadData();
|
|
} catch (err: any) {
|
|
console.error(err);
|
|
toast.error("Failed to update item");
|
|
}
|
|
};
|
|
|
|
const handleDeleteItem = async () => {
|
|
if (!selectedItem || !selectedItem.id) return;
|
|
if (!window.confirm(`Are you sure you want to delete "${selectedItem.name}"?`)) return;
|
|
|
|
try {
|
|
await db.items.delete(selectedItem.id);
|
|
if (navigator.onLine) {
|
|
await inventoryApi.deleteItem(selectedItem.id);
|
|
}
|
|
toast.success("Item deleted");
|
|
setSelectedItem(null);
|
|
await loadData();
|
|
} catch (err: any) {
|
|
console.error(err);
|
|
toast.error("Failed to delete item");
|
|
}
|
|
};
|
|
|
|
const handleUpdateCategory = async () => {
|
|
if (!editingCategory) return;
|
|
try {
|
|
await inventoryApi.updateCategory(editingCategory.id, {
|
|
name: catEditedName,
|
|
description: catEditedDesc
|
|
});
|
|
toast.success("Category updated");
|
|
setEditingCategory(null);
|
|
await loadData();
|
|
} catch (err: any) {
|
|
toast.error("Update failed");
|
|
}
|
|
};
|
|
|
|
const onOCRMatch = useCallback(async (text: string) => {
|
|
const cleanText = text.toUpperCase().replace(/[^A-Z0-9\s/+-]/g, ' ');
|
|
const tokens = cleanText.split(/[\s\n,]+/).filter(t => t.length >= 3);
|
|
|
|
if (fieldScanning?.active && fieldScanning.field === 'box_label') {
|
|
const label = tokens[0] || cleanText;
|
|
setEditedItem(prev => ({ ...prev, box_label: label }));
|
|
setFieldScanning(null);
|
|
setShowScanner(false);
|
|
toast.success(`Captured: ${label}`);
|
|
return;
|
|
}
|
|
}, [fieldScanning]);
|
|
|
|
const onScanSuccess = useCallback((barcode: string) => {
|
|
// Inventory page doesn't do check-in via scanner, it just finds the item
|
|
const item = inventory.find(i => i.barcode === barcode);
|
|
if (item) {
|
|
setSelectedItem(item);
|
|
setShowScanner(false);
|
|
} else {
|
|
toast.error(`Item with barcode ${barcode} not found in catalog`);
|
|
}
|
|
}, [inventory]);
|
|
|
|
// Extract unique item types and box labels for suggestions
|
|
const existingTypes = Array.from(new Set(inventory.map(i => i.type).filter(Boolean))).sort() as string[];
|
|
const existingBoxes = Array.from(new Set(inventory.map(i => i.box_label).filter(Boolean))).sort() as string[];
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<PageShell>
|
|
<div className="p-3 md:p-8 max-w-7xl mx-auto space-y-6">
|
|
<datalist id="existing-types">
|
|
{existingTypes.map(t => <option key={t} value={t} />)}
|
|
</datalist>
|
|
<datalist id="existing-boxes">
|
|
{existingBoxes.map(b => <option key={b} value={b} />)}
|
|
</datalist>
|
|
|
|
<header className="flex items-center gap-4 mb-6 md:mb-10">
|
|
<div className="p-3 md:p-4 bg-primary/10 rounded-3xl text-primary border border-primary/20 shadow-xl shadow-primary/5">
|
|
<Package size={28} className="md:w-8 md:h-8" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Inventory Catalog</h1>
|
|
<p className="text-xs md:text-sm text-secondary font-bold mt-1 tracking-widest">Enterprise Stock Overview</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowBoxManager(true)}
|
|
className="ml-auto p-3 bg-surface border border-slate-800 text-secondary rounded-2xl hover:text-primary transition-all active:scale-95 shadow-xl"
|
|
title="Manage Boxes"
|
|
>
|
|
<Layout size={20} />
|
|
</button>
|
|
</header>
|
|
|
|
<div className="w-full space-y-6 md:space-y-8">
|
|
{/* Stats Dashboard */}
|
|
<section className="grid grid-cols-2 md:grid-cols-4 gap-2.5 md:gap-4">
|
|
<StatCard
|
|
label="Categories"
|
|
value={stats?.total_categories || categories.length}
|
|
icon={Layers}
|
|
/>
|
|
<StatCard
|
|
label="Item Types"
|
|
value={stats?.total_items || inventory.length}
|
|
icon={Package}
|
|
/>
|
|
<StatCard
|
|
label="Total Boxes"
|
|
value={existingBoxes.length}
|
|
icon={Box}
|
|
/>
|
|
</section>
|
|
|
|
{/* Search */}
|
|
<FilterBar
|
|
searchQuery={searchQuery}
|
|
onChange={setSearchQuery}
|
|
/>
|
|
|
|
{/* Inventory Table */}
|
|
<InventoryTable
|
|
items={inventory}
|
|
categories={filteredCategories}
|
|
expandedCategory={expandedCategory}
|
|
onExpandCategory={setExpandedCategory}
|
|
onItemClick={setSelectedItem}
|
|
onEditCategory={(cat) => {
|
|
const categoryObj = categoriesList.find(c => c.name === cat);
|
|
if (categoryObj) {
|
|
setEditingCategory(categoryObj);
|
|
setCatEditedName(categoryObj.name);
|
|
setCatEditedDesc(categoryObj.description || '');
|
|
}
|
|
}}
|
|
categoriesList={categoriesList}
|
|
/>
|
|
</div>
|
|
|
|
{/* Stock Adjustment / Edit Item Overlay */}
|
|
{selectedItem && (
|
|
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/80 animate-in fade-in duration-200">
|
|
<div className="w-full max-w-lg bg-surface border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[2.5rem] shadow-2xl p-5 sm:p-8 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
|
{isEditing ? "Edit Item" : selectedItem.name}
|
|
{!isEditing && (
|
|
<span className="text-xs bg-slate-800 text-secondary px-3 py-1 rounded-lg font-bold tracking-tight">
|
|
In Stock: {selectedItem.quantity}
|
|
</span>
|
|
)}
|
|
</h3>
|
|
<div className="flex gap-2">
|
|
{!isEditing && (
|
|
<button
|
|
onClick={() => {
|
|
setEditedItem(selectedItem);
|
|
setIsEditing(true);
|
|
}}
|
|
className="p-2 hover:bg-slate-800 rounded-full text-secondary"
|
|
>
|
|
<Edit2 size={20} />
|
|
</button>
|
|
)}
|
|
{isEditing && (
|
|
<button
|
|
onClick={handleDeleteItem}
|
|
className="p-2 hover:bg-red-500/20 rounded-full text-red-500"
|
|
>
|
|
<Trash2 size={20} />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => {
|
|
setSelectedItem(null);
|
|
setIsEditing(false);
|
|
setAdjustQty(1);
|
|
}}
|
|
className="p-2 hover:bg-slate-800 rounded-full"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isEditing ? (
|
|
<div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide">
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Name</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.name || ''}
|
|
onChange={e => setEditedItem({...editedItem, name: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary placeholder:text-muted"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Part Number</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.part_number || ''}
|
|
onChange={e => setEditedItem({...editedItem, part_number: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary placeholder:text-muted"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Category</label>
|
|
<input
|
|
type="text"
|
|
list="existing-categories"
|
|
value={editedItem.category || ''}
|
|
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary placeholder:text-muted"
|
|
placeholder="e.g. storage"
|
|
/>
|
|
<datalist id="existing-categories">
|
|
{categoriesList.map(c => (
|
|
<option key={c.id} value={c.name} />
|
|
))}
|
|
</datalist>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Type</label>
|
|
<input
|
|
type="text"
|
|
list="existing-types"
|
|
value={editedItem.type || ''}
|
|
onChange={e => setEditedItem({...editedItem, type: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Connector</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.connector || ''}
|
|
onChange={e => setEditedItem({...editedItem, connector: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary"
|
|
placeholder="e.g. LC/UPC"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Size / Length</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.size || ''}
|
|
onChange={e => setEditedItem({...editedItem, size: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary"
|
|
placeholder="e.g. 1.6TB"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Color</label>
|
|
<input
|
|
type="text"
|
|
value={editedItem.color || ''}
|
|
onChange={e => setEditedItem({...editedItem, color: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary"
|
|
placeholder="e.g. Blue"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Box / Container Label</label>
|
|
<div className="relative flex items-center">
|
|
<input
|
|
type="text"
|
|
list="existing-boxes"
|
|
value={editedItem.box_label || ''}
|
|
onChange={e => setEditedItem({...editedItem, box_label: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm font-bold outline-none text-secondary placeholder:text-muted focus:border-primary transition-colors"
|
|
placeholder="e.g. Box 5"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setFieldScanning({ active: true, field: 'box_label' });
|
|
setShowScanner(true);
|
|
toast.success("Ready to scan Box label...");
|
|
}}
|
|
className={cn(
|
|
"absolute right-2 p-2 rounded-lg transition-all",
|
|
fieldScanning?.active ? "bg-primary text-white animate-pulse" : "text-muted hover:bg-slate-800"
|
|
)}
|
|
>
|
|
<Camera size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Specs / Comments</label>
|
|
<textarea
|
|
value={editedItem.specs || ''}
|
|
onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary h-20 resize-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">OCR Matching Key</label>
|
|
<textarea
|
|
value={editedItem.ocr_text || ''}
|
|
onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-primary/80 h-16 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex p-1 bg-background rounded-2xl mb-8">
|
|
{[
|
|
{ id: 'ADD', label: 'Buy More', icon: Plus, color: 'text-primary' },
|
|
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
|
|
{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
|
|
].map((t) => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => setAdjustType(t.id as any)}
|
|
className={cn(
|
|
"flex-1 flex flex-col items-center py-3 rounded-xl transition-all",
|
|
adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-muted"
|
|
)}
|
|
>
|
|
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
|
<span className="text-sm font-bold mt-1.5 tracking-tight">{t.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-6 mb-8">
|
|
<div className="flex items-center gap-8">
|
|
<button
|
|
onClick={() => setAdjustQty(Math.max(1, adjustQty - 1))}
|
|
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
|
|
>
|
|
<Minus size={24} />
|
|
</button>
|
|
<span className="text-5xl font-black tabular-nums">{adjustQty}</span>
|
|
<button
|
|
onClick={() => setAdjustQty(adjustQty + 1)}
|
|
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
|
|
>
|
|
<Plus size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
{adjustType === 'TRASH' && (
|
|
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl">
|
|
<select
|
|
value={trashReason}
|
|
onChange={(e) => setTrashReason(e.target.value)}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-foreground"
|
|
>
|
|
<option>Damaged</option>
|
|
<option>Expired</option>
|
|
<option>Lost</option>
|
|
<option>Technical Failure</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<button
|
|
onClick={isEditing ? handleUpdateItem : handleAdjustStock}
|
|
className={cn(
|
|
"w-full py-4 sm:py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-xl",
|
|
isEditing ? "bg-white text-slate-950 shadow-white/10" : (
|
|
adjustType === 'ADD' ? "bg-primary text-white shadow-primary/20" :
|
|
adjustType === 'REMOVE' ? "bg-amber-600 text-white shadow-amber-600/20" :
|
|
"bg-red-600 text-white shadow-red-600/20"
|
|
)
|
|
)}
|
|
>
|
|
{isEditing ? "Save Changes" : (
|
|
adjustType === 'ADD' ? `Add ${adjustQty} to Stock` :
|
|
adjustType === 'REMOVE' ? `Subtract ${adjustQty} from Stock` :
|
|
`Discard ${adjustQty} items`
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Category Edit Overlay */}
|
|
{editingCategory && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/90 animate-in fade-in duration-300">
|
|
<div className="bg-surface border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-black">Edit Category</h2>
|
|
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-secondary">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Name</label>
|
|
<input
|
|
type="text"
|
|
value={catEditedName}
|
|
onChange={e => setCatEditedName(e.target.value)}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Description</label>
|
|
<textarea
|
|
value={catEditedDesc}
|
|
onChange={e => setCatEditedDesc(e.target.value)}
|
|
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary h-24 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleUpdateCategory}
|
|
className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
|
|
>
|
|
Update Category
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showScanner && (
|
|
<Scanner
|
|
onScanSuccess={onScanSuccess}
|
|
onOCRMatch={onOCRMatch}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Box Manager Modal */}
|
|
{showBoxManager && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/90 animate-in fade-in duration-300">
|
|
<div className="w-full max-w-2xl bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
|
|
<div className="p-8 pb-4 flex flex-col gap-6 shrink-0 bg-surface/70">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="text-2xl font-black tracking-tight flex items-center gap-3">
|
|
<Package className="text-primary" size={28} />
|
|
Box Inventory
|
|
</h3>
|
|
<p className="text-sm text-muted font-bold mt-1">Manage physical box labels & printing</p>
|
|
</div>
|
|
<button onClick={() => { setShowBoxManager(false); setBoxSearchQuery(''); }} className="p-3 hover:bg-slate-800 rounded-full transition-colors text-secondary">
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Search boxes..."
|
|
value={boxSearchQuery}
|
|
onChange={(e) => setBoxSearchQuery(e.target.value)}
|
|
className="w-full bg-background border border-slate-800 rounded-2xl py-3.5 pl-11 pr-4 text-sm focus:border-primary outline-none transition-all placeholder:text-secondary"
|
|
/>
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-secondary" size={18} />
|
|
{boxSearchQuery && (
|
|
<button
|
|
onClick={() => setBoxSearchQuery('')}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-slate-800 rounded-lg text-muted"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-6 space-y-4 pt-4">
|
|
{getFilteredBoxes(existingBoxes).length === 0 ? (
|
|
<div className="py-20 text-center space-y-4 opacity-40">
|
|
<Package size={48} className="mx-auto" />
|
|
<p className="font-bold">{existingBoxes.length === 0 ? 'No box labels defined yet.' : 'No matching boxes found.'}</p>
|
|
<p className="text-xs max-w-xs mx-auto">Associate items with a "Box Label" in their metadata to see them here.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 pb-4">
|
|
{getFilteredBoxes(existingBoxes).map(box => {
|
|
const itemCount = inventory.filter(i => i.box_label === box).length;
|
|
return (
|
|
<div key={box} className="bg-background/50 border border-slate-800/60 p-5 rounded-3xl flex flex-col gap-4 group hover:border-primary/40 transition-all">
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="text-lg font-black text-white truncate">{box}</h4>
|
|
<p className="text-xs text-muted font-bold mt-0.5">{itemCount} items linked</p>
|
|
</div>
|
|
<div className="flex gap-2 shrink-0">
|
|
<button
|
|
onClick={() => setSelectedBoxLabel(box)}
|
|
className="flex-1 py-3 bg-primary text-white text-xs font-black rounded-xl flex items-center justify-center gap-2 hover:bg-blue-500 transition-colors shadow-lg shadow-primary/10 active:scale-95"
|
|
>
|
|
<Printer size={14} /> Print Label
|
|
</button>
|
|
<button
|
|
onClick={() => { setSearchQuery(box); setShowBoxManager(false); setBoxSearchQuery(''); }}
|
|
className="px-4 py-3 bg-surface border border-slate-800 text-secondary text-xs font-bold rounded-xl hover:bg-slate-800 active:scale-95"
|
|
>
|
|
View
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-6 py-4 bg-background/50 border-t border-slate-800 text-center flex items-center justify-center gap-2">
|
|
<div className="w-1 h-1 rounded-full bg-primary animate-pulse" />
|
|
<p className="text-xs text-secondary font-bold font-mono">TFM aInventory • Box management mode</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Label Print Preview Modal */}
|
|
{selectedBoxLabel && (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/95 animate-in zoom-in-95 duration-200">
|
|
<div className="w-full max-w-md flex flex-col gap-6">
|
|
|
|
<div id="print-label-area" className="w-full bg-white p-8 rounded-lg shadow-2xl flex flex-col items-center gap-6">
|
|
<h2 className="text-2xl font-black text-black tracking-tighter text-center">
|
|
{selectedBoxLabel}
|
|
</h2>
|
|
|
|
<div className="w-full aspect-[2/1] bg-white flex flex-col items-center justify-center overflow-hidden" dangerouslySetInnerHTML={{ __html: generateBarcode128(selectedBoxLabel) }} />
|
|
<div className="flex flex-col items-center gap-1">
|
|
<p className="text-xs font-black tracking-[0.2em] text-black/50">TFM INVENTORY BOX LABEL</p>
|
|
<img src={getQRCodeURL(selectedBoxLabel)} className="w-24 h-24" alt="QR Code" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 no-print">
|
|
<button
|
|
onClick={() => window.print()}
|
|
className="w-full py-5 bg-primary text-white rounded-[2rem] font-black text-lg flex items-center justify-center gap-3 shadow-2xl shadow-primary/40 active:scale-95 transition-all"
|
|
>
|
|
<Printer size={20} /> Print to Dymo/Brother
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
const svg = document.querySelector("#print-label-area svg");
|
|
if (svg) {
|
|
const svgData = new XMLSerializer().serializeToString(svg);
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
canvas.width = img.width * 4;
|
|
canvas.height = img.height * 4;
|
|
if (ctx) {
|
|
ctx.fillStyle = "white";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
const link = document.createElement("a");
|
|
link.download = `Label-${selectedBoxLabel}.png`;
|
|
link.href = canvas.toDataURL("image/png");
|
|
link.click();
|
|
}
|
|
};
|
|
img.src = "data:image/svg+xml;base64," + btoa(svgData);
|
|
}
|
|
}}
|
|
className="w-full py-4 bg-surface border border-slate-800 text-white rounded-[2rem] font-black text-sm flex items-center justify-center gap-2 active:scale-95 transition-all"
|
|
>
|
|
<Download size={16} /> Save for Mobile App
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setSelectedBoxLabel(null)}
|
|
className="w-full py-4 text-muted font-bold text-xs"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
|
|
{/* Print CSS Injection */}
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
@media print {
|
|
body * { display: none !important; }
|
|
#print-label-area {
|
|
display: flex !important;
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 40px !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.no-print { display: none !important; }
|
|
}
|
|
@page {
|
|
size: auto;
|
|
margin: 0;
|
|
}
|
|
`}} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</PageShell>
|
|
);
|
|
}
|