style: ui readability refactor v1.2.2 (removed uppercase, tracking, increased font sizes)
This commit is contained in:
Daniel Bedeleanu
176
frontend/components/AdminOverlay.tsx
Normal file
176
frontend/components/AdminOverlay.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user