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>