From 89a69a3ec98f4483145fa8c1abdcd58fdd0183c1 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Fri, 17 Apr 2026 10:11:50 +0300
Subject: [PATCH] refactor(frontend): audit fixes - accessibility, colors, and
 UX

Accessibility:
- Add focus-visible indicators to all interactive elements (buttons, inputs)
- Create accessible CreateUserModal to replace window.prompt()
- Add aria-labels to icon buttons for screen readers

Colors & Theming:
- Move primary color to CSS variable (--primary)
- Remove hard-coded #3b82f6 from tailwind config
- Clean up color consistency across theme

UX:
- Replace prompt-based user creation with proper modal form
- Implement inline field validation with error messages
- Add loading state during form submission
- Improve visual hierarchy and spacing

Performance:
- Remove bootstrap-icons dependency (duplicate with lucide-react)

Design:
- Reduce backdrop-blur overuse (remove from overlay scrim, StatCard)
- Improve AdminOverlay responsive design
---
 .claude/settings.local.json             |   3 +-
 frontend/app/globals.css                |   4 +-
 frontend/components/AdminOverlay.tsx    |  71 +++++-----
 frontend/components/BottomNav.tsx       |  20 +--
 frontend/components/CreateUserModal.tsx | 166 ++++++++++++++++++++++++
 frontend/components/StatCard.tsx        |   2 +-
 frontend/package.json                   |   1 -
 frontend/public/sw.js                   |   2 +-
 frontend/tailwind.config.ts             |   4 +-
 9 files changed, 223 insertions(+), 50 deletions(-)
 create mode 100644 frontend/components/CreateUserModal.tsx

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 4b68f1e3..eff176ed 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -34,7 +34,8 @@
       "Bash(npm run *)",
       "Bash(npm test *)",
       "Bash(python3 *)",
