fix: tailwind v4 postcss, auth-server session, eslint cleanups

frontend/app/(protected)/layout.jsx

@@ -1,54 +1,71 @@
 // File: frontend/app/(protected)/layout.jsx
+'use client';
 
-import { cookies } from "next/headers"; // 1. ยังคงใช้ฟังก์ชันฝั่ง Server
-import { redirect } from "next/navigation";
-import { Users } from 'lucide-react';
+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';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 
-// 2. Import SideNavigation Component ที่เราสร้างขึ้นมาใหม่
-import { SideNavigation } from "./_components/SideNavigation";
+// NOTE: ให้ชี้ไปยังไฟล์จริงของคุณ
+// เดิมบางโปรเจ็กต์ใช้ "../_components/SideNavigation"
+// ที่นี่อ้าง absolute import ตาม tsconfig/baseUrl
+import { SideNavigation } from '@/app/_components/SideNavigation';
 
-// (ฟังก์ชัน fetchSession และตัวแปรอื่นๆ เหมือนเดิม)
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+export default function ProtectedLayout({ children }) {
+  const { user, isAuthenticated, loading, logout } = useAuth();
+  const router = useRouter();
 
-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;
+  // 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>
+    );
   }
-}
 
-export default async function ProtectedLayout({ children }) {
-  // 3. ดึงข้อมูล Session บน Server
-  const session = await fetchSession();
-
-  if (!session?.user) {
-    redirect("/login");
-  }
+  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">
-        {/* 4. ใช้ SideNavigation Component และส่งข้อมูล user เป็น props */}
-        <SideNavigation user={session.user} />
+        <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 w-full">
-            {/* Optional: Add a search bar */}
-          </div>
+          <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">
@@ -57,21 +74,22 @@ export default async function ProtectedLayout({ children }) {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuLabel>{session.user.username || 'My Account'}</DropdownMenuLabel>
+              <DropdownMenuLabel>{user?.username || 'My Account'}</DropdownMenuLabel>
               <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
+              <DropdownMenuItem>Profile Settings</DropdownMenuItem>
               <DropdownMenuSeparator />
-              <DropdownMenuItem>
-                {/* ปุ่ม Logout จริงๆ ควรอยู่ใน Client Component ที่เรียกใช้ useAuth() hook */}
-                Logout
+              <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>
   );
-}
+}