110 lines
4.5 KiB
TypeScript
110 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import {
|
|
LogOut,
|
|
LayoutDashboard,
|
|
Activity,
|
|
ShieldCheck,
|
|
Settings2
|
|
} from "lucide-react";
|
|
|
|
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [user, setUser] = useState<any>(null);
|
|
|
|
// State isSidebarOpen sudah kita buang sepenuhnya
|
|
|
|
useEffect(() => {
|
|
const userData = localStorage.getItem("user");
|
|
if (userData) {
|
|
const parsed = JSON.parse(userData);
|
|
if (parsed.role !== 'admin') {
|
|
router.push("/dashboard");
|
|
} else {
|
|
setUser(parsed);
|
|
}
|
|
} else {
|
|
router.push("/login");
|
|
}
|
|
}, [router]);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.clear();
|
|
router.push("/login");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white flex flex-col font-sans">
|
|
|
|
{/* HEADER ADMIN */}
|
|
<header className="bg-[#e5e7eb] flex items-center justify-between px-6 py-4 shadow-sm z-20 relative">
|
|
<div>
|
|
<h2 className="text-blue-600 text-sm font-medium mb-1">Admin Panel,</h2>
|
|
<h1 className="text-blue-600 text-3xl font-bold">S-CLASS</h1>
|
|
</div>
|
|
<div className="flex items-center gap-8">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-slate-800 text-white rounded-full h-10 w-10 flex items-center justify-center text-lg font-bold shadow-sm">
|
|
{user?.full_name ? user.full_name.charAt(0).toUpperCase() : "A"}
|
|
</div>
|
|
<div className="hidden sm:flex flex-col">
|
|
<span className="font-semibold text-gray-800 text-sm">{user?.full_name || "Administrator"}</span>
|
|
<span className="font-medium text-blue-600 text-xs uppercase tracking-wider">System Controller</span>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleLogout} className="flex items-center gap-2 text-red-500 font-medium hover:text-red-600 transition-colors">
|
|
Log Out <LogOut size={20} />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex flex-1 overflow-hidden relative">
|
|
|
|
{/* SIDEBAR ADMIN (Lebar Permanen: w-64) */}
|
|
<aside className="bg-[#b0c4d9] w-64 flex flex-col py-10 shadow-inner z-10">
|
|
<nav className="flex flex-col gap-6 px-4">
|
|
|
|
<Link href="/admin" className={`flex items-center gap-4 font-semibold transition-colors group ${pathname === '/admin' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}>
|
|
<div className={`p-2 rounded-lg transition-colors ${pathname === '/admin' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
|
|
<LayoutDashboard size={22} />
|
|
</div>
|
|
<span>Dashboard</span>
|
|
</Link>
|
|
|
|
<Link href="/admin/monitoring" className={`flex items-center gap-4 font-semibold transition-colors group ${pathname === '/admin/monitoring' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}>
|
|
<div className={`p-2 rounded-lg transition-colors ${pathname === '/admin/monitoring' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
|
|
<Activity size={22} />
|
|
</div>
|
|
<span>Power Monitoring</span>
|
|
</Link>
|
|
|
|
<Link href="/admin/approvals" className={`flex items-center gap-4 font-semibold transition-colors group ${pathname === '/admin/approvals' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}>
|
|
<div className={`p-2 rounded-lg transition-colors ${pathname === '/admin/approvals' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
|
|
<ShieldCheck size={22} />
|
|
</div>
|
|
<span>Approvals</span>
|
|
</Link>
|
|
|
|
<Link href="/admin/rooms" className={`flex items-center gap-4 font-semibold transition-colors group ${pathname === '/admin/rooms' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}>
|
|
<div className={`p-2 rounded-lg transition-colors ${pathname === '/admin/rooms' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
|
|
<Settings2 size={22} />
|
|
</div>
|
|
<span>Manage Rooms</span>
|
|
</Link>
|
|
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* KONTEN UTAMA */}
|
|
<main className="flex-1 overflow-y-auto bg-[#f8fafc] p-8">
|
|
{children}
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
} |