91 lines
3.1 KiB
JavaScript
91 lines
3.1 KiB
JavaScript
// frontend/app/(protected)/layout.jsx
|
|
// frontend/app/(protected)/layout.jsx
|
|
|
|
import { cookies, headers } from "next/headers"; // 1. ยังคงใช้ฟังก์ชันฝั่ง Server
|
|
import { redirect } from "next/navigation";
|
|
import { Bell, Users } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
// 2. Import Navigation Component ที่เราสร้างขึ้นมาใหม่
|
|
import { Navigation } from "./_components/navigation";
|
|
|
|
export const metadata = { title: "DMS | Protected" };
|
|
|
|
const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
|
|
|
|
async function fetchSession() {
|
|
const cookieStore = cookies();
|
|
const token = cookieStore.get("access_token")?.value;
|
|
|
|
if (!token) return null;
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/auth/me`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
cache: "no-store",
|
|
});
|
|
|
|
if (!res.ok) return null;
|
|
return await res.json();
|
|
} catch (error) {
|
|
console.error("Failed to fetch session:", error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
|
|
export default async function ProtectedLayout({ children }) {
|
|
// 3. ดึงข้อมูล Session บน Server
|
|
const session = await fetchSession();
|
|
|
|
// ถ้าไม่มี session หรือ user ให้ redirect ไปหน้า login
|
|
if (!session?.user) {
|
|
redirect("/login");
|
|
}
|
|
|
|
return (
|
|
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
|
<aside className="hidden border-r bg-muted/40 md:block">
|
|
{/* 4. ใช้ Navigation Component และส่งข้อมูล user เป็น props */}
|
|
<Navigation user={session.user} />
|
|
</aside>
|
|
|
|
<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">
|
|
{/* Mobile navigation can be here */}
|
|
<div className="flex-1 w-full">
|
|
{/* Optional: Add a search bar */}
|
|
</div>
|
|
<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>{session.user.username || 'My Account'}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
{/* Logout button in client-side auth context handles the action */}
|
|
<DropdownMenuItem>Logout</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</header>
|
|
<main className="flex-1 p-4 lg:p-6">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |