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

Build [v1.14.24]

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-25 12:04:02 +03:00
parent 33c1555d8c
commit 3257a2cf48
50 changed files with 837 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
frontend/components/AIOnboarding.tsx
View File

@@ -61,18 +61,18 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div data-testid="ai-extraction-overlay" className="fixed inset-0 z-50 bg-background 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">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary/20 rounded-xl">
<div className="p-2 bg-primary/20">
<Sparkles className="text-primary w-5 h-5" />
</div>
<div>
<h2 className="text-lg font-normal">AI Discovery</h2>
<p className="text-xs text-muted font-normal">Powered by Gemini 2.0 Flash</p>
<p className="text-xs text-secondary font-normal">Powered by Gemini 2.0 Flash</p>
</div>
</div>
<button
onClick={() => { stopLiveCamera(); onCancel(); }}
aria-label="Close AI Discovery"
className="p-2 hover:bg-surface rounded-full cursor-pointer transition-colors focus:ring-2 focus:ring-blue-500 focus:outline-none"
className="p-2 hover:bg-surface cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none"
>
<X size={24} />
</button>
@@ -80,11 +80,11 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
{!image && !isLive ? (
<div className="flex-1 flex flex-col gap-3 md:gap-4 min-h-0">
<div data-testid="multi-item-toggle" className="flex bg-surface/70 p-1.5 rounded-2xl border border-slate-800/50 shrink-0">
<div data-testid="multi-item-toggle" className="flex bg-surface/70 p-1.5 border border-outline/30/50 shrink-0">
<button
onClick={() => setMode('item')}
aria-label="Select Discovery Mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-normal cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'item' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-secondary'}`}
className={`flex-1 flex items-center justify-center gap-2 py-3 font-normal cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'item' ? 'bg-primary text-foreground shadow-lg' : 'text-secondary hover:text-secondary'}`}
>
<Package size={18} />
<span className="text-xs">Discovery Mode</span>
@@ -92,21 +92,21 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button
onClick={() => setMode('box')}
aria-label="Select Box Lookup mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-normal cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'box' ? 'bg-primary text-white shadow-lg' : 'text-muted hover:text-secondary'}`}
className={`flex-1 flex items-center justify-center gap-2 py-3 font-normal cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none ${mode === 'box' ? 'bg-primary text-foreground shadow-lg' : 'text-secondary hover:text-secondary'}`}
>
<Layers size={18} />
<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-surface/30 overflow-hidden px-4">
<div className="w-20 h-20 bg-surface rounded-3xl flex items-center justify-center mb-6 shadow-inner text-primary">
<div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-outline/30 ] bg-surface/30 overflow-hidden px-4">
<div className="w-20 h-20 bg-surface flex items-center justify-center mb-6 shadow-inner text-primary">
<Camera size={32} />
</div>
<p className="text-secondary mb-2 text-center font-normal">
{mode === 'box' ? 'Deep Box Analysis' : 'Multi-Item Extraction'}
</p>
<p className="text-xs text-muted px-8 text-center leading-relaxed font-normal">
<p className="text-xs text-secondary px-8 text-center leading-relaxed font-normal">
{mode === 'box'
? 'Scan container labels to identify storage locations'
: 'Identify multiple technical items from a single photo or label'}
@@ -117,7 +117,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button
onClick={startLiveCamera}
aria-label="Start camera scan"
className="flex flex-col items-center justify-center gap-2 bg-primary text-white rounded-3xl font-normal shadow-2xl shadow-primary/20 cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-400 focus:outline-none"
className="flex flex-col items-center justify-center gap-2 bg-primary text-foreground font-normal shadow-2xl shadow-primary/20 cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-primary focus:outline-none"
>
<Camera size={24} />
<span className="text-sm">Scan Camera</span>
@@ -126,7 +126,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={() => fileInputRef.current?.click()}
data-testid="manual-entry-tab"
aria-label="Upload photo from device"
className="flex flex-col items-center justify-center gap-2 bg-surface text-secondary border border-slate-800 rounded-3xl font-normal cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none"
className="flex flex-col items-center justify-center gap-2 bg-surface text-secondary border border-outline/30 font-normal cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-primary focus:outline-none"
>
<ImageIcon size={24} />
<span className="text-sm">Upload Photo</span>
@@ -138,7 +138,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
) : isLive ? (
// LIVE VIEWFINDER MODE
<div data-testid="wizard-step wizard-step-capture" className="flex-1 flex flex-col gap-3 md:gap-4 min-h-0 overflow-hidden">
<div data-testid="capture-camera" className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-black">
<div data-testid="capture-camera" className="relative flex-1 min-h-0 ] overflow-hidden border-4 border-outline/30 shadow-2xl bg-black">
<video
ref={videoRef}
autoPlay
@@ -149,18 +149,18 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<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">
<div className="w-full h-full border border-primary/30 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 className="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-primary" />
<div className="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-primary" />
<div className="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-primary" />
<div className="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-primary" />
</div>
</div>
<div className="absolute top-6 left-1/2 -translate-x-1/2 bg-black/60 px-4 py-1.5 rounded-full border border-white/10">
<span className="text-xs font-normal text-white flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />
<div className="absolute top-6 left-1/2 -translate-x-1/2 bg-black/60 px-4 py-1.5 border border-white/10">
<span className="text-xs font-normal text-foreground flex items-center gap-2">
<div className="w-1.5 h-1.5 bg-error animate-pulse" />
Live Viewfinder
</span>
</div>
@@ -170,7 +170,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button
onClick={stopLiveCamera}
aria-label="Cancel camera scan"
className="px-6 py-4 bg-surface border border-slate-800 text-secondary rounded-2xl font-normal cursor-pointer transition-all active:scale-95 focus:ring-2 focus:ring-blue-500 focus:outline-none"
className="px-6 py-4 bg-surface border border-outline/30 text-secondary font-normal cursor-pointer transition-all active:scale-95 focus:ring-2 focus:ring-primary focus:outline-none"
>
Cancel
</button>
@@ -178,10 +178,10 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={captureSnapshot}
data-testid="capture-button"
aria-label="Capture image from camera"
className="flex-1 py-4 bg-white text-slate-950 rounded-2xl font-normal text-lg shadow-xl shadow-white/10 cursor-pointer flex items-center justify-center gap-3 active:scale-95 hover:bg-slate-200 transition-all focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-950 focus:ring-white focus:outline-none"
className="flex-1 py-4 bg-white text-background font-normal text-lg shadow-xl shadow-white/10 cursor-pointer flex items-center justify-center gap-3 active:scale-95 hover:bg-foreground transition-all focus:ring-2 focus:ring-offset-2 focus:ring-offset-background focus:ring-white focus:outline-none"
>
<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-background" />
<div className="w-5 h-5 border-2 border-background flex items-center justify-center">
<div className="w-2.5 h-2.5 bg-background" />
</div>
Capture Image
</button>
@@ -189,7 +189,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
) : extractedItems.length === 0 ? (
<div data-testid="wizard-step" className="flex-1 flex flex-col gap-3 md:gap-4 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-surface">
<div className="relative flex-1 min-h-0 ] overflow-hidden border-4 border-outline/30 shadow-2xl bg-surface">
<img src={image || undefined} className="w-full h-full object-contain" alt="Captured label" />
<div className="absolute inset-0 bg-black/30 pointer-events-none" />
@@ -199,7 +199,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<RefreshCw className="w-12 h-12 text-primary animate-spin" />
<Sparkles className="absolute -top-2 -right-2 text-amber-400 w-6 h-6 animate-pulse" />
</div>
<p className="text-white font-normal tracking-tight text-sm">Gemini is processing...</p>
<p className="text-foreground font-normal tracking-tight text-sm">Gemini is processing...</p>
</div>
)}
</div>
@@ -210,7 +210,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
disabled={uploading}
data-testid="retake-button"
aria-label="Retake photo"
className="px-6 py-4 bg-surface border border-slate-800 text-secondary rounded-2xl font-normal cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:outline-none"
className="px-6 py-4 bg-surface border border-outline/30 text-secondary font-normal cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none"
>
Retake
</button>
@@ -218,7 +218,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={processImage}
disabled={uploading}
aria-label="Extract data from image"
className="flex-1 py-4 bg-primary text-white rounded-2xl font-normal text-lg shadow-xl shadow-primary/30 cursor-pointer flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-500 transition-all focus:ring-2 focus:ring-blue-400 focus:outline-none"
className="flex-1 py-4 bg-primary text-foreground font-normal text-lg shadow-xl shadow-primary/30 cursor-pointer flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary transition-all focus:ring-2 focus:ring-primary focus:outline-none"
>
{uploading ? "Analyzing..." : "Extract Data"}
{!uploading && <Check size={20} />}
@@ -228,11 +228,11 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
) : editingIndex !== null ? (
<div data-testid="extraction-results-form" className="flex-1 flex flex-col gap-3 md:gap-4 overflow-hidden">
<div data-testid="ai-onboarding-wizard" className="flex items-center justify-between">
<span className="text-xs text-muted font-normal">Item Details (<span data-testid="current-step">{editingIndex + 1}</span>/<span data-testid="total-steps">{extractedItems.length}</span>)</span>
<span className="text-xs text-secondary font-normal">Item Details (<span data-testid="current-step">{editingIndex + 1}</span>/<span data-testid="total-steps">{extractedItems.length}</span>)</span>
<button
onClick={() => setEditingIndex(null)}
aria-label="Back to item list"
className="text-xs text-primary font-normal px-3 py-1 bg-primary/10 rounded-full cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none"
className="text-xs text-primary font-normal px-3 py-1 bg-primary/10 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none"
>
Back to List
</button>
@@ -240,7 +240,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
{/* Image Preview Section */}
{image && (
<div className="bg-surface/70 border border-slate-800/50 rounded-2xl overflow-hidden">
<div className="bg-surface/70 border border-outline/30/50 overflow-hidden">
<div className="relative h-40 md:h-48 bg-black/20 flex items-center justify-center">
<img
src={image}
@@ -249,16 +249,16 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
/>
</div>
<div className="p-3 space-y-2">
<p className="text-xs text-muted font-normal">Extracted Photo</p>
<p className="text-xs text-secondary font-normal">Extracted Photo</p>
<div className="flex items-center gap-2">
<input
type="checkbox"
id="save-photo-check"
checked={!extractedItems[editingIndex]._skipPhoto}
onChange={(e) => updateEditingItem({ _skipPhoto: !e.target.checked })}
className="w-4 h-4 rounded border-slate-600 accent-primary cursor-pointer"
className="w-4 h-4 border-outline-variant accent-primary cursor-pointer"
/>
<label htmlFor="save-photo-check" className="text-xs text-slate-300 font-normal cursor-pointer">
<label htmlFor="save-photo-check" className="text-xs text-foreground font-normal cursor-pointer">
Save this photo with the item
</label>
</div>
@@ -267,19 +267,19 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
)}
<div className="flex-1 overflow-y-auto space-y-2 pr-1 scrollbar-hide">
<div data-testid="extracted-name" className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
<div data-testid="extracted-name" className="bg-surface py-2.5 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
<textarea
value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''}
onChange={(e) => updateEditingItem({ Item: e.target.value })}
className="bg-transparent w-full text-lg font-normal outline-none text-white placeholder:text-muted resize-none h-8 leading-tight selection:bg-primary/30 py-0"
className="bg-transparent w-full text-lg font-normal outline-none text-foreground placeholder:text-secondary 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 data-testid="extracted-category" className="bg-surface py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Category</label>
<div data-testid="extracted-category" className="bg-surface py-3 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Category</label>
<input
type="text"
list="onboarding-categories"
@@ -294,8 +294,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
))}
</datalist>
</div>
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Type</label>
<div className="bg-surface py-2.5 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Type</label>
<input
value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''}
list="onboarding-types"
@@ -310,8 +310,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="grid grid-cols-2 gap-3">
<div className="bg-surface py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Color</label>
<div className="bg-surface py-3 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Color</label>
<input
value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''}
onChange={(e) => updateEditingItem({ Color: e.target.value })}
@@ -319,8 +319,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
placeholder="e.g. Aqua"
/>
</div>
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Box / Container</label>
<div className="bg-surface py-2.5 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Box / Container</label>
<input
value={extractedItems[editingIndex].box_label || ''}
list="onboarding-boxes"
@@ -334,8 +334,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
</div>
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Description</label>
<div className="bg-surface py-2.5 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Description</label>
<textarea
value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''}
onChange={(e) => updateEditingItem({ Description: e.target.value })}
@@ -345,8 +345,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="grid grid-cols-2 gap-3">
<div className="bg-surface py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Connector</label>
<div className="bg-surface py-3 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Connector</label>
<input
value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''}
onChange={(e) => updateEditingItem({ Connector: e.target.value })}
@@ -354,8 +354,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
placeholder="e.g. LC/UPC"
/>
</div>
<div className="bg-surface px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Size / Length</label>
<div className="bg-surface px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Size / Length</label>
<input
value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''}
onChange={(e) => updateEditingItem({ Size: e.target.value })}
@@ -365,8 +365,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
</div>
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">OCR Matching Key</label>
<div className="bg-surface py-2.5 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">OCR Matching Key</label>
<textarea
value={extractedItems[editingIndex].OCR || extractedItems[editingIndex].ocr_text || ''}
onChange={(e) => updateEditingItem({ OCR: e.target.value })}
@@ -376,8 +376,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</div>
<div className="grid grid-cols-2 gap-2">
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Part Number</label>
<div className="bg-surface py-2.5 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Part Number</label>
<input
value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''}
onChange={(e) => updateEditingItem({ PartNr: e.target.value })}
@@ -385,8 +385,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
placeholder="ID code..."
/>
</div>
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tighter">Initial Qty</label>
<div className="bg-surface py-2.5 px-4 ] border border-outline/30 focus-within:border-primary/50 transition-colors group">
<label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tighter">Initial Qty</label>
<input
type="number"
value={extractedItems[editingIndex].quantity || 1}
@@ -402,7 +402,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={() => confirmSingleItem(editingIndex)}
data-testid="confirm-extraction"
aria-label="Add item to catalog"
className="py-5 bg-primary text-white rounded-[1.8rem] font-normal text-lg shadow-2xl shadow-primary/20 cursor-pointer active:scale-95 transition-all hover:bg-blue-500 focus:ring-2 focus:ring-blue-400 focus:outline-none"
className="py-5 bg-primary text-foreground ] font-normal text-lg shadow-2xl shadow-primary/20 cursor-pointer active:scale-95 transition-all hover:bg-primary focus:ring-2 focus:ring-primary focus:outline-none"
>
Add to Catalog
</button>
@@ -412,7 +412,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div data-testid="manual-entry-form" className="flex-1 flex flex-col gap-6 overflow-hidden">
<div className="flex items-center justify-between">
<h3 className="text-sm font-normal text-secondary">Discovery Dashboard</h3>
<span data-testid="wizard-progress" className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-normal">
<span data-testid="wizard-progress" className="text-xs bg-primary/20 text-primary px-3 py-1 font-normal">
{extractedItems.length} items found
</span>
</div>
@@ -422,7 +422,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div
key={idx}
data-testid="extraction-item-row"
className="bg-surface/70 border border-slate-800 rounded-3xl p-5 flex items-center justify-between group hover:border-primary/40 transition-all active:scale-[0.98] focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-primary/20"
className="bg-surface/70 border border-outline/30 p-5 flex items-center justify-between group hover:border-primary/40 transition-all active:scale-[0.98] focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-primary/20"
>
<div
className="flex-1 min-w-0 cursor-pointer"
@@ -438,16 +438,16 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
aria-label={`Edit item: ${item.Item || item.name}`}
>
<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">
<div className="w-8 h-8 bg-primary/10 flex items-center justify-center text-primary">
<Package size={16} />
</div>
<h4 className="font-normal text-secondary truncate">{item.Item || item.name || "Unknown Item"}</h4>
</div>
<div className="flex gap-2">
<span className="text-xs font-normal px-2 py-0.5 bg-slate-800 text-secondary rounded-md">
<span className="text-xs font-normal px-2 py-0.5 bg-surface-container text-secondary">
{item.Type || item.type || "Generic"}
</span>
<span className="text-xs font-normal px-2 py-0.5 bg-slate-800 text-muted rounded-md">
<span className="text-xs font-normal px-2 py-0.5 bg-surface-container text-secondary">
{item.PartNr || item.part_number || "No P/N"}
</span>
</div>
@@ -461,14 +461,14 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
setExtractedItems(newItems);
}}
aria-label={`Delete item: ${item.Item || item.name}`}
className="p-3 text-secondary hover:text-red-500 cursor-pointer transition-colors focus:ring-2 focus:ring-red-500 focus:outline-none rounded-lg"
className="p-3 text-secondary hover:text-error cursor-pointer transition-colors focus:ring-2 focus:ring-error focus:outline-none"
>
<X size={20} />
</button>
<button
onClick={() => setEditingIndex(idx)}
aria-label={`Edit item: ${item.Item || item.name}`}
className="p-3 bg-primary/10 text-primary rounded-2xl cursor-pointer hover:bg-primary/20 transition-all focus:ring-2 focus:ring-primary focus:outline-none"
className="p-3 bg-primary/10 text-primary cursor-pointer hover:bg-primary/20 transition-all focus:ring-2 focus:ring-primary focus:outline-none"
>
<ChevronDown size={20} className="-rotate-90" />
</button>
@@ -481,7 +481,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button
onClick={confirmAllItems}
aria-label={`Add ${extractedItems.length} items to catalog`}
className="py-5 bg-white text-slate-950 rounded-[1.8rem] font-normal text-lg shadow-2xl shadow-white/10 cursor-pointer active:scale-95 transition-all hover:bg-slate-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-950 focus:ring-white focus:outline-none"
className="py-5 bg-white text-background ] font-normal text-lg shadow-2xl shadow-white/10 cursor-pointer active:scale-95 transition-all hover:bg-foreground focus:ring-2 focus:ring-offset-2 focus:ring-offset-background focus:ring-white focus:outline-none"
>
Add {extractedItems.length} items to catalog
</button>
@@ -492,7 +492,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
}}
data-testid="reject-extraction"
aria-label="Discard discovery session"
className="py-3 text-xs text-secondary font-normal cursor-pointer hover:text-secondary transition-colors focus:ring-2 focus:ring-slate-500 focus:outline-none rounded px-2"
className="py-3 text-xs text-secondary font-normal cursor-pointer hover:text-secondary transition-colors focus:ring-2 focus:ring-secondary focus:outline-none px-2"
>
Discard Discovery
</button>