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

refactor: remove all bold font weights from UI/UX (291 replacements)

Browse Source 
Replace font-bold, font-black, and font-semibold with font-normal throughout:
- 26 component files
- 1 CSS utility file (globals.css)
- 291 total occurrences

Text hierarchy now maintained through font-size differences only.
All tests passing (291/291).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Daniel Bedeleanu
2026-04-19 18:28:23 +03:00
parent b0a1582aa0
commit c0232bb2f1
31 changed files with 299 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.claude/settings.local.json
View File

@@ -68,7 +68,11 @@
"Bash(sed -i -e 's/\\\\btext-slate-100\\\\b/text-secondary/g' -e s/placeholder:text-slate-700/placeholder:text-muted/g -e s/hover:text-slate-300/hover:text-secondary/g app/page.tsx)", "Bash(sed -i -e 's/\\\\btext-slate-100\\\\b/text-secondary/g' -e s/placeholder:text-slate-700/placeholder:text-muted/g -e s/hover:text-slate-300/hover:text-secondary/g app/page.tsx)",
"Bash(sed -i 's/\\\\btext-slate-300\\\\b/text-secondary/g' app/page.tsx)", "Bash(sed -i 's/\\\\btext-slate-300\\\\b/text-secondary/g' app/page.tsx)",
"Bash(npx tsc *)", "Bash(npx tsc *)",
"Bash(python -m pytest backend/tests/ -q)" "Bash(python -m pytest backend/tests/ -q)",
"Bash(git pull *)",
"Bash(git rm *)",
"Bash(git merge *)",
"Bash(git tag *)"
] ]
} }
} }

BIN
_images.tests/1/Untitled 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 354 KiB

BIN
_images.tests/1/Untitled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 KiB

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

@@ -31,8 +31,8 @@ export default function AdminPage() {
<Shield size={28} className="md:w-8 md:h-8" /> <Shield size={28} className="md:w-8 md:h-8" />
</div> </div>
<div> <div>
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Admin Control</h1> <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">Admin Control</h1>
<p className="text-[10px] md:text-xs text-muted font-bold tracking-tight mt-0.5">System Configuration & Security</p> <p className="text-[10px] md:text-xs text-muted font-normal tracking-tight mt-0.5">System Configuration & Security</p>
</div> </div>
<button <button
onClick={admin.handleLogout} onClick={admin.handleLogout}

4
frontend/app/globals.css
View File

@@ -57,11 +57,11 @@ h1, h2, h3, h4, h5, h6 {
} }
.card-title { .card-title {
@apply text-base font-black text-slate-100 tracking-tight; @apply text-base font-normal text-slate-100 tracking-tight;
} }
.card-subtitle { .card-subtitle {
@apply text-xs font-bold text-slate-500 tracking-[0.08em] mt-0.5; @apply text-xs font-normal text-slate-500 tracking-[0.08em] mt-0.5;
} }
} }

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

