122 lines
4.8 KiB
TypeScript
122 lines
4.8 KiB
TypeScript
import React from 'react';
|
|
import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import {
|
|
LayoutDashboard,
|
|
ShoppingBag,
|
|
History,
|
|
Layers,
|
|
Package,
|
|
LogOut,
|
|
Menu,
|
|
Bell,
|
|
Search,
|
|
User
|
|
} from 'lucide-react';
|
|
|
|
import CollegeLogo from '../assets/college-logo.png';
|
|
|
|
const Layout = () => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const userName = sessionStorage.getItem('counterUserName') || 'Counter User';
|
|
|
|
const handleLogout = () => {
|
|
sessionStorage.removeItem('isCounterLoggedIn');
|
|
navigate('/login');
|
|
};
|
|
|
|
const navItems = [
|
|
{ path: '/pos', icon: ShoppingBag, label: 'POS' },
|
|
{ path: '/orders', icon: History, label: 'Orders' },
|
|
{ path: '/categories', icon: Layers, label: 'Categories' },
|
|
{ path: '/products', icon: Package, label: 'Products' },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#f8fafc] flex font-inter overflow-hidden h-screen">
|
|
{/* Side Navigation Bar */}
|
|
<aside className="w-64 bg-[#001828] text-white flex flex-col shadow-2xl z-50">
|
|
<div className="p-8">
|
|
<div className="flex flex-col items-center justify-center text-center gap-4">
|
|
<div className="bg-white rounded-2xl p-4 flex items-center justify-center border border-white/20 shadow-xl overflow-hidden w-full max-w-[180px]">
|
|
<img src={CollegeLogo} alt="Logo" className="h-12 w-auto object-contain" />
|
|
</div>
|
|
<div>
|
|
<span className="text-xl font-black tracking-tighter text-white">TILLO COUNTER</span>
|
|
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest mt-1">Institutional POS</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex-1 px-4 space-y-2">
|
|
{navItems.map((item) => {
|
|
const isActive = location.pathname === item.path;
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
className={`flex items-center gap-4 px-6 py-4 rounded-2xl text-sm font-bold transition-all ${
|
|
isActive
|
|
? 'bg-white/10 text-white shadow-lg'
|
|
: 'text-white/50 hover:text-white hover:bg-white/5'
|
|
}`}
|
|
>
|
|
<item.icon size={20} className={isActive ? 'text-white' : 'text-white/50'} />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-6">
|
|
<div className="bg-white/5 rounded-[2rem] p-6 border border-white/10 group cursor-pointer relative">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center text-white border border-white/10">
|
|
<User size={20} />
|
|
</div>
|
|
<div className="flex-1 overflow-hidden">
|
|
<p className="text-xs font-black truncate">{userName}</p>
|
|
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Operator</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="mt-4 w-full flex items-center justify-center gap-2 py-3 bg-rose-500/20 text-rose-400 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-rose-500 hover:text-white transition-all"
|
|
>
|
|
<LogOut size={14} /> Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{/* Top Header for Mobile/Search/Notifications */}
|
|
<header className="h-20 bg-white border-b border-slate-100 flex items-center justify-between px-8 shrink-0">
|
|
<div className="flex items-center bg-slate-50 border border-slate-100 rounded-2xl px-6 py-2.5 gap-4 w-full max-w-xl focus-within:bg-white focus-within:ring-4 focus-within:ring-primary/5 transition-all">
|
|
<Search size={18} className="text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search anything here..."
|
|
className="bg-transparent border-none outline-none text-sm font-medium w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<button className="relative w-12 h-12 flex items-center justify-center bg-slate-50 rounded-2xl text-slate-400 hover:text-primary hover:bg-primary/5 transition-all">
|
|
<Bell size={20} />
|
|
<span className="absolute top-3 right-3 w-2 h-2 bg-rose-500 rounded-full border-2 border-white"></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 overflow-hidden relative">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|