bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

blabla

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-14 22:54:19 +03:00
parent 1ea5e90bc4
commit 6c57b1b0c2
69 changed files with 1020 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/VERSION.json
View File

@@ -1,6 +1,6 @@
{
"version": "1.9.19",
"last_build": "2026-04-13-2343",
"codename": "MobilePolish",
"commit": "1fff658d"
"version": "1.9.20",
"last_build": "2026-04-14-2250",
"codename": "AIFix",
"commit": "manual"
}

13
frontend/app/admin/page.tsx
View File

@@ -18,7 +18,18 @@ import {
RotateCcw,
FileText,
Upload,
Brain
Brain,
Globe,
Edit2,
Server,
Wifi,
WifiOff,
Clock,
History,
Database,
Layers,
X,
ChevronDown
} from 'lucide-react';
import { toast } from 'react-hot-toast';
import { cn } from '@/lib/utils';

301
frontend/app/inventory/page.tsx
View File

@@ -19,8 +19,13 @@ import {
AlertTriangle,
Tag,
Edit2,
Camera
Camera,
Layout,
Printer,
Download,
Search
} from 'lucide-react';
import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
@@ -56,6 +61,11 @@ export default function InventoryPage() {
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);
const [boxSearchQuery, setBoxSearchQuery] = useState('');
useEffect(() => {
setMounted(true);
const savedUser = localStorage.getItem('inventory_user');
@@ -244,6 +254,13 @@ export default function InventoryPage() {
<h1 className="text-3xl font-black tracking-tight text-white">Inventory Catalog</h1>
<p className="text-xs text-slate-500 font-bold mt-1">Enterprise Stock Overview</p>
</div>
<button
onClick={() => setShowBoxManager(true)}
className="ml-auto p-3 bg-slate-900 border border-slate-800 text-slate-400 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-8">
@@ -259,6 +276,11 @@ export default function InventoryPage() {
<p className="text-sm font-bold text-slate-300 whitespace-nowrap">Item Types</p>
<p className="text-xl font-black text-white tabular-nums ml-auto">{stats?.total_items || inventory.length}</p>
</div>
<div className="bg-slate-900/80 border border-slate-700/40 p-2 px-4 rounded-xl flex items-center gap-4 shadow-lg backdrop-blur-sm">
<Layout size={18} className="text-amber-500 shrink-0 opacity-80" />
<p className="text-sm font-bold text-slate-300 whitespace-nowrap">Total Boxes</p>
<p className="text-xl font-black text-white tabular-nums ml-auto">{existingBoxes.length}</p>
</div>
</section>
{/* Search */}
@@ -364,8 +386,13 @@ export default function InventoryPage() {
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 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">
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
{isEditing ? "Edit Item" : selectedItem.name}
{!isEditing && (
<span className="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded-md font-black uppercase">
In Stock: {selectedItem.quantity}
</span>
)}
</h3>
<div className="flex gap-2">
{!isEditing && (
@@ -401,62 +428,92 @@ export default function InventoryPage() {
</div>
{isEditing ? (
<div className="space-y-4 mb-8">
<div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide">
<div>
<label className="text-xs font-black text-slate-500 ml-1">Name</label>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Name</label>
<input
type="text"
value={editedItem.name || ''}
onChange={e => setEditedItem({...editedItem, name: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 placeholder:text-slate-700"
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700"
/>
</div>
<div>
<label className="text-xs font-black text-slate-500 ml-1">Part Number</label>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Part Number</label>
<input
type="text"
value={editedItem.part_number || ''}
onChange={e => setEditedItem({...editedItem, part_number: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-slate-100 placeholder:text-slate-700 uppercase"
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700 uppercase"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="text-xs font-black text-slate-500 ml-1">Category</label>
<div className="relative flex items-center">
<select
value={editedItem.category || ''}
onChange={e => setEditedItem({...editedItem, category: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 appearance-none"
>
<option value="">Select Category</option>
{categoriesList.map(c => (
<option key={c.id} value={c.name}>{c.name}</option>
))}
</select>
<ChevronDown size={16} className="absolute right-4 text-slate-500 pointer-events-none" />
</div>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Category</label>
<input
type="text"
list="existing-categories"
value={editedItem.category || ''}
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700"
placeholder="e.g. storage"
/>
<datalist id="existing-categories">
{categoriesList.map(c => (
<option key={c.id} value={c.name} />
))}
</datalist>
</div>
<div>
<label className="text-xs font-black text-slate-500 ml-1">Item Type</label>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Type</label>
<input
type="text"
list="existing-types"
value={editedItem.type || ''}
onChange={e => setEditedItem({...editedItem, type: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
/>
</div>
<div>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Connector</label>
<input
type="text"
value={editedItem.connector || ''}
onChange={e => setEditedItem({...editedItem, connector: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
placeholder="e.g. LC/UPC"
/>
</div>
<div>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Size / Length</label>
<input
type="text"
value={editedItem.size || ''}
onChange={e => setEditedItem({...editedItem, size: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
placeholder="e.g. 1.6TB"
/>
</div>
<div className="col-span-2">
<label className="text-xs font-black text-slate-500 ml-1">Box / Container Label</label>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Item Color</label>
<input
type="text"
value={editedItem.color || ''}
onChange={e => setEditedItem({...editedItem, color: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100"
placeholder="e.g. Blue"
/>
</div>
<div className="col-span-2">
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">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-slate-950 border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm outline-none text-slate-100 placeholder:text-slate-700 focus:border-primary transition-colors"
placeholder="e.g. SFPs 40G Cisco"
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm font-bold outline-none text-slate-100 placeholder:text-slate-700 focus:border-primary transition-colors"
placeholder="e.g. Box 5"
/>
<button
type="button"
@@ -476,12 +533,19 @@ export default function InventoryPage() {
</div>
</div>
<div>
<label className="text-xs font-black text-slate-500 ml-1">Specs / Comments</label>
<input
type="text"
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">Specs / Comments</label>
<textarea
value={editedItem.specs || ''}
onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-100 h-20 resize-none"
/>
</div>
<div>
<label className="text-[11px] font-black text-slate-500 ml-1 uppercase tracking-wider">OCR Matching Key</label>
<textarea
value={editedItem.ocr_text || ''}
onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})}
className="w-full bg-slate-950 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>
@@ -610,8 +674,183 @@ export default function InventoryPage() {
onOCRMatch={onOCRMatch}
/>
)}
</div>
{/* Box Manager Modal */}
{showBoxManager && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md animate-in fade-in duration-300">
<div className="w-full max-w-2xl bg-slate-900 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-slate-900/50">
<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-slate-500 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-slate-400">
<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-slate-950 border border-slate-800 rounded-2xl py-3.5 pl-11 pr-4 text-sm focus:border-primary outline-none transition-all placeholder:text-slate-600"
/>
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-600" 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-slate-500"
>
<X size={14} />
</button>
)}
</div>
</div>
<div className="flex-1 overflow-y-auto p-6 space-y-4 pt-4">
{existingBoxes.filter(b => b.toLowerCase().includes(boxSearchQuery.toLowerCase())).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">
{existingBoxes
.filter(box => box.toLowerCase().includes(boxSearchQuery.toLowerCase()))
.map(box => {
const itemCount = inventory.filter(i => i.box_label === box).length;
return (
<div key={box} className="bg-slate-950/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-slate-500 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-[11px] 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-slate-900 border border-slate-800 text-slate-400 text-[11px] font-bold rounded-xl hover:bg-slate-800 active:scale-95"
>
View
</button>
</div>
</div>
);
})}
</div>
)}
</div>
<div className="p-6 py-4 bg-slate-950/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-[10px] text-slate-500 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 uppercase">
{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-[10px] 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-slate-900 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-slate-500 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>
);
}

281
frontend/app/page.tsx
View File

@@ -66,7 +66,6 @@ export default function Home() {
const [mode, setMode] = useState<'CHECK_IN' | 'CHECK_OUT' | 'TRASH'>('CHECK_OUT');
const [showScanner, setShowScanner] = useState(false);
const [showOnboarding, setShowOnboarding] = useState(false);
const [showBoxManager, setShowBoxManager] = useState(false);
const [selectedBoxLabel, setSelectedBoxLabel] = useState<string | null>(null);
const [selectedItem, setSelectedItem] = useState<Item | null>(null);
const [boxMatches, setBoxMatches] = useState<Item[]>([]);
@@ -82,7 +81,6 @@ export default function Home() {
const [currentUser, setCurrentUser] = useState<any | null>(null);
const [categories, setCategories] = useState<any[]>([]);
const [fieldScanning, setFieldScanning] = useState<{ active: boolean, field: string } | null>(null);
const [boxSearchQuery, setBoxSearchQuery] = useState('');
useEffect(() => {
if (!localStorage.getItem('inventory_token')) {
@@ -497,13 +495,6 @@ export default function Home() {
</div>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => setShowBoxManager(true)}
className="p-2.5 bg-slate-900/80 border border-slate-800 text-slate-400 rounded-xl hover:text-primary transition-all active:scale-95"
title="Box Manager"
>
<Package size={18} />
</button>
<button
onClick={handleSync}
disabled={syncing}
@@ -542,7 +533,7 @@ export default function Home() {
{showScanner ? (
<div className="space-y-4">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">Scanning...</h2>
<h2 className="text-lg font-semibold">scanning...</h2>
<button
onClick={() => setShowScanner(false)}
className="text-sm text-slate-400 hover:text-white"
@@ -562,36 +553,23 @@ export default function Home() {
</button>
<div>
<p className="text-lg font-medium">Tap to start scanning</p>
<p className="text-lg font-medium">tap to start scanning</p>
<p className="text-sm text-slate-400">Scan labels to {mode.replace('_', ' ')} items</p>
</div>
<div className="w-full h-px bg-slate-800/50 my-2" />
<div className="w-full grid grid-cols-2 gap-3">
<div className="w-full flex justify-center">
<button
onClick={() => setShowOnboarding(true)}
className="flex flex-col items-center justify-center p-5 rounded-3xl bg-indigo-500/10 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-3"
className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-4"
>
<div className="p-3 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform">
<Sparkles size={24} />
<div className="p-4 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10">
<Sparkles size={32} />
</div>
<div className="text-center">
<p className="text-sm leading-tight">Add Item</p>
<p className="text-[10px] opacity-60 font-mono mt-1">AI Onboarding</p>
</div>
</button>
<button
onClick={() => setShowBoxManager(true)}
className="flex flex-col items-center justify-center p-5 rounded-3xl bg-slate-900/50 border border-slate-800 group hover:border-primary/40 transition-all font-black text-slate-300 gap-3"
>
<div className="p-3 bg-primary/10 rounded-2xl group-hover:scale-110 transition-transform">
<Package size={24} className="text-primary" />
</div>
<div className="text-center">
<p className="text-sm leading-tight">Manage Boxes</p>
<p className="text-[10px] opacity-60 font-mono mt-1">Box Inventory</p>
<p className="text-lg leading-tight">Add New Item</p>
<p className="text-xs opacity-60 font-mono mt-1">AI Smart Discovery</p>
</div>
</button>
</div>
@@ -615,11 +593,14 @@ export default function Home() {
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
<div className="flex justify-between items-center mb-6">
{isEditing ? (
<h3 className="text-xl font-black tracking-tight">Edit Metadata</h3>
) : (
<h3 className="text-xl font-black tracking-tight">{selectedItem.name}</h3>
)}
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
{isEditing ? "Edit Metadata" : selectedItem.name}
{!isEditing && (
<span className="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded-md font-black uppercase tracking-tight shadow-sm border border-slate-700/50">
In Stock: {selectedItem.quantity}
</span>
)}
</h3>
<div className="flex gap-2">
{!isEditing && (
<button
@@ -655,50 +636,51 @@ export default function Home() {
{isEditing ? (
<div className="space-y-4 mb-8">
<div>
<label className="text-xs font-black text-slate-500 ml-1">Name</label>
<label className="text-xs font-black text-slate-500 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-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 placeholder-slate-700"
placeholder="e.g. Solid State Drive"
/>
</div>
<div>
<label className="text-xs font-black text-slate-500 ml-1">Part Number (for OCR match)</label>
<label className="text-xs font-black text-slate-500 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-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-slate-100"
placeholder="e.g. OM4-TURQ-2M"
placeholder="e.g. PN-12345"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="text-xs font-black text-slate-500 ml-1">Category</label>
<div className="relative flex items-center">
<select
value={editedItem.category || ''}
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 appearance-none"
>
<option value="">Select Category</option>
{categories.map(c => (
<option key={c.id} value={c.name}>{c.name}</option>
))}
</select>
<ChevronDown size={16} className="absolute right-4 text-slate-500 pointer-events-none" />
</div>
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Category Group</label>
<input
type="text"
list="existing-categories"
value={editedItem.category || ''}
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100 placeholder:text-slate-700"
placeholder="e.g. storage"
/>
<datalist id="existing-categories">
{categories.map(c => (
<option key={c.id} value={c.name} />
))}
</datalist>
</div>
<div>
<label className="text-xs font-black text-slate-500 ml-1">Item Type (e.g. SFP, Patch Cord)</label>
<label className="text-xs font-black text-slate-500 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-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
placeholder="e.g. SFP+"
placeholder="e.g. spare parts"
/>
</div>
<div className="col-span-2">
@@ -729,7 +711,7 @@ export default function Home() {
</div>
</div>
<div>
<label className="text-xs font-black text-slate-500 ml-1">Connectors</label>
<label className="text-xs font-black text-slate-500 ml-1 tracking-tight">Connector</label>
<input
type="text"
value={editedItem.connector || ''}
@@ -739,23 +721,23 @@ export default function Home() {
/>
</div>
<div>
<label className="text-xs font-black text-slate-500 ml-1">Size / Length</label>
<label className="text-xs font-black text-slate-500 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-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
placeholder="e.g. 5m / 10G"
placeholder="e.g. 5m / 1600GB"
/>
</div>
<div className="col-span-2">
<label className="text-xs font-black text-slate-500 ml-1">Color</label>
<label className="text-xs font-black text-slate-500 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-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-slate-100"
placeholder="e.g. Aqua"
placeholder="e.g. Black"
/>
</div>
<div className="col-span-2">
@@ -768,11 +750,11 @@ export default function Home() {
/>
</div>
<div className="col-span-2">
<label className="text-xs font-black text-slate-500 ml-1">OCR Matching Key (Local Identification)</label>
<label className="text-xs font-black text-slate-500 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-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-[10px] font-mono outline-none text-slate-400 resize-none h-12"
className="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-slate-400 resize-none h-12"
placeholder="Paste identification string here..."
/>
</div>
@@ -915,181 +897,6 @@ export default function Home() {
</div>
)}
{/* Box Manager Modal */}
{showBoxManager && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md animate-in fade-in duration-300">
<div className="w-full max-w-2xl bg-slate-900 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-slate-900/50">
<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-slate-500 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-slate-400">
<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-slate-950 border border-slate-800 rounded-2xl py-3.5 pl-11 pr-4 text-sm focus:border-primary outline-none transition-all placeholder:text-slate-600"
/>
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-600" 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-slate-500"
>
<X size={14} />
</button>
)}
</div>
</div>
<div className="flex-1 overflow-y-auto p-6 space-y-4 pt-4">
{existingBoxes.filter(b => b.toLowerCase().includes(boxSearchQuery.toLowerCase())).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">
{existingBoxes
.filter(box => box.toLowerCase().includes(boxSearchQuery.toLowerCase()))
.map(box => {
const itemCount = inventory.filter(i => i.box_label === box).length;
return (
<div key={box} className="bg-slate-950/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-slate-500 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-[11px] 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.toLowerCase()); setShowBoxManager(false); setBoxSearchQuery(''); }}
className="px-4 py-3 bg-slate-900 border border-slate-800 text-slate-400 text-[11px] font-bold rounded-xl hover:bg-slate-800 active:scale-95"
>
View
</button>
</div>
</div>
);
})}
</div>
)}
</div>
<div className="p-6 py-4 bg-slate-950/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-[10px] text-slate-500 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 uppercase">
{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-[10px] 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-slate-900 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-slate-500 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>
)}
{/* Footer Branding */}
<footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-30">

563
frontend/components/AIOnboarding.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { useState, useRef } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import { toast } from 'react-hot-toast';
import { Camera, Check, RefreshCw, X, Image as ImageIcon, Sparkles, Hash, Layout, Layers, Package, ChevronDown } from 'lucide-react';
import { inventoryApi } from '@/lib/api';
@@ -15,22 +15,54 @@ interface AIOnboardingProps {
export default function AIOnboarding({ onCancel, onComplete, categories, inventory }: AIOnboardingProps) {
const [image, setImage] = useState<string | null>(null);
const [uploading, setUploading] = useState(false);
const [extractedData, setExtractedData] = useState<any>(null);
const [extractedItems, setExtractedItems] = useState<any[]>([]);
const [editingIndex, setEditingIndex] = useState<number | null>(null);
const [mode, setMode] = useState<'item' | 'box'>('item');
const [isLive, setIsLive] = useState(false);
// Extract unique item types 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[];
const cameraInputRef = useRef<HTMLInputElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const streamRef = useRef<MediaStream | null>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = () => setImage(reader.result as string);
reader.readAsDataURL(file);
const startLiveCamera = async () => {
try {
setIsLive(true);
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } },
audio: false
});
if (videoRef.current) {
videoRef.current.srcObject = stream;
streamRef.current = stream;
}
} catch (err) {
console.error("Camera access error:", err);
toast.error("Could not access camera for live scan.");
setIsLive(false);
}
};
const stopLiveCamera = () => {
if (streamRef.current) {
streamRef.current.getTracks().forEach(track => track.stop());
streamRef.current = null;
}
setIsLive(false);
};
const captureSnapshot = () => {
if (videoRef.current && canvasRef.current) {
const video = videoRef.current;
const canvas = canvasRef.current;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
setImage(dataUrl);
stopLiveCamera();
}
}
};
@@ -44,18 +76,47 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
formData.append('file', blob, 'label.jpg');
const data = await inventoryApi.analyzeLabel(formData, mode);
if (data.error) {
toast.error(`AI Error: ${data.error}`);
setUploading(false); // Force stop loading state
setUploading(false);
return;
}
setExtractedData(data);
if (mode === 'box') {
toast.success(`Box identified: ${data.box_label || data.name}`);
let parsedData = data;
if (typeof data === 'string') {
try { parsedData = JSON.parse(data); } catch (e) {}
}
const d = parsedData;
// HYPER-ROBUST: Find ANY array in the response if it's not a direct array
let items: any[] = [];
if (Array.isArray(d)) {
items = d;
} else {
toast.success("AI extraction complete!");
const potentialArrayKey = Object.keys(d).find(k => Array.isArray(d[k]));
if (potentialArrayKey) {
items = d[potentialArrayKey];
} else {
// Check for singular object (must have at least name or Item or PN)
const target = d.data || d;
if (target.name || target.Item || target.PartNr || target.part_number) {
items = [target];
}
}
}
if (!items || items.length === 0) {
toast.error("No relevant items detected. Try a closer photo.");
} else {
setExtractedItems(items);
if (items.length === 1) {
setEditingIndex(0);
toast.success("Item identified!");
} else {
toast.success(`Found ${items.length} items!`);
}
}
} catch (error) {
toast.error("Failed to process image with AI");
@@ -65,28 +126,108 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
}
};
const confirmOnboarding = async () => {
// Sanitize data for the backend (Pydantic validation)
const confirmSingleItem = (index: number) => {
const data = extractedItems[index];
const newItem = {
name: String(extractedData.name || "New AI Item"),
category: String(extractedData.category || "Uncategorized"),
type: extractedData.type ? String(extractedData.type) : null,
part_number: extractedData.part_number ? String(extractedData.part_number) : null,
color: extractedData.color ? String(extractedData.color) : null,
description: String(extractedData.description || ""),
connector: extractedData.connector ? String(extractedData.connector) : null,
size: extractedData.size ? String(extractedData.size) : null,
ocr_text: extractedData.ocr_text ? String(extractedData.ocr_text) : null,
specs: String(extractedData.specs || ""), // Keep specs as extra data if needed
barcode: String(extractedData.barcode || extractedData.part_number || `AI-${Date.now()}`),
quantity: parseFloat(String(extractedData.quantity || 1)),
name: String(data.Item || data.name || "New AI Item"),
category: String(data.Category || data.category || "Uncategorized"),
type: data.Type || data.type ? String(data.Type || data.type) : null,
part_number: data.PartNr || data.part_number ? String(data.PartNr || data.part_number) : null,
color: data.Color || data.color ? String(data.Color || data.color) : null,
description: String(data.Description || data.description || ""),
connector: data.Connector || data.connector ? String(data.Connector || data.connector) : null,
size: data.Size || data.size ? String(data.Size || data.size) : null,
ocr_text: data.OCR || data.ocr_text ? String(data.OCR || data.ocr_text) : null,
specs: String(data.specs || ""),
barcode: String(data.barcode || data.PartNr || data.part_number || `AI-${Date.now()}-${index}`),
quantity: parseFloat(String(data.quantity || 1)),
min_quantity: 1.0,
box_label: extractedData.box_label ? String(extractedData.box_label) : null,
labels_data: JSON.stringify(extractedData)
box_label: data.box_label ? String(data.box_label) : null,
labels_data: JSON.stringify(data)
};
onComplete(newItem);
if (extractedItems.length > 1) {
const remaining = [...extractedItems];
remaining.splice(index, 1);
setExtractedItems(remaining);
setEditingIndex(null);
} else {
setExtractedItems([]);
setEditingIndex(null);
}
};
const confirmAllItems = async () => {
// Clone items and process them sequentially
const itemsToProcess = [...extractedItems];
setUploading(true);
const toastId = toast.loading(`Adding ${itemsToProcess.length} items...`);
try {
for (let i = 0; i < itemsToProcess.length; i++) {
const data = itemsToProcess[i];
const newItem = {
name: String(data.Item || data.name || "New AI Item"),
category: String(data.Category || data.category || "Uncategorized"),
type: data.Type || data.type ? String(data.Type || data.type) : null,
part_number: data.PartNr || data.part_number ? String(data.PartNr || data.part_number) : null,
color: data.Color || data.color ? String(data.Color || data.color) : null,
description: String(data.Description || data.description || ""),
connector: data.Connector || data.connector ? String(data.Connector || data.connector) : null,
size: data.Size || data.size ? String(data.Size || data.size) : null,
ocr_text: data.OCR || data.ocr_text ? String(data.OCR || data.ocr_text) : null,
specs: String(data.specs || ""),
barcode: String(data.barcode || data.PartNr || data.part_number || `AI-${Date.now()}-${i}`),
quantity: parseFloat(String(data.quantity || 1)),
min_quantity: 1.0,
box_label: data.box_label ? String(data.box_label) : null,
labels_data: JSON.stringify(data)
};
// Wait for parent to process each one
await onComplete(newItem);
}
toast.success(`Successfully added ${itemsToProcess.length} items`, { id: toastId });
setExtractedItems([]);
onCancel(); // Close the modal after bulk completion
} catch (err) {
toast.error("Error during batch add", { id: toastId });
} finally {
setUploading(false);
}
};
const updateEditingItem = (fields: any) => {
if (editingIndex === null) return;
const newItems = [...extractedItems];
newItems[editingIndex] = { ...newItems[editingIndex], ...fields };
setExtractedItems(newItems);
};
// Extract unique item types 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[];
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = () => setImage(reader.result as string);
reader.readAsDataURL(file);
}
};
useEffect(() => {
// Cleanup on unmount
return () => {
if (streamRef.current) {
streamRef.current.getTracks().forEach(track => track.stop());
}
};
}, []);
return (
<div className="fixed inset-0 z-50 bg-slate-950 flex flex-col p-6 animate-in fade-in slide-in-from-bottom-5 duration-300">
<div className="flex justify-between items-center mb-6 shrink-0">
@@ -99,12 +240,12 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<p className="text-xs text-slate-500 font-bold">Powered by Gemini 2.0 Flash</p>
</div>
</div>
<button onClick={onCancel} className="p-2 hover:bg-slate-900 rounded-full transition-colors">
<button onClick={() => { stopLiveCamera(); onCancel(); }} className="p-2 hover:bg-slate-900 rounded-full transition-colors">
<X size={24} />
</button>
</div>
{!image ? (
{!image && !isLive ? (
<div className="flex-1 flex flex-col gap-6 min-h-0">
<div className="flex bg-slate-900/50 p-1.5 rounded-2xl border border-slate-800/50 shrink-0">
<button
@@ -112,34 +253,34 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold transition-all ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
>
<Package size={18} />
<span className="text-xs">Item Label</span>
<span className="text-xs">Discovery Mode</span>
</button>
<button
onClick={() => setMode('box')}
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold transition-all ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
>
<Layers size={18} />
<span className="text-xs">Box / Container</span>
<span className="text-xs">Box Lookup</span>
</button>
</div>
<div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-slate-800 rounded-[2.5rem] bg-slate-900/30 overflow-hidden px-4">
<div className="w-20 h-20 bg-slate-900 rounded-3xl flex items-center justify-center mb-6 shadow-inner">
<Camera size={32} className={mode === 'box' ? 'text-primary' : 'text-slate-500'} />
<div className="w-20 h-20 bg-slate-900 rounded-3xl flex items-center justify-center mb-6 shadow-inner text-primary">
<Camera size={32} />
</div>
<p className="text-slate-300 mb-2 text-center font-bold">
{mode === 'box' ? 'Container Discovery Mode' : 'Label Insight Mode'}
{mode === 'box' ? 'Deep Box Analysis' : 'Multi-Item Extraction'}
</p>
<p className="text-xs text-slate-500 px-8 text-center leading-relaxed font-bold">
{mode === 'box'
? 'Scan the large, prominent label or hand-written name on the container'
: 'Scan or upload a sharp photo of the item specifications'}
? 'Scan container labels to identify storage locations'
: 'Identify multiple technical items from a single photo or label'}
</p>
</div>
<div className="grid grid-cols-2 gap-4 h-28 shrink-0">
<button
onClick={() => cameraInputRef.current?.click()}
onClick={startLiveCamera}
className="flex flex-col items-center justify-center gap-2 bg-primary text-white rounded-3xl font-bold shadow-2xl shadow-primary/20 active:scale-95 transition-all"
>
<Camera size={24} />
@@ -154,10 +295,58 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</button>
</div>
<input type="file" ref={cameraInputRef} onChange={handleFileChange} accept="image/*" capture="environment" className="hidden" />
<input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" className="hidden" />
</div>
) : !extractedData ? (
) : isLive ? (
// LIVE VIEWFINDER MODE
<div className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
<div className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-black">
<video
ref={videoRef}
autoPlay
playsInline
muted
className="w-full h-full object-cover"
/>
<canvas ref={canvasRef} className="hidden" />
<div className="absolute inset-0 border-[20px] border-black/20 pointer-events-none">
<div className="w-full h-full border border-primary/30 rounded-2xl relative">
{/* Corner Markers */}
<div className="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-primary rounded-tl-xl" />
<div className="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-primary rounded-tr-xl" />
<div className="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-primary rounded-bl-xl" />
<div className="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-primary rounded-br-xl" />
</div>
</div>
<div className="absolute top-6 left-1/2 -translate-x-1/2 bg-black/60 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/10">
<span className="text-[10px] font-black text-white uppercase tracking-widest flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />
Live Viewfinder
</span>
</div>
</div>
<div className="flex gap-4 shrink-0 pb-2">
<button
onClick={stopLiveCamera}
className="px-6 py-4 bg-slate-900 border border-slate-800 text-slate-400 rounded-2xl font-bold transition-all active:scale-95"
>
Cancel
</button>
<button
onClick={captureSnapshot}
className="flex-1 py-4 bg-white text-slate-950 rounded-2xl font-black text-lg shadow-xl shadow-white/10 flex items-center justify-center gap-3 active:scale-95 hover:bg-slate-200"
>
<div className="w-5 h-5 rounded-full border-2 border-slate-950 flex items-center justify-center">
<div className="w-2.5 h-2.5 rounded-full bg-slate-950" />
</div>
Capture Image
</button>
</div>
</div>
) : extractedItems.length === 0 ? (
<div className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
<div className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-slate-900">
<img src={image} className="w-full h-full object-contain" alt="Captured label" />
@@ -192,55 +381,54 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</button>
</div>
</div>
) : (
) : editingIndex !== null ? (
<div className="flex-1 flex flex-col gap-6 overflow-hidden">
<div className="flex items-center justify-between">
<span className="text-xs text-slate-500 font-bold">Validation Mask</span>
<span className="text-xs bg-green-500/10 text-green-400 px-2 py-0.5 rounded-full font-bold">AI Ready</span>
<span className="text-xs text-slate-500 font-bold uppercase tracking-wider">Item Details ({editingIndex + 1}/{extractedItems.length})</span>
<button
onClick={() => setEditingIndex(null)}
className="text-xs text-primary font-bold px-3 py-1 bg-primary/10 rounded-full"
>
Back to List
</button>
</div>
<div className="flex-1 overflow-y-auto space-y-4 pr-1 scrollbar-hide">
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Name</label>
<div className="flex-1 overflow-y-auto space-y-2 pr-1 scrollbar-hide">
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Item Name</label>
<textarea
value={extractedData.name || ''}
onChange={(e) => setExtractedData({...extractedData, name: e.target.value})}
className="bg-transparent w-full text-xl font-bold outline-none text-white placeholder:text-slate-700 resize-none h-20"
placeholder="Product name..."
value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''}
onChange={(e) => updateEditingItem({ Item: e.target.value })}
className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-slate-700 resize-none h-8 leading-tight selection:bg-primary/30 py-0"
placeholder="SSD, SFP, Cable..."
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<div className="flex items-center gap-1.5 mb-1 ml-1 group-focus-within:text-primary transition-colors">
<Layers size={12} />
<label className="text-xs text-slate-500 font-bold">Category Group</label>
</div>
<div className="relative flex items-center">
<select
value={extractedData.category || ''}
onChange={(e) => setExtractedData({...extractedData, category: e.target.value})}
className="bg-transparent w-full font-bold outline-none text-slate-200 appearance-none"
>
<option value="" className="bg-slate-900 font-bold">Other / New</option>
{categories.map(c => (
<option key={c.id} value={c.name} className="bg-slate-900">{c.name}</option>
))}
</select>
<ChevronDown size={14} className="absolute right-0 text-slate-500 pointer-events-none" />
</div>
</div>
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<div className="flex items-center gap-1.5 mb-1 ml-1 group-focus-within:text-primary transition-colors">
<Package size={12} />
<label className="text-xs text-slate-500 font-bold">Item Type</label>
</div>
<div className="bg-slate-900/80 py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Category</label>
<input
value={extractedData.type || ''}
list="onboarding-types"
onChange={(e) => setExtractedData({...extractedData, type: e.target.value})}
type="text"
list="onboarding-categories"
value={extractedItems[editingIndex].Category || extractedItems[editingIndex].category || ''}
onChange={(e) => updateEditingItem({ Category: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-slate-200"
placeholder="e.g. SFP+"
placeholder="e.g. storage"
/>
<datalist id="onboarding-categories">
{categories.map(c => (
<option key={c.id} value={c.name} />
))}
</datalist>
</div>
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Item Type</label>
<input
value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''}
list="onboarding-types"
onChange={(e) => updateEditingItem({ Type: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-slate-200"
placeholder="e.g. spare parts"
/>
<datalist id="onboarding-types">
{existingTypes.map(t => <option key={t} value={t} />)}
@@ -248,26 +436,23 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Color</label>
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full" style={{backgroundColor: extractedData.color || 'transparent'}} />
<input
value={extractedData.color || ''}
onChange={(e) => setExtractedData({...extractedData, color: e.target.value})}
className="bg-transparent w-full font-bold outline-none text-slate-200"
placeholder="e.g. Turquoise"
/>
</div>
</div>
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Box / Container Label</label>
<div className="grid grid-cols-2 gap-3">
<div className="bg-slate-900/80 py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Item Color</label>
<input
value={extractedData.box_label || ''}
list="onboarding-boxes"
onChange={(e) => setExtractedData({...extractedData, box_label: e.target.value})}
value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''}
onChange={(e) => updateEditingItem({ Color: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-slate-200"
placeholder="e.g. Aqua"
/>
</div>
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Box / Container</label>
<input
value={extractedItems[editingIndex].box_label || ''}
list="onboarding-boxes"
onChange={(e) => updateEditingItem({ box_label: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-primary"
placeholder="e.g. Box 1"
/>
<datalist id="onboarding-boxes">
@@ -276,98 +461,150 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
</div>
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Description</label>
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Description</label>
<textarea
value={extractedData.description || ''}
onChange={(e) => setExtractedData({...extractedData, description: e.target.value})}
className="bg-transparent w-full text-sm leading-relaxed outline-none resize-none h-16 text-slate-300"
value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''}
onChange={(e) => updateEditingItem({ Description: e.target.value })}
className="bg-transparent w-full text-sm leading-tight outline-none resize-none h-8 text-slate-300 py-0"
placeholder="Product description..."
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Connector</label>
<div className="grid grid-cols-2 gap-3">
<div className="bg-slate-900/80 py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Connector</label>
<input
value={extractedData.connector || ''}
onChange={(e) => setExtractedData({...extractedData, connector: e.target.value})}
value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''}
onChange={(e) => updateEditingItem({ Connector: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-slate-200"
placeholder="e.g. LC/UPC"
/>
</div>
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Size / Length</label>
<div className="bg-slate-900/80 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Size / Length</label>
<input
value={extractedData.size || ''}
onChange={(e) => setExtractedData({...extractedData, size: e.target.value})}
className="bg-transparent w-full font-bold outline-none text-slate-200"
value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''}
onChange={(e) => updateEditingItem({ Size: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-slate-200"
placeholder="e.g. 5m / 10G"
/>
</div>
</div>
<div className="bg-slate-900 border-2 border-primary/20 p-5 rounded-[1.5rem] shadow-lg">
<div className="flex items-center gap-2 mb-2 text-primary">
<Sparkles size={14} />
<label className="text-xs font-black uppercase tracking-tighter">AI OCR Matching Key</label>
</div>
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">OCR Matching Key</label>
<textarea
value={extractedData.ocr_text || ''}
onChange={(e) => setExtractedData({...extractedData, ocr_text: e.target.value})}
className="bg-transparent w-full text-[10px] font-mono leading-tight outline-none resize-none h-12 text-slate-400"
value={extractedItems[editingIndex].OCR || extractedItems[editingIndex].ocr_text || ''}
onChange={(e) => updateEditingItem({ OCR: e.target.value })}
className="bg-transparent w-full text-sm font-bold leading-tight outline-none resize-none h-10 text-slate-200 py-0 scrollbar-hide"
placeholder="Heuristic string for local matching..."
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Part Number (P/N)</label>
<div className="flex items-center gap-2">
<Hash size={14} className="text-primary/60" />
<input
value={extractedData.part_number || ''}
onChange={(e) => setExtractedData({...extractedData, part_number: e.target.value})}
className="bg-transparent w-full font-mono text-sm outline-none text-slate-200"
placeholder="ID code..."
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight uppercase">Part Number</label>
<input
value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''}
onChange={(e) => updateEditingItem({ PartNr: e.target.value })}
className="bg-transparent w-full font-mono text-sm font-bold outline-none text-slate-200 uppercase"
placeholder="ID code..."
/>
</div>
<div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Initial Stock</label>
<div className="flex items-center gap-2">
<Layout size={14} className="text-amber-500/60" />
<input
type="number"
value={extractedData.quantity || 1}
onChange={(e) => setExtractedData({...extractedData, quantity: parseInt(e.target.value)})}
className="bg-transparent w-full font-black text-lg outline-none text-slate-200"
/>
</div>
<div className="bg-slate-900/80 py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-[10px] text-slate-500 font-bold mb-0.5 block group-focus-within:text-primary transition-colors uppercase tracking-tighter">Initial Qty</label>
<input
type="number"
value={extractedItems[editingIndex].quantity || 1}
onChange={(e) => updateEditingItem({ quantity: parseFloat(e.target.value) })}
className="bg-transparent w-full font-black text-base outline-none text-slate-200"
/>
</div>
</div>
<div className="bg-slate-900/30 p-4 rounded-[1.5rem] border border-slate-800/50">
<label className="text-xs text-slate-500 font-bold mb-1 block">System Metadata (S/N if found)</label>
<div className="text-[10px] text-slate-500 font-mono flex flex-wrap gap-2">
{extractedData.serial_number && <span>S/N: {extractedData.serial_number}</span>}
{extractedData.additional_data && <span>+ More Data</span>}
</div>
</div>
</div>
<div className="flex flex-col gap-3 shrink-0">
<button
onClick={confirmOnboarding}
onClick={() => confirmSingleItem(editingIndex)}
className="py-5 bg-primary text-white rounded-[1.8rem] font-black text-lg shadow-2xl shadow-primary/20 active:scale-95 transition-all hover:bg-blue-500"
>
Confirm to Catalog
Add to Catalog
</button>
</div>
</div>
) : (
<div className="flex-1 flex flex-col gap-6 overflow-hidden">
<div className="flex items-center justify-between">
<h3 className="text-sm font-black text-slate-400 uppercase tracking-widest">Discovery Dashboard</h3>
<span className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-bold">
{extractedItems.length} items found
</span>
</div>
<div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-hide">
{extractedItems.map((item, idx) => (
<div
key={idx}
className="bg-slate-900/50 border border-slate-800 rounded-3xl p-5 flex items-center justify-between group hover:border-primary/40 transition-all active:scale-[0.98]"
>
<div
className="flex-1 min-w-0 cursor-pointer"
onClick={() => setEditingIndex(idx)}
>
<div className="flex items-center gap-3 mb-2">
<div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
<Package size={16} />
</div>
<h4 className="font-black text-slate-100 truncate">{item.Item || item.name || "Unknown Item"}</h4>
</div>
<div className="flex gap-2">
<span className="text-[10px] font-black uppercase px-2 py-0.5 bg-slate-800 text-slate-400 rounded-md tracking-wider">
{item.Type || item.type || "Generic"}
</span>
<span className="text-[10px] font-black uppercase px-2 py-0.5 bg-slate-800 text-slate-500 rounded-md tracking-wider">
{item.PartNr || item.part_number || "No P/N"}
</span>
</div>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => {
const newItems = [...extractedItems];
newItems.splice(idx, 1);
setExtractedItems(newItems);
}}
className="p-3 text-slate-600 hover:text-red-500 transition-colors"
>
<X size={20} />
</button>
<button
onClick={() => setEditingIndex(idx)}
className="p-3 bg-primary/10 text-primary rounded-2xl hover:bg-primary/20 transition-all"
>
<ChevronDown size={20} className="-rotate-90" />
</button>
</div>
</div>
))}
</div>
<div className="flex flex-col gap-3 shrink-0">
<button
onClick={confirmAllItems}
className="py-5 bg-white text-slate-950 rounded-[1.8rem] font-black text-lg shadow-2xl shadow-white/10 active:scale-95 transition-all hover:bg-slate-200"
>
Add {extractedItems.length} items to catalog
</button>
<button
onClick={() => setExtractedData(null)}
className="py-3 text-xs text-slate-600 font-bold hover:text-slate-400"
onClick={() => {
setExtractedItems([]);
setImage(null);
}}
className="py-3 text-xs text-slate-600 font-bold hover:text-slate-400 tracking-widest uppercase"
>
Reset Extraction
Discard Discovery
</button>
</div>
</div>

2
frontend/lib/api.ts
View File

@@ -23,7 +23,7 @@ export const getNetworkConfig = async () => {
} catch (e) {
console.warn("Network config not found, using compiled defaults.");
// Defaults matching the initial reserve ports in case network.json is missing
return { SERVER_IP: 'localhost', BACKEND_PORT: 8906, BACKEND_SSL_PORT: 8908 };
return { SERVER_IP: 'localhost', BACKEND_PORT: 8916, BACKEND_SSL_PORT: 8918 };
}
};

2
frontend/public/network.json
View File

@@ -1,5 +1,5 @@
{
"SERVER_IP": "192.168.84.113",
"SERVER_IP": "192.168.84.140",
"BACKEND_PORT": 8916,
"BACKEND_SSL_PORT": 8918,
"FRONTEND_PORT": 8917,