feat(dashboard): เพมสวนจดการ user
This commit is contained in:
admin
@@ -1,114 +1,157 @@
|
||||
// frontend/app/layout.jsx
|
||||
import "./globals.css";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cookies, headers } from "next/headers";
|
||||
'use client';
|
||||
|
||||
export const metadata = {
|
||||
title: "DMS",
|
||||
description: "Document Management System — LCBP3 Phase 3",
|
||||
};
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
Bell,
|
||||
Home,
|
||||
Users,
|
||||
Settings,
|
||||
Package2,
|
||||
FileText, // Added for example
|
||||
LineChart, // Added for example
|
||||
} from 'lucide-react';
|
||||
|
||||
const API_BASE = (process.env.NEXT_PUBLIC_API_BASE || "").replace(/\/$/, "");
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** ดึงสถานะผู้ใช้แบบ global (ไม่บังคับล็อกอิน) */
|
||||
async function fetchGlobalSession() {
|
||||
const cookieStore = await cookies();
|
||||
const cookieHeader = cookieStore.toString();
|
||||
// **1. Import `useAuth` และ `can` จากไฟล์จริงของคุณ**
|
||||
import { useAuth } from '@/lib/auth';
|
||||
import { can } from '@/lib/rbac';
|
||||
|
||||
const hdrs = await headers();
|
||||
const hostHdr = hdrs.get("host");
|
||||
const protoHdr = hdrs.get("x-forwarded-proto") || "https";
|
||||
export default function ProtectedLayout({ children }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
// **2. เรียกใช้งาน useAuth hook เพื่อดึงข้อมูล user**
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const res = await fetch(`${API_BASE}/api/auth/me`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Cookie: cookieHeader,
|
||||
"X-Forwarded-Host": hostHdr || "",
|
||||
"X-Forwarded-Proto": protoHdr,
|
||||
Accept: "application/json",
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!res.ok) return null;
|
||||
try {
|
||||
const data = await res.json();
|
||||
return data?.ok ? data : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** ปุ่ม Logout แบบ Server Action (ไม่ต้องมี client component) */
|
||||
async function LogoutAction() {
|
||||
"use server";
|
||||
const cookieStore = await cookies();
|
||||
const cookieHeader = cookieStore.toString();
|
||||
|
||||
const hdrs = await headers();
|
||||
const hostHdr = hdrs.get("host");
|
||||
const protoHdr = hdrs.get("x-forwarded-proto") || "https";
|
||||
|
||||
// เรียก backend ให้ลบคุกกี้ออก (HttpOnly cookies)
|
||||
await fetch(`${API_BASE}/api/auth/logout`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Cookie: cookieHeader,
|
||||
"X-Forwarded-Host": hostHdr || "",
|
||||
"X-Forwarded-Proto": protoHdr,
|
||||
Accept: "application/json",
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
// กลับไปหน้า login พร้อม next ไป dashboard
|
||||
redirect("/login?next=/dashboard");
|
||||
}
|
||||
|
||||
export default async function RootLayout({ children }) {
|
||||
const session = await fetchGlobalSession();
|
||||
const loggedIn = !!session?.user;
|
||||
const navLinks = [
|
||||
{ href: '/dashboard', label: 'Dashboard', icon: Home },
|
||||
{ href: '/correspondences', label: 'Correspondences', icon: FileText },
|
||||
{ href: '/drawings', label: 'Drawings', icon: FileText },
|
||||
{ href: '/rfas', label: 'RFAs', icon: FileText },
|
||||
{ href: '/transmittals', label: 'Transmittals', icon: FileText },
|
||||
{ href: '/reports', label: 'Reports', icon: LineChart },
|
||||
];
|
||||
|
||||
// **3. สร้าง object สำหรับเมนู Admin โดยเฉพาะ**
|
||||
const adminLink = {
|
||||
href: '/admin/users',
|
||||
label: 'Admin',
|
||||
icon: Settings,
|
||||
requiredPermission: 'manage_users'
|
||||
};
|
||||
|
||||
return (
|
||||
<html lang="th">
|
||||
<body className="bg-slate-50">
|
||||
{/* Header รวมทุกหน้า */}
|
||||
<header className="flex items-center justify-between w-full px-4 py-3 text-white bg-sky-900">
|
||||
<h1 className="font-bold">Document Management System</h1>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{loggedIn ? (
|
||||
<div className="text-sm">
|
||||
สวัสดี, <b>{session.user.username}</b> ({session.user.role})
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm">ยังไม่ได้เข้าสู่ระบบ</div>
|
||||
)}
|
||||
|
||||
{/* ปุ่ม Login/Logout */}
|
||||
{loggedIn ? (
|
||||
<form action={LogoutAction}>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20"
|
||||
>
|
||||
ออกจากระบบ
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<Link
|
||||
href="/login?next=/dashboard"
|
||||
className="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20"
|
||||
>
|
||||
เข้าสู่ระบบ
|
||||
</Link>
|
||||
)}
|
||||
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
||||
<div className="hidden border-r bg-muted/40 md:block">
|
||||
<div className="flex h-full max-h-screen flex-col gap-2">
|
||||
<div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
||||
<Link href="/" className="flex items-center gap-2 font-semibold">
|
||||
<Package2 className="h-6 w-6" />
|
||||
<span className="">LCB P3 DMS</span>
|
||||
</Link>
|
||||
<Button variant="outline" size="icon" className="ml-auto h-8 w-8">
|
||||
<Bell className="h-4 w-4" />
|
||||
<span className="sr-only">Toggle notifications</span>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex-1">
|
||||
<nav className="grid items-start px-2 text-sm font-medium lg:px-4">
|
||||
{navLinks.map(({ href, label, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
|
||||
pathname.startsWith(href) && 'bg-muted text-primary'
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* ====== ส่วนที่แก้ไข: ตรวจสอบสิทธิ์ด้วย `can` ====== */}
|
||||
{user && can(user, adminLink.requiredPermission) && (
|
||||
<>
|
||||
<div className="my-2 border-t"></div>
|
||||
<Link
|
||||
href={adminLink.href}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
|
||||
pathname.startsWith('/admin') && 'bg-muted text-primary'
|
||||
)}
|
||||
>
|
||||
<adminLink.icon className="h-4 w-4" />
|
||||
{adminLink.label}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{/* ====== จบส่วนที่แก้ไข ====== */}
|
||||
|
||||
<main>{children}</main>
|
||||
</body>
|
||||
</html>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="mt-auto p-4">
|
||||
<Card>
|
||||
<CardHeader className="p-2 pt-0 md:p-4">
|
||||
<CardTitle>Need Help?</CardTitle>
|
||||
<CardDescription>
|
||||
Contact support for any issues or questions.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="p-2 pt-0 md:p-4 md:pt-0">
|
||||
<Button size="sm" className="w-full">
|
||||
Contact
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 added here */}
|
||||
<div className="w-full flex-1">
|
||||
{/* Optional: Add a search bar */}
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" size="icon" className="rounded-full">
|
||||
<Users className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>{user ? user.username : 'My Account'}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={logout}>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
<main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user