@@ -257,8 +257,8 @@ export default function InventoryPage() {
<Package size={28} className="md:w-8 md:h-8" /> <Package size={28} className="md:w-8 md:h-8" />
</div> </div>
<div> <div>
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Inventory Catalog</h1> <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">Inventory Catalog</h1>
<p className="text-xs md:text-sm text-secondary font-bold mt-1 tracking-widest">Enterprise Stock Overview</p> <p className="text-xs md:text-sm text-secondary font-normal mt-1 tracking-widest">Enterprise Stock Overview</p>
</div> </div>
<button <button
onClick={() => setShowBoxManager(true)} onClick={() => setShowBoxManager(true)}
@@ -319,10 +319,10 @@ export default function InventoryPage() {
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/80 animate-in fade-in duration-200"> <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/80 animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-surface border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[2.5rem] shadow-2xl p-5 sm:p-8 overflow-hidden animate-in slide-in-from-bottom-10 duration-300"> <div className="w-full max-w-lg bg-surface border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[2.5rem] shadow-2xl p-5 sm:p-8 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black tracking-tight flex items-center gap-2"> <h3 className="text-xl font-normal tracking-tight flex items-center gap-2">
{isEditing ? "Edit Item" : selectedItem.name} {isEditing ? "Edit Item" : selectedItem.name}
{!isEditing && ( {!isEditing && (
<span className="text-xs bg-slate-800 text-secondary px-3 py-1 rounded-lg font-bold tracking-tight"> <span className="text-xs bg-slate-800 text-secondary px-3 py-1 rounded-lg font-normal tracking-tight">
In Stock: {selectedItem.quantity} In Stock: {selectedItem.quantity}
</span> </span>
)} )}
@@ -363,32 +363,32 @@ export default function InventoryPage() {
{isEditing ? ( {isEditing ? (
<div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide"> <div className="max-h-[60vh] overflow-y-auto pr-2 space-y-4 mb-6 scrollbar-hide">
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Name</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Item Name</label>
<input <input
type="text" type="text"
value={editedItem.name || ''} value={editedItem.name || ''}
onChange={e => setEditedItem({...editedItem, name: e.target.value})} onChange={e => setEditedItem({...editedItem, name: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary placeholder:text-muted" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary placeholder:text-muted"
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Part Number</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Part Number</label>
<input <input
type="text" type="text"
value={editedItem.part_number || ''} value={editedItem.part_number || ''}
onChange={e => setEditedItem({...editedItem, part_number: e.target.value})} onChange={e => setEditedItem({...editedItem, part_number: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary placeholder:text-muted" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary placeholder:text-muted"
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Category</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Category</label>
<input <input
type="text" type="text"
list="existing-categories" list="existing-categories"
value={editedItem.category || ''} value={editedItem.category || ''}
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })} onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary placeholder:text-muted" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary placeholder:text-muted"
placeholder="e.g. storage" placeholder="e.g. storage"
/> />
<datalist id="existing-categories"> <datalist id="existing-categories">
@@ -398,54 +398,54 @@ export default function InventoryPage() {
</datalist> </datalist>
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Type</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Item Type</label>
<input <input
type="text" type="text"
list="existing-types" list="existing-types"
value={editedItem.type || ''} value={editedItem.type || ''}
onChange={e => setEditedItem({...editedItem, type: e.target.value})} onChange={e => setEditedItem({...editedItem, type: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary"
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Connector</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Connector</label>
<input <input
type="text" type="text"
value={editedItem.connector || ''} value={editedItem.connector || ''}
onChange={e => setEditedItem({...editedItem, connector: e.target.value})} onChange={e => setEditedItem({...editedItem, connector: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary"
placeholder="e.g. LC/UPC" placeholder="e.g. LC/UPC"
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Size / Length</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Size / Length</label>
<input <input
type="text" type="text"
value={editedItem.size || ''} value={editedItem.size || ''}
onChange={e => setEditedItem({...editedItem, size: e.target.value})} onChange={e => setEditedItem({...editedItem, size: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary"
placeholder="e.g. 1.6TB" placeholder="e.g. 1.6TB"
/> />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Color</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Item Color</label>
<input <input
type="text" type="text"
value={editedItem.color || ''} value={editedItem.color || ''}
onChange={e => setEditedItem({...editedItem, color: e.target.value})} onChange={e => setEditedItem({...editedItem, color: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary"
placeholder="e.g. Blue" placeholder="e.g. Blue"
/> />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Box / Container Label</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Box / Container Label</label>
<div className="relative flex items-center"> <div className="relative flex items-center">
<input <input
type="text" type="text"
list="existing-boxes" list="existing-boxes"
value={editedItem.box_label || ''} value={editedItem.box_label || ''}
onChange={e => setEditedItem({...editedItem, box_label: e.target.value})} onChange={e => setEditedItem({...editedItem, box_label: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm font-bold outline-none text-secondary placeholder:text-muted focus:border-primary transition-colors" className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm font-normal outline-none text-secondary placeholder:text-muted focus:border-primary transition-colors"
placeholder="e.g. Box 5" placeholder="e.g. Box 5"
/> />
<button <button
@@ -466,19 +466,19 @@ export default function InventoryPage() {
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Specs / Comments</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Specs / Comments</label>
<textarea <textarea
value={editedItem.specs || ''} value={editedItem.specs || ''}
onChange={e => setEditedItem({...editedItem, specs: e.target.value})} onChange={e => setEditedItem({...editedItem, specs: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary h-20 resize-none" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary h-20 resize-none"
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">OCR Matching Key</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">OCR Matching Key</label>
<textarea <textarea
value={editedItem.ocr_text || ''} value={editedItem.ocr_text || ''}
onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})} onChange={e => setEditedItem({...editedItem, ocr_text: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-primary/80 h-16 resize-none" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-primary/80 h-16 resize-none"
/> />
</div> </div>
</div> </div>
@@ -499,7 +499,7 @@ export default function InventoryPage() {
)} )}
> >
<t.icon size={20} className={adjustType === t.id ? t.color : ""} /> <t.icon size={20} className={adjustType === t.id ? t.color : ""} />
<span className="text-sm font-bold mt-1.5 tracking-tight">{t.label}</span> <span className="text-sm font-normal mt-1.5 tracking-tight">{t.label}</span>
</button> </button>
))} ))}
</div> </div>
@@ -512,7 +512,7 @@ export default function InventoryPage() {
> >
<Minus size={24} /> <Minus size={24} />
</button> </button>
<span className="text-5xl font-black tabular-nums">{adjustQty}</span> <span className="text-5xl font-normal tabular-nums">{adjustQty}</span>
<button <button
onClick={() => setAdjustQty(adjustQty + 1)} onClick={() => setAdjustQty(adjustQty + 1)}
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors" className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center hover:bg-slate-800 transition-colors"
@@ -542,7 +542,7 @@ export default function InventoryPage() {
<button <button
onClick={isEditing ? handleUpdateItem : handleAdjustStock} onClick={isEditing ? handleUpdateItem : handleAdjustStock}
className={cn( className={cn(
"w-full py-4 sm:py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-xl", "w-full py-4 sm:py-5 rounded-[1.8rem] font-normal text-lg transition-all active:scale-[0.98] shadow-xl",
isEditing ? "bg-white text-slate-950 shadow-white/10" : ( isEditing ? "bg-white text-slate-950 shadow-white/10" : (
adjustType === 'ADD' ? "bg-primary text-white shadow-primary/20" : adjustType === 'ADD' ? "bg-primary text-white shadow-primary/20" :
adjustType === 'REMOVE' ? "bg-amber-600 text-white shadow-amber-600/20" : adjustType === 'REMOVE' ? "bg-amber-600 text-white shadow-amber-600/20" :
@@ -565,7 +565,7 @@ export default function InventoryPage() {
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/90 animate-in fade-in duration-300"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/90 animate-in fade-in duration-300">
<div className="bg-surface border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-6 animate-in zoom-in-95 duration-200"> <div className="bg-surface border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-xl font-black">Edit Category</h2> <h2 className="text-xl font-normal">Edit Category</h2>
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-secondary"> <button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-secondary">
<X size={20} /> <X size={20} />
</button> </button>
@@ -573,7 +573,7 @@ export default function InventoryPage() {
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Name</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Name</label>
<input <input
type="text" type="text"
value={catEditedName} value={catEditedName}
@@ -582,7 +582,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Description</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Description</label>
<textarea <textarea
value={catEditedDesc} value={catEditedDesc}
onChange={e => setCatEditedDesc(e.target.value)} onChange={e => setCatEditedDesc(e.target.value)}
@@ -593,7 +593,7 @@ export default function InventoryPage() {
<button <button
onClick={handleUpdateCategory} onClick={handleUpdateCategory}
className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all" className="w-full bg-primary text-white font-normal py-4 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
> >
Update Category Update Category
</button> </button>
@@ -616,11 +616,11 @@ export default function InventoryPage() {
<div className="p-8 pb-4 flex flex-col gap-6 shrink-0 bg-surface/70"> <div className="p-8 pb-4 flex flex-col gap-6 shrink-0 bg-surface/70">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h3 className="text-2xl font-black tracking-tight flex items-center gap-3"> <h3 className="text-2xl font-normal tracking-tight flex items-center gap-3">
<Package className="text-primary" size={28} /> <Package className="text-primary" size={28} />
Box Inventory Box Inventory
</h3> </h3>
<p className="text-sm text-muted font-bold mt-1">Manage physical box labels & printing</p> <p className="text-sm text-muted font-normal mt-1">Manage physical box labels & printing</p>
</div> </div>
<button onClick={() => { setShowBoxManager(false); setBoxSearchQuery(''); }} className="p-3 hover:bg-slate-800 rounded-full transition-colors text-secondary"> <button onClick={() => { setShowBoxManager(false); setBoxSearchQuery(''); }} className="p-3 hover:bg-slate-800 rounded-full transition-colors text-secondary">
<X size={24} /> <X size={24} />
@@ -651,7 +651,7 @@ export default function InventoryPage() {
{getFilteredBoxes(existingBoxes).length === 0 ? ( {getFilteredBoxes(existingBoxes).length === 0 ? (
<div className="py-20 text-center space-y-4 opacity-40"> <div className="py-20 text-center space-y-4 opacity-40">
<Package size={48} className="mx-auto" /> <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="font-normal">{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> <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>
) : ( ) : (
@@ -661,19 +661,19 @@ export default function InventoryPage() {
return ( return (
<div key={box} className="bg-background/50 border border-slate-800/60 p-5 rounded-3xl flex flex-col gap-4 group hover:border-primary/40 transition-all"> <div key={box} className="bg-background/50 border border-slate-800/60 p-5 rounded-3xl flex flex-col gap-4 group hover:border-primary/40 transition-all">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h4 className="text-lg font-black text-white truncate">{box}</h4> <h4 className="text-lg font-normal text-white truncate">{box}</h4>
<p className="text-xs text-muted font-bold mt-0.5">{itemCount} items linked</p> <p className="text-xs text-muted font-normal mt-0.5">{itemCount} items linked</p>
</div> </div>
<div className="flex gap-2 shrink-0"> <div className="flex gap-2 shrink-0">
<button <button
onClick={() => setSelectedBoxLabel(box)} onClick={() => setSelectedBoxLabel(box)}
className="flex-1 py-3 bg-primary text-white text-xs font-black rounded-xl flex items-center justify-center gap-2 hover:bg-blue-500 transition-colors shadow-lg shadow-primary/10 active:scale-95" className="flex-1 py-3 bg-primary text-white text-xs font-normal 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 <Printer size={14} /> Print Label
</button> </button>
<button <button
onClick={() => { setSearchQuery(box); setShowBoxManager(false); setBoxSearchQuery(''); }} onClick={() => { setSearchQuery(box); setShowBoxManager(false); setBoxSearchQuery(''); }}
className="px-4 py-3 bg-surface border border-slate-800 text-secondary text-xs font-bold rounded-xl hover:bg-slate-800 active:scale-95" className="px-4 py-3 bg-surface border border-slate-800 text-secondary text-xs font-normal rounded-xl hover:bg-slate-800 active:scale-95"
> >
View View
</button> </button>
@@ -687,7 +687,7 @@ export default function InventoryPage() {
<div className="p-6 py-4 bg-background/50 border-t border-slate-800 text-center flex items-center justify-center gap-2"> <div className="p-6 py-4 bg-background/50 border-t border-slate-800 text-center flex items-center justify-center gap-2">
<div className="w-1 h-1 rounded-full bg-primary animate-pulse" /> <div className="w-1 h-1 rounded-full bg-primary animate-pulse" />
<p className="text-xs text-secondary font-bold font-mono">TFM aInventory • Box management mode</p> <p className="text-xs text-secondary font-normal font-mono">TFM aInventory • Box management mode</p>
</div> </div>
</div> </div>
</div> </div>
@@ -699,13 +699,13 @@ export default function InventoryPage() {
<div className="w-full max-w-md flex flex-col gap-6"> <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"> <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"> <h2 className="text-2xl font-normal text-black tracking-tighter text-center">
{selectedBoxLabel} {selectedBoxLabel}
</h2> </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="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"> <div className="flex flex-col items-center gap-1">
<p className="text-xs font-black tracking-[0.2em] text-black/50">TFM INVENTORY BOX LABEL</p> <p className="text-xs font-normal tracking-[0.2em] text-black/50">TFM INVENTORY BOX LABEL</p>
<img src={getQRCodeURL(selectedBoxLabel)} className="w-24 h-24" alt="QR Code" /> <img src={getQRCodeURL(selectedBoxLabel)} className="w-24 h-24" alt="QR Code" />
</div> </div>
</div> </div>
@@ -713,7 +713,7 @@ export default function InventoryPage() {
<div className="flex flex-col gap-3 no-print"> <div className="flex flex-col gap-3 no-print">
<button <button
onClick={() => window.print()} 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" className="w-full py-5 bg-primary text-white rounded-[2rem] font-normal 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 <Printer size={20} /> Print to Dymo/Brother
</button> </button>
@@ -742,14 +742,14 @@ export default function InventoryPage() {
img.src = "data:image/svg+xml;base64," + btoa(svgData); img.src = "data:image/svg+xml;base64," + btoa(svgData);
} }
}} }}
className="w-full py-4 bg-surface border border-slate-800 text-white rounded-[2rem] font-black text-sm flex items-center justify-center gap-2 active:scale-95 transition-all" className="w-full py-4 bg-surface border border-slate-800 text-white rounded-[2rem] font-normal text-sm flex items-center justify-center gap-2 active:scale-95 transition-all"
> >
<Download size={16} /> Save for Mobile App <Download size={16} /> Save for Mobile App
</button> </button>
<button <button
onClick={() => setSelectedBoxLabel(null)} onClick={() => setSelectedBoxLabel(null)}
className="w-full py-4 text-muted font-bold text-xs" className="w-full py-4 text-muted font-normal text-xs"
> >
Cancel Cancel
</button> </button>

32
frontend/app/login/page.tsx
View File

@@ -87,7 +87,7 @@ export default function LoginPage() {
<div className="w-16 h-16 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto mb-4 border border-primary/20"> <div className="w-16 h-16 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto mb-4 border border-primary/20">
<User size={32} /> <User size={32} />
</div> </div>
<h2 className="text-2xl font-black text-white tracking-tight">Identity Check</h2> <h2 className="text-2xl font-normal text-white tracking-tight">Identity Check</h2>
<p className="text-muted text-sm">Select operator profile or use direct login</p> <p className="text-muted text-sm">Select operator profile or use direct login</p>
</div> </div>
@@ -108,8 +108,8 @@ export default function LoginPage() {
{user.role === 'admin' ? <Shield size={14} /> : <User size={14} />} {user.role === 'admin' ? <Shield size={14} /> : <User size={14} />}
</div> </div>
<div> <div>
<p className="text-white font-black text-sm">{user.username}</p> <p className="text-white font-normal text-sm">{user.username}</p>
<p className="text-xs text-muted font-bold mt-1">{user.role}</p> <p className="text-xs text-muted font-normal mt-1">{user.role}</p>
</div> </div>
</div> </div>
<ChevronRight size={16} className="text-secondary group-hover:text-primary transition-colors" /> <ChevronRight size={16} className="text-secondary group-hover:text-primary transition-colors" />
@@ -117,7 +117,7 @@ export default function LoginPage() {
))} ))}
</> </>
) : ( ) : (
<div className="text-center p-4 text-muted text-xs font-bold animate-pulse"> <div className="text-center p-4 text-muted text-xs font-normal animate-pulse">
Connectivity issues? Use manual login below. Connectivity issues? Use manual login below.
</div> </div>
)} )}
@@ -126,7 +126,7 @@ export default function LoginPage() {
<button <button
data-testid="ldap-login-tab" data-testid="ldap-login-tab"
onClick={() => setIsEnterprise(true)} onClick={() => setIsEnterprise(true)}
className="flex items-center justify-center gap-2 py-4 rounded-2xl border border-dashed border-slate-700 text-muted hover:text-white hover:border-slate-500 transition-all font-bold text-xs" className="flex items-center justify-center gap-2 py-4 rounded-2xl border border-dashed border-slate-700 text-muted hover:text-white hover:border-slate-500 transition-all font-normal text-xs"
> >
<Lock size={12} /> <Lock size={12} />
Enterprise Enterprise
@@ -137,7 +137,7 @@ export default function LoginPage() {
setSelectedUserForLogin({ username: '' }); setSelectedUserForLogin({ username: '' });
// We use an empty username object to trigger the manual input view // We use an empty username object to trigger the manual input view
}} }}
className="flex items-center justify-center gap-2 py-4 rounded-2xl border border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 transition-all font-bold text-xs" className="flex items-center justify-center gap-2 py-4 rounded-2xl border border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 transition-all font-normal text-xs"
> >
<User size={12} /> <User size={12} />
Manual Login Manual Login
@@ -147,17 +147,17 @@ export default function LoginPage() {
) : isEnterprise ? ( ) : isEnterprise ? (
<div className="space-y-4 animate-in slide-in-from-right-4 duration-300"> <div className="space-y-4 animate-in slide-in-from-right-4 duration-300">
<div className="flex justify-between items-center px-1"> <div className="flex justify-between items-center px-1">
<p className="text-xs font-black text-muted">Enterprise Account</p> <p className="text-xs font-normal text-muted">Enterprise Account</p>
<button <button
onClick={() => setIsEnterprise(false)} onClick={() => setIsEnterprise(false)}
className="text-xs font-black text-primary hover:underline" className="text-xs font-normal text-primary hover:underline"
> >
Back to profiles Back to profiles
</button> </button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-black text-muted px-1">Username</label> <label className="text-xs font-normal text-muted px-1">Username</label>
<div className="relative"> <div className="relative">
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} /> <User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
<input <input
@@ -172,7 +172,7 @@ export default function LoginPage() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-black text-muted px-1">Password</label> <label className="text-xs font-normal text-muted px-1">Password</label>
<div className="relative"> <div className="relative">
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} /> <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
<input <input
@@ -189,7 +189,7 @@ export default function LoginPage() {
<button <button
data-testid="login-submit" data-testid="login-submit"
onClick={handleLogin} onClick={handleLogin}
className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all" className="w-full bg-primary text-white font-normal py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
> >
Sign In Sign In
</button> </button>
@@ -204,14 +204,14 @@ export default function LoginPage() {
<X size={16} className="text-secondary" /> <X size={16} className="text-secondary" />
</button> </button>
<div> <div>
<p className="text-sm font-bold text-muted">Logging in as</p> <p className="text-sm font-normal text-muted">Logging in as</p>
<p className="text-white font-black">{selectedUserForLogin.username || "Manual Input"}</p> <p className="text-white font-normal">{selectedUserForLogin.username || "Manual Input"}</p>
</div> </div>
</div> </div>
{!selectedUserForLogin.username && ( {!selectedUserForLogin.username && (
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-black text-muted px-1">Username</label> <label className="text-xs font-normal text-muted px-1">Username</label>
<div className="relative"> <div className="relative">
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} /> <User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
<input <input
@@ -226,7 +226,7 @@ export default function LoginPage() {
)} )}
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-black text-muted px-1">Password</label> <label className="text-xs font-normal text-muted px-1">Password</label>
<div className="relative"> <div className="relative">
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} /> <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
<input <input
@@ -244,7 +244,7 @@ export default function LoginPage() {
<button <button
data-testid="local-login-submit" data-testid="local-login-submit"
onClick={handleLogin} onClick={handleLogin}
className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all" className="w-full bg-primary text-white font-normal py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
> >
Verify Identity Verify Identity
</button> </button>

10
frontend/app/logs/page.tsx
View File

@@ -94,8 +94,8 @@ export default function LogsPage() {
<History size={28} className="md:w-8 md:h-8" /> <History size={28} className="md:w-8 md:h-8" />
</div> </div>
<div> <div>
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Operations Audit</h1> <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">Operations Audit</h1>
<p className="text-xs md:text-sm text-secondary font-bold tracking-widest mt-0.5">Real-time Intervention Tracking</p> <p className="text-xs md:text-sm text-secondary font-normal tracking-widest mt-0.5">Real-time Intervention Tracking</p>
</div> </div>
</div> </div>
@@ -103,7 +103,7 @@ export default function LogsPage() {
<button <button
onClick={loadData} onClick={loadData}
disabled={loading} disabled={loading}
className="flex items-center gap-2 px-5 py-2.5 bg-surface border border-slate-800 text-secondary hover:text-white rounded-2xl text-xs font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl" className="flex items-center gap-2 px-5 py-2.5 bg-surface border border-slate-800 text-secondary hover:text-white rounded-2xl text-xs font-normal transition-all active:scale-95 disabled:opacity-50 shadow-xl"
> >
<RefreshCw size={14} className={cn(loading && "animate-spin")} /> <RefreshCw size={14} className={cn(loading && "animate-spin")} />
Sync Logs Sync Logs
@@ -153,7 +153,7 @@ export default function LogsPage() {
<button <button
onClick={() => setFilterAction('ALL')} onClick={() => setFilterAction('ALL')}
className={cn( className={cn(
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border tracking-widest", "px-5 py-2 rounded-full text-xs font-normal transition-all whitespace-nowrap border tracking-widest",
filterAction === 'ALL' filterAction === 'ALL'
? "bg-white text-slate-950 border-white shadow-xl shadow-white/10" ? "bg-white text-slate-950 border-white shadow-xl shadow-white/10"
: "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700" : "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"
@@ -166,7 +166,7 @@ export default function LogsPage() {
key={f} key={f}
onClick={() => setFilterAction(f)} onClick={() => setFilterAction(f)}
className={cn( className={cn(
"px-5 py-2 rounded-full text-xs font-bold transition-all whitespace-nowrap border tracking-widest", "px-5 py-2 rounded-full text-xs font-normal transition-all whitespace-nowrap border tracking-widest",
filterAction === f filterAction === f
? "bg-primary text-white border-primary shadow-xl shadow-primary/10" ? "bg-primary text-white border-primary shadow-xl shadow-primary/10"
: "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700" : "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"

18
frontend/app/page.tsx
View File

@@ -324,8 +324,8 @@ export default function Home() {
/> />
</div> </div>
<div> <div>
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">TFM aInventory</h1> <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">TFM aInventory</h1>
<p className="text-xs md:text-sm text-secondary font-bold tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p> <p className="text-xs md:text-sm text-secondary font-normal tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p>
</div> </div>
</div> </div>
@@ -334,14 +334,14 @@ export default function Home() {
{isScannerReady && ( {isScannerReady && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" /> <div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
<span className="text-xs font-black text-green-500/90 whitespace-nowrap"> <span className="text-xs font-normal text-green-500/90 whitespace-nowrap">
Scanner: OK Scanner: OK
</span> </span>
</div> </div>
)} )}
<div className="flex items-center gap-2" data-testid={!isOnline ? "offline-indicator" : undefined}> <div className="flex items-center gap-2" data-testid={!isOnline ? "offline-indicator" : undefined}>
<div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} /> <div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
<span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`} data-testid={!isOnline ? "offline-sync-indicator" : undefined}> <span className={`text-xs font-normal whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`} data-testid={!isOnline ? "offline-sync-indicator" : undefined}>
Sync: {isOnline ? 'Active' : 'Offline'} Sync: {isOnline ? 'Active' : 'Offline'}
</span> </span>
</div> </div>
@@ -428,11 +428,11 @@ export default function Home() {
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]"> <div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]">
<div className="flex justify-between items-center mb-6 shrink-0"> <div className="flex justify-between items-center mb-6 shrink-0">
<div> <div>
<h3 className="text-xl font-black tracking-tight flex items-center gap-2"> <h3 className="text-xl font-normal tracking-tight flex items-center gap-2">
<Package className="text-primary" /> <Package className="text-primary" />
Box Contents Box Contents
</h3> </h3>
<p className="text-xs text-secondary font-bold mt-1">Select the item you want to {mode.replace('_', ' ').toLowerCase()}</p> <p className="text-xs text-secondary font-normal mt-1">Select the item you want to {mode.replace('_', ' ').toLowerCase()}</p>
</div> </div>
<button onClick={() => setBoxMatches([])} className="p-2 hover:bg-slate-800 rounded-full"> <button onClick={() => setBoxMatches([])} className="p-2 hover:bg-slate-800 rounded-full">
<X size={20} /> <X size={20} />
@@ -450,8 +450,8 @@ export default function Home() {
className="w-full text-left bg-background/50 hover:bg-slate-800 border border-slate-800/80 p-4 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group" className="w-full text-left bg-background/50 hover:bg-slate-800 border border-slate-800/80 p-4 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group"
> >
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-black text-white">{item.name}</p> <p className="text-sm font-normal text-white">{item.name}</p>
<p className="text-xs text-secondary font-bold mt-1">Part #: {item.part_number || 'N/A'}</p> <p className="text-xs text-secondary font-normal mt-1">Part #: {item.part_number || 'N/A'}</p>
</div> </div>
<ChevronRight size={18} className="text-secondary group-hover:text-primary" /> <ChevronRight size={18} className="text-secondary group-hover:text-primary" />
</button> </button>
@@ -464,7 +464,7 @@ export default function Home() {
{/* Footer Branding */} {/* Footer Branding */}
<footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-70"> <footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-70">
<p className="text-sm font-bold text-secondary">Powered by TFM Group Software</p> <p className="text-sm font-normal text-secondary">Powered by TFM Group Software</p>
<div className="h-px w-16 bg-slate-700/60" /> <div className="h-px w-16 bg-slate-700/60" />
<p className="text-xs font-mono text-secondary">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</p> <p className="text-xs font-mono text-secondary">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</p>
</footer> </footer>

90
frontend/components/AIOnboarding.tsx
View File

@@ -52,8 +52,8 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<Sparkles className="text-primary w-5 h-5" /> <Sparkles className="text-primary w-5 h-5" />
</div> </div>
<div> <div>
<h2 className="text-lg font-bold">AI Discovery</h2> <h2 className="text-lg font-normal">AI Discovery</h2>
<p className="text-xs text-muted font-bold">Powered by Gemini 2.0 Flash</p> <p className="text-xs text-muted font-normal">Powered by Gemini 2.0 Flash</p>
</div> </div>
</div> </div>
<button <button
@@ -71,7 +71,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button <button
onClick={() => setMode('item')} onClick={() => setMode('item')}
aria-label="Select Discovery Mode" aria-label="Select Discovery Mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold 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 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'}`}
> >
<Package size={18} /> <Package size={18} />
<span className="text-xs">Discovery Mode</span> <span className="text-xs">Discovery Mode</span>
@@ -79,7 +79,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button <button
onClick={() => setMode('box')} onClick={() => setMode('box')}
aria-label="Select Box Lookup mode" aria-label="Select Box Lookup mode"
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold 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 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'}`}
> >
<Layers size={18} /> <Layers size={18} />
<span className="text-xs">Box Lookup</span> <span className="text-xs">Box Lookup</span>
@@ -90,10 +90,10 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="w-20 h-20 bg-surface rounded-3xl flex items-center justify-center mb-6 shadow-inner text-primary"> <div className="w-20 h-20 bg-surface rounded-3xl flex items-center justify-center mb-6 shadow-inner text-primary">
<Camera size={32} /> <Camera size={32} />
</div> </div>
<p className="text-secondary mb-2 text-center font-bold"> <p className="text-secondary mb-2 text-center font-normal">
{mode === 'box' ? 'Deep Box Analysis' : 'Multi-Item Extraction'} {mode === 'box' ? 'Deep Box Analysis' : 'Multi-Item Extraction'}
</p> </p>
<p className="text-xs text-muted px-8 text-center leading-relaxed font-bold"> <p className="text-xs text-muted px-8 text-center leading-relaxed font-normal">
{mode === 'box' {mode === 'box'
? 'Scan container labels to identify storage locations' ? 'Scan container labels to identify storage locations'
: 'Identify multiple technical items from a single photo or label'} : 'Identify multiple technical items from a single photo or label'}
@@ -104,7 +104,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button <button
onClick={startLiveCamera} onClick={startLiveCamera}
aria-label="Start camera scan" aria-label="Start camera scan"
className="flex flex-col items-center justify-center gap-2 bg-primary text-white rounded-3xl font-bold 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-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"
> >
<Camera size={24} /> <Camera size={24} />
<span className="text-sm">Scan Camera</span> <span className="text-sm">Scan Camera</span>
@@ -113,7 +113,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
data-testid="manual-entry-tab" data-testid="manual-entry-tab"
aria-label="Upload photo from device" 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-bold 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-slate-800 rounded-3xl font-normal cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none"
> >
<ImageIcon size={24} /> <ImageIcon size={24} />
<span className="text-sm">Upload Photo</span> <span className="text-sm">Upload Photo</span>
@@ -146,7 +146,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</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"> <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-black text-white flex items-center gap-2"> <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="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />
Live Viewfinder Live Viewfinder
</span> </span>
@@ -157,7 +157,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button <button
onClick={stopLiveCamera} onClick={stopLiveCamera}
aria-label="Cancel camera scan" aria-label="Cancel camera scan"
className="px-6 py-4 bg-surface border border-slate-800 text-secondary rounded-2xl font-bold 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-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"
> >
Cancel Cancel
</button> </button>
@@ -165,7 +165,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={captureSnapshot} onClick={captureSnapshot}
data-testid="capture-button" data-testid="capture-button"
aria-label="Capture image from camera" aria-label="Capture image from camera"
className="flex-1 py-4 bg-white text-slate-950 rounded-2xl font-black 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-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"
> >
<div className="w-5 h-5 rounded-full border-2 border-slate-950 flex items-center justify-center"> <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-2.5 h-2.5 rounded-full bg-background" />
@@ -186,7 +186,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<RefreshCw className="w-12 h-12 text-primary animate-spin" /> <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" /> <Sparkles className="absolute -top-2 -right-2 text-amber-400 w-6 h-6 animate-pulse" />
</div> </div>
<p className="text-white font-black tracking-tight text-sm">Gemini is processing...</p> <p className="text-white font-normal tracking-tight text-sm">Gemini is processing...</p>
</div> </div>
)} )}
</div> </div>
@@ -197,7 +197,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
disabled={uploading} disabled={uploading}
data-testid="retake-button" data-testid="retake-button"
aria-label="Retake photo" aria-label="Retake photo"
className="px-6 py-4 bg-surface border border-slate-800 text-secondary rounded-2xl font-bold 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-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"
> >
Retake Retake
</button> </button>
@@ -205,7 +205,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={processImage} onClick={processImage}
disabled={uploading} disabled={uploading}
aria-label="Extract data from image" aria-label="Extract data from image"
className="flex-1 py-4 bg-primary text-white rounded-2xl font-black 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-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"
> >
{uploading ? "Analyzing..." : "Extract Data"} {uploading ? "Analyzing..." : "Extract Data"}
{!uploading && <Check size={20} />} {!uploading && <Check size={20} />}
@@ -215,11 +215,11 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
) : editingIndex !== null ? ( ) : editingIndex !== null ? (
<div data-testid="extraction-results-form" className="flex-1 flex flex-col gap-6 overflow-hidden"> <div data-testid="extraction-results-form" className="flex-1 flex flex-col gap-6 overflow-hidden">
<div data-testid="ai-onboarding-wizard" className="flex items-center justify-between"> <div data-testid="ai-onboarding-wizard" className="flex items-center justify-between">
<span className="text-xs text-muted font-bold">Item Details (<span data-testid="current-step">{editingIndex + 1}</span>/<span data-testid="total-steps">{extractedItems.length}</span>)</span> <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>
<button <button
onClick={() => setEditingIndex(null)} onClick={() => setEditingIndex(null)}
aria-label="Back to item list" aria-label="Back to item list"
className="text-xs text-primary font-bold 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 rounded-full cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none"
> >
Back to List Back to List
</button> </button>
@@ -227,24 +227,24 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="flex-1 overflow-y-auto space-y-2 pr-1 scrollbar-hide"> <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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
<textarea <textarea
value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''} value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''}
onChange={(e) => updateEditingItem({ Item: e.target.value })} onChange={(e) => updateEditingItem({ Item: e.target.value })}
className="bg-transparent w-full text-lg font-bold 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-white placeholder:text-muted resize-none h-8 leading-tight selection:bg-primary/30 py-0"
placeholder="SSD, SFP, Cable..." placeholder="SSD, SFP, Cable..."
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Category</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Category</label>
<input <input
type="text" type="text"
list="onboarding-categories" list="onboarding-categories"
value={extractedItems[editingIndex].Category || extractedItems[editingIndex].category || ''} value={extractedItems[editingIndex].Category || extractedItems[editingIndex].category || ''}
onChange={(e) => updateEditingItem({ Category: e.target.value })} onChange={(e) => updateEditingItem({ Category: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-secondary" className="bg-transparent w-full font-normal outline-none text-secondary"
placeholder="e.g. storage" placeholder="e.g. storage"
/> />
<datalist id="onboarding-categories"> <datalist id="onboarding-categories">
@@ -254,12 +254,12 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
</datalist> </datalist>
</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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Type</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Type</label>
<input <input
value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''} value={extractedItems[editingIndex].Type || extractedItems[editingIndex].type || ''}
list="onboarding-types" list="onboarding-types"
onChange={(e) => updateEditingItem({ Type: e.target.value })} onChange={(e) => updateEditingItem({ Type: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-secondary" className="bg-transparent w-full text-sm font-normal outline-none text-secondary"
placeholder="e.g. spare parts" placeholder="e.g. spare parts"
/> />
<datalist id="onboarding-types"> <datalist id="onboarding-types">
@@ -270,21 +270,21 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="grid grid-cols-2 gap-3"> <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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Color</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Color</label>
<input <input
value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''} value={extractedItems[editingIndex].Color || extractedItems[editingIndex].color || ''}
onChange={(e) => updateEditingItem({ Color: e.target.value })} onChange={(e) => updateEditingItem({ Color: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-secondary" className="bg-transparent w-full font-normal outline-none text-secondary"
placeholder="e.g. Aqua" placeholder="e.g. Aqua"
/> />
</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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Box / Container</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Box / Container</label>
<input <input
value={extractedItems[editingIndex].box_label || ''} value={extractedItems[editingIndex].box_label || ''}
list="onboarding-boxes" list="onboarding-boxes"
onChange={(e) => updateEditingItem({ box_label: e.target.value })} onChange={(e) => updateEditingItem({ box_label: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-primary" className="bg-transparent w-full text-sm font-normal outline-none text-primary"
placeholder="e.g. Box 1" placeholder="e.g. Box 1"
/> />
<datalist id="onboarding-boxes"> <datalist id="onboarding-boxes">
@@ -294,7 +294,7 @@ 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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Description</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Description</label>
<textarea <textarea
value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''} value={extractedItems[editingIndex].Description || extractedItems[editingIndex].description || ''}
onChange={(e) => updateEditingItem({ Description: e.target.value })} onChange={(e) => updateEditingItem({ Description: e.target.value })}
@@ -305,52 +305,52 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="grid grid-cols-2 gap-3"> <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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Connector</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Connector</label>
<input <input
value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''} value={extractedItems[editingIndex].Connector || extractedItems[editingIndex].connector || ''}
onChange={(e) => updateEditingItem({ Connector: e.target.value })} onChange={(e) => updateEditingItem({ Connector: e.target.value })}
className="bg-transparent w-full font-bold outline-none text-secondary" className="bg-transparent w-full font-normal outline-none text-secondary"
placeholder="e.g. LC/UPC" placeholder="e.g. LC/UPC"
/> />
</div> </div>
<div className="bg-surface px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Size / Length</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Size / Length</label>
<input <input
value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''} value={extractedItems[editingIndex].Size || extractedItems[editingIndex].size || ''}
onChange={(e) => updateEditingItem({ Size: e.target.value })} onChange={(e) => updateEditingItem({ Size: e.target.value })}
className="bg-transparent w-full text-sm font-bold outline-none text-secondary" className="bg-transparent w-full text-sm font-normal outline-none text-secondary"
placeholder="e.g. 5m / 10G" placeholder="e.g. 5m / 10G"
/> />
</div> </div>
</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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">OCR Matching Key</label> <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>
<textarea <textarea
value={extractedItems[editingIndex].OCR || extractedItems[editingIndex].ocr_text || ''} value={extractedItems[editingIndex].OCR || extractedItems[editingIndex].ocr_text || ''}
onChange={(e) => updateEditingItem({ OCR: e.target.value })} 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-secondary py-0 scrollbar-hide" className="bg-transparent w-full text-sm font-normal leading-tight outline-none resize-none h-10 text-secondary py-0 scrollbar-hide"
placeholder="Heuristic string for local matching..." placeholder="Heuristic string for local matching..."
/> />
</div> </div>
<div className="grid grid-cols-2 gap-2"> <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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Part Number</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Part Number</label>
<input <input
value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''} value={extractedItems[editingIndex].PartNr || extractedItems[editingIndex].part_number || ''}
onChange={(e) => updateEditingItem({ PartNr: e.target.value })} onChange={(e) => updateEditingItem({ PartNr: e.target.value })}
className="bg-transparent w-full font-mono text-sm font-bold outline-none text-secondary" className="bg-transparent w-full font-mono text-sm font-normal outline-none text-secondary"
placeholder="ID code..." placeholder="ID code..."
/> />
</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"> <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-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tighter">Initial Qty</label> <label className="text-xs text-muted font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tighter">Initial Qty</label>
<input <input
type="number" type="number"
value={extractedItems[editingIndex].quantity || 1} value={extractedItems[editingIndex].quantity || 1}
onChange={(e) => updateEditingItem({ quantity: parseFloat(e.target.value) })} onChange={(e) => updateEditingItem({ quantity: parseFloat(e.target.value) })}
className="bg-transparent w-full font-black text-base outline-none text-secondary" className="bg-transparent w-full font-normal text-base outline-none text-secondary"
/> />
</div> </div>
</div> </div>
@@ -361,7 +361,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
onClick={() => confirmSingleItem(editingIndex)} onClick={() => confirmSingleItem(editingIndex)}
data-testid="confirm-extraction" data-testid="confirm-extraction"
aria-label="Add item to catalog" aria-label="Add item to catalog"
className="py-5 bg-primary text-white rounded-[1.8rem] font-black 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-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"
> >
Add to Catalog Add to Catalog
</button> </button>
@@ -370,8 +370,8 @@ 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 data-testid="manual-entry-form" className="flex-1 flex flex-col gap-6 overflow-hidden">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-sm font-black text-secondary">Discovery Dashboard</h3> <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-bold"> <span data-testid="wizard-progress" className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-normal">
{extractedItems.length} items found {extractedItems.length} items found
</span> </span>
</div> </div>
@@ -400,13 +400,13 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary"> <div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
<Package size={16} /> <Package size={16} />
</div> </div>
<h4 className="font-black text-secondary truncate">{item.Item || item.name || "Unknown Item"}</h4> <h4 className="font-normal text-secondary truncate">{item.Item || item.name || "Unknown Item"}</h4>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-xs font-black px-2 py-0.5 bg-slate-800 text-secondary rounded-md"> <span className="text-xs font-normal px-2 py-0.5 bg-slate-800 text-secondary rounded-md">
{item.Type || item.type || "Generic"} {item.Type || item.type || "Generic"}
</span> </span>
<span className="text-xs font-black px-2 py-0.5 bg-slate-800 text-muted rounded-md"> <span className="text-xs font-normal px-2 py-0.5 bg-slate-800 text-muted rounded-md">
{item.PartNr || item.part_number || "No P/N"} {item.PartNr || item.part_number || "No P/N"}
</span> </span>
</div> </div>
@@ -440,7 +440,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
<button <button
onClick={confirmAllItems} onClick={confirmAllItems}
aria-label={`Add ${extractedItems.length} items to catalog`} aria-label={`Add ${extractedItems.length} items to catalog`}
className="py-5 bg-white text-slate-950 rounded-[1.8rem] font-black 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-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"
> >
Add {extractedItems.length} items to catalog Add {extractedItems.length} items to catalog
</button> </button>
@@ -451,7 +451,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
}} }}
data-testid="reject-extraction" data-testid="reject-extraction"
aria-label="Discard discovery session" aria-label="Discard discovery session"
className="py-3 text-xs text-secondary font-bold 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-slate-500 focus:outline-none rounded px-2"
> >
Discard Discovery Discard Discovery
</button> </button>

20
frontend/components/AdminOverlay.tsx
View File

@@ -120,7 +120,7 @@ export default function AdminOverlay({
<div className="p-2 bg-slate-800 rounded-xl text-primary"> <div className="p-2 bg-slate-800 rounded-xl text-primary">
<Shield size={20} /> <Shield size={20} />
</div> </div>
<h2 className="text-xl font-black text-white">System Admin</h2> <h2 className="text-xl font-normal text-white">System Admin</h2>
</div> </div>
<button <button
data-testid="close-admin-overlay" data-testid="close-admin-overlay"
@@ -136,12 +136,12 @@ export default function AdminOverlay({
<section className="space-y-4"> <section className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h3 className="text-sm font-black text-secondary">User Management</h3> <h3 className="text-sm font-normal text-secondary">User Management</h3>
<p className="text-xs text-muted mt-0.5">Create accounts and control access</p> <p className="text-xs text-muted mt-0.5">Create accounts and control access</p>
</div> </div>
<button <button
onClick={() => setShowCreateUserModal(true)} onClick={() => setShowCreateUserModal(true)}
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1" className="flex items-center gap-1 text-xs font-normal text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
> >
<UserPlus size={12} /> Add User <UserPlus size={12} /> Add User
</button> </button>
@@ -155,8 +155,8 @@ export default function AdminOverlay({
<User size={16} /> <User size={16} />
</div> </div>
<div> <div>
<p className="text-sm font-bold text-white">{u.username}</p> <p className="text-sm font-normal text-white">{u.username}</p>
<p className="text-xs font-bold text-muted">{u.role}</p> <p className="text-xs font-normal text-muted">{u.role}</p>
</div> </div>
</div> </div>
@@ -185,12 +185,12 @@ export default function AdminOverlay({
<section className="space-y-4"> <section className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h3 className="text-sm font-black text-secondary">Category Groups</h3> <h3 className="text-sm font-normal text-secondary">Category Groups</h3>
<p className="text-xs text-muted mt-0.5">Organize items by type or location</p> <p className="text-xs text-muted mt-0.5">Organize items by type or location</p>
</div> </div>
<button <button
onClick={() => setShowCreateCategoryModal(true)} onClick={() => setShowCreateCategoryModal(true)}
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1" className="flex items-center gap-1 text-xs font-normal text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
> >
<Plus size={12} /> Add Category <Plus size={12} /> Add Category
</button> </button>
@@ -204,7 +204,7 @@ export default function AdminOverlay({
<Layers size={16} /> <Layers size={16} />
</div> </div>
<div> <div>
<p className="text-sm font-bold text-white">{cat.name}</p> <p className="text-sm font-normal text-white">{cat.name}</p>
<p className="text-xs text-muted font-mono">{cat.description || 'No description'}</p> <p className="text-xs text-muted font-mono">{cat.description || 'No description'}</p>
</div> </div>
</div> </div>
@@ -233,7 +233,7 @@ export default function AdminOverlay({
<section className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-4"> <section className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-4">
<div className="flex items-center gap-2 text-rose-500"> <div className="flex items-center gap-2 text-rose-500">
<AlertTriangle size={16} /> <AlertTriangle size={16} />
<p className="text-sm font-black">Sign Out</p> <p className="text-sm font-normal">Sign Out</p>
</div> </div>
<p className="text-xs text-muted">End your session and return to the login screen.</p> <p className="text-xs text-muted">End your session and return to the login screen.</p>
<button <button
@@ -241,7 +241,7 @@ export default function AdminOverlay({
import('@/lib/auth').then(m => m.clearAuth()); import('@/lib/auth').then(m => m.clearAuth());
window.location.href = '/login'; window.location.href = '/login';
}} }}
className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black py-3 rounded-xl transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none" className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-normal py-3 rounded-xl transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
> >
<LogOut size={16} /> Sign Out <LogOut size={16} /> Sign Out
</button> </button>

10
frontend/components/BottomNav.tsx
View File

@@ -34,7 +34,7 @@ export default function BottomNav({
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isHome && "text-primary")} className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isHome && "text-primary")}
> >
<Smartphone size={20} /> <Smartphone size={20} />
<span className="text-xs font-bold transition-all">Home</span> <span className="text-xs font-normal transition-all">Home</span>
</button> </button>
{/* Inventory */} {/* Inventory */}
@@ -44,7 +44,7 @@ export default function BottomNav({
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isInventory && "text-primary")} className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isInventory && "text-primary")}
> >
<Package size={20} /> <Package size={20} />
<span className="text-xs font-bold transition-all">Inventory</span> <span className="text-xs font-normal transition-all">Inventory</span>
</button> </button>
{/* Logs */} {/* Logs */}
@@ -54,7 +54,7 @@ export default function BottomNav({
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isLogs && "text-primary")} className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isLogs && "text-primary")}
> >
<History size={20} /> <History size={20} />
<span className="text-xs font-bold transition-all">Logs</span> <span className="text-xs font-normal transition-all">Logs</span>
</button> </button>
{/* Admin Settings */} {/* Admin Settings */}
@@ -66,7 +66,7 @@ export default function BottomNav({
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isAdmin && "text-primary")} className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isAdmin && "text-primary")}
> >
<Settings size={20} /> <Settings size={20} />
<span className="text-xs font-bold transition-all">Admin</span> <span className="text-xs font-normal transition-all">Admin</span>
</button> </button>
)} )}
@@ -82,7 +82,7 @@ export default function BottomNav({
className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 cursor-pointer transition-colors rounded px-2 py-1 focus:ring-2 focus:ring-rose-500 focus:outline-none" className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 cursor-pointer transition-colors rounded px-2 py-1 focus:ring-2 focus:ring-rose-500 focus:outline-none"
> >
<LogOut size={20} /> <LogOut size={20} />
<span className="text-xs font-bold transition-all">Logout</span> <span className="text-xs font-normal transition-all">Logout</span>
</button> </button>
</div> </div>
</footer> </footer>

22
frontend/components/CameraView.tsx
View File

@@ -91,13 +91,13 @@ export default function CameraView({
</div> </div>
<div className="p-6 bg-surface/90 border-t border-slate-800 flex flex-col gap-4"> <div className="p-6 bg-surface/90 border-t border-slate-800 flex flex-col gap-4">
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<p className="text-sm font-black text-white italic text-center">Text Found</p> <p className="text-sm font-normal text-white italic text-center">Text Found</p>
<p className="text-xs text-muted font-black text-center">Tap any text to use it</p> <p className="text-xs text-muted font-normal text-center">Tap any text to use it</p>
</div> </div>
<button <button
onClick={onCancelSelection} onClick={onCancelSelection}
aria-label="Cancel text selection" aria-label="Cancel text selection"
className="w-full py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-2xl font-black text-xs cursor-pointer transition-all active:scale-95 border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none" className="w-full py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-2xl font-normal text-xs cursor-pointer transition-all active:scale-95 border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
> >
Cancel Cancel
</button> </button>
@@ -116,13 +116,13 @@ export default function CameraView({
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-secondary px-8 text-center gap-4"> <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-surface text-secondary px-8 text-center gap-4">
<XCircle className="w-10 h-10 text-red-500" /> <XCircle className="w-10 h-10 text-red-500" />
<div> <div>
<p className="font-bold text-white">Camera Error</p> <p className="font-normal text-white">Camera Error</p>
<p className="text-xs text-secondary mt-1">{error}</p> <p className="text-xs text-secondary mt-1">{error}</p>
</div> </div>
<button <button
onClick={() => window.location.reload()} onClick={() => window.location.reload()}
aria-label="Reload page and try again" aria-label="Reload page and try again"
className="mt-4 px-6 py-2 bg-slate-800 rounded-full text-sm font-bold cursor-pointer hover:bg-slate-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:outline-none" className="mt-4 px-6 py-2 bg-slate-800 rounded-full text-sm font-normal cursor-pointer hover:bg-slate-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:outline-none"
> >
Try Again Try Again
</button> </button>
@@ -148,8 +148,8 @@ export default function CameraView({
aria-label={`Zoom ${zoom.toFixed(1)}x`} aria-label={`Zoom ${zoom.toFixed(1)}x`}
className="h-14 px-5 bg-slate-800/80 hover:bg-slate-700 border border-slate-700 text-white rounded-2xl flex flex-col items-center justify-center shadow-lg cursor-pointer transition-all active:scale-95 shrink-0 focus:ring-2 focus:ring-blue-500 focus:outline-none" className="h-14 px-5 bg-slate-800/80 hover:bg-slate-700 border border-slate-700 text-white rounded-2xl flex flex-col items-center justify-center shadow-lg cursor-pointer transition-all active:scale-95 shrink-0 focus:ring-2 focus:ring-blue-500 focus:outline-none"
> >
<span className="text-xs font-black tabular-nums">{zoom.toFixed(1)}x</span> <span className="text-xs font-normal tabular-nums">{zoom.toFixed(1)}x</span>
<span className="text-xs text-primary font-black tracking-tighter">Zoom</span> <span className="text-xs text-primary font-normal tracking-tighter">Zoom</span>
</button> </button>
)} )}
@@ -157,7 +157,7 @@ export default function CameraView({
{ocrProcessing ? ( {ocrProcessing ? (
<> <>
<RefreshCw className="animate-spin text-primary" size={18} /> <RefreshCw className="animate-spin text-primary" size={18} />
<span className="text-xs font-black text-secondary leading-none">Analyzing</span> <span className="text-xs font-normal text-secondary leading-none">Analyzing</span>
</> </>
) : ( ) : (
<> <>
@@ -166,8 +166,8 @@ export default function CameraView({
size={18} size={18}
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-xs text-muted font-black leading-none">Smart Scan</span> <span className="text-xs text-muted font-normal leading-none">Smart Scan</span>
<span className="text-xs font-black text-primary leading-tight tabular-nums"> <span className="text-xs font-normal text-primary leading-tight tabular-nums">
{countdown === 0 ? 'Scanning' : `${countdown}s`} {countdown === 0 ? 'Scanning' : `${countdown}s`}
</span> </span>
</div> </div>
@@ -184,7 +184,7 @@ export default function CameraView({
<div className="w-full flex justify-center items-center gap-2"> <div className="w-full flex justify-center items-center gap-2">
<div className="w-1 h-1 rounded-full bg-green-500 animate-pulse" /> <div className="w-1 h-1 rounded-full bg-green-500 animate-pulse" />
<p className="text-xs text-secondary font-black"> <p className="text-xs text-secondary font-normal">
Scanner active · Use zoom or tap scan Scanner active · Use zoom or tap scan
</p> </p>
</div> </div>

10
frontend/components/CategoryCreationModal.tsx
View File

@@ -57,7 +57,7 @@ export default function CategoryCreationModal({
<div className="p-2 bg-primary/10 rounded-lg text-primary"> <div className="p-2 bg-primary/10 rounded-lg text-primary">
<Tag size={20} /> <Tag size={20} />
</div> </div>
<h2 className="text-lg font-black text-white">New Category</h2> <h2 className="text-lg font-normal text-white">New Category</h2>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
@@ -71,7 +71,7 @@ export default function CategoryCreationModal({
<form onSubmit={handleSubmit} className="p-6 space-y-4"> <form onSubmit={handleSubmit} className="p-6 space-y-4">
<div> <div>
<label className="text-sm font-black text-secondary">Name</label> <label className="text-sm font-normal text-secondary">Name</label>
<input <input
type="text" type="text"
value={name} value={name}
@@ -87,7 +87,7 @@ export default function CategoryCreationModal({
</div> </div>
<div> <div>
<label className="text-sm font-black text-secondary">Description (optional)</label> <label className="text-sm font-normal text-secondary">Description (optional)</label>
<input <input
type="text" type="text"
value={description} value={description}
@@ -109,14 +109,14 @@ export default function CategoryCreationModal({
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-normal hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
disabled={loading || !name.trim()} disabled={loading || !name.trim()}
className="flex-1 px-4 py-2.5 bg-primary text-white rounded font-semibold hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none" className="flex-1 px-4 py-2.5 bg-primary text-white rounded font-normal hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
> >
{loading ? ( {loading ? (
<> <>

10
frontend/components/ConfirmationModal.tsx
View File

@@ -62,7 +62,7 @@ export default function ConfirmationModal({
<div className="p-2 bg-rose-500/10 rounded-lg text-rose-500"> <div className="p-2 bg-rose-500/10 rounded-lg text-rose-500">
<AlertTriangle size={20} /> <AlertTriangle size={20} />
</div> </div>
<h2 className="text-lg font-black text-white">{title}</h2> <h2 className="text-lg font-normal text-white">{title}</h2>
</div> </div>
<button <button
onClick={onCancel} onClick={onCancel}
@@ -82,7 +82,7 @@ export default function ConfirmationModal({
{/* Item Name (if provided) */} {/* Item Name (if provided) */}
{itemName && ( {itemName && (
<div className="bg-slate-800/40 border border-slate-800 rounded p-3"> <div className="bg-slate-800/40 border border-slate-800 rounded p-3">
<p className="text-xs text-muted font-semibold">Item</p> <p className="text-xs text-muted font-normal">Item</p>
<p className="text-sm font-mono text-white mt-1">{itemName}</p> <p className="text-sm font-mono text-white mt-1">{itemName}</p>
</div> </div>
)} )}
@@ -107,7 +107,7 @@ export default function ConfirmationModal({
{/* High-Risk Warning & Confirmation Input */} {/* High-Risk Warning & Confirmation Input */}
{requiresTextConfirm && ( {requiresTextConfirm && (
<div className="space-y-3 pt-2 border-t border-slate-800"> <div className="space-y-3 pt-2 border-t border-slate-800">
<p className="text-sm font-semibold text-rose-400"> <p className="text-sm font-normal text-rose-400">
Type "DELETE" to confirm this high-risk action Type "DELETE" to confirm this high-risk action
</p> </p>
<input <input
@@ -138,7 +138,7 @@ export default function ConfirmationModal({
<button <button
onClick={onCancel} onClick={onCancel}
disabled={loading} disabled={loading}
className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none" className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-normal hover:bg-slate-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-primary focus:outline-none"
> >
Cancel Cancel
</button> </button>
@@ -146,7 +146,7 @@ export default function ConfirmationModal({
onClick={handleConfirm} onClick={handleConfirm}
data-testid="confirm-action" data-testid="confirm-action"
disabled={loading || !canConfirm} disabled={loading || !canConfirm}
className="flex-1 px-4 py-2.5 bg-rose-600 text-white rounded font-semibold hover:bg-rose-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-rose-600 focus:outline-none" className="flex-1 px-4 py-2.5 bg-rose-600 text-white rounded font-normal hover:bg-rose-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-rose-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

10
frontend/components/CreateUserModal.tsx
View File

@@ -74,7 +74,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
<div className="bg-surface border border-slate-800 rounded-lg shadow-xl max-w-sm w-full mx-4"> <div className="bg-surface border border-slate-800 rounded-lg shadow-xl max-w-sm w-full mx-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-6 border-b border-slate-800"> <div className="flex items-center justify-between p-6 border-b border-slate-800">
<h2 className="text-lg font-black text-white">Create User</h2> <h2 className="text-lg font-normal text-white">Create User</h2>
<button <button
onClick={onClose} onClick={onClose}
className="p-1 text-muted hover:text-secondary rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="p-1 text-muted hover:text-secondary rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
@@ -88,7 +88,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
<form onSubmit={handleSubmit} className="p-6 space-y-4"> <form onSubmit={handleSubmit} className="p-6 space-y-4">
{/* Username Field */} {/* Username Field */}
<div> <div>
<label htmlFor="username" className="block text-sm font-semibold text-secondary mb-2"> <label htmlFor="username" className="block text-sm font-normal text-secondary mb-2">
Username Username
</label> </label>
<input <input
@@ -113,7 +113,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
{/* Password Field */} {/* Password Field */}
<div> <div>
<label htmlFor="password" className="block text-sm font-semibold text-secondary mb-2"> <label htmlFor="password" className="block text-sm font-normal text-secondary mb-2">
Password Password
</label> </label>
<input <input
@@ -142,7 +142,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-normal hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
> >
Cancel Cancel
</button> </button>
@@ -150,7 +150,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
type="submit" type="submit"
data-testid="create-user-submit" data-testid="create-user-submit"
disabled={!isFormValid || loading} disabled={!isFormValid || loading}
className="flex-1 px-4 py-2.5 bg-primary text-primary-foreground rounded font-semibold hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none" className="flex-1 px-4 py-2.5 bg-primary text-primary-foreground rounded font-normal hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
> >
{loading ? ( {loading ? (
<> <>

24
frontend/components/IdentityCheckOverlay.tsx
View File

@@ -67,8 +67,8 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<div className="w-20 h-20 bg-primary/10 text-primary rounded-[2rem] flex items-center justify-center mx-auto mb-6 border border-primary/20 shadow-xl shadow-primary/5"> <div className="w-20 h-20 bg-primary/10 text-primary rounded-[2rem] flex items-center justify-center mx-auto mb-6 border border-primary/20 shadow-xl shadow-primary/5">
<Shield size={40} className="italic" /> <Shield size={40} className="italic" />
</div> </div>
<h2 className="text-3xl font-black text-white tracking-tight">Protocol Access</h2> <h2 className="text-3xl font-normal text-white tracking-tight">Protocol Access</h2>
<p className="text-muted text-xs font-black">Select operator profile to initialize</p> <p className="text-muted text-xs font-normal">Select operator profile to initialize</p>
</div> </div>
<div data-testid="user-list" className="grid gap-3.5"> <div data-testid="user-list" className="grid gap-3.5">
@@ -86,8 +86,8 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
{user.role === 'admin' ? <Shield size={18} /> : <User size={18} />} {user.role === 'admin' ? <Shield size={18} /> : <User size={18} />}
</div> </div>
<div> <div>
<p className="text-secondary font-black text-sm tracking-tight">{user.username}</p> <p className="text-secondary font-normal text-sm tracking-tight">{user.username}</p>
<p className="text-xs text-secondary font-black mt-0.5">{user.role}</p> <p className="text-xs text-secondary font-normal mt-0.5">{user.role}</p>
</div> </div>
</div> </div>
<div className="p-1.5 rounded-full bg-surface/70 text-muted group-hover:text-primary group-hover:bg-primary/10 transition-all"> <div className="p-1.5 rounded-full bg-surface/70 text-muted group-hover:text-primary group-hover:bg-primary/10 transition-all">
@@ -98,7 +98,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<div className="pt-4"> <div className="pt-4">
<button <button
onClick={() => setIsEnterprise(true)} onClick={() => setIsEnterprise(true)}
className="w-full flex items-center justify-center gap-3 py-5 rounded-[1.5rem] border border-dashed border-slate-800 text-secondary hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-all font-black text-xs" className="w-full flex items-center justify-center gap-3 py-5 rounded-[1.5rem] border border-dashed border-slate-800 text-secondary hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-all font-normal text-xs"
> >
<Lock size={14} /> <Lock size={14} />
Enterprise Directory Enterprise Directory
@@ -108,11 +108,11 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
) : isEnterprise ? ( ) : isEnterprise ? (
<div className="space-y-5 animate-in slide-in-from-bottom-5 duration-300"> <div className="space-y-5 animate-in slide-in-from-bottom-5 duration-300">
<div className="flex justify-between items-center px-1"> <div className="flex justify-between items-center px-1">
<p className="text-xs font-black text-secondary italic">LDAP Authentication</p> <p className="text-xs font-normal text-secondary italic">LDAP Authentication</p>
<button <button
data-testid="local-login-tab" data-testid="local-login-tab"
onClick={() => setIsEnterprise(false)} onClick={() => setIsEnterprise(false)}
className="text-xs font-black text-primary hover:underline tracking-tighter" className="text-xs font-normal text-primary hover:underline tracking-tighter"
> >
Profile Swap Profile Swap
</button> </button>
@@ -149,7 +149,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<button <button
data-testid="login-submit" data-testid="login-submit"
onClick={handleLogin} onClick={handleLogin}
className="w-full bg-primary text-white font-black py-5 rounded-[1.5rem] shadow-2xl shadow-primary/20 hover:shadow-primary/30 active:scale-95 transition-all text-xs border border-primary/20" className="w-full bg-primary text-white font-normal py-5 rounded-[1.5rem] shadow-2xl shadow-primary/20 hover:shadow-primary/30 active:scale-95 transition-all text-xs border border-primary/20"
> >
Initialize Session Initialize Session
</button> </button>
@@ -162,8 +162,8 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<Shield size={20} /> <Shield size={20} />
</div> </div>
<div> <div>
<p className="text-xs font-black text-secondary">Active Profile</p> <p className="text-xs font-normal text-secondary">Active Profile</p>
<p className="text-white font-black tracking-tight">{selectedUserForLogin.username}</p> <p className="text-white font-normal tracking-tight">{selectedUserForLogin.username}</p>
</div> </div>
</div> </div>
<button <button
@@ -193,7 +193,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<button <button
data-testid="local-login-submit" data-testid="local-login-submit"
onClick={handleLogin} onClick={handleLogin}
className="w-full bg-primary text-white font-black py-5 rounded-[1.5rem] shadow-2xl shadow-primary/20 hover:shadow-primary/30 active:scale-95 transition-all text-xs border border-primary/20" className="w-full bg-primary text-white font-normal py-5 rounded-[1.5rem] shadow-2xl shadow-primary/20 hover:shadow-primary/30 active:scale-95 transition-all text-xs border border-primary/20"
> >
Unlock Account Unlock Account
</button> </button>
@@ -202,7 +202,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
</div> </div>
{users.length === 0 && ( {users.length === 0 && (
<div className="text-center p-8 text-muted animate-pulse font-black text-xs"> <div className="text-center p-8 text-muted animate-pulse font-normal text-xs">
Synchronizing User Tokens... Synchronizing User Tokens...
</div> </div>
)} )}

4
frontend/components/InventoryTable.tsx
View File

@@ -95,12 +95,12 @@ export default function InventoryTable({
</div> </div>
<div className="text-right shrink-0"> <div className="text-right shrink-0">
<span className={cn( <span className={cn(
"text-lg font-black", "text-lg font-normal",
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary" item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
)}> )}>
{item.quantity} {item.quantity}
</span> </span>
<p className="text-sm text-muted font-bold tracking-tight">Stock</p> <p className="text-sm text-muted font-normal tracking-tight">Stock</p>
</div> </div>
</div> </div>
))} ))}

16
frontend/components/ItemComparisonModal.tsx
View File

@@ -47,7 +47,7 @@ export default function ItemComparisonModal({
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<AlertTriangle size={24} className="text-amber-500" /> <AlertTriangle size={24} className="text-amber-500" />
<div> <div>
<h3 className="text-xl font-black text-white">Part Number Already Exists</h3> <h3 className="text-xl font-normal text-white">Part Number Already Exists</h3>
<p className="text-xs text-secondary mt-1">Compare the versions below</p> <p className="text-xs text-secondary mt-1">Compare the versions below</p>
</div> </div>
</div> </div>
@@ -55,9 +55,9 @@ export default function ItemComparisonModal({
{/* Comparison Table */} {/* Comparison Table */}
<div className="space-y-3 mb-8"> <div className="space-y-3 mb-8">
<div className="grid grid-cols-3 gap-4 mb-4 pb-4 border-b border-slate-800"> <div className="grid grid-cols-3 gap-4 mb-4 pb-4 border-b border-slate-800">
<div className="text-xs font-bold text-muted">Field</div> <div className="text-xs font-normal text-muted">Field</div>
<div className="text-xs font-bold text-secondary">Current (ID: {existingItem?.id})</div> <div className="text-xs font-normal text-secondary">Current (ID: {existingItem?.id})</div>
<div className="text-xs font-bold text-primary">New (Import)</div> <div className="text-xs font-normal text-primary">New (Import)</div>
</div> </div>
{fields.map(field => { {fields.map(field => {
@@ -72,11 +72,11 @@ export default function ItemComparisonModal({
different ? 'bg-amber-500/10 border border-amber-500/20' : 'bg-slate-800/30' different ? 'bg-amber-500/10 border border-amber-500/20' : 'bg-slate-800/30'
}`} }`}
> >
<div className="text-sm font-bold text-secondary">{field.label}</div> <div className="text-sm font-normal text-secondary">{field.label}</div>
<div className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}> <div className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}>
{existing} {existing}
</div> </div>
<div className={`text-sm font-mono ${different ? 'text-primary font-bold' : 'text-secondary'}`}> <div className={`text-sm font-mono ${different ? 'text-primary font-normal' : 'text-secondary'}`}>
{newVal} {newVal}
</div> </div>
</div> </div>
@@ -96,7 +96,7 @@ export default function ItemComparisonModal({
onClick={onSkip} onClick={onSkip}
disabled={loading} disabled={loading}
aria-label="Skip this item comparison" aria-label="Skip this item comparison"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-secondary rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none" className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-secondary rounded-2xl text-sm font-normal cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
> >
<SkipForward size={16} /> Skip <SkipForward size={16} /> Skip
</button> </button>
@@ -105,7 +105,7 @@ export default function ItemComparisonModal({
onClick={onUpdate} onClick={onUpdate}
disabled={loading} disabled={loading}
aria-label="Update item with new data" aria-label="Update item with new data"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-primary hover:bg-blue-600 text-white rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-primary/20 focus:ring-2 focus:ring-blue-400 focus:outline-none" className="flex-1 flex items-center justify-center gap-2 py-4 bg-primary hover:bg-blue-600 text-white rounded-2xl text-sm font-normal cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-primary/20 focus:ring-2 focus:ring-blue-400 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

12
frontend/components/LogsOverlay.tsx
View File

@@ -17,7 +17,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
<div className="fixed inset-0 z-50 flex flex-col bg-background p-6 animate-in slide-in-from-bottom-20 duration-500"> <div className="fixed inset-0 z-50 flex flex-col bg-background p-6 animate-in slide-in-from-bottom-20 duration-500">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
<div> <div>
<h2 className="text-2xl font-black tracking-tight">Audit History</h2> <h2 className="text-2xl font-normal tracking-tight">Audit History</h2>
<p className="text-xs text-muted">Live transaction log from cloud</p> <p className="text-xs text-muted">Live transaction log from cloud</p>
</div> </div>
<button <button
@@ -39,16 +39,16 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
<div key={log.id} className="bg-surface/70 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4"> <div key={log.id} className="bg-surface/70 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<p className={`text-xs font-black ${ <p className={`text-xs font-normal ${
log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500") log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
}`}> }`}>
{log.action} {log.action}
</p> </p>
<span className="text-xs font-bold text-muted">by</span> <span className="text-xs font-normal text-muted">by</span>
<span className="text-xs font-black text-secondary">{log.username || 'System'}</span> <span className="text-xs font-normal text-secondary">{log.username || 'System'}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-bold text-secondary"> <span className="text-sm font-normal text-secondary">
{inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`} {inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
</span> </span>
</div> </div>
@@ -66,7 +66,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
)} )}
</div> </div>
<div className="text-right"> <div className="text-right">
<p className={`text-lg font-black ${ <p className={`text-lg font-normal ${
log.quantity_change > 0 ? "text-green-400" : "text-rose-400" log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
}`}> }`}>
{log.quantity_change > 0 ? '+' : ''}{log.quantity_change} {log.quantity_change > 0 ? '+' : ''}{log.quantity_change}

36
frontend/components/LogsTable.tsx
View File

@@ -27,7 +27,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
return ( return (
<div className="flex flex-col items-center justify-center py-32 text-secondary gap-4 animate-pulse"> <div className="flex flex-col items-center justify-center py-32 text-secondary gap-4 animate-pulse">
<div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" /> <div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
<p className="text-xs font-black tracking-widest italic">Securing Audit Stream...</p> <p className="text-xs font-normal tracking-widest italic">Securing Audit Stream...</p>
</div> </div>
); );
} }
@@ -39,8 +39,8 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<ArrowDownCircle size={32} /> <ArrowDownCircle size={32} />
</div> </div>
<div> <div>
<p className="text-xl font-black text-secondary tracking-tight">No events found</p> <p className="text-xl font-normal text-secondary tracking-tight">No events found</p>
<p className="text-xs text-secondary font-bold mt-1">Refine your strategic filters</p> <p className="text-xs text-secondary font-normal mt-1">Refine your strategic filters</p>
</div> </div>
</div> </div>
); );
@@ -58,7 +58,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="flex-1 min-w-0 z-10 flex items-center gap-4"> <div className="flex-1 min-w-0 z-10 flex items-center gap-4">
{/* Compact Action Badge */} {/* Compact Action Badge */}
<div className={cn( <div className={cn(
"text-[10px] font-black px-3 py-1.5 rounded-lg border min-w-[85px] text-center tracking-tight", "text-[10px] font-normal px-3 py-1.5 rounded-lg border min-w-[85px] text-center tracking-tight",
log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" : log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
(log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" : (log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" :
(log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" : (log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
@@ -84,7 +84,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="shrink-0 flex items-center gap-3 z-10"> <div className="shrink-0 flex items-center gap-3 z-10">
<div className={cn( <div className={cn(
"text-lg font-black tabular-nums min-w-[35px] text-right", "text-lg font-normal tabular-nums min-w-[35px] text-right",
(log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" : "text-primary/50") (log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" : "text-primary/50")
)}> )}>
{log.quantity_change ? (log.quantity_change > 0 ? `+${log.quantity_change}` : log.quantity_change) : (log.action.includes('DB') ? 'SYS' : '±')} {log.quantity_change ? (log.quantity_change > 0 ? `+${log.quantity_change}` : log.quantity_change) : (log.action.includes('DB') ? 'SYS' : '±')}
@@ -101,13 +101,13 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div className="space-y-1 pr-4"> <div className="space-y-1 pr-4">
<div className={cn( <div className={cn(
"text-xs font-bold px-4 py-1.5 rounded-full border inline-block tracking-widest", "text-xs font-normal px-4 py-1.5 rounded-full border inline-block tracking-widest",
selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" : selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" :
(selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30") (selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30")
)}> )}>
{selectedLog.action} {selectedLog.action}
</div> </div>
<h2 className="text-2xl font-black text-white tracking-tight pt-2 leading-tight"> <h2 className="text-2xl font-normal text-white tracking-tight pt-2 leading-tight">
{selectedLog.resolved_name} {selectedLog.resolved_name}
</h2> </h2>
</div> </div>
@@ -118,13 +118,13 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50"> <div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-muted tracking-widest">Protocol Operator</p> <p className="text-[11px] font-normal text-muted tracking-widest">Protocol Operator</p>
<p className="text-sm font-black text-secondary">{selectedLog.username || 'Automated Process'}</p> <p className="text-sm font-normal text-secondary">{selectedLog.username || 'Automated Process'}</p>
</div> </div>
<div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50"> <div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
<p className="text-[11px] font-bold text-muted tracking-widest">Quantity Delta</p> <p className="text-[11px] font-normal text-muted tracking-widest">Quantity Delta</p>
<p className={cn( <p className={cn(
"text-xl font-black tabular-nums", "text-xl font-normal tabular-nums",
(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500" (selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
)}> )}>
{selectedLog.quantity_change {selectedLog.quantity_change
@@ -136,8 +136,8 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="space-y-5"> <div className="space-y-5">
<div className="space-y-1"> <div className="space-y-1">
<p className="text-[11px] font-bold text-muted tracking-widest ml-1">Universal Timestamp</p> <p className="text-[11px] font-normal text-muted tracking-widest ml-1">Universal Timestamp</p>
<p className="text-xs font-bold text-secondary bg-background/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums"> <p className="text-xs font-normal text-secondary bg-background/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums">
{new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })} {new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })}
</p> </p>
</div> </div>
@@ -149,15 +149,15 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="space-y-4 pt-2"> <div className="space-y-4 pt-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-px flex-1 bg-slate-800/50" /> <div className="h-px flex-1 bg-slate-800/50" />
<p className="text-[8px] font-black text-slate-700 tracking-[0.2em]">Snapshot Record</p> <p className="text-[8px] font-normal text-slate-700 tracking-[0.2em]">Snapshot Record</p>
<div className="h-px flex-1 bg-slate-800/50" /> <div className="h-px flex-1 bg-slate-800/50" />
</div> </div>
<div className="grid grid-cols-2 gap-2.5"> <div className="grid grid-cols-2 gap-2.5">
{Object.entries(snap).map(([key, val]) => ( {Object.entries(snap).map(([key, val]) => (
(val && key !== 'image_url' && key !== 'id') ? ( (val && key !== 'image_url' && key !== 'id') ? (
<div key={key} className="bg-background/20 p-3 rounded-xl border border-slate-800/20"> <div key={key} className="bg-background/20 p-3 rounded-xl border border-slate-800/20">
<p className="text-[10px] font-bold text-muted mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p> <p className="text-[10px] font-normal text-muted mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p>
<p className="text-xs font-bold text-secondary truncate" title={String(val)}>{String(val)}</p> <p className="text-xs font-normal text-secondary truncate" title={String(val)}>{String(val)}</p>
</div> </div>
) : null ) : null
))} ))}
@@ -169,7 +169,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
{selectedLog.details && ( {selectedLog.details && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<p className="text-[11px] font-bold text-muted tracking-widest ml-1">Intervention Details</p> <p className="text-[11px] font-normal text-muted tracking-widest ml-1">Intervention Details</p>
<div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-sm font-medium leading-relaxed italic shadow-inner"> <div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-sm font-medium leading-relaxed italic shadow-inner">
"{selectedLog.details}" "{selectedLog.details}"
</div> </div>
@@ -179,7 +179,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<button <button
onClick={() => setSelectedLog(null)} onClick={() => setSelectedLog(null)}
className="w-full bg-slate-800 hover:bg-slate-700 text-white font-black py-4.5 rounded-2xl transition-all active:scale-95 border border-slate-700 shadow-xl" className="w-full bg-slate-800 hover:bg-slate-700 text-white font-normal py-4.5 rounded-2xl transition-all active:scale-95 border border-slate-700 shadow-xl"
> >
Close Audit Insight Close Audit Insight
</button> </button>

2
frontend/components/NewItemDialog.tsx
View File

@@ -26,7 +26,7 @@ export default function NewItemDialog({ onScannerClick, onAddItemClick }: NewIte
<div className="w-full flex justify-center mt-4"> <div className="w-full flex justify-center mt-4">
<button <button
onClick={onAddItemClick} onClick={onAddItemClick}
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" 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-normal text-indigo-400 gap-4"
> >
<div className="p-4 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10"> <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} /> <Sparkles size={32} />

4
frontend/components/ScannerSection.tsx
View File

@@ -43,7 +43,7 @@ export default function ScannerSection({
data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined} data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
onClick={() => onModeChange(m.id)} onClick={() => onModeChange(m.id)}
className={cn( className={cn(
"flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-black transition-all flex items-center justify-center gap-3", "flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-3",
mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-muted hover:text-secondary" mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-muted hover:text-secondary"
)} )}
> >
@@ -58,7 +58,7 @@ export default function ScannerSection({
{showScanner ? ( {showScanner ? (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">scanning...</h2> <h2 className="text-lg font-normal">scanning...</h2>
<button <button
onClick={() => onShowScanner(false)} onClick={() => onShowScanner(false)}
className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-rose-500 transition-all active:scale-95" className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-rose-500 transition-all active:scale-95"

4
frontend/components/StatCard.tsx
View File

@@ -12,12 +12,12 @@ export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
<div className="flex justify-between items-center gap-2 p-3.5 bg-surface/70 border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-surface" role="status"> <div className="flex justify-between items-center gap-2 p-3.5 bg-surface/70 border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-surface" role="status">
<div className="flex items-center gap-2.5 min-w-0"> <div className="flex items-center gap-2.5 min-w-0">
{Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />} {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />}
<span className="text-base md:text-lg text-secondary font-semibold truncate"> <span className="text-base md:text-lg text-secondary font-normal truncate">
{label} {label}
</span> </span>
</div> </div>
<span className="text-2xl md:text-3xl font-black text-white whitespace-nowrap tabular-nums"> <span className="text-2xl md:text-3xl font-normal text-white whitespace-nowrap tabular-nums">
{value} {value}
</span> </span>
</div> </div>

38
frontend/components/StockAdjustmentPanel.tsx
View File

@@ -65,10 +65,10 @@ export default function StockAdjustmentPanel({
<div data-testid="stock-adjustment-form" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200"> <div data-testid="stock-adjustment-form" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300"> <div className="w-full max-w-lg bg-surface 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"> <div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black tracking-tight flex items-center gap-2"> <h3 className="text-xl font-normal tracking-tight flex items-center gap-2">
<span data-testid="adjustment-item-name">{isEditing ? "Edit Metadata" : selectedItem.name}</span> <span data-testid="adjustment-item-name">{isEditing ? "Edit Metadata" : selectedItem.name}</span>
{!isEditing && ( {!isEditing && (
<span data-testid="current-quantity" className="text-[11px] bg-slate-800 text-secondary px-2 py-0.5 rounded-md font-black tracking-tight shadow-sm border border-slate-700/50"> <span data-testid="current-quantity" className="text-[11px] bg-slate-800 text-secondary px-2 py-0.5 rounded-md font-normal tracking-tight shadow-sm border border-slate-700/50">
In Stock: {selectedItem.quantity} In Stock: {selectedItem.quantity}
</span> </span>
)} )}
@@ -104,17 +104,17 @@ export default function StockAdjustmentPanel({
<div className="space-y-4 mb-8"> <div className="space-y-4 mb-8">
<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"> <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-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label> <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 <textarea
value={editedItem.name || ''} value={editedItem.name || ''}
onChange={(e) => onEditChange({ ...editedItem, name: e.target.value })} onChange={(e) => onEditChange({ ...editedItem, name: e.target.value })}
className="bg-transparent w-full text-lg font-bold 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-white placeholder:text-muted resize-none h-8 leading-tight selection:bg-primary/30 py-0"
placeholder="SSD, SFP, Cable..." placeholder="SSD, SFP, Cable..."
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Part Number</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Part Number</label>
<input <input
type="text" type="text"
value={editedItem.part_number || ''} value={editedItem.part_number || ''}
@@ -125,7 +125,7 @@ export default function StockAdjustmentPanel({
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Category Group</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Category Group</label>
<input <input
type="text" type="text"
list="existing-categories" list="existing-categories"
@@ -141,7 +141,7 @@ export default function StockAdjustmentPanel({
</datalist> </datalist>
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Type</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Item Type</label>
<input <input
type="text" type="text"
list="existing-types" list="existing-types"
@@ -152,7 +152,7 @@ export default function StockAdjustmentPanel({
/> />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-sm font-bold text-secondary ml-1">Box / Container Label</label> <label className="text-sm font-normal text-secondary ml-1">Box / Container Label</label>
<div className="relative flex items-center"> <div className="relative flex items-center">
<input <input
type="text" type="text"
@@ -178,7 +178,7 @@ export default function StockAdjustmentPanel({
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Connector</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Connector</label>
<input <input
type="text" type="text"
value={editedItem.connector || ''} value={editedItem.connector || ''}
@@ -188,7 +188,7 @@ export default function StockAdjustmentPanel({
/> />
</div> </div>
<div> <div>
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Size / Length</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Size / Length</label>
<input <input
type="text" type="text"
value={editedItem.size || ''} value={editedItem.size || ''}
@@ -198,7 +198,7 @@ export default function StockAdjustmentPanel({
/> />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Color</label> <label className="text-sm font-normal text-secondary ml-1 tracking-tight">Item Color</label>
<input <input
type="text" type="text"
value={editedItem.color || ''} value={editedItem.color || ''}
@@ -208,7 +208,7 @@ export default function StockAdjustmentPanel({
/> />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<label className="text-sm font-bold text-secondary ml-1">Description</label> <label className="text-sm font-normal text-secondary ml-1">Description</label>
<textarea <textarea
value={editedItem.description || ''} value={editedItem.description || ''}
onChange={e => onEditChange({ ...editedItem, description: e.target.value })} onChange={e => onEditChange({ ...editedItem, description: e.target.value })}
@@ -217,11 +217,11 @@ export default function StockAdjustmentPanel({
/> />
</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"> <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-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item ID or Code</label> <label className="text-xs text-secondary font-normal mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item ID or Code</label>
<textarea <textarea
value={editedItem.ocr_text || ''} value={editedItem.ocr_text || ''}
onChange={e => onEditChange({ ...editedItem, ocr_text: e.target.value })} onChange={e => onEditChange({ ...editedItem, ocr_text: e.target.value })}
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary resize-none h-12" className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-normal outline-none text-secondary resize-none h-12"
placeholder="e.g., SKU-12345 or barcode text..." placeholder="e.g., SKU-12345 or barcode text..."
/> />
</div> </div>
@@ -244,7 +244,7 @@ export default function StockAdjustmentPanel({
)} )}
> >
<t.icon size={20} className={adjustType === t.id ? t.color : ""} /> <t.icon size={20} className={adjustType === t.id ? t.color : ""} />
<span className="text-xs font-black mt-1">{t.label}</span> <span className="text-xs font-normal mt-1">{t.label}</span>
</button> </button>
))} ))}
</div> </div>
@@ -258,8 +258,8 @@ export default function StockAdjustmentPanel({
<Minus size={24} /> <Minus size={24} />
</button> </button>
<div className="text-center" data-testid="adjustment-quantity-input"> <div className="text-center" data-testid="adjustment-quantity-input">
<span className="text-xs font-black tabular-nums">{adjustQty}</span> <span className="text-xs font-normal tabular-nums">{adjustQty}</span>
<span className="text-[10px] text-primary/80 font-bold tracking-tight">Units</span> <span className="text-[10px] text-primary/80 font-normal tracking-tight">Units</span>
</div> </div>
<button <button
onClick={() => onQuantityChange(adjustQty + 1)} onClick={() => onQuantityChange(adjustQty + 1)}
@@ -273,7 +273,7 @@ export default function StockAdjustmentPanel({
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl animate-in shake duration-500"> <div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl animate-in shake duration-500">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
<AlertTriangle size={16} className="text-red-500" /> <AlertTriangle size={16} className="text-red-500" />
<span className="text-sm font-bold text-red-400">Waste Declaration</span> <span className="text-sm font-normal text-red-400">Waste Declaration</span>
</div> </div>
<select <select
value={trashReason} value={trashReason}
@@ -296,7 +296,7 @@ export default function StockAdjustmentPanel({
onClick={isEditing ? onUpdateItem : onAdjustStock} onClick={isEditing ? onUpdateItem : onAdjustStock}
data-testid="adjustment-submit" data-testid="adjustment-submit"
className={cn( className={cn(
"w-full py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-2xl", "w-full py-5 rounded-[1.8rem] font-normal text-lg transition-all active:scale-[0.98] shadow-2xl",
isEditing ? "bg-slate-100 text-slate-900" : ( isEditing ? "bg-slate-100 text-slate-900" : (
adjustType === 'ADD' ? "bg-primary shadow-primary/20 text-white" : adjustType === 'ADD' ? "bg-primary shadow-primary/20 text-white" :
adjustType === 'REMOVE' ? "bg-amber-600 shadow-amber-500/20 text-white" : adjustType === 'REMOVE' ? "bg-amber-600 shadow-amber-500/20 text-white" :

26
frontend/components/admin/AiManager.tsx
View File

@@ -38,7 +38,7 @@ export default function AiManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20"> <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Brain size={20} /> <Brain size={20} />
</div> </div>
<h2 className="text-xl font-black text-white tracking-tight">AI Intelligence</h2> <h2 className="text-xl font-normal text-white tracking-tight">AI Intelligence</h2>
</div> </div>
</div> </div>
@@ -63,9 +63,9 @@ export default function AiManager({
{p.id === 'gemini' ? <Cpu size={16} /> : <Zap size={16} />} {p.id === 'gemini' ? <Cpu size={16} /> : <Zap size={16} />}
</div> </div>
<div> <div>
<p className={cn("text-xs font-black tracking-tight", p.active ? "text-white" : "text-secondary")}>{p.name}</p> <p className={cn("text-xs font-normal tracking-tight", p.active ? "text-white" : "text-secondary")}>{p.name}</p>
<p className={cn( <p className={cn(
"text-xs font-bold mt-1 px-0.5 rounded", "text-xs font-normal mt-1 px-0.5 rounded",
p.active p.active
? (p.configured ? "text-emerald-200" : "text-rose-100") ? (p.configured ? "text-emerald-200" : "text-rose-100")
: (p.configured ? "text-emerald-500" : "text-rose-500") : (p.configured ? "text-emerald-500" : "text-rose-500")
@@ -75,7 +75,7 @@ export default function AiManager({
</div> </div>
</div> </div>
{p.active && ( {p.active && (
<div className="bg-white/20 px-2.5 py-1 rounded-full text-xs font-black text-white tracking-tight"> <div className="bg-white/20 px-2.5 py-1 rounded-full text-xs font-normal text-white tracking-tight">
Active Active
</div> </div>
)} )}
@@ -87,13 +87,13 @@ export default function AiManager({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-primary/10 rounded-lg text-primary"><Lock size={14} /></div> <div className="p-2 bg-primary/10 rounded-lg text-primary"><Lock size={14} /></div>
<h3 className="text-sm font-bold text-secondary tracking-tight">Provider Access Keys</h3> <h3 className="text-sm font-normal text-secondary tracking-tight">Provider Access Keys</h3>
</div> </div>
<button <button
onClick={onSaveAiKeys} onClick={onSaveAiKeys}
disabled={isSavingKeys} disabled={isSavingKeys}
data-testid="save-settings-button" data-testid="save-settings-button"
className="px-6 py-2.5 bg-primary hover:bg-primary text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2" className="px-6 py-2.5 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
> >
{isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />} {isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
{isSavingKeys ? "Storing..." : "Store API Keys"} {isSavingKeys ? "Storing..." : "Store API Keys"}
@@ -102,7 +102,7 @@ export default function AiManager({
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Gemini Api Key</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Gemini Api Key</label>
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
data-testid="ai-api-key-input" data-testid="ai-api-key-input"
@@ -116,7 +116,7 @@ export default function AiManager({
onClick={() => onTestAiKey('gemini')} onClick={() => onTestAiKey('gemini')}
disabled={isTestingKeys.gemini} disabled={isTestingKeys.gemini}
className={cn( className={cn(
"px-4 py-2 rounded-xl text-xs font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5", "px-4 py-2 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.gemini isTestingKeys.gemini
? "bg-slate-800 border-slate-700 text-muted cursor-wait" ? "bg-slate-800 border-slate-700 text-muted cursor-wait"
: "bg-primary border-primary text-white hover:bg-primary" : "bg-primary border-primary text-white hover:bg-primary"
@@ -128,7 +128,7 @@ export default function AiManager({
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Claude Api Key</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Claude Api Key</label>
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
data-testid="ai-api-key-input" data-testid="ai-api-key-input"
@@ -142,7 +142,7 @@ export default function AiManager({
onClick={() => onTestAiKey('claude')} onClick={() => onTestAiKey('claude')}
disabled={isTestingKeys.claude} disabled={isTestingKeys.claude}
className={cn( className={cn(
"px-4 py-2 rounded-xl text-xs font-bold tracking-tight transition-all border shadow-lg flex items-center gap-1.5", "px-4 py-2 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.claude isTestingKeys.claude
? "bg-slate-800 border-slate-700 text-muted cursor-wait" ? "bg-slate-800 border-slate-700 text-muted cursor-wait"
: "bg-primary border-primary text-white hover:bg-primary" : "bg-primary border-primary text-white hover:bg-primary"
@@ -159,11 +159,11 @@ export default function AiManager({
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between px-1"> <div className="flex items-center justify-between px-1">
<label className="text-sm font-bold text-secondary tracking-tight">System Prompt (Vision Extraction)</label> <label className="text-sm font-normal text-secondary tracking-tight">System Prompt (Vision Extraction)</label>
<button <button
onClick={onUpdatePrompt} onClick={onUpdatePrompt}
disabled={isSavingPrompt} disabled={isSavingPrompt}
className="px-6 py-2 bg-primary hover:bg-primary text-white rounded-xl text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2" className="px-6 py-2 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
> >
{isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />} {isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
{isSavingPrompt ? "Saving..." : "Save Prompt"} {isSavingPrompt ? "Saving..." : "Save Prompt"}
@@ -172,7 +172,7 @@ export default function AiManager({
<textarea <textarea
value={aiPrompt} value={aiPrompt}
onChange={(e) => setAiPrompt(e.target.value)} onChange={(e) => setAiPrompt(e.target.value)}
className="w-full bg-background/80 border border-slate-800 rounded-2xl p-6 text-xs font-mono font-bold text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner" className="w-full bg-background/80 border border-slate-800 rounded-2xl p-6 text-xs font-mono font-normal text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
/> />
</div> </div>
<div className="bg-primary/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start"> <div className="bg-primary/5 border border-purple-500/10 rounded-2xl p-4 flex gap-4 items-start">

12
frontend/components/admin/CategoryManager.tsx
View File

@@ -29,12 +29,12 @@ export default function CategoryManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20"> <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Layers size={20} /> <Layers size={20} />
</div> </div>
<h2 className="text-xl font-black text-white tracking-tight">Category Groups</h2> <h2 className="text-xl font-normal text-white tracking-tight">Category Groups</h2>
</div> </div>
<button <button
onClick={onAddCategory} onClick={onAddCategory}
data-testid="add-category-button" data-testid="add-category-button"
className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-6 py-3 rounded-xl text-sm font-black transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight" className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-6 py-3 rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
> >
<Plus size={14} /> New Group <Plus size={14} /> New Group
</button> </button>
@@ -78,7 +78,7 @@ export default function CategoryManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20"> <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Edit2 size={20} /> <Edit2 size={20} />
</div> </div>
<h3 className="text-xl font-black text-white tracking-tight">Modify Group</h3> <h3 className="text-xl font-normal text-white tracking-tight">Modify Group</h3>
</div> </div>
<button onClick={() => setEditingCategory(null)} className="p-3 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800"> <button onClick={() => setEditingCategory(null)} className="p-3 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800">
<X size={20} /> <X size={20} />
@@ -86,7 +86,7 @@ export default function CategoryManager({
</div> </div>
<div data-testid="category-form" className="space-y-6"> <div data-testid="category-form" className="space-y-6">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Group Identifier</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Group Identifier</label>
<input <input
data-testid="category-name-input" data-testid="category-name-input"
type="text" type="text"
@@ -96,14 +96,14 @@ export default function CategoryManager({
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Strategic Description</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Strategic Description</label>
<textarea <textarea
value={editCatForm.description} value={editCatForm.description}
onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})} onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-2xl py-4 px-5 text-sm text-white focus:border-primary outline-none transition-all h-32 resize-none" className="w-full bg-background border border-slate-800 rounded-2xl py-4 px-5 text-sm text-white focus:border-primary outline-none transition-all h-32 resize-none"
/> />
</div> </div>
<button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm mb-4 tracking-tight"> <button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-normal py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm mb-4 tracking-tight">
Update Asset Group Update Asset Group
</button> </button>
</div> </div>

38
frontend/components/admin/DatabaseManager.tsx
View File

@@ -40,27 +40,27 @@ export default function DatabaseManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20"> <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Database size={20} /> <Database size={20} />
</div> </div>
<h2 className="text-xl font-black text-white tracking-tight">System Integrity</h2> <h2 className="text-xl font-normal text-white tracking-tight">System Integrity</h2>
</div> </div>
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
<div className="space-y-1 sm:pr-6"> <div className="space-y-1 sm:pr-6">
<p className="text-xs font-bold text-muted tracking-tight">Database Health</p> <p className="text-xs font-normal text-muted tracking-tight">Database Health</p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" /> <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
<span className="text-sm font-bold text-secondary">Operational</span> <span className="text-sm font-normal text-secondary">Operational</span>
</div> </div>
</div> </div>
<div className="sm:pl-6 sm:border-l border-slate-800"> <div className="sm:pl-6 sm:border-l border-slate-800">
<p className="text-xs font-bold text-muted tracking-tight">Last Backup</p> <p className="text-xs font-normal text-muted tracking-tight">Last Backup</p>
<p className="text-sm font-bold text-secondary tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p> <p className="text-sm font-normal text-secondary tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
</div> </div>
<div className="ml-auto"> <div className="ml-auto">
<button <button
onClick={onCreateBackup} onClick={onCreateBackup}
disabled={isBackingUp} disabled={isBackingUp}
data-testid="backup-button" data-testid="backup-button"
className="flex items-center gap-2 px-5 py-3 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-black transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/10 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="flex items-center gap-2 px-5 py-3 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-normal transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/10 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Create database backup" aria-label="Create database backup"
> >
{isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />} {isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
@@ -77,25 +77,25 @@ export default function DatabaseManager({
<History size={20} /> <History size={20} />
</div> </div>
<div> <div>
<h3 className="text-lg font-black text-white tracking-tight">Storage Policy</h3> <h3 className="text-lg font-normal text-white tracking-tight">Storage Policy</h3>
<p className="text-sm text-secondary font-bold tracking-tight">Retention & Maintenance</p> <p className="text-sm text-secondary font-normal tracking-tight">Retention & Maintenance</p>
</div> </div>
</div> </div>
<div className="grid sm:grid-cols-3 gap-6"> <div className="grid sm:grid-cols-3 gap-6">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-bold text-muted tracking-tight ml-1 flex items-center gap-2"> <label className="text-xs font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<History size={10} /> Max Backups <History size={10} /> Max Backups
</label> </label>
<input <input
type="number" type="number"
value={dbSettings.retention_count} value={dbSettings.retention_count}
onChange={(e) => onUpdateDbSettings({...dbSettings, retention_count: parseInt(e.target.value)})} onChange={(e) => onUpdateDbSettings({...dbSettings, retention_count: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums" className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-bold text-muted tracking-tight ml-1 flex items-center gap-2"> <label className="text-xs font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<Clock size={10} /> Schedule (Hour) <Clock size={10} /> Schedule (Hour)
</label> </label>
<input <input
@@ -103,11 +103,11 @@ export default function DatabaseManager({
min="0" max="23" min="0" max="23"
value={dbSettings.schedule_hour} value={dbSettings.schedule_hour}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_hour: parseInt(e.target.value)})} onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_hour: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums" className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-bold text-muted tracking-tight ml-1 flex items-center gap-2"> <label className="text-xs font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<Zap size={10} /> Frequency (Days) <Zap size={10} /> Frequency (Days)
</label> </label>
<input <input
@@ -115,7 +115,7 @@ export default function DatabaseManager({
min="1" min="1"
value={dbSettings.schedule_freq_days} value={dbSettings.schedule_freq_days}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_freq_days: parseInt(e.target.value)})} onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_freq_days: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums" className="w-full bg-background/80 border border-slate-800 rounded-xl py-3 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/> />
</div> </div>
</div> </div>
@@ -123,8 +123,8 @@ export default function DatabaseManager({
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between px-1"> <div className="flex items-center justify-between px-1">
<label className="text-xs font-bold text-muted tracking-tight">Recovery Points</label> <label className="text-xs font-normal text-muted tracking-tight">Recovery Points</label>
<div className="text-xs font-bold text-primary tracking-tight bg-primary/5 px-3 py-1 rounded-full border border-primary/10"> <div className="text-xs font-normal text-primary tracking-tight bg-primary/5 px-3 py-1 rounded-full border border-primary/10">
{formatSize(dbStats.total_size_bytes)} Used {formatSize(dbStats.total_size_bytes)} Used
</div> </div>
</div> </div>
@@ -137,7 +137,7 @@ export default function DatabaseManager({
<Database size={14} /> <Database size={14} />
</div> </div>
<div> <div>
<p className="text-xs font-bold text-secondary">{bak.filename}</p> <p className="text-xs font-normal text-secondary">{bak.filename}</p>
<p className="text-[11px] text-secondary font-medium tabular-nums"> <p className="text-[11px] text-secondary font-medium tabular-nums">
{new Date(bak.created_at).toLocaleString()} • {formatSize(bak.size_bytes)} {new Date(bak.created_at).toLocaleString()} • {formatSize(bak.size_bytes)}
</p> </p>
@@ -158,7 +158,7 @@ export default function DatabaseManager({
<div className="grid grid-cols-2 gap-4 pt-2"> <div className="grid grid-cols-2 gap-4 pt-2">
<button <button
onClick={onExport} onClick={onExport}
className="flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-primary/50 text-primary rounded-2xl text-sm font-black transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-primary/50 text-primary rounded-2xl text-sm font-normal transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Export database" aria-label="Export database"
> >
<Download size={14} /> Export Database <Download size={14} /> Export Database
@@ -171,7 +171,7 @@ export default function DatabaseManager({
className="absolute inset-0 opacity-0 cursor-pointer z-10" className="absolute inset-0 opacity-0 cursor-pointer z-10"
/> />
<button <button
className="w-full flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-black transition-all tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none" className="w-full flex items-center justify-center gap-2 py-4 bg-background border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-normal transition-all tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label="Import database" aria-label="Import database"
> >
<Upload size={14} /> Import Database <Upload size={14} /> Import Database

20
frontend/components/admin/IdentityManager.tsx
View File

@@ -30,12 +30,12 @@ export default function IdentityManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20"> <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<User size={20} /> <User size={20} />
</div> </div>
<h2 className="text-xl font-black text-white tracking-tight">Identity Management</h2> <h2 className="text-xl font-normal text-white tracking-tight">Identity Management</h2>
</div> </div>
<button <button
onClick={onAddUser} onClick={onAddUser}
data-testid="add-user-button" data-testid="add-user-button"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-black transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Add new user" aria-label="Add new user"
> >
<UserPlus size={16} /> Add User <UserPlus size={16} /> Add User
@@ -88,7 +88,7 @@ export default function IdentityManager({
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200"> <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
<div className="bg-surface border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-md shadow-2xl"> <div className="bg-surface border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-md shadow-2xl">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black text-white tracking-tight">Edit Identity</h3> <h3 className="text-xl font-normal text-white tracking-tight">Edit Identity</h3>
<button <button
onClick={() => setEditingUser(null)} onClick={() => setEditingUser(null)}
className="p-2 text-muted hover:text-white transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded" className="p-2 text-muted hover:text-white transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded"
@@ -100,30 +100,30 @@ export default function IdentityManager({
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Username</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Username</label>
<input <input
type="text" type="text"
value={editUserForm.username} value={editUserForm.username}
onChange={(e) => setEditUserForm({ ...editUserForm, username: e.target.value })} onChange={(e) => setEditUserForm({ ...editUserForm, username: e.target.value })}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono" className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">New Password (Leave Empty To Keep)</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">New Password (Leave Empty To Keep)</label>
<input <input
type="password" type="password"
value={editUserForm.password} value={editUserForm.password}
onChange={(e) => setEditUserForm({ ...editUserForm, password: e.target.value })} onChange={(e) => setEditUserForm({ ...editUserForm, password: e.target.value })}
placeholder="********" placeholder="********"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-bold text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono" className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Role</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Role</label>
<select <select
value={editUserForm.role} value={editUserForm.role}
onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })} onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-bold text-white outline-none focus:border-primary/50 transition-all appearance-none" className="w-full bg-background/80 border border-slate-800 rounded-2xl py-3 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 transition-all appearance-none"
> >
<option value="user">Standard User</option> <option value="user">Standard User</option>
<option value="admin">Administrator</option> <option value="admin">Administrator</option>
@@ -132,7 +132,7 @@ export default function IdentityManager({
<button <button
onClick={onUpdateUserSubmit} onClick={onUpdateUserSubmit}
className="w-full bg-primary hover:bg-primary/80 text-white rounded-2xl py-4 text-sm font-black transition-all active:scale-95 shadow-xl shadow-primary/20 tracking-tight mt-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none" className="w-full bg-primary hover:bg-primary/80 text-white rounded-2xl py-4 text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/20 tracking-tight mt-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
> >
Apply Changes Apply Changes
</button> </button>

22
frontend/components/admin/LdapManager.tsx
View File

@@ -24,7 +24,7 @@ export default function LdapManager({
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20"> <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Globe size={20} /> <Globe size={20} />
</div> </div>
<h2 className="text-xl font-black text-white tracking-tight">Enterprise LDAP</h2> <h2 className="text-xl font-normal text-white tracking-tight">Enterprise LDAP</h2>
</div> </div>
</div> </div>
@@ -59,7 +59,7 @@ export default function LdapManager({
<div className="grid sm:grid-cols-2 gap-4"> <div className="grid sm:grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">LDAP URI</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">LDAP URI</label>
<div className="relative"> <div className="relative">
<Server className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} /> <Server className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input <input
@@ -67,12 +67,12 @@ export default function LdapManager({
placeholder="ldap://host:389" placeholder="ldap://host:389"
value={ldapConfig.server_uri} value={ldapConfig.server_uri}
onChange={(e) => setLdapConfig({...ldapConfig, server_uri: e.target.value})} onChange={(e) => setLdapConfig({...ldapConfig, server_uri: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono" className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/> />
</div> </div>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Context DN</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Context DN</label>
<div className="relative"> <div className="relative">
<Shield className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} /> <Shield className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input <input
@@ -80,7 +80,7 @@ export default function LdapManager({
placeholder="dc=example,dc=com" placeholder="dc=example,dc=com"
value={ldapConfig.base_dn} value={ldapConfig.base_dn}
onChange={(e) => setLdapConfig({...ldapConfig, base_dn: e.target.value})} onChange={(e) => setLdapConfig({...ldapConfig, base_dn: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono" className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/> />
</div> </div>
</div> </div>
@@ -88,7 +88,7 @@ export default function LdapManager({
<div className="grid sm:grid-cols-2 gap-4"> <div className="grid sm:grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">User DN Template</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">User DN Template</label>
<div className="relative"> <div className="relative">
<User className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} /> <User className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input <input
@@ -96,12 +96,12 @@ export default function LdapManager({
placeholder="uid={username},ou=people..." placeholder="uid={username},ou=people..."
value={ldapConfig.user_template} value={ldapConfig.user_template}
onChange={(e) => setLdapConfig({...ldapConfig, user_template: e.target.value})} onChange={(e) => setLdapConfig({...ldapConfig, user_template: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono" className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/> />
</div> </div>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-bold text-secondary tracking-tight ml-1">Groups Base DN</label> <label className="text-sm font-normal text-secondary tracking-tight ml-1">Groups Base DN</label>
<div className="relative"> <div className="relative">
<Layers className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} /> <Layers className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted" size={14} />
<input <input
@@ -109,7 +109,7 @@ export default function LdapManager({
placeholder="ou=groups" placeholder="ou=groups"
value={ldapConfig.groups_dn} value={ldapConfig.groups_dn}
onChange={(e) => setLdapConfig({...ldapConfig, groups_dn: e.target.value})} onChange={(e) => setLdapConfig({...ldapConfig, groups_dn: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-bold text-white outline-none focus:border-primary/50 transition-all font-mono" className="w-full bg-background/80 border border-slate-800 rounded-2xl py-2.5 pl-10 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
/> />
</div> </div>
</div> </div>
@@ -148,14 +148,14 @@ export default function LdapManager({
<button <button
onClick={onTestLdap} onClick={onTestLdap}
disabled={testingLdap} disabled={testingLdap}
className="flex-1 bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-primary/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-primary/30" className="flex-1 bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-primary/30"
> >
{testingLdap ? <RotateCcw size={14} className="animate-spin" /> : <Wifi size={14} />} {testingLdap ? <RotateCcw size={14} className="animate-spin" /> : <Wifi size={14} />}
Test Connection Test Connection
</button> </button>
<button <button
onClick={onUpdateLdap} onClick={onUpdateLdap}
className="flex-[2] bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-black shadow-xl shadow-primary/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-primary/30 tracking-tight" className="flex-[2] bg-primary hover:bg-primary text-white rounded-xl py-3 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-primary/30 tracking-tight"
> >
<Shield size={14} /> Save LDAP Policy <Shield size={14} /> Save LDAP Policy
</button> </button>

2
frontend/public/sw.js
View File

File diff suppressed because one or more lines are too long