style: ui readability refactor v1.2.2 (removed uppercase, tracking, increased font sizes)
This commit is contained in:
Daniel Bedeleanu
@@ -6,7 +6,8 @@ import { inventoryApi } from '@/lib/api';
|
||||
import { fetchAndCacheItems, syncOfflineOperations } from '@/lib/sync';
|
||||
import Scanner from '@/components/Scanner';
|
||||
import AIOnboarding from '@/components/AIOnboarding';
|
||||
import { toast, Toaster } from 'react-hot-toast';
|
||||
import PageShell from '@/components/PageShell';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import {
|
||||
Package,
|
||||
Plus,
|
||||
@@ -65,14 +66,7 @@ export default function Home() {
|
||||
const [lastScanned, setLastScanned] = useState<string | null>(null);
|
||||
const [inventory, setInventory] = useState<Item[]>([]);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [showLogs, setShowLogs] = useState(false);
|
||||
const [auditLogs, setAuditLogs] = useState<any[]>([]);
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [currentUser, setCurrentUser] = useState<any | null>(null);
|
||||
const [showUserSelect, setShowUserSelect] = useState(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [selectedUserForLogin, setSelectedUserForLogin] = useState<any | null>(null);
|
||||
const [loginPassword, setLoginPassword] = useState('');
|
||||
const [categories, setCategories] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -80,66 +74,12 @@ export default function Home() {
|
||||
const savedUser = localStorage.getItem('inventory_user');
|
||||
if (savedUser) {
|
||||
setCurrentUser(JSON.parse(savedUser));
|
||||
} else {
|
||||
setShowUserSelect(true);
|
||||
}
|
||||
|
||||
// Initial users and categories fetch
|
||||
inventoryApi.getUsers().then(u => setUsers(u)).catch(() => {});
|
||||
// Initial categories fetch
|
||||
inventoryApi.getCategories().then(c => setCategories(c)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const handleSelectUser = async (user: any) => {
|
||||
// If user has a password (Admin always has one), prompt for it
|
||||
if (user.username === 'Admin' || user.id > 1) { // Assume others might need it too
|
||||
setSelectedUserForLogin(user);
|
||||
setLoginPassword('');
|
||||
return;
|
||||
}
|
||||
|
||||
// Auto-login for passwordless users (if any)
|
||||
setCurrentUser(user);
|
||||
localStorage.setItem('inventory_user', JSON.stringify(user));
|
||||
setShowUserSelect(false);
|
||||
toast.success(`Welcome back, ${user.username}`);
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!selectedUserForLogin) return;
|
||||
|
||||
try {
|
||||
const user = await inventoryApi.login({
|
||||
username: selectedUserForLogin.username,
|
||||
password: loginPassword
|
||||
});
|
||||
setCurrentUser(user);
|
||||
localStorage.setItem('inventory_user', JSON.stringify(user));
|
||||
setShowUserSelect(false);
|
||||
setSelectedUserForLogin(null);
|
||||
setLoginPassword('');
|
||||
toast.success(`Authenticated: ${user.username}`);
|
||||
} catch (error) {
|
||||
toast.error("Invalid password");
|
||||
}
|
||||
};
|
||||
|
||||
const fetchLogs = async () => {
|
||||
if (!isOnline) return;
|
||||
try {
|
||||
const logs = await inventoryApi.getAuditLogs(30);
|
||||
setAuditLogs(logs);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleLogs = async () => {
|
||||
if (!showLogs) {
|
||||
await fetchLogs();
|
||||
}
|
||||
setShowLogs(!showLogs);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
setIsOnline(navigator.onLine);
|
||||
@@ -428,8 +368,8 @@ export default function Home() {
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-slate-950 text-slate-100 p-3 pb-48 md:p-8 overflow-x-hidden w-full">
|
||||
<Toaster position="top-center" />
|
||||
<PageShell>
|
||||
<div className="p-3 md:p-8 overflow-x-hidden w-full">
|
||||
|
||||
{/* Header */}
|
||||
<header className="flex flex-col sm:flex-row justify-between sm:items-center gap-4 mb-6 w-full max-w-4xl mx-auto px-1">
|
||||
@@ -446,13 +386,12 @@ export default function Home() {
|
||||
TFM <span className="font-mono text-primary bg-primary/5 px-2 py-0.5 rounded-lg border border-primary/10 ml-1">aInventory</span>
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<p className="text-[9px] font-bold text-slate-500 tracking-[0.2em] font-mono">
|
||||
VERSION {versionData.version}
|
||||
<p className="text-xs font-bold text-slate-500 font-mono">
|
||||
Version {versionData.version}
|
||||
</p>
|
||||
<span className="w-1 h-1 rounded-full bg-slate-800" />
|
||||
<button
|
||||
onClick={() => setShowUserSelect(true)}
|
||||
className="text-[9px] font-black text-primary/80 hover:text-primary transition-colors flex items-center gap-1"
|
||||
className="text-xs font-black text-primary/80 hover:text-primary transition-colors flex items-center gap-1"
|
||||
>
|
||||
<User size={8} />
|
||||
{currentUser?.username || 'Guest'}
|
||||
@@ -466,15 +405,15 @@ export default function Home() {
|
||||
{isScannerReady && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="w-1 h-1 rounded-full bg-green-500 shadow-[0_0_5px_rgba(34,197,94,0.5)]" />
|
||||
<span className="text-[9px] font-black text-green-500/80 uppercase tracking-widest whitespace-nowrap">
|
||||
OFFLINE SCAN: OK
|
||||
<span className="text-xs font-black text-green-500/80 whitespace-nowrap">
|
||||
Offline Scan: OK
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className={`w-1 h-1 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-rose-500 shadow-[0_0_5px_rgba(244,63,94,0.5)]'}`} />
|
||||
<span className={`text-[9px] font-black uppercase tracking-widest whitespace-nowrap ${isOnline ? 'text-green-500/80' : 'text-rose-500/80'}`}>
|
||||
SERVER SYNC: {isOnline ? 'OK' : 'NO'}
|
||||
<span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/80' : 'text-rose-500/80'}`}>
|
||||
Server Sync: {isOnline ? 'OK' : 'No'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -482,7 +421,7 @@ export default function Home() {
|
||||
<button
|
||||
onClick={handleSync}
|
||||
disabled={syncing || !isOnline}
|
||||
className="bg-primary/10 hover:bg-primary/20 border border-primary/20 text-primary px-3 sm:px-4 py-1.5 rounded-xl text-[9px] font-black uppercase tracking-[0.2em] transition-all active:scale-95 disabled:opacity-30 flex items-center gap-2"
|
||||
className="bg-primary/10 hover:bg-primary/20 border border-primary/20 text-primary px-3 sm:px-4 py-1.5 rounded-xl text-xs font-black transition-all active:scale-95 disabled:opacity-30 flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw size={10} className={cn(syncing && "animate-spin")} />
|
||||
Sync
|
||||
@@ -496,13 +435,13 @@ export default function Home() {
|
||||
{[
|
||||
{ id: 'CHECK_IN', label: 'Check In' },
|
||||
{ id: 'CHECK_OUT', label: 'Check Out' },
|
||||
{ id: 'TRASH', label: 'Trash/Waste' }
|
||||
{ id: 'TRASH', label: 'Trash' }
|
||||
].map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setMode(m.id as any)}
|
||||
className={cn(
|
||||
"flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all",
|
||||
"flex-1 py-3 rounded-xl text-sm font-black transition-all",
|
||||
mode === m.id ? "bg-slate-800 text-primary shadow-lg" : "text-slate-500"
|
||||
)}
|
||||
>
|
||||
@@ -537,7 +476,7 @@ export default function Home() {
|
||||
|
||||
<div>
|
||||
<p className="text-lg font-medium">Tap to start scanning</p>
|
||||
<p className="text-sm text-slate-400">Scan barcodes for routine {mode.toLowerCase().replace('_', ' ')}</p>
|
||||
<p className="text-sm text-slate-400">Scan barcodes to {mode.toUpperCase().replace('_', ' ')} items</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-px bg-slate-800 my-2" />
|
||||
@@ -547,87 +486,11 @@ export default function Home() {
|
||||
className="w-full h-16 rounded-[1.5rem] bg-slate-900/50 border border-slate-800 flex items-center justify-center gap-3 group hover:border-primary/40 transition-all font-bold"
|
||||
>
|
||||
<Sparkles size={18} className="text-primary group-hover:scale-110 transition-transform" />
|
||||
<span className="text-sm">New Item (AI Onboarding)</span>
|
||||
<span className="text-sm">Add New Item (AI Onboarding)</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Inventory List */}
|
||||
<section>
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
|
||||
<h3 className="text-lg font-semibold flex items-center gap-2">
|
||||
<Package size={20} className="text-primary" />
|
||||
Catalog Items
|
||||
</h3>
|
||||
<div className="relative flex-1 md:max-w-xs">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search specs, PN, OM4..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-800 rounded-xl py-2 pl-3 pr-10 text-sm focus:border-primary outline-none transition-all"
|
||||
/>
|
||||
<div className="absolute right-3 top-2.5 text-slate-600">
|
||||
🔍
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{filteredInventory.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setSelectedItem(item);
|
||||
setAdjustType('ADD');
|
||||
}}
|
||||
className="bg-slate-900/40 border border-slate-800/50 p-3 rounded-[1.5rem] flex items-center justify-between group hover:border-primary/40 hover:bg-slate-900/60 active:scale-[0.98] transition-all cursor-pointer shadow-sm"
|
||||
>
|
||||
<div className="flex-1 min-w-0 pr-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-[9px] font-black bg-primary/10 text-primary px-2 py-0.5 rounded-full uppercase tracking-tighter">
|
||||
{item.category}
|
||||
</span>
|
||||
{item.type && (
|
||||
<span className="text-[9px] font-bold bg-slate-800 text-slate-400 px-2 py-0.5 rounded-full uppercase tracking-tighter">
|
||||
{item.type}
|
||||
</span>
|
||||
)}
|
||||
{item.color && (
|
||||
<span className="text-[9px] font-bold border border-slate-800 px-2 py-0.5 rounded-full flex items-center gap-1.5">
|
||||
<div className="w-1.5 h-1.5 rounded-full" style={{backgroundColor: item.color}} />
|
||||
{item.color}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h4 className="font-bold text-slate-200 break-words leading-tight">{item.name}</h4>
|
||||
<p className="text-[10px] text-slate-500 font-medium break-words mt-1 opacity-80">
|
||||
{item.specs}
|
||||
</p>
|
||||
<p className="text-[9px] text-slate-600 font-mono mt-1 flex items-center gap-2">
|
||||
PN: {item.part_number || 'N/A'} <ChevronRight size={10} />
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<span className={cn(
|
||||
"text-xl font-black",
|
||||
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
|
||||
)}>
|
||||
{item.quantity}
|
||||
</span>
|
||||
<p className="text-[9px] text-slate-600 uppercase tracking-[0.2em] font-black">Stock</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredInventory.length === 0 && (
|
||||
<div className="py-12 text-center text-slate-500 bg-slate-900/20 rounded-3xl border border-dashed border-slate-800">
|
||||
<p className="font-medium">No results for "{searchQuery}"</p>
|
||||
<p className="text-xs">Try searching by category, specs (e.g. OM4) or color.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Onboarding Overlay */}
|
||||
@@ -684,7 +547,7 @@ export default function Home() {
|
||||
{isEditing ? (
|
||||
<div className="space-y-4 mb-8">
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Name</label>
|
||||
<label className="text-xs font-black text-slate-500 ml-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.name || ''}
|
||||
@@ -693,7 +556,7 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Part Number (for OCR match)</label>
|
||||
<label className="text-xs font-black text-slate-500 ml-1">Part Number (for OCR match)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.part_number || ''}
|
||||
@@ -704,7 +567,7 @@ export default function Home() {
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Category</label>
|
||||
<label className="text-xs font-black text-slate-500 ml-1">Category</label>
|
||||
<select
|
||||
value={editedItem.category || ''}
|
||||
onChange={e => setEditedItem({...editedItem, category: e.target.value})}
|
||||
@@ -717,7 +580,7 @@ export default function Home() {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Item Type (e.g. SFP, Patch Cord)</label>
|
||||
<label className="text-xs font-black text-slate-500 ml-1">Item Type (e.g. SFP, Patch Cord)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.type || ''}
|
||||
@@ -727,7 +590,7 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-500 ml-1">Specs</label>
|
||||
<label className="text-xs font-black text-slate-500 ml-1">Specs</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.specs || ''}
|
||||
@@ -755,7 +618,7 @@ export default function Home() {
|
||||
)}
|
||||
>
|
||||
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest mt-1">{t.label}</span>
|
||||
<span className="text-xs font-black mt-1">{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -783,7 +646,7 @@ export default function Home() {
|
||||
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl animate-in shake duration-500">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<AlertTriangle size={16} className="text-red-500" />
|
||||
<span className="text-xs font-bold text-red-400 uppercase tracking-widest">Waste Declaration</span>
|
||||
<span className="text-sm font-bold text-red-400">Waste Declaration</span>
|
||||
</div>
|
||||
<select
|
||||
value={trashReason}
|
||||
@@ -823,356 +686,14 @@ export default function Home() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Audit Logs Overlay */}
|
||||
{showLogs && (
|
||||
<div className="fixed inset-0 z-50 flex flex-col bg-slate-950 p-6 animate-in slide-in-from-bottom-20 duration-500">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black tracking-tight">Audit History</h2>
|
||||
<p className="text-xs text-slate-500">Live transaction log from cloud</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowLogs(false)}
|
||||
className="p-3 bg-slate-900 rounded-full text-slate-400"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
|
||||
{auditLogs.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-slate-600 gap-4">
|
||||
<History size={48} className="opacity-20" />
|
||||
<p>No transactions found</p>
|
||||
</div>
|
||||
) : (
|
||||
auditLogs.map((log) => (
|
||||
<div key={log.id} className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<p className={cn(
|
||||
"text-[10px] font-black uppercase tracking-widest",
|
||||
log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
|
||||
)}>
|
||||
{log.action}
|
||||
</p>
|
||||
<span className="text-[10px] font-bold text-slate-500">by</span>
|
||||
<span className="text-[10px] font-black text-slate-400">{log.username || 'System'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-bold text-slate-200">
|
||||
{inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
|
||||
</span>
|
||||
</div>
|
||||
{(log.details || log.timestamp) && (
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<p className="text-[9px] text-slate-600 font-mono">
|
||||
{new Date(log.timestamp).toLocaleString()}
|
||||
</p>
|
||||
{log.details && (
|
||||
<span className="text-[9px] bg-slate-800 text-slate-500 px-2 py-0.5 rounded border border-slate-700 font-mono">
|
||||
{log.details}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className={cn(
|
||||
"text-lg font-black",
|
||||
log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
|
||||
)}>
|
||||
{log.quantity_change > 0 ? '+' : ''}{log.quantity_change}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer Branding */}
|
||||
<footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-30">
|
||||
<p className="text-[10px] font-bold tracking-[0.3em] uppercase">Powered by TFM Group Software</p>
|
||||
<p className="text-xs font-bold">Powered by TFM Group Software</p>
|
||||
<div className="h-px w-12 bg-slate-800" />
|
||||
<p className="text-[9px] font-mono">v{versionData.version} • {versionData.last_build} • BUILD: dev-{versionData.commit}</p>
|
||||
</footer>
|
||||
|
||||
{/* Bottom Nav */}
|
||||
<footer className="fixed bottom-0 left-0 right-0 p-4 bg-slate-950/80 backdrop-blur-md border-t border-slate-900 z-40">
|
||||
<div className="max-w-4xl mx-auto flex justify-around items-center text-slate-400">
|
||||
<button
|
||||
onClick={() => setShowScanner(true)}
|
||||
className={cn("flex flex-col items-center gap-1", showScanner && !showOnboarding && "text-primary")}
|
||||
>
|
||||
<Smartphone size={20} />
|
||||
<span className="text-[10px] font-bold uppercase transition-all">Scan</span>
|
||||
</button>
|
||||
|
||||
{/* Central Add Button */}
|
||||
<button
|
||||
onClick={() => setShowOnboarding(true)}
|
||||
className="bg-primary text-white p-4 rounded-full -mt-12 shadow-2xl shadow-primary/40 border-4 border-slate-950 active:scale-90 transition-transform"
|
||||
>
|
||||
<Sparkles size={24} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={toggleLogs}
|
||||
className={cn("flex flex-col items-center gap-1", showLogs && "text-primary")}
|
||||
>
|
||||
<History size={20} />
|
||||
<span className="text-[10px] font-bold uppercase">Logs</span>
|
||||
</button>
|
||||
|
||||
{currentUser?.role === 'admin' && (
|
||||
<button
|
||||
onClick={() => setShowSettings(true)}
|
||||
className={cn("flex flex-col items-center gap-1", showSettings && "text-primary")}
|
||||
>
|
||||
<Settings size={20} />
|
||||
<span className="text-[10px] font-bold uppercase transition-all">Admin</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Settings Drawer (User Management) */}
|
||||
{showSettings && (
|
||||
<div className="fixed inset-0 z-40 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 uppercase tracking-tight">System Admin</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowSettings(false);
|
||||
loadInventory();
|
||||
}}
|
||||
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-xs font-black text-slate-500 uppercase tracking-widest">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(setUsers);
|
||||
})
|
||||
.catch(e => toast.error("Failed to create user"));
|
||||
}}
|
||||
className="flex items-center gap-1 text-[10px] font-black text-primary uppercase 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={cn("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-[10px] font-bold text-slate-500 tracking-widest">{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(setUsers);
|
||||
})
|
||||
.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-xs font-black text-slate-500 uppercase tracking-widest">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(setCategories);
|
||||
})
|
||||
.catch(e => toast.error("Failed to add category"));
|
||||
}}
|
||||
className="flex items-center gap-1 text-[10px] font-black text-primary uppercase 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-[9px] 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(setCategories);
|
||||
})
|
||||
.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-xs font-black uppercase tracking-widest">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 uppercase tracking-widest py-3 rounded-xl transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<LogOut size={16} /> End Session
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* User Selection Overlay */}
|
||||
{showUserSelect && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in zoom-in duration-300">
|
||||
<div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 max-w-sm w-full shadow-2xl space-y-8">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="w-16 h-16 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto mb-4 border border-primary/20">
|
||||
<User size={32} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black text-white uppercase tracking-tight">Identity Check</h2>
|
||||
<p className="text-slate-500 text-sm">Select operator profile to continue</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{!selectedUserForLogin ? (
|
||||
users.map(user => (
|
||||
<button
|
||||
key={user.id}
|
||||
onClick={() => handleSelectUser(user)}
|
||||
className="bg-slate-800/50 hover:bg-slate-800 border border-slate-800 hover:border-primary/40 p-4 rounded-2xl text-left transition-all group flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-900 border border-slate-700 flex items-center justify-center text-slate-500 group-hover:text-primary transition-colors">
|
||||
{user.role === 'admin' ? <Shield size={14} /> : <User size={14} />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-black text-sm tracking-widest">{user.username}</p>
|
||||
<p className="text-[10px] text-slate-500 font-bold mt-1 tracking-widest">{user.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={16} className="text-slate-600 group-hover:text-primary transition-colors" />
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-4 animate-in slide-in-from-right-4 duration-300">
|
||||
<div className="bg-slate-800/30 p-4 rounded-2xl border border-slate-800 flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setSelectedUserForLogin(null)}
|
||||
className="p-1 hover:bg-slate-700 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={16} className="text-slate-400" />
|
||||
</button>
|
||||
<div>
|
||||
<p className="text-xs font-bold text-slate-500 uppercase tracking-widest">Logging in as</p>
|
||||
<p className="text-white font-black tracking-tight">{selectedUserForLogin.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest px-1">Password</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={16} />
|
||||
<input
|
||||
type="password"
|
||||
autoFocus
|
||||
value={loginPassword}
|
||||
onChange={(e) => setLoginPassword(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
|
||||
className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="w-full bg-primary text-white font-black uppercase tracking-widest py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
|
||||
>
|
||||
Verify Identity
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{users.length === 0 && (
|
||||
<div className="text-center p-8 text-slate-500 animate-pulse">
|
||||
Initializing users...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user