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

refactor(frontend): audit fixes - accessibility, colors, and UX

Browse Source 
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
This commit is contained in:
Daniel Bedeleanu
2026-04-17 10:11:50 +03:00
parent 5c9205316f
commit 89a69a3ec9
9 changed files with 223 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/globals.css
View File

@@ -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 {

71
frontend/components/AdminOverlay.tsx
View File

@@ -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>
</>
);
}

20
frontend/components/BottomNav.tsx
View File

@@ -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>

166
frontend/components/CreateUserModal.tsx Normal file
View File

@@ -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>
);
}

2
frontend/components/StatCard.tsx
View File

@@ -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">

1
frontend/package.json
View File

@@ -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",

2
frontend/public/sw.js
View File

File diff suppressed because one or more lines are too long

4
frontend/tailwind.config.ts
View File

@@ -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: {