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

refactor: distill AdminOverlay complexity and inject color boldness

Browse Source 
- Replace window.prompt() for category creation with dedicated CategoryCreationModal component
- Increase visual hierarchy: section headings slate-500 → slate-400 (bolder, more confident)
- Standardize Add User/Category button styling with consistent hover states and focus indicators
- Remove browser prompt friction; all forms now use accessible modal dialogs
- Technical, precise aesthetic: reduced visual clutter, increased contrast and decision clarity
This commit is contained in:
Daniel Bedeleanu
2026-04-17 10:49:15 +03:00
parent 3e60bb1707
commit ab43256aa0
4 changed files with 201 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/components/AdminOverlay.tsx
View File

@@ -6,6 +6,7 @@ import { inventoryApi } from '@/lib/api';
import { toast } from 'react-hot-toast';
import CreateUserModal from './CreateUserModal';
import ConfirmationModal from './ConfirmationModal';
import CategoryCreationModal from './CategoryCreationModal';
interface AdminOverlayProps {
show: boolean;
@@ -25,6 +26,7 @@ export default function AdminOverlay({
onUpdateCategories
}: AdminOverlayProps) {
const [showCreateUserModal, setShowCreateUserModal] = useState(false);
const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);
const [confirmState, setConfirmState] = useState<{
show: boolean;
type: 'user' | 'category' | null;
@@ -44,6 +46,10 @@ export default function AdminOverlay({
inventoryApi.getUsers().then(onUpdateUsers);
};
const handleCategoryCreated = () => {
inventoryApi.getCategories().then(onUpdateCategories);
};
const handleDeleteUser = async () => {
if (!confirmState.itemId) return;
setConfirmState(prev => ({ ...prev, loading: true }));
@@ -79,6 +85,11 @@ export default function AdminOverlay({
onClose={() => setShowCreateUserModal(false)}
onUserCreated={handleUserCreated}
/>
<CategoryCreationModal
show={showCreateCategoryModal}
onClose={() => setShowCreateCategoryModal(false)}
onCategoryCreated={handleCategoryCreated}
/>
<ConfirmationModal
show={confirmState.show && confirmState.type === 'user'}
title={`Delete User: ${confirmState.itemName}?`}
@@ -123,10 +134,10 @@ export default function AdminOverlay({
<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>
<h3 className="text-sm font-black text-slate-400">User Management</h3>
<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"
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
>
<UserPlus size={12} /> Add User
</button>
@@ -169,20 +180,10 @@ 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">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"
<h3 className="text-sm font-black text-slate-400">Category Groups</h3>
<button
onClick={() => setShowCreateCategoryModal(true)}
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
>
<Plus size={12} /> Add Category
</button>

135
frontend/components/CategoryCreationModal.tsx Normal file
View File

@@ -0,0 +1,135 @@
'use client';
import { useState } from 'react';
import { X, Loader2, Tag } from 'lucide-react';
import { inventoryApi } from '@/lib/api';
import { toast } from 'react-hot-toast';
interface CategoryCreationModalProps {
show: boolean;
onClose: () => void;
onCategoryCreated: () => void;
}
export default function CategoryCreationModal({
show,
onClose,
onCategoryCreated
}: CategoryCreationModalProps) {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
if (!show) return null;
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!name.trim()) {
setError('Category name is required');
return;
}
setLoading(true);
setError(null);
try {
await inventoryApi.createCategory({
name: name.trim(),
description: description.trim() || undefined
});
toast.success('Category added');
setName('');
setDescription('');
onCategoryCreated();
onClose();
} catch (err: any) {
setError(err?.response?.data?.detail || 'Failed to create category');
} finally {
setLoading(false);
}
};
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">
<div className="flex items-center justify-between p-6 border-b border-slate-800">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary/10 rounded-lg text-primary">
<Tag size={20} />
</div>
<h2 className="text-lg font-black text-white">New Category</h2>
</div>
<button
onClick={onClose}
disabled={loading}
className="p-1 text-slate-500 hover:text-slate-300 rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none disabled:opacity-50"
aria-label="Close"
>
<X size={20} />
</button>
</div>
<form onSubmit={handleSubmit} className="p-6 space-y-4">
<div>
<label className="text-sm font-black text-slate-300">Name</label>
<input
type="text"
value={name}
onChange={(e) => {
setName(e.target.value);
setError(null);
}}
placeholder="e.g., Electronics"
className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
disabled={loading}
autoFocus
/>
</div>
<div>
<label className="text-sm font-black text-slate-300">Description (optional)</label>
<input
type="text"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Brief category description"
className="w-full mt-2 px-3 py-2.5 bg-slate-800 border border-slate-700 rounded text-white placeholder-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
disabled={loading}
/>
</div>
{error && (
<div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded">
<p className="text-sm text-rose-400">{error}</p>
</div>
)}
<div className="flex gap-2 pt-2">
<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={loading || !name.trim()}
className="flex-1 px-4 py-2.5 bg-primary text-white rounded font-semibold hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
>
{loading ? (
<>
<Loader2 size={16} className="animate-spin" />
Creating...
</>
) : (
'Create'
)}
</button>
</div>
</form>
</div>
</div>
);
}