-      "Bash(ls -lh aInventory-PROD-v*.zip)"
+      "Bash(ls -lh aInventory-PROD-v*.zip)",
+      "Bash(npm install *)"
     ]
   }
 }
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 4012ce2f..9b604076 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -2,12 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "bootstrap-icons/font/bootstrap-icons.css";
-
 :root {
   /* slate-950 forced as default to prevent white flash */
   --background: #020617;
   --foreground: #f1f5f9;
+  --primary: #3b82f6;
+  --primary-foreground: #ffffff;
 }
 
 body {
diff --git a/frontend/components/AdminOverlay.tsx b/frontend/components/AdminOverlay.tsx
index 5683c948..edc23b0a 100644
--- a/frontend/components/AdminOverlay.tsx
+++ b/frontend/components/AdminOverlay.tsx
@@ -1,8 +1,10 @@
 'use client';
 
+import { useState } from 'react';
 import { X, Shield, UserPlus, User, Trash2, Tag, Plus, AlertTriangle, LogOut, Layers } from 'lucide-react';
 import { inventoryApi } from '@/lib/api';
 import { toast } from 'react-hot-toast';
+import CreateUserModal from './CreateUserModal';
 
 interface AdminOverlayProps {
   show: boolean;
@@ -13,19 +15,31 @@ interface AdminOverlayProps {
   onUpdateCategories: (categories: any[]) => void;
 }
 
-export default function AdminOverlay({ 
-  show, 
-  onClose, 
-  users, 
-  categories, 
-  onUpdateUsers, 
-  onUpdateCategories 
+export default function AdminOverlay({
+  show,
+  onClose,
+  users,
+  categories,
+  onUpdateUsers,
+  onUpdateCategories
 }: AdminOverlayProps) {
+  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
+
   if (!show) return null;
 
+  const handleUserCreated = () => {
+    inventoryApi.getUsers().then(onUpdateUsers);
+  };
+
   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">
+    <>
+      <CreateUserModal
+        show={showCreateUserModal}
+        onClose={() => setShowCreateUserModal(false)}
+        onUserCreated={handleUserCreated}
+      />
+      <div className="fixed inset-0 z-50 bg-slate-950/60 animate-in fade-in duration-300">
+      <div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md: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">
@@ -33,9 +47,10 @@ export default function AdminOverlay({
             </div>
             <h2 className="text-xl font-black text-white">System Admin</h2>
           </div>
-          <button 
+          <button
             onClick={onClose}
-            className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500"
+            className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+            aria-label="Close"
           >
             <X size={20} />
           </button>
@@ -45,20 +60,9 @@ export default function AdminOverlay({
           <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"
+              <button
+                onClick={() => setShowCreateUserModal(true)}
+                className="flex items-center gap-1 text-xs font-black text-primary hover:underline focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
               >
                 <UserPlus size={12} /> Add User
               </button>
@@ -78,7 +82,7 @@ export default function AdminOverlay({
                   </div>
                   
                   {u.username !== 'Admin' && (
-                    <button 
+                    <button
                       onClick={() => {
                         if(confirm(`Delete user ${u.username}?`)) {
                           inventoryApi.deleteUser(u.id)
@@ -89,7 +93,8 @@ export default function AdminOverlay({
                             .catch(() => toast.error("Delete failed"));
                         }
                       }}
-                      className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all"
+                      className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
+                      aria-label={`Delete user ${u.username}`}
                     >
                       <Trash2 size={16} />
                     </button>
@@ -133,7 +138,7 @@ export default function AdminOverlay({
                     </div>
                   </div>
                   
-                  <button 
+                  <button
                      onClick={() => {
                        if(confirm(`Delete category ${cat.name}?`)) {
                          inventoryApi.deleteCategory(cat.id)
@@ -144,7 +149,8 @@ export default function AdminOverlay({
                            .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"
+                     className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
+                     aria-label={`Delete category ${cat.name}`}
                   >
                      <Trash2 size={16} />
                   </button>
@@ -159,18 +165,19 @@ export default function AdminOverlay({
               <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 
+            <button
               onClick={() => {
                 import('@/lib/auth').then(m => m.clearAuth());
                 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"
+              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"
             >
               <LogOut size={16} /> End Session
             </button>
           </section>
         </div>
       </div>
-    </div>
+      </div>
+    </>
   );
 }
diff --git a/frontend/components/BottomNav.tsx b/frontend/components/BottomNav.tsx
index 2f478163..105124da 100644
--- a/frontend/components/BottomNav.tsx
+++ b/frontend/components/BottomNav.tsx
@@ -28,27 +28,27 @@ export default function BottomNav({
     <footer className="fixed bottom-0 left-0 right-0 py-3 px-2 pb-safe bg-slate-950/80 backdrop-blur-lg border-t border-slate-900/50 z-40 transition-all duration-300">
       <div className="max-w-xl mx-auto flex justify-around items-center text-slate-400">
         
-        <button 
+        <button
           onClick={() => router.push('/')}
-          className={cn("flex flex-col items-center gap-1", isHome && "text-primary")}
+          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isHome && "text-primary")}
         >
           <Smartphone size={20} />
           <span className="text-xs font-bold transition-all">Home</span>
         </button>
 
         {/* Inventory */}
-        <button 
+        <button
           onClick={() => router.push('/inventory')}
-          className={cn("flex flex-col items-center gap-1", isInventory && "text-primary")}
+          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isInventory && "text-primary")}
         >
           <Package size={20} />
           <span className="text-xs font-bold transition-all">Inventory</span>
         </button>
 
         {/* Logs */}
-        <button 
+        <button
           onClick={() => router.push('/logs')}
-          className={cn("flex flex-col items-center gap-1", isLogs && "text-primary")}
+          className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isLogs && "text-primary")}
         >
           <History size={20} />
           <span className="text-xs font-bold transition-all">Logs</span>
@@ -56,9 +56,9 @@ export default function BottomNav({
 
         {/* Admin Settings */}
         {currentUser?.role === 'admin' && (
-          <button 
+          <button
             onClick={() => router.push('/admin')}
-            className={cn("flex flex-col items-center gap-1", isAdmin && "text-primary")}
+            className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none", isAdmin && "text-primary")}
           >
             <Settings size={20} />
             <span className="text-xs font-bold transition-all">Admin</span>
@@ -66,14 +66,14 @@ export default function BottomNav({
         )}
 
         {/* Logout */}
-        <button 
+        <button
           onClick={() => {
             if (window.confirm("Are you sure you want to logout?")) {
               import('@/lib/auth').then(m => m.clearAuth());
               window.location.href = '/login';
             }
           }}
-          className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 transition-colors"
+          className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 transition-colors rounded px-2 py-1 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
         >
           <LogOut size={20} />
           <span className="text-xs font-bold transition-all">Logout</span>
diff --git a/frontend/components/CreateUserModal.tsx b/frontend/components/CreateUserModal.tsx
new file mode 100644
index 00000000..a8200141
--- /dev/null
+++ b/frontend/components/CreateUserModal.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Loader2 } from 'lucide-react';
+import { inventoryApi } from '@/lib/api';
+import { toast } from 'react-hot-toast';
+
+interface CreateUserModalProps {
+  show: boolean;
+  onClose: () => void;
+  onUserCreated: () => void;
+}
+
+export default function CreateUserModal({ show, onClose, onUserCreated }: CreateUserModalProps) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState<{ username?: string; password?: string }>({});
+  const [loading, setLoading] = useState(false);
+
+  if (!show) return null;
+
+  const validateForm = () => {
+    const newErrors: typeof errors = {};
+
+    if (!username.trim()) {
+      newErrors.username = 'Username is required';
+    }
+
+    if (!password.trim()) {
+      newErrors.password = 'Password is required';
+    } else if (password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    try {
+      await inventoryApi.createUser({
+        username: username.trim(),
+        password,
+        role: 'user'
+      });
+
+      toast.success('User created successfully');
+      setUsername('');
+      setPassword('');
+      setErrors({});
+      onUserCreated();
+      onClose();
+    } catch (error: any) {
+      const errorMsg = error?.response?.data?.detail || 'Failed to create user';
+      if (errorMsg.includes('already exists')) {
+        setErrors({ username: 'Username already exists' });
+      } else {
+        toast.error(errorMsg);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isFormValid = username.trim() && password.length >= 6 && !Object.keys(errors).length;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-slate-900 border border-slate-800 rounded-lg shadow-xl max-w-sm w-full mx-4">
+        {/* Header */}
+        <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>
+          <button
+            onClick={onClose}
+            className="p-1 text-slate-500 hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+            aria-label="Close"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          {/* Username Field */}
+          <div>
+            <label htmlFor="username" className="block text-sm font-semibold text-slate-300 mb-2">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => {
+                setUsername(e.target.value);
+                if (errors.username) setErrors({ ...errors, username: undefined });
+              }}
+              placeholder="Enter username"
+              className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
+                errors.username ? 'border-red-500' : 'border-slate-700'
+              }`}
+              disabled={loading}
+            />
+            {errors.username && (
+              <p className="mt-1.5 text-sm text-red-500">{errors.username}</p>
+            )}
+          </div>
+
+          {/* Password Field */}
+          <div>
+            <label htmlFor="password" className="block text-sm font-semibold text-slate-300 mb-2">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                if (errors.password) setErrors({ ...errors, password: undefined });
+              }}
+              placeholder="Enter password"
+              className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
+                errors.password ? 'border-red-500' : 'border-slate-700'
+              }`}
+              disabled={loading}
+            />
+            {errors.password && (
+              <p className="mt-1.5 text-sm text-red-500">{errors.password}</p>
+            )}
+          </div>
+
+          {/* Buttons */}
+          <div className="flex gap-2 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={loading}
+              className="flex-1 px-4 py-2.5 text-slate-300 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"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              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"
+            >
+              {loading ? (
+                <>
+                  <Loader2 size={16} className="animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                'Create'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/StatCard.tsx b/frontend/components/StatCard.tsx
index 91be7e1e..aa53419c 100644
--- a/frontend/components/StatCard.tsx
+++ b/frontend/components/StatCard.tsx
@@ -9,7 +9,7 @@ interface StatCardProps {
 
 export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
   return (
-    <div className="flex justify-between items-center gap-2 p-3.5 bg-slate-900/50 backdrop-blur-md border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-slate-900/80" role="status">
+    <div className="flex justify-between items-center gap-2 p-3.5 bg-slate-900/50 border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-slate-900/80" role="status">
       <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" />}
         <span className="text-base md:text-lg text-slate-300 font-semibold truncate">
diff --git a/frontend/package.json b/frontend/package.json
index b8e60b7c..e7377762 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "axios": "^1.15.0",
-    "bootstrap-icons": "^1.11.3",
     "clsx": "^2.1.1",
     "dexie": "^4.4.2",
     "html5-qrcode": "^2.3.8",
diff --git a/frontend/public/sw.js b/frontend/public/sw.js
index 7236d880..9f1925ad 100644
--- a/frontend/public/sw.js
+++ b/frontend/public/sw.js
@@ -1 +1 @@
-if(!self.define){let e,s={};const n=(n,a)=>(n=new URL(n+".js",a).href,s[n]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=n,e.onload=s,document.head.appendChild(e)}else e=n,importScripts(n),s()}).then(()=>{let e=s[n];if(!e)throw new Error(`Module ${n} didn’t register its module`);return e}));self.define=(a,c)=>{const t=e||("document"in self?document.currentScript.src:"")||location.href;if(s[t])return;let i={};const o=e=>n(e,t),r={module:{uri:t},exports:i,require:o};s[t]=Promise.all(a.map(e=>r[e]||o(e))).then(e=>(c(...e),i))}}define(["./workbox-4754cb34"],function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/app-build-manifest.json",revision:"e108d68c36d739729187e600dfa464d1"},{url:"/_next/static/chunks/255-4f212684648fcab9.js",revision:"4f212684648fcab9"},{url:"/_next/static/chunks/310-133da0a7e784e153.js",revision:"133da0a7e784e153"},{url:"/_next/static/chunks/374-a4ed2a0d861d9cab.js",revision:"a4ed2a0d861d9cab"},{url:"/_next/static/chunks/4bd1b696-c023c6e3521b1417.js",revision:"c023c6e3521b1417"},{url:"/_next/static/chunks/734-d57062cced98c72c.js",revision:"d57062cced98c72c"},{url:"/_next/static/chunks/7cb1fa1f-32fc9056ac653916.js",revision:"32fc9056ac653916"},{url:"/_next/static/chunks/802-838213ff73429b14.js",revision:"838213ff73429b14"},{url:"/_next/static/chunks/814-d4585cd22c8d1c30.js",revision:"d4585cd22c8d1c30"},{url:"/_next/static/chunks/app/_not-found/page-32814a613bf1bbe9.js",revision:"32814a613bf1bbe9"},{url:"/_next/static/chunks/app/admin/page-962f0580a5a36430.js",revision:"962f0580a5a36430"},{url:"/_next/static/chunks/app/inventory/page-10be885a634ef641.js",revision:"10be885a634ef641"},{url:"/_next/static/chunks/app/layout-451a79d582619723.js",revision:"451a79d582619723"},{url:"/_next/static/chunks/app/login/page-02dc65ae8ac5ac4d.js",revision:"02dc65ae8ac5ac4d"},{url:"/_next/static/chunks/app/logs/page-c8dd67e46535df01.js",revision:"c8dd67e46535df01"},{url:"/_next/static/chunks/app/page-820b3debc25a685c.js",revision:"820b3debc25a685c"},{url:"/_next/static/chunks/framework-050c1f32293f7182.js",revision:"050c1f32293f7182"},{url:"/_next/static/chunks/main-aa573100fdde0547.js",revision:"aa573100fdde0547"},{url:"/_next/static/chunks/main-app-290572149fe5c423.js",revision:"290572149fe5c423"},{url:"/_next/static/chunks/pages/_app-7d307437aca18ad4.js",revision:"7d307437aca18ad4"},{url:"/_next/static/chunks/pages/_error-cb2a52f75f2162e2.js",revision:"cb2a52f75f2162e2"},{url:"/_next/static/chunks/polyfills-42372ed130431b0a.js",revision:"846118c33b2c0e922d7b3a7676f81f6f"},{url:"/_next/static/chunks/webpack-b9fe5f5bee830aaa.js",revision:"b9fe5f5bee830aaa"},{url:"/_next/static/css/4b198d84d4c61a04.css",revision:"4b198d84d4c61a04"},{url:"/_next/static/css/aed49b0ea0984475.css",revision:"aed49b0ea0984475"},{url:"/_next/static/media/bootstrap-icons.154365ac.woff2",revision:"154365ac"},{url:"/_next/static/media/bootstrap-icons.ac1a99b3.woff",revision:"ac1a99b3"},{url:"/_next/static/y3G3zxUZ3Ue_J2Fc3Dhrd/_buildManifest.js",revision:"31eba5c94d685fe15b2d866310094bce"},{url:"/_next/static/y3G3zxUZ3Ue_J2Fc3Dhrd/_ssgManifest.js",revision:"b6652df95db52feb4daf4eca35380933"},{url:"/custom-logo.png",revision:"d41d8cd98f00b204e9800998ecf8427e"},{url:"/icons/icon-192x192.png",revision:"bde7fc04fd83ed65ce0e71259f4574b5"},{url:"/icons/icon-512x512.png",revision:"0c2346ba1775af7af6ec2e346ee7c72e"},{url:"/icons/maskable-icon.png",revision:"0c2346ba1775af7af6ec2e346ee7c72e"},{url:"/logo.png",revision:"084f394cfe19b7d85abec9878a797795"},{url:"/logo_TFM.png",revision:"084f394cfe19b7d85abec9878a797795"},{url:"/manifest.json",revision:"7b6e42d577201b657b72b8698d44d0b2"},{url:"/network.json",revision:"ce173a00263b4f64c8c05fe22ef7c54f"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaches(),e.registerRoute("/",new e.NetworkFirst({cacheName:"start-url",plugins:[{cacheWillUpdate:async({request:e,response:s,event:n,state:a})=>s&&"opaqueredirect"===s.type?new Response(s.body,{status:200,statusText:"OK",headers:s.headers}):s}]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,new e.CacheFirst({cacheName:"google-fonts-webfonts",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:31536e3})]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,new e.StaleWhileRevalidate({cacheName:"google-fonts-stylesheets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({cacheName:"static-font-assets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({cacheName:"static-image-assets",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/image\?url=.+$/i,new e.StaleWhileRevalidate({cacheName:"next-image",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp3|wav|ogg)$/i,new e.CacheFirst({cacheName:"static-audio-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp4)$/i,new e.CacheFirst({cacheName:"static-video-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:js)$/i,new e.StaleWhileRevalidate({cacheName:"static-js-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:css|less)$/i,new e.StaleWhileRevalidate({cacheName:"static-style-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/data\/.+\/.+\.json$/i,new e.StaleWhileRevalidate({cacheName:"next-data",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:json|xml|csv)$/i,new e.NetworkFirst({cacheName:"static-data-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;const s=e.pathname;return!s.startsWith("/api/auth/")&&!!s.startsWith("/api/")},new e.NetworkFirst({cacheName:"apis",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:16,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;return!e.pathname.startsWith("/api/")},new e.NetworkFirst({cacheName:"others",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>!(self.origin===e.origin),new e.NetworkFirst({cacheName:"cross-origin",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:3600})]}),"GET")});
+if(!self.define){let e,s={};const n=(n,a)=>(n=new URL(n+".js",a).href,s[n]||new Promise(s=>{if("document"in self){const e=document.createElement("script");e.src=n,e.onload=s,document.head.appendChild(e)}else e=n,importScripts(n),s()}).then(()=>{let e=s[n];if(!e)throw new Error(`Module ${n} didn’t register its module`);return e}));self.define=(a,c)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(s[i])return;let t={};const r=e=>n(e,i),o={module:{uri:i},exports:t,require:r};s[i]=Promise.all(a.map(e=>o[e]||r(e))).then(e=>(c(...e),t))}}define(["./workbox-4754cb34"],function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/app-build-manifest.json",revision:"19fb708de5182aae2a558630228ccf9c"},{url:"/_next/static/Rvy3FSs0bjJiVw9zbRUrP/_buildManifest.js",revision:"31eba5c94d685fe15b2d866310094bce"},{url:"/_next/static/Rvy3FSs0bjJiVw9zbRUrP/_ssgManifest.js",revision:"b6652df95db52feb4daf4eca35380933"},{url:"/_next/static/chunks/255-4f212684648fcab9.js",revision:"4f212684648fcab9"},{url:"/_next/static/chunks/310-133da0a7e784e153.js",revision:"133da0a7e784e153"},{url:"/_next/static/chunks/374-a4ed2a0d861d9cab.js",revision:"a4ed2a0d861d9cab"},{url:"/_next/static/chunks/4bd1b696-c023c6e3521b1417.js",revision:"c023c6e3521b1417"},{url:"/_next/static/chunks/734-36ed39b8ad4ffaea.js",revision:"36ed39b8ad4ffaea"},{url:"/_next/static/chunks/7cb1fa1f-32fc9056ac653916.js",revision:"32fc9056ac653916"},{url:"/_next/static/chunks/802-838213ff73429b14.js",revision:"838213ff73429b14"},{url:"/_next/static/chunks/814-d4585cd22c8d1c30.js",revision:"d4585cd22c8d1c30"},{url:"/_next/static/chunks/app/_not-found/page-32814a613bf1bbe9.js",revision:"32814a613bf1bbe9"},{url:"/_next/static/chunks/app/admin/page-9a233d8a2c2fd6df.js",revision:"9a233d8a2c2fd6df"},{url:"/_next/static/chunks/app/inventory/page-957e3845124c0c68.js",revision:"957e3845124c0c68"},{url:"/_next/static/chunks/app/layout-61972fdaeb813508.js",revision:"61972fdaeb813508"},{url:"/_next/static/chunks/app/login/page-02dc65ae8ac5ac4d.js",revision:"02dc65ae8ac5ac4d"},{url:"/_next/static/chunks/app/logs/page-1d1bfa357d831474.js",revision:"1d1bfa357d831474"},{url:"/_next/static/chunks/app/page-820b3debc25a685c.js",revision:"820b3debc25a685c"},{url:"/_next/static/chunks/framework-050c1f32293f7182.js",revision:"050c1f32293f7182"},{url:"/_next/static/chunks/main-aa573100fdde0547.js",revision:"aa573100fdde0547"},{url:"/_next/static/chunks/main-app-290572149fe5c423.js",revision:"290572149fe5c423"},{url:"/_next/static/chunks/pages/_app-7d307437aca18ad4.js",revision:"7d307437aca18ad4"},{url:"/_next/static/chunks/pages/_error-cb2a52f75f2162e2.js",revision:"cb2a52f75f2162e2"},{url:"/_next/static/chunks/polyfills-42372ed130431b0a.js",revision:"846118c33b2c0e922d7b3a7676f81f6f"},{url:"/_next/static/chunks/webpack-3844d017889aa547.js",revision:"3844d017889aa547"},{url:"/_next/static/css/25ac50d7ff93dbb6.css",revision:"25ac50d7ff93dbb6"},{url:"/custom-logo.png",revision:"d41d8cd98f00b204e9800998ecf8427e"},{url:"/icons/icon-192x192.png",revision:"bde7fc04fd83ed65ce0e71259f4574b5"},{url:"/icons/icon-512x512.png",revision:"0c2346ba1775af7af6ec2e346ee7c72e"},{url:"/icons/maskable-icon.png",revision:"0c2346ba1775af7af6ec2e346ee7c72e"},{url:"/logo.png",revision:"084f394cfe19b7d85abec9878a797795"},{url:"/logo_TFM.png",revision:"084f394cfe19b7d85abec9878a797795"},{url:"/manifest.json",revision:"7b6e42d577201b657b72b8698d44d0b2"},{url:"/network.json",revision:"ce173a00263b4f64c8c05fe22ef7c54f"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaches(),e.registerRoute("/",new e.NetworkFirst({cacheName:"start-url",plugins:[{cacheWillUpdate:async({request:e,response:s,event:n,state:a})=>s&&"opaqueredirect"===s.type?new Response(s.body,{status:200,statusText:"OK",headers:s.headers}):s}]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,new e.CacheFirst({cacheName:"google-fonts-webfonts",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:31536e3})]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,new e.StaleWhileRevalidate({cacheName:"google-fonts-stylesheets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({cacheName:"static-font-assets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({cacheName:"static-image-assets",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/image\?url=.+$/i,new e.StaleWhileRevalidate({cacheName:"next-image",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp3|wav|ogg)$/i,new e.CacheFirst({cacheName:"static-audio-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp4)$/i,new e.CacheFirst({cacheName:"static-video-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:js)$/i,new e.StaleWhileRevalidate({cacheName:"static-js-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:css|less)$/i,new e.StaleWhileRevalidate({cacheName:"static-style-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/data\/.+\/.+\.json$/i,new e.StaleWhileRevalidate({cacheName:"next-data",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:json|xml|csv)$/i,new e.NetworkFirst({cacheName:"static-data-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;const s=e.pathname;return!s.startsWith("/api/auth/")&&!!s.startsWith("/api/")},new e.NetworkFirst({cacheName:"apis",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:16,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;return!e.pathname.startsWith("/api/")},new e.NetworkFirst({cacheName:"others",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>!(self.origin===e.origin),new e.NetworkFirst({cacheName:"cross-origin",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:3600})]}),"GET")});
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index b8b35439..6a6931c8 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -11,8 +11,8 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
         primary: {
-          DEFAULT: "#3b82f6",
-          foreground: "#ffffff",
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
         },
       },
       keyframes: {