Hafid NurandGitHub
9d37cba65f
* Initialize a new NX project - QR campaign * Develop QR code generator app for campaign * Add deployment script Add Dockerfile, docker compose, and update Nix config for deployment * Revert package.json to fix ci * Revert package-lock.json to ensure ci (Nix build & cache) successful
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { Outlet, Link, useLocation } from 'react-router-dom';
|
|
import { useAuthStore } from '../../auth/store/auth.store';
|
|
|
|
export const AdminDashboard = () => {
|
|
const logout = useAuthStore((state) => state.logout);
|
|
const location = useLocation();
|
|
|
|
const isActive = (path: string) => location.pathname.startsWith(path);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-100 flex">
|
|
{/* Sidebar */}
|
|
<aside className="w-64 bg-white border-r border-slate-200 flex flex-col">
|
|
<div className="p-6 border-b border-slate-200">
|
|
<h1 className="text-xl font-bold text-slate-800">Admin Panel</h1>
|
|
<p className="text-xs text-slate-500 mt-1">QR Campaign Manager</p>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-4 space-y-1">
|
|
<Link
|
|
to="/admin/campaigns"
|
|
className={`block px-4 py-2 rounded-md transition-colors ${
|
|
isActive('/admin/campaigns')
|
|
? 'bg-blue-50 text-blue-700'
|
|
: 'text-slate-600 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
Campaigns
|
|
</Link>
|
|
<Link
|
|
to="/admin/users"
|
|
className={`block px-4 py-2 rounded-md transition-colors ${
|
|
isActive('/admin/users')
|
|
? 'bg-blue-50 text-blue-700'
|
|
: 'text-slate-600 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
Users
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-slate-200">
|
|
<Link
|
|
to="/"
|
|
className="block px-4 py-2 text-sm text-slate-600 hover:text-slate-900 mb-2"
|
|
>
|
|
← Back to App
|
|
</Link>
|
|
<button
|
|
onClick={logout}
|
|
className="w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md transition-colors text-left"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 p-8 overflow-auto">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|