96 lines
3.3 KiB
JavaScript
Executable File
96 lines
3.3 KiB
JavaScript
Executable File
// File: frontend/app/(protected)/layout.jsx
|
|
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuth } from '@/lib/auth';
|
|
|
|
import { Bell, LogOut, Users } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
// NOTE: ให้ชี้ไปยังไฟล์จริงของคุณ
|
|
// เดิมบางโปรเจ็กต์ใช้ "../_components/SideNavigation"
|
|
// ที่นี่อ้าง absolute import ตาม tsconfig/baseUrl
|
|
import { SideNavigation } from '@/app/_components/SideNavigation';
|
|
|
|
export default function ProtectedLayout({ children }) {
|
|
const { user, isAuthenticated, loading, logout } = useAuth();
|
|
const router = useRouter();
|
|
|
|
// Guard ฝั่ง client: ถ้าไม่ได้ล็อกอิน ให้เด้งไป /login
|
|
useEffect(() => {
|
|
if (!loading && !isAuthenticated) {
|
|
router.push('/login');
|
|
}
|
|
}, [loading, isAuthenticated, router]);
|
|
|
|
// ระหว่างรอเช็คสถานะ หรือยังไม่ authenticated -> แสดง loading
|
|
if (loading || !isAuthenticated) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen">
|
|
<div className="text-sm text-muted-foreground">Loading session…</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logout();
|
|
} finally {
|
|
router.replace('/login');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
|
{/* Sidebar */}
|
|
<aside className="hidden border-r bg-muted/40 md:block">
|
|
<SideNavigation user={user} />
|
|
</aside>
|
|
|
|
{/* Main */}
|
|
<div className="flex flex-col">
|
|
<header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
|
|
<div className="flex-1" />
|
|
|
|
<Button variant="ghost" size="icon" className="relative">
|
|
<Bell className="w-5 h-5" />
|
|
<span className="absolute inline-flex w-2 h-2 rounded-full right-1 top-1 bg-primary" />
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="secondary" size="icon" className="rounded-full">
|
|
<Users className="w-5 h-5" />
|
|
<span className="sr-only">Toggle user menu</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>{user?.username || 'My Account'}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>Profile Settings</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout} className="text-red-500 focus:text-red-600">
|
|
<LogOut className="w-4 h-4 mr-2" />
|
|
<span>Logout</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</header>
|
|
|
|
<main className="flex flex-col flex-1 gap-4 p-4 lg:gap-6 lg:p-6">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|