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

style: ui readability refactor v1.2.2 (removed uppercase, tracking, increased font sizes)

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-11 11:22:40 +03:00
parent 99b70a9de8
commit 4136d49936
25 changed files with 2552 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/components/AIOnboarding.tsx
View File

@@ -81,7 +81,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
</div>
<div>
<h2 className="text-lg font-bold">AI Discovery</h2>
<p className="text-[10px] text-slate-500 uppercase font-black tracking-widest">Powered by Gemini 1.5</p>
<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">
@@ -96,7 +96,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
<Camera size={32} className="text-slate-500" />
</div>
<p className="text-slate-300 mb-2 text-center font-bold">Label Insight Mode</p>
<p className="text-[11px] text-slate-500 px-8 text-center uppercase tracking-widest leading-relaxed">
<p className="text-xs text-slate-500 px-8 text-center leading-relaxed font-bold">
Scan or upload a sharp photo of the item specifications
</p>
</div>
@@ -133,7 +133,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
<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-black tracking-tight uppercase text-xs">Gemini is processing...</p>
<p className="text-white font-black tracking-tight text-sm">Gemini is processing...</p>
</div>
)}
</div>
@@ -151,7 +151,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
disabled={uploading}
className="flex-1 py-4 bg-primary text-white rounded-2xl font-black text-lg shadow-xl shadow-primary/30 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50 hover:bg-blue-500"
>
{uploading ? "ANALYZING..." : "EXTRACT DATA"}
{uploading ? "Analyzing..." : "Extract Data"}
{!uploading && <Check size={20} />}
</button>
</div>
@@ -159,13 +159,13 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
) : (
<div className="flex-1 flex flex-col gap-6 overflow-hidden">
<div className="flex items-center justify-between">
<span className="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em]">Validation Mask</span>
<span className="text-[10px] 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">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>
</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-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Name</label>
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Name</label>
<textarea
value={extractedData.name || ''}
onChange={(e) => setExtractedData({...extractedData, name: e.target.value})}
@@ -176,7 +176,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
<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-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Category Group</label>
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Category Group</label>
<select
value={extractedData.category || ''}
onChange={(e) => setExtractedData({...extractedData, category: e.target.value})}
@@ -189,7 +189,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
</select>
</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-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Type</label>
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Type</label>
<input
value={extractedData.type || ''}
onChange={(e) => setExtractedData({...extractedData, type: e.target.value})}
@@ -201,7 +201,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
<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-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Color</label>
<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
@@ -215,7 +215,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
</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-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Technical Specifications</label>
<label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Technical Specifications</label>
<textarea
value={extractedData.specs || ''}
onChange={(e) => setExtractedData({...extractedData, specs: e.target.value})}
@@ -226,7 +226,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
<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-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Part Number (P/N)</label>
<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
@@ -238,7 +238,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
</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-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Initial Stock</label>
<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
@@ -252,7 +252,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
</div>
<div className="bg-slate-900/30 p-4 rounded-[1.5rem] border border-slate-800/50">
<label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block">System Metadata (S/N if found)</label>
<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>}
@@ -265,11 +265,11 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
onClick={confirmOnboarding}
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
Confirm to Catalog
</button>
<button
onClick={() => setExtractedData(null)}
className="py-3 text-[10px] text-slate-600 font-bold uppercase tracking-widest hover:text-slate-400"
className="py-3 text-xs text-slate-600 font-bold hover:text-slate-400"
>
Reset Extraction
</button>