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

style: full system ui homogenization v1.2.3

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-11 11:25:09 +03:00
parent 4136d49936
commit d7dcd523a6
6 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
VERSION.json
View File

@@ -1,8 +1,9 @@
{ {
"version": "1.2.2", "version": "1.2.3",
"last_build": "2026-04-11-1123", "last_build": "2026-04-11-1131",
"commit": "c42b1", "commit": "a5e2f",
"changelog": [ "changelog": [
"v1.2.3: System-wide UI consistency (standardized font sizes, removed uppercase)",
"v1.2.2: UI Readability refactor (Removed uppercase/tracking, increased font sizes)", "v1.2.2: UI Readability refactor (Removed uppercase/tracking, increased font sizes)",
"v1.2.1: Git path persistence, master/dev/vX branching, and UI case-sensitivity fix", "v1.2.1: Git path persistence, master/dev/vX branching, and UI case-sensitivity fix",
"v1.2.0: Structured category management with grouping support", "v1.2.0: Structured category management with grouping support",

18
dev_docs/ARCHIVE_LOGS.md
View File

@@ -1,15 +1,15 @@
### [2026-04-11 11:21] v1.2.2: UI Readability & Density Optimization ### [2026-04-11 11:30] v1.2.3: System-Wide UI Homogenization
**Purpose:** System-wide removal of `uppercase` transformations and `tracking-widest` spacing. Increased base font sizes for labels and buttons from `9px`/`10px` to `xs`/`sm` across all pages and components to improve accessibility and readability. Updated Gemini model reference in UI to 2.0 Flash. **Purpose:** Completed UI refactoring for all secondary pages (`Inventory`, `Logs`, `Scanner`, `IdentityCheckOverlay`). Standardized font sizes to `xs`/`sm`, removed legacy `uppercase` styling, and fixed Title Case for buttons. Handed over a fully consistent high-density UI.
**Modified Files:** **Modified Files:**
- `frontend/app/page.tsx` - `frontend/app/inventory/page.tsx`
- `frontend/app/admin/page.tsx` - `frontend/app/logs/page.tsx`
- `frontend/app/login/page.tsx` - `frontend/components/Scanner.tsx`
- `frontend/components/BottomNav.tsx` - `frontend/components/IdentityCheckOverlay.tsx`
- `frontend/components/AIOnboarding.tsx` - `VERSION.json`
- `frontend/components/AdminOverlay.tsx`
- `frontend/components/LogsOverlay.tsx`
- `dev_docs/ARCHIVE_LOGS.md` - `dev_docs/ARCHIVE_LOGS.md`
### [2026-04-11 11:21] v1.2.2: UI Readability & Density Optimization
### [2026-04-10 21:59] v1.2.1: Infrastructure & UI Dynamic Versioning ### [2026-04-10 21:59] v1.2.1: Infrastructure & UI Dynamic Versioning
# Archive Logs # Archive Logs

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

@@ -210,14 +210,14 @@ export default function InventoryPage() {
<div className="w-8 h-8 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-3"> <div className="w-8 h-8 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-3">
<Layers size={18} /> <Layers size={18} />
</div> </div>
<p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Categories</p> <p className="text-xs font-black text-slate-500">Categories</p>
<p className="text-2xl font-black mt-1">{stats?.total_categories || categories.length}</p> <p className="text-2xl font-black mt-1">{stats?.total_categories || categories.length}</p>
</div> </div>
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-3xl"> <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-3xl">
<div className="w-8 h-8 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center mb-3"> <div className="w-8 h-8 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center mb-3">
<Package size={18} /> <Package size={18} />
</div> </div>
<p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Item Types</p> <p className="text-xs font-black text-slate-500">Item Types</p>
<p className="text-2xl font-black mt-1">{stats?.total_items || inventory.length}</p> <p className="text-2xl font-black mt-1">{stats?.total_items || inventory.length}</p>
</div> </div>
</section> </section>
@@ -250,7 +250,7 @@ export default function InventoryPage() {
</div> </div>
<div className="text-left"> <div className="text-left">
<h3 className="font-bold text-lg">{cat}</h3> <h3 className="font-bold text-lg">{cat}</h3>
<p className="text-[10px] font-black text-slate-500 uppercase tracking-widest"> <p className="text-xs font-black text-slate-500">
{inventory.filter(i => i.category === cat).length} Item types in stock {inventory.filter(i => i.category === cat).length} Item types in stock
</p> </p>
</div> </div>
@@ -297,7 +297,7 @@ export default function InventoryPage() {
)}> )}>
{item.quantity} {item.quantity}
</span> </span>
<p className="text-[8px] text-slate-600 uppercase tracking-widest font-black">Stock</p> <p className="text-xs text-slate-600 font-bold">Stock</p>
</div> </div>
</div> </div>
))} ))}
@@ -359,7 +359,7 @@ export default function InventoryPage() {
{isEditing ? ( {isEditing ? (
<div className="space-y-4 mb-8"> <div className="space-y-4 mb-8">
<div> <div>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Name</label> <label className="text-xs font-black text-slate-500 ml-1">Name</label>
<input <input
type="text" type="text"
value={editedItem.name || ''} value={editedItem.name || ''}
@@ -368,7 +368,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Part Number</label> <label className="text-xs font-black text-slate-500 ml-1">Part Number</label>
<input <input
type="text" type="text"
value={editedItem.part_number || ''} value={editedItem.part_number || ''}
@@ -378,7 +378,7 @@ export default function InventoryPage() {
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Category</label> <label className="text-xs font-black text-slate-500 ml-1">Category</label>
<select <select
value={editedItem.category || ''} value={editedItem.category || ''}
onChange={e => setEditedItem({...editedItem, category: e.target.value})} onChange={e => setEditedItem({...editedItem, category: e.target.value})}
@@ -391,7 +391,7 @@ export default function InventoryPage() {
</select> </select>
</div> </div>
<div> <div>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Item Type</label> <label className="text-xs font-black text-slate-500 ml-1">Item Type</label>
<input <input
type="text" type="text"
value={editedItem.type || ''} value={editedItem.type || ''}
@@ -401,7 +401,7 @@ export default function InventoryPage() {
</div> </div>
</div> </div>
<div> <div>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Specs / Comments</label> <label className="text-xs font-black text-slate-500 ml-1">Specs / Comments</label>
<input <input
type="text" type="text"
value={editedItem.specs || ''} value={editedItem.specs || ''}
@@ -427,7 +427,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-[10px] font-black uppercase tracking-widest mt-1">{t.label}</span> <span className="text-xs font-black mt-1">{t.label}</span>
</button> </button>
))} ))}
</div> </div>
@@ -493,7 +493,7 @@ export default function InventoryPage() {
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in duration-300">
<div className="bg-slate-900 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-slate-900 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 uppercase tracking-tight">Edit Category</h2> <h2 className="text-xl font-black">Edit Category</h2>
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-400"> <button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-400">
<X size={20} /> <X size={20} />
</button> </button>
@@ -501,7 +501,7 @@ export default function InventoryPage() {
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Name</label> <label className="text-xs font-black text-slate-500 ml-1">Name</label>
<input <input
type="text" type="text"
value={catEditedName} value={catEditedName}
@@ -510,7 +510,7 @@ export default function InventoryPage() {
/> />
</div> </div>
<div> <div>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Description</label> <label className="text-xs font-black text-slate-500 ml-1">Description</label>
<textarea <textarea
value={catEditedDesc} value={catEditedDesc}
onChange={e => setCatEditedDesc(e.target.value)} onChange={e => setCatEditedDesc(e.target.value)}
@@ -521,7 +521,7 @@ export default function InventoryPage() {
<button <button
onClick={handleUpdateCategory} onClick={handleUpdateCategory}
className="w-full bg-primary text-white font-black uppercase tracking-widest 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-black py-4 rounded-2xl shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all"
> >
Update Category Update Category
</button> </button>

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

@@ -53,8 +53,8 @@ export default function LogsPage() {
<History size={24} /> <History size={24} />
</div> </div>
<div> <div>
<h1 className="text-2xl font-black tracking-tight text-white uppercase">Audit History</h1> <h1 className="text-2xl font-black tracking-tight text-white">Audit History</h1>
<p className="text-xs text-slate-500 font-bold tracking-widest uppercase">Centralized Transaction Logs</p> <p className="text-xs text-slate-500 font-bold">Centralized Transaction Logs</p>
</div> </div>
</div> </div>
@@ -74,7 +74,7 @@ export default function LogsPage() {
{loading ? ( {loading ? (
<div className="flex flex-col items-center justify-center p-20 text-slate-500 animate-pulse"> <div className="flex flex-col items-center justify-center p-20 text-slate-500 animate-pulse">
<History size={48} className="opacity-20 mb-4" /> <History size={48} className="opacity-20 mb-4" />
<p className="text-xs font-black uppercase tracking-widest">Retrieving logs from cloud...</p> <p className="text-xs font-black">Retrieving Logs From Cloud...</p>
</div> </div>
) : filteredLogs.length === 0 ? ( ) : filteredLogs.length === 0 ? (
<div className="bg-slate-900/30 border border-slate-800 border-dashed rounded-[2.5rem] p-16 flex flex-col items-center justify-center text-center gap-4"> <div className="bg-slate-900/30 border border-slate-800 border-dashed rounded-[2.5rem] p-16 flex flex-col items-center justify-center text-center gap-4">
@@ -93,14 +93,14 @@ export default function LogsPage() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<div className={cn( <div className={cn(
"text-[9px] font-black uppercase tracking-[0.2em] px-2 py-0.5 rounded-md", "text-xs font-black px-2 py-0.5 rounded-md",
log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500" : log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500" :
(log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500" : "bg-amber-500/10 text-amber-500") (log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500" : "bg-amber-500/10 text-amber-500")
)}> )}>
{log.action} {log.action}
</div> </div>
<span className="text-[10px] font-bold text-slate-600 uppercase tracking-widest">by</span> <span className="text-xs font-bold text-slate-600">by</span>
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{log.username || 'System'}</span> <span className="text-xs font-black text-slate-400">{log.username || 'System'}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-base font-bold text-slate-100 group-hover:text-primary transition-colors"> <span className="text-base font-bold text-slate-100 group-hover:text-primary transition-colors">
@@ -108,12 +108,12 @@ export default function LogsPage() {
</span> </span>
</div> </div>
<div className="flex items-center gap-4 mt-3"> <div className="flex items-center gap-4 mt-3">
<div className="text-[10px] text-slate-600 font-mono flex items-center gap-1.5"> <div className="text-xs text-slate-600 font-mono flex items-center gap-1.5">
<div className="w-1 h-1 rounded-full bg-slate-700" /> <div className="w-1 h-1 rounded-full bg-slate-700" />
{new Date(log.timestamp).toLocaleString()} {new Date(log.timestamp).toLocaleString()}
</div> </div>
{log.details && ( {log.details && (
<span className="text-[9px] bg-slate-800/50 text-slate-500 px-3 py-1 rounded-full border border-slate-700/50 font-mono"> <span className="text-xs bg-slate-800/50 text-slate-500 px-3 py-1 rounded-full border border-slate-700/50 font-mono">
{log.details} {log.details}
</span> </span>
)} )}

26
frontend/components/IdentityCheckOverlay.tsx
View File

@@ -68,7 +68,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<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 uppercase tracking-tight">Identity Check</h2> <h2 className="text-2xl font-black text-white">Identity Check</h2>
<p className="text-slate-500 text-sm">Select operator profile to continue</p> <p className="text-slate-500 text-sm">Select operator profile to continue</p>
</div> </div>
@@ -86,8 +86,8 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
{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 tracking-widest">{user.username}</p> <p className="text-white font-black text-sm">{user.username}</p>
<p className="text-[10px] text-slate-500 font-bold mt-1 tracking-widest">{user.role}</p> <p className="text-xs text-slate-500 font-medium mt-1">{user.role}</p>
</div> </div>
</div> </div>
<ChevronRight size={16} className="text-slate-600 group-hover:text-primary transition-colors" /> <ChevronRight size={16} className="text-slate-600 group-hover:text-primary transition-colors" />
@@ -96,7 +96,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<div className="pt-2"> <div className="pt-2">
<button <button
onClick={() => setIsEnterprise(true)} onClick={() => setIsEnterprise(true)}
className="w-full flex items-center justify-center gap-2 py-4 rounded-2xl border border-dashed border-slate-700 text-slate-500 hover:text-primary hover:border-primary/40 transition-all font-bold text-xs uppercase tracking-widest" className="w-full flex items-center justify-center gap-2 py-4 rounded-2xl border border-dashed border-slate-700 text-slate-500 hover:text-primary hover:border-primary/40 transition-all font-bold text-xs"
> >
<Shield size={14} /> <Shield size={14} />
Enterprise Login Enterprise Login
@@ -106,17 +106,17 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
) : 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-[10px] font-black text-slate-500 uppercase tracking-widest">Enterprise Account</p> <p className="text-xs font-black text-slate-500">Enterprise Account</p>
<button <button
onClick={() => setIsEnterprise(false)} onClick={() => setIsEnterprise(false)}
className="text-[10px] font-black text-primary uppercase tracking-widest hover:underline" className="text-xs font-black 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-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Username</label> <label className="text-xs font-black text-slate-500 px-1">Username</label>
<div className="relative"> <div className="relative">
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} /> <User className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
<input <input
@@ -130,7 +130,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Password</label> <label className="text-xs font-black text-slate-500 px-1">Password</label>
<div className="relative"> <div className="relative">
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} /> <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
<input <input
@@ -145,7 +145,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<button <button
onClick={handleLogin} onClick={handleLogin}
className="w-full bg-primary text-white font-black uppercase tracking-widest py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all" className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
> >
Sign In Sign In
</button> </button>
@@ -160,13 +160,13 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<X size={16} className="text-slate-400" /> <X size={16} className="text-slate-400" />
</button> </button>
<div> <div>
<p className="text-xs font-bold text-slate-500 uppercase tracking-widest">Logging in as</p> <p className="text-xs font-bold text-slate-500">Logging in as</p>
<p className="text-white font-black tracking-tight">{selectedUserForLogin.username}</p> <p className="text-white font-black">{selectedUserForLogin.username}</p>
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Password</label> <label className="text-xs font-black text-slate-500 px-1">Password</label>
<div className="relative"> <div className="relative">
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} /> <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
<input <input
@@ -182,7 +182,7 @@ const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityChe
<button <button
onClick={handleLogin} onClick={handleLogin}
className="w-full bg-primary text-white font-black uppercase tracking-widest py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all" className="w-full bg-primary text-white font-black py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
> >
Verify Identity Verify Identity
</button> </button>

8
frontend/components/Scanner.tsx
View File

@@ -262,7 +262,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
<p className="text-sm font-bold text-center text-primary">Tap the correct text on the label</p> <p className="text-sm font-bold text-center text-primary">Tap the correct text on the label</p>
<button <button
onClick={() => { setIsSelecting(false); setCapturedImage(null); }} onClick={() => { setIsSelecting(false); setCapturedImage(null); }}
className="w-full py-4 bg-slate-800 text-white rounded-2xl font-black text-xs uppercase tracking-widest" className="w-full py-4 bg-slate-800 text-white rounded-2xl font-bold text-xs"
> >
Cancel & Rescan Cancel & Rescan
</button> </button>
@@ -318,7 +318,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
className="bg-slate-900/90 backdrop-blur-md border border-slate-700 text-white w-14 h-14 rounded-full flex flex-col items-center justify-center shadow-2xl active:scale-95 transition-transform" className="bg-slate-900/90 backdrop-blur-md border border-slate-700 text-white w-14 h-14 rounded-full flex flex-col items-center justify-center shadow-2xl active:scale-95 transition-transform"
> >
<span className="text-xs font-black">{zoom.toFixed(1)}x</span> <span className="text-xs font-black">{zoom.toFixed(1)}x</span>
<span className="text-[8px] uppercase text-primary font-bold">Zoom</span> <span className="text-xs text-primary font-bold">Zoom</span>
</button> </button>
)} )}
@@ -327,7 +327,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
onClick={handleOCR} onClick={handleOCR}
disabled={ocrProcessing} disabled={ocrProcessing}
className={cn( className={cn(
"w-full py-4 rounded-2xl font-black text-xs uppercase tracking-[0.2em] flex items-center justify-center gap-3 shadow-2xl transition-all active:scale-95 border border-white/10", "w-full py-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-3 shadow-2xl transition-all active:scale-95 border border-white/10",
ocrProcessing ? "bg-slate-800 text-slate-500" : "bg-primary text-white" ocrProcessing ? "bg-slate-800 text-slate-500" : "bg-primary text-white"
)} )}
> >
@@ -336,7 +336,7 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
</button> </button>
) : ( ) : (
<div className="bg-black/40 backdrop-blur-sm py-2 px-6 rounded-full border border-white/5"> <div className="bg-black/40 backdrop-blur-sm py-2 px-6 rounded-full border border-white/5">
<p className="text-[10px] text-center text-slate-300 uppercase tracking-widest font-black"> <p className="text-xs text-center text-slate-300 font-bold">
Center barcode for auto-scan Center barcode for auto-scan
</p> </p>
</div> </div>