129 lines
4.6 KiB
TypeScript
129 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import {
|
|
LogOut,
|
|
LayoutDashboard,
|
|
CalendarPlus,
|
|
CalendarDays
|
|
} from "lucide-react";
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [user, setUser] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
const userData = localStorage.getItem("user");
|
|
if (userData) {
|
|
setUser(JSON.parse(userData));
|
|
} else {
|
|
router.push("/login");
|
|
}
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("user");
|
|
router.push("/login");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white flex flex-col font-sans">
|
|
|
|
{/* HEADER TINGKAT ATAS */}
|
|
<header className="bg-[#e5e7eb] flex items-center justify-between px-6 py-4 shadow-sm z-20 relative">
|
|
{/* Logo Kiri */}
|
|
<div>
|
|
<h2 className="text-blue-600 text-sm font-medium mb-1">Welcome to,</h2>
|
|
<h1 className="text-blue-600 text-3xl font-bold">S-CLASS</h1>
|
|
</div>
|
|
|
|
{/* Profil & Logout Kanan */}
|
|
<div className="flex items-center gap-8">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-blue-600 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() : "V"}
|
|
</div>
|
|
<div className="hidden sm:flex flex-col">
|
|
<span className="font-semibold text-gray-800 text-sm">
|
|
{user?.full_name || "Valentino Heman Budiarto"}
|
|
</span>
|
|
<span className="font-medium text-gray-500 text-xs capitalize">
|
|
{user?.role === 'admin' ? 'Administrator' : 'Mahasiswa'}
|
|
</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>
|
|
|
|
{/* AREA BAWAH (SIDEBAR + KONTEN) */}
|
|
<div className="flex flex-1 overflow-hidden relative">
|
|
|
|
{/* SIDEBAR KIRI (Kini Permanen/Statis) */}
|
|
<aside className="bg-[#b0c4d9] w-64 flex flex-col py-10 shadow-inner z-10">
|
|
<nav className="flex flex-col gap-6 px-4">
|
|
|
|
{/* Menu 1: View Rooms */}
|
|
<Link
|
|
href="/dashboard"
|
|
className={`flex items-center gap-4 cursor-pointer font-semibold transition-colors group
|
|
${pathname === '/dashboard' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}
|
|
>
|
|
<div className={`p-2 rounded-lg transition-colors
|
|
${pathname === '/dashboard' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
|
|
<LayoutDashboard size={22} />
|
|
</div>
|
|
<span>View Rooms</span>
|
|
</Link>
|
|
|
|
{/* Menu 2: Add Booking */}
|
|
<Link
|
|
href="/dashboard/bookings/add"
|
|
className={`flex items-center gap-4 cursor-pointer font-semibold transition-colors group
|
|
${pathname === '/dashboard/bookings/add' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}
|
|
>
|
|
<div className={`p-2 rounded-lg transition-colors
|
|
${pathname === '/dashboard/bookings/add' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
|
|
<CalendarPlus size={22} />
|
|
</div>
|
|
<span>Add Booking</span>
|
|
</Link>
|
|
|
|
{/* Menu 3: Calendar View */}
|
|
<Link
|
|
href="/dashboard/bookings/calendar"
|
|
className={`flex items-center gap-4 cursor-pointer font-semibold transition-colors group
|
|
${pathname === '/dashboard/bookings/calendar' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}
|
|
>
|
|
<div className={`p-2 rounded-lg transition-colors
|
|
${pathname === '/dashboard/bookings/calendar' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
|
|
<CalendarDays size={22} />
|
|
</div>
|
|
<span>Calendar View</span>
|
|
</Link>
|
|
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* KONTEN UTAMA */}
|
|
<main className="flex-1 overflow-y-auto bg-[#f8fafc] p-8">
|
|
{children}
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
} |