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

frontend/components/AIOnboarding.tsx

@@ -81,7 +81,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
             </div>
             <div>
               <h2 className="text-lg font-bold">AI Discovery</h2>
-              <p className="text-[10px] text-slate-500 uppercase font-black tracking-widest">Powered by Gemini 1.5</p>
+              <p className="text-xs text-slate-500 font-bold">Powered by Gemini 2.0 Flash</p>
             </div>
         </div>
         <button onClick={onCancel} className="p-2 hover:bg-slate-900 rounded-full transition-colors">
@@ -96,7 +96,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
                <Camera size={32} className="text-slate-500" />
             </div>
             <p className="text-slate-300 mb-2 text-center font-bold">Label Insight Mode</p>
-            <p className="text-[11px] text-slate-500 px-8 text-center uppercase tracking-widest leading-relaxed">
+            <p className="text-xs text-slate-500 px-8 text-center leading-relaxed font-bold">
               Scan or upload a sharp photo of the item specifications
             </p>
           </div>
@@ -133,7 +133,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
                   <RefreshCw className="w-12 h-12 text-primary animate-spin" />
                   <Sparkles className="absolute -top-2 -right-2 text-amber-400 w-6 h-6 animate-pulse" />
                 </div>
-                <p className="text-white font-black tracking-tight uppercase text-xs">Gemini is processing...</p>
+                <p className="text-white font-black tracking-tight text-sm">Gemini is processing...</p>
               </div>
             )}
           </div>
@@ -151,7 +151,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
               disabled={uploading}
               className="flex-1 py-4 bg-primary text-white rounded-2xl font-black text-lg shadow-xl shadow-primary/30 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50 hover:bg-blue-500"
             >
-              {uploading ? "ANALYZING..." : "EXTRACT DATA"}
+              {uploading ? "Analyzing..." : "Extract Data"}
               {!uploading && <Check size={20} />}
             </button>
           </div>
@@ -159,13 +159,13 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
       ) : (
         <div className="flex-1 flex flex-col gap-6 overflow-hidden">
           <div className="flex items-center justify-between">
-              <span className="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em]">Validation Mask</span>
-              <span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-0.5 rounded-full font-bold">AI READY</span>
+              <span className="text-xs text-slate-500 font-bold">Validation Mask</span>
+              <span className="text-xs bg-green-500/10 text-green-400 px-2 py-0.5 rounded-full font-bold">AI Ready</span>
           </div>
           
           <div className="flex-1 overflow-y-auto space-y-4 pr-1 scrollbar-hide">
             <div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
-              <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Name</label>
+              <label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Name</label>
               <textarea 
                 value={extractedData.name || ''} 
                 onChange={(e) => setExtractedData({...extractedData, name: e.target.value})}
@@ -176,7 +176,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
 
             <div className="grid grid-cols-2 gap-4">
                <div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
-                <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Category Group</label>
+                <label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Category Group</label>
                 <select 
                   value={extractedData.category || ''} 
                   onChange={(e) => setExtractedData({...extractedData, category: e.target.value})}
@@ -189,7 +189,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
                 </select>
               </div>
               <div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
-                <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Type</label>
+                <label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Type</label>
                 <input 
                   value={extractedData.type || ''} 
                   onChange={(e) => setExtractedData({...extractedData, type: e.target.value})}
@@ -201,7 +201,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
 
             <div className="grid grid-cols-2 gap-4">
               <div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
-                <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Item Color</label>
+                <label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Item Color</label>
                 <div className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full" style={{backgroundColor: extractedData.color || 'transparent'}} />
                    <input 
@@ -215,7 +215,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
             </div>
 
             <div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
-              <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Technical Specifications</label>
+              <label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Technical Specifications</label>
               <textarea 
                 value={extractedData.specs || ''} 
                 onChange={(e) => setExtractedData({...extractedData, specs: e.target.value})}
@@ -226,7 +226,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
 
             <div className="grid grid-cols-2 gap-4">
               <div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
-                <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Part Number (P/N)</label>
+                <label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Part Number (P/N)</label>
                 <div className="flex items-center gap-2">
                   <Hash size={14} className="text-primary/60" />
                   <input 
@@ -238,7 +238,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
                 </div>
               </div>
               <div className="bg-slate-900/80 p-5 rounded-[1.5rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
-                <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block group-focus-within:text-primary transition-colors">Initial Stock</label>
+                <label className="text-xs text-slate-500 font-bold mb-1 block group-focus-within:text-primary transition-colors">Initial Stock</label>
                 <div className="flex items-center gap-2">
                   <Layout size={14} className="text-amber-500/60" />
                   <input 
@@ -252,7 +252,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
             </div>
 
             <div className="bg-slate-900/30 p-4 rounded-[1.5rem] border border-slate-800/50">
-               <label className="text-[9px] uppercase tracking-[0.15em] text-slate-500 font-black mb-2 block">System Metadata (S/N if found)</label>
+               <label className="text-xs text-slate-500 font-bold mb-1 block">System Metadata (S/N if found)</label>
                <div className="text-[10px] text-slate-500 font-mono flex flex-wrap gap-2">
                  {extractedData.serial_number && <span>S/N: {extractedData.serial_number}</span>}
                  {extractedData.additional_data && <span>+ More Data</span>}
@@ -265,11 +265,11 @@ export default function AIOnboarding({ onCancel, onComplete, categories }: AIOnb
               onClick={confirmOnboarding}
               className="py-5 bg-primary text-white rounded-[1.8rem] font-black text-lg shadow-2xl shadow-primary/20 active:scale-95 transition-all hover:bg-blue-500"
             >
-              CONFIRM TO CATALOG
+              Confirm to Catalog
             </button>
             <button 
               onClick={() => setExtractedData(null)}
-              className="py-3 text-[10px] text-slate-600 font-bold uppercase tracking-widest hover:text-slate-400"
+              className="py-3 text-xs text-slate-600 font-bold hover:text-slate-400"
             >
               Reset Extraction
             </button>

frontend/components/AdminOverlay.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { X, Shield, UserPlus, User, Trash2, Tag, Plus, AlertTriangle, LogOut } from 'lucide-react';
+import { inventoryApi } from '@/lib/api';
+import { toast } from 'react-hot-toast';
+
+interface AdminOverlayProps {
+  show: boolean;
+  onClose: () => void;
+  users: any[];
+  categories: any[];
+  onUpdateUsers: (users: any[]) => void;
+  onUpdateCategories: (categories: any[]) => void;
+}
+
+export default function AdminOverlay({ 
+  show, 
+  onClose, 
+  users, 
+  categories, 
+  onUpdateUsers, 
+  onUpdateCategories 
+}: AdminOverlayProps) {
+  if (!show) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-300">
+      <div className="absolute inset-y-0 right-0 w-full max-w-md bg-slate-900 border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
+        <div className="p-6 border-b border-slate-800 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-slate-800 rounded-xl text-primary">
+              <Shield size={20} />
+            </div>
+            <h2 className="text-xl font-black text-white">System Admin</h2>
+          </div>
+          <button 
+            onClick={onClose}
+            className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500"
+          >
+            <X size={20} />
+          </button>
+        </div>
+        
+        <div className="flex-1 overflow-y-auto p-6 space-y-8">
+          <section className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-black text-slate-500">User Management</h3>
+              <button 
+                onClick={() => {
+                  const name = prompt("Enter new username:");
+                  if (!name) return;
+                  const pwd = prompt("Enter password for " + name + ":");
+                  if (!pwd) return;
+                  inventoryApi.createUser({ username: name, password: pwd, role: 'user' })
+                    .then(() => {
+                       toast.success("User created");
+                       inventoryApi.getUsers().then(onUpdateUsers);
+                    })
+                    .catch(() => toast.error("Failed to create user"));
+                }}
+                className="flex items-center gap-1 text-xs font-black text-primary hover:underline"
+              >
+                <UserPlus size={12} /> Add User
+              </button>
+            </div>
+            
+            <div className="grid gap-2">
+              {users.map(u => (
+                <div key={u.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className={`p-2 rounded-lg ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-slate-700 text-slate-400"}`}>
+                      <User size={16} />
+                    </div>
+                    <div>
+                      <p className="text-sm font-bold text-white">{u.username}</p>
+                      <p className="text-xs font-bold text-slate-500">{u.role}</p>
+                    </div>
+                  </div>
+                  
+                  {u.username !== 'Admin' && (
+                    <button 
+                      onClick={() => {
+                        if(confirm(`Delete user ${u.username}?`)) {
+                          inventoryApi.deleteUser(u.id)
+                            .then(() => {
+                              toast.success("User removed");
+                              inventoryApi.getUsers().then(onUpdateUsers);
+                            })
+                            .catch(() => toast.error("Delete failed"));
+                        }
+                      }}
+                      className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-black text-slate-500">Category Groups</h3>
+              <button 
+                onClick={() => {
+                  const name = prompt("New category name:");
+                  if (!name) return;
+                  const desc = prompt("Description (optional):");
+                  inventoryApi.createCategory({ name, description: desc })
+                    .then(() => {
+                       toast.success("Category added");
+                       inventoryApi.getCategories().then(onUpdateCategories);
+                    })
+                    .catch(() => toast.error("Failed to add category"));
+                }}
+                className="flex items-center gap-1 text-xs font-black text-primary hover:underline"
+              >
+                <Plus size={12} /> Add Category
+              </button>
+            </div>
+            
+            <div className="grid gap-2">
+              {categories.map(cat => (
+                <div key={cat.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 bg-slate-700 rounded-lg text-slate-400">
+                      <Tag size={16} />
+                    </div>
+                    <div>
+                      <p className="text-sm font-bold text-white">{cat.name}</p>
+                      <p className="text-xs text-slate-500 font-mono">{cat.description || 'No description'}</p>
+                    </div>
+                  </div>
+                  
+                  <button 
+                     onClick={() => {
+                       if(confirm(`Delete category ${cat.name}?`)) {
+                         inventoryApi.deleteCategory(cat.id)
+                           .then(() => {
+                             toast.success("Category removed");
+                             inventoryApi.getCategories().then(onUpdateCategories);
+                           })
+                           .catch(e => toast.error(e.response?.data?.detail || "Delete failed"));
+                       }
+                     }}
+                     className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all"
+                  >
+                     <Trash2 size={16} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <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">
+              <AlertTriangle size={16} />
+              <p className="text-sm font-black">Logout</p>
+            </div>
+            <p className="text-xs text-slate-500">Exit current session and return to identity check.</p>
+            <button 
+              onClick={() => {
+                localStorage.removeItem('inventory_user');
+                window.location.reload();
+              }}
+              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"
+            >
+              <LogOut size={16} /> End Session
+            </button>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/BottomNav.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Smartphone, Package, History, Settings, Shield, LogOut } from 'lucide-react';
+import { useRouter, usePathname } from 'next/navigation';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface BottomNavProps {
+  currentUser: any;
+}
+
+export default function BottomNav({ 
+  currentUser 
+}: BottomNavProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const isHome = pathname === '/';
+  const isInventory = pathname === '/inventory';
+  const isLogs = pathname === '/logs';
+  const isAdmin = pathname === '/admin';
+
+  return (
+    <footer className="fixed bottom-0 left-0 right-0 p-4 bg-slate-950/80 backdrop-blur-md border-t border-slate-900 z-40">
+      <div className="max-w-4xl mx-auto flex justify-around items-center text-slate-400">
+        
+        <button 
+          onClick={() => router.push('/')}
+          className={cn("flex flex-col items-center gap-1", isHome && "text-primary")}
+        >
+          <Smartphone size={20} />
+          <span className="text-xs font-bold transition-all">Home</span>
+        </button>
+
+        {/* Inventory */}
+        <button 
+          onClick={() => router.push('/inventory')}
+          className={cn("flex flex-col items-center gap-1", isInventory && "text-primary")}
+        >
+          <Package size={20} />
+          <span className="text-xs font-bold transition-all">Inventory</span>
+        </button>
+
+        {/* Logs */}
+        <button 
+          onClick={() => router.push('/logs')}
+          className={cn("flex flex-col items-center gap-1", isLogs && "text-primary")}
+        >
+          <History size={20} />
+          <span className="text-xs font-bold transition-all">Logs</span>
+        </button>
+
+        {/* Admin Settings */}
+        {currentUser?.role === 'admin' && (
+          <button 
+            onClick={() => router.push('/admin')}
+            className={cn("flex flex-col items-center gap-1", isAdmin && "text-primary")}
+          >
+            <Settings size={20} />
+            <span className="text-xs font-bold transition-all">Admin</span>
+          </button>
+        )}
+
+        {/* Logout */}
+        <button 
+          onClick={() => {
+            localStorage.removeItem('inventory_user');
+            window.location.href = '/login';
+          }}
+          className="flex flex-col items-center gap-1 hover:text-rose-500 transition-colors"
+        >
+          <LogOut size={20} />
+          <span className="text-xs font-bold transition-all">Logout</span>
+        </button>
+      </div>
+    </footer>
+  );
+}

frontend/components/IdentityCheckOverlay.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useState, memo, useRef } from 'react';
+import { User, Shield, ChevronRight, X, Lock } from 'lucide-react';
+import { inventoryApi } from '@/lib/api';
+import { toast } from 'react-hot-toast';
+
+interface IdentityCheckOverlayProps {
+  show: boolean;
+  users: any[];
+  onAuthenticated: (user: any) => void;
+}
+
+const IdentityCheckOverlay = memo(({ show, users, onAuthenticated }: IdentityCheckOverlayProps) => {
+  const [selectedUserForLogin, setSelectedUserForLogin] = useState<any | null>(null);
+  const [isEnterprise, setIsEnterprise] = useState(false);
+  
+  const enterpriseUserRef = useRef<HTMLInputElement>(null);
+  const enterprisePassRef = useRef<HTMLInputElement>(null);
+  const localPassRef = useRef<HTMLInputElement>(null);
+
+  if (!show) return null;
+
+  const handleLogin = async () => {
+    let username = "";
+    let password = "";
+
+    if (isEnterprise) {
+      username = enterpriseUserRef.current?.value || "";
+      password = enterprisePassRef.current?.value || "";
+    } else if (selectedUserForLogin) {
+      username = selectedUserForLogin.username;
+      password = localPassRef.current?.value || "";
+    }
+
+    if (!username) {
+      toast.error("Username is required");
+      return;
+    }
+
+    try {
+      const user = await inventoryApi.login({
+        username,
+        password
+      });
+      onAuthenticated(user);
+      setSelectedUserForLogin(null);
+      setIsEnterprise(false);
+    } catch (error) {
+      toast.error(isEnterprise ? "Login failed. Check credentials or group membership." : "Invalid password");
+    }
+  };
+
+  const handleSelectUser = async (user: any) => {
+    if (user.username === 'Admin' || user.id > 1) {
+      setSelectedUserForLogin(user);
+      return;
+    }
+    
+    // Auto-login for passwordless users (if any exist beyond Admin)
+    onAuthenticated(user);
+  };
+
+  return (
+    <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 zoom-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-8">
+        <div className="text-center space-y-2">
+          <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} />
+          </div>
+          <h2 className="text-2xl font-black text-white uppercase tracking-tight">Identity Check</h2>
+          <p className="text-slate-500 text-sm">Select operator profile to continue</p>
+        </div>
+        
+        <div className="grid gap-3">
+          {!selectedUserForLogin && !isEnterprise ? (
+            <>
+              {users.map(user => (
+                <button
+                  key={user.id}
+                  onClick={() => handleSelectUser(user)}
+                  className="bg-slate-800/50 hover:bg-slate-800 border border-slate-800 hover:border-primary/40 p-4 rounded-2xl text-left transition-all group flex items-center justify-between"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-slate-900 border border-slate-700 flex items-center justify-center text-slate-500 group-hover:text-primary transition-colors">
+                      {user.role === 'admin' ? <Shield size={14} /> : <User size={14} />}
+                    </div>
+                    <div>
+                      <p className="text-white font-black text-sm tracking-widest">{user.username}</p>
+                      <p className="text-[10px] text-slate-500 font-bold mt-1 tracking-widest">{user.role}</p>
+                    </div>
+                  </div>
+                  <ChevronRight size={16} className="text-slate-600 group-hover:text-primary transition-colors" />
+                </button>
+              ))}
+              <div className="pt-2">
+                <button
+                  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"
+                >
+                  <Shield size={14} />
+                  Enterprise Login
+                </button>
+              </div>
+            </>
+          ) : isEnterprise ? (
+            <div className="space-y-4 animate-in slide-in-from-right-4 duration-300">
+               <div className="flex justify-between items-center px-1">
+                 <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Enterprise Account</p>
+                 <button 
+                   onClick={() => setIsEnterprise(false)}
+                   className="text-[10px] font-black text-primary uppercase tracking-widest hover:underline"
+                 >
+                   Back to profiles
+                 </button>
+               </div>
+               
+               <div className="space-y-2">
+                 <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Username</label>
+                 <div className="relative">
+                   <User className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
+                   <input 
+                     ref={enterpriseUserRef}
+                     type="text"
+                     autoFocus
+                     className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
+                     placeholder="e.g. jsmith"
+                   />
+                 </div>
+               </div>
+
+               <div className="space-y-2">
+                 <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Password</label>
+                 <div className="relative">
+                   <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
+                   <input 
+                     ref={enterprisePassRef}
+                     type="password"
+                     onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
+                     className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
+                     placeholder="Enter password"
+                   />
+                 </div>
+               </div>
+               
+               <button 
+                 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"
+               >
+                 Sign In
+               </button>
+            </div>
+          ) : (
+            <div className="space-y-4 animate-in slide-in-from-right-4 duration-300">
+               <div className="bg-slate-800/30 p-4 rounded-2xl border border-slate-800 flex items-center gap-3">
+                <button 
+                  onClick={() => setSelectedUserForLogin(null)}
+                  className="p-1 hover:bg-slate-700 rounded-lg transition-colors"
+                >
+                  <X size={16} className="text-slate-400" />
+                </button>
+                <div>
+                  <p className="text-xs font-bold text-slate-500 uppercase tracking-widest">Logging in as</p>
+                  <p className="text-white font-black tracking-tight">{selectedUserForLogin.username}</p>
+                </div>
+              </div>
+              
+              <div className="space-y-2">
+                <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Password</label>
+                <div className="relative">
+                  <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
+                   <input 
+                    ref={localPassRef}
+                    type="password"
+                    autoFocus
+                    onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
+                    className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
+                    placeholder="Enter password"
+                  />
+                </div>
+              </div>
+              
+              <button 
+                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"
+              >
+                Verify Identity
+              </button>
+            </div>
+          )}
+        </div>
+        
+        {users.length === 0 && (
+          <div className="text-center p-8 text-slate-500 animate-pulse">
+            Initializing users...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export default IdentityCheckOverlay;

frontend/components/LogsOverlay.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { X, History } from 'lucide-react';
+import { cn } from '@/lib/utils'; // Assuming this exists or I'll use the local cn
+
+interface LogsOverlayProps {
+  show: boolean;
+  onClose: () => void;
+  logs: any[];
+  inventory: any[];
+}
+
+export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOverlayProps) {
+  if (!show) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-slate-950 p-6 animate-in slide-in-from-bottom-20 duration-500">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h2 className="text-2xl font-black tracking-tight">Audit History</h2>
+          <p className="text-xs text-slate-500">Live transaction log from cloud</p>
+        </div>
+        <button 
+          onClick={onClose}
+          className="p-3 bg-slate-900 rounded-full text-slate-400"
+        >
+          <X size={24} />
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
+        {logs.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center text-slate-600 gap-4">
+             <History size={48} className="opacity-20" />
+             <p>No transactions found</p>
+          </div>
+        ) : (
+          logs.map((log) => (
+            <div key={log.id} className="bg-slate-900/50 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 items-center gap-2 mb-1">
+                  <p className={`text-xs font-black ${
+                    log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
+                  }`}>
+                    {log.action}
+                  </p>
+                  <span className="text-xs font-bold text-slate-500">by</span>
+                  <span className="text-xs font-black text-slate-400">{log.username || 'System'}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-bold text-slate-200">
+                     {inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
+                  </span>
+                </div>
+                {(log.details || log.timestamp) && (
+                  <div className="flex items-center gap-3 mt-2">
+                     <p className="text-xs text-slate-600 font-mono">
+                      {new Date(log.timestamp).toLocaleString()}
+                    </p>
+                    {log.details && (
+                      <span className="text-xs bg-slate-800 text-slate-500 px-2 py-0.5 rounded border border-slate-700 font-mono">
+                        {log.details}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="text-right">
+                <p className={`text-lg font-black ${
+                  log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
+                }`}>
+                  {log.quantity_change > 0 ? '+' : ''}{log.quantity_change}
+                </p>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

frontend/components/PageShell.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useEffect, ReactNode } from 'react';
+import { inventoryApi } from '@/lib/api';
+import IdentityCheckOverlay from '@/components/IdentityCheckOverlay';
+import BottomNav from '@/components/BottomNav';
+import { Toaster, toast } from 'react-hot-toast';
+import { usePathname, useRouter } from 'next/navigation';
+
+interface PageShellProps {
+  children: ReactNode;
+  requireAdmin?: boolean;
+}
+
+export default function PageShell({ children, requireAdmin = false }: PageShellProps) {
+  const [mounted, setMounted] = useState(false);
+  const [currentUser, setCurrentUser] = useState<any | null>(null);
+  const [showUserSelect, setShowUserSelect] = useState(false);
+  const [users, setUsers] = useState<any[]>([]);
+  const pathname = usePathname();
+  const router = useRouter();
+
+  useEffect(() => {
+    setMounted(true);
+    const savedUser = localStorage.getItem('inventory_user');
+    
+    if (savedUser) {
+      const user = JSON.parse(savedUser);
+      setCurrentUser(user);
+      
+      // Admin check
+      if (requireAdmin && user.role !== 'admin') {
+        toast.error("Access Denied: Admin role required");
+        router.push('/');
+      }
+    } else {
+      // Redirect to dedicated login page if not authenticated
+      if (pathname !== '/login') {
+        router.push('/login');
+      }
+    }
+
+    // Refresh users list if needed for admin contexts
+    if (requireAdmin) {
+       inventoryApi.getUsers().then(setUsers).catch(() => {});
+    }
+  }, [requireAdmin, router, pathname]);
+
+
+  if (!mounted) return null;
+
+  // Prevent flicker by not rendering background if we're redirecting to login
+  if (!currentUser && pathname !== '/login') return null;
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col">
+      <Toaster position="top-center" />
+      
+      {/* Content Area */}
+      <div className="flex-1 pb-32">
+        {children}
+      </div>
+
+      {/* Navigation */}
+      {pathname !== '/login' && <BottomNav currentUser={currentUser} />}
+    </div>
+  );
+}