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

frontend/Dockerfile

@@ -1,7 +1,7 @@
 # syntax=docker/dockerfile:1.6
 
 ############ Base ############
-FROM node:24-alpine AS base
+FROM node:20-alpine AS base
 WORKDIR /app
 RUN apk add --no-cache bash curl tzdata \
  && ln -snf /usr/share/zoneinfo/Asia/Bangkok /etc/localtime \
@@ -66,6 +66,8 @@ RUN echo "=== Checking components ===" && \
     echo "=== Checking .next permissions ===" && \
     ls -lad /app/.next
     
+RUN npm ci --no-audit --no-fund --include=dev
+
 RUN npm run build
 
 ############ Prod runtime (optimized) ############

frontend/app/(protected)/_components/SideNavigation.jsx

@@ -1,84 +0,0 @@
-// File: frontend/app/(protected)/_components/SideNavigation.jsx
-'use client'; // <-- 1. กำหนดให้ไฟล์นี้เป็น Client Component
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { Home, FileText, Settings, Package2 } from 'lucide-react';
-import { can } from "@/lib/rbac";
-import { cn } from "@/lib/utils";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-
-export function SideNavigation({ user }) { // 2. รับข้อมูล user มาจาก props
-  const pathname = usePathname(); // 3. ใช้งาน usePathname ได้แล้ว
-
-  const navLinks = [
-    { href: '/dashboard', label: 'Dashboard', icon: Home },
-    { href: '/correspondences', label: 'Correspondences', icon: FileText },
-    { href: '/drawings', label: 'Drawings', icon: FileText },
-    // ... เพิ่มเมนูอื่นๆ ตามต้องการ
-  ];
-
-  const adminLink = { 
-    href: '/admin/users', 
-    label: 'Admin', 
-    icon: Settings, 
-    requiredPermission: 'manage_users' 
-  };
-
-  return (
-    <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="/dashboard" className="flex items-center gap-2 font-semibold">
-          <Package2 className="h-6 w-6" />
-          <span className="">LCB P3 DMS</span>
-        </Link>
-      </div>
-      <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',
-                // ตรวจสอบ Path ปัจจุบันเพื่อ active เมนู
-                pathname === href || (href !== '/dashboard' && pathname.startsWith(href)) ? 'bg-muted text-primary' : ''
-              )}
-            >
-              <Icon className="h-4 w-4" />
-              {label}
-            </Link>
-          ))}
-          
-          {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>
-            </>
-          )}
-        </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.</CardDescription>
-          </CardHeader>
-          <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
-            <Button size="sm" className="w-full">Contact Support</Button>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

frontend/app/(protected)/admin/_components/role-form-dialog.jsx

@@ -2,7 +2,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import api from '@/lib/api';
+import { api } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -26,17 +26,20 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
   const isEditMode = !!role;
 
   useEffect(() => {
+    // Reset state ทุกครั้งที่ dialog เปิดขึ้นมาใหม่
     if (isOpen) {
       if (isEditMode) {
+        // โหมดแก้ไข: ตั้งค่าฟอร์มด้วยข้อมูล Role ที่มีอยู่
         setFormData({ name: role.name, description: role.description || '' });
         setSelectedPermissions(new Set(role.Permissions?.map(p => p.id) || []));
       } else {
+        // โหมดสร้างใหม่: เคลียร์ฟอร์ม
         setFormData({ name: '', description: '' });
         setSelectedPermissions(new Set());
       }
       setError('');
     }
-  }, [role, isOpen]);
+  }, [role, isOpen]); // ให้ re-run effect นี้เมื่อ role หรือ isOpen เปลี่ยน
 
   const handleInputChange = (e) => {
     const { id, value } = e.target;
@@ -62,15 +65,14 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
 
     try {
       if (isEditMode) {
-        // ในโหมดแก้ไข เราจะอัปเดตสิทธิ์เสมอ
+        // โหมดแก้ไข: อัปเดต Permissions ของ Role ที่มีอยู่
         await api.put(`/rbac/roles/${role.id}/permissions`, { 
           permissionIds: Array.from(selectedPermissions) 
         });
-        // (Optional) อาจจะเพิ่มการแก้ไขชื่อ/description ของ role ที่นี่ด้วยก็ได้
-        // await api.put(`/rbac/roles/${role.id}`, { name: formData.name, description: formData.description });
       } else {
-        // ในโหมดสร้างใหม่
+        // โหมดสร้างใหม่: สร้าง Role ใหม่ก่อน
         const newRoleRes = await api.post('/rbac/roles', formData);
+        
         // ถ้าสร้าง Role สำเร็จ และมีการเลือก Permission ไว้ ให้ทำการผูกสิทธิ์ทันที
         if (newRoleRes.data && selectedPermissions.size > 0) {
             await api.put(`/rbac/roles/${newRoleRes.data.id}/permissions`, {
@@ -78,8 +80,8 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
             });
         }
       }
-      onSuccess();
-      setIsOpen(false);
+      onSuccess(); // บอกให้หน้าแม่ (roles/page.jsx) โหลดข้อมูลใหม่
+      setIsOpen(false); // ปิด Dialog
     } catch (err) {
       setError(err.response?.data?.message || 'An unexpected error occurred.');
     } finally {
@@ -92,13 +94,14 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
       <DialogContent className="sm:max-w-md">
         <form onSubmit={handleSubmit}>
           <DialogHeader>
-            <DialogTitle>{isEditMode ? `Edit Permissions for ${role.name}` : 'Create New Role'}</DialogTitle>
+            <DialogTitle>{isEditMode ? `Edit Permissions for: ${role.name}` : 'Create New Role'}</DialogTitle>
             <DialogDescription>
-              Select the permissions for this role.
+              {isEditMode ? 'Select the permissions for this role.' : 'Define a new role and its initial permissions.'}
             </DialogDescription>
           </DialogHeader>
           
           <div className="py-4 space-y-4">
+            {/* แสดงฟอร์มสำหรับชื่อและคำอธิบายเฉพาะตอนสร้างใหม่ */}
             {!isEditMode && (
               <>
                 <div className="space-y-1">
@@ -123,7 +126,7 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
                         checked={selectedPermissions.has(perm.id)}
                         onCheckedChange={() => handlePermissionChange(perm.id)}
                       />
-                      <label htmlFor={`perm-${perm.id}`} className="text-sm font-medium leading-none">
+                      <label htmlFor={`perm-${perm.id}`} className="text-sm font-medium leading-none cursor-pointer">
                         {perm.name}
                       </label>
                     </div>
@@ -135,6 +138,9 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
 
           {error && <p className="text-sm text-red-500 text-center pb-2">{error}</p>}
           <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setIsOpen(false)} disabled={isLoading}>
+              Cancel
+            </Button>
             <Button type="submit" disabled={isLoading}>
               {isLoading ? 'Saving...' : 'Save Changes'}
             </Button>

frontend/app/(protected)/admin/_components/user-form-dialog.jsx

@@ -2,9 +2,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import api from '@/lib/api';
+import { api } from '@/lib/api';
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -13,20 +13,27 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Trash2 } from 'lucide-react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
-
 export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
+  // State for form fields
   const [formData, setFormData] = useState({});
-  const [allRoles, setAllRoles] = useState([]);
   const [selectedSystemRoles, setSelectedSystemRoles] = useState(new Set());
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [allProjects, setAllProjects] = useState([]);
+  
+  // State for project role assignments
   const [projectRoles, setProjectRoles] = useState([]);
   const [selectedProjectId, setSelectedProjectId] = useState('');
   const [selectedRoleId, setSelectedRoleId] = useState('');
 
+  // State for prerequisite data (fetched once)
+  const [allRoles, setAllRoles] = useState([]);
+  const [allProjects, setAllProjects] = useState([]);
+
+  // UI State
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
   const isEditMode = !!user;
 
+  // Effect to fetch prerequisite data (all roles and projects) when dialog opens
   useEffect(() => {
     const fetchPrerequisites = async () => {
       try {
@@ -38,6 +45,7 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
         setAllProjects(projectsRes.data);
       } catch (err) {
         console.error('Failed to fetch prerequisites', err);
+        setError('Could not load required data (roles, projects).');
       }
     };
     if (isOpen) {
@@ -45,9 +53,11 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
     }
   }, [isOpen]);
 
+  // Effect to set up the form when the user prop changes (for editing) or when opening for creation
   useEffect(() => {
-    const fetchUserData = async () => {
+    const setupForm = async () => {
         if (isEditMode) {
+            // Edit mode: populate form with user data
             setFormData({
                 username: user.username,
                 email: user.email,
@@ -57,6 +67,7 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
             });
             setSelectedSystemRoles(new Set(user.Roles?.map(role => role.id) || []));
             
+            // Fetch this user's specific project roles
             try {
                 const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
                 setProjectRoles(res.data);
@@ -64,19 +75,20 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
                 console.error("Failed to fetch user's project roles", err);
                 setProjectRoles([]);
             }
-
         } else {
+            // Create mode: reset all fields
             setFormData({ username: '', email: '', password: '', first_name: '', last_name: '', is_active: true });
             setSelectedSystemRoles(new Set());
             setProjectRoles([]);
         }
+        // Reset local state
         setError('');
         setSelectedProjectId('');
         setSelectedRoleId('');
     };
     
     if (isOpen) {
-        fetchUserData();
+        setupForm();
     }
   }, [user, isOpen]);
 
@@ -107,6 +119,7 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
               projectId: selectedProjectId,
               roleId: selectedRoleId
           });
+          // Refresh the list after adding
           const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
           setProjectRoles(res.data);
           setSelectedProjectId('');
@@ -123,12 +136,9 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
       setError('');
       try {
           await api.delete('/rbac/user-project-roles', {
-              data: {
-                  userId: user.id,
-                  projectId: assignment.project_id,
-                  roleId: assignment.role_id
-              }
+              data: { userId: user.id, projectId: assignment.project_id, roleId: assignment.role_id }
           });
+          // Refresh list visually without another API call
           setProjectRoles(prev => prev.filter(p => p.id !== assignment.id));
       } catch(err) {
           setError(err.response?.data?.message || 'Failed to remove project role.');
@@ -137,7 +147,8 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
       }
   };
 
-  const handleSaveUserDetails = async () => {
+  const handleSaveUserDetails = async (e) => {
+    e.preventDefault();
     setIsLoading(true);
     setError('');
     const payload = { ...formData, roles: Array.from(selectedSystemRoles) };
@@ -148,8 +159,8 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
       } else {
         await api.post('/users', payload);
       }
-      onSuccess();
-      setIsOpen(false);
+      onSuccess(); // Tell the parent page to refresh its data
+      setIsOpen(false); // Close the dialog
     } catch (err) {
       setError(err.response?.data?.message || 'An unexpected error occurred.');
     } finally {
@@ -160,107 +171,113 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogContent className="sm:max-w-3xl">
-        <DialogHeader>
-            <DialogTitle>{isEditMode ? `Edit User: ${user.username}` : 'Create New User'}</DialogTitle>
-        </DialogHeader>
-        <ScrollArea className="max-h-[70vh]">
-        <div className="grid grid-cols-1 p-4 md:grid-cols-2 gap-x-6 gap-y-4">
-            
-            {/* Section 1: User Details & System Roles */}
-            <div className="pr-4 space-y-4 border-r-0 md:border-r">
-                <h3 className="pb-2 font-semibold border-b">User Details & System Roles</h3>
-                <div className="space-y-2">
-                    <Label htmlFor="username">Username</Label>
-                    <Input id="username" value={formData.username || ''} onChange={handleInputChange} required disabled={isEditMode} />
-                </div>
-                <div className="space-y-2">
-                    <Label htmlFor="email">Email</Label>
-                    <Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} required />
-                </div>
-                {!isEditMode && (
-                  <div className="space-y-2">
-                    <Label htmlFor="password">Password</Label>
-                    <Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} required />
-                  </div>
-                )}
-                <div className="flex gap-4">
-                  <div className="flex-1 space-y-2">
-                      <Label htmlFor="first_name">First Name</Label>
-                      <Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} />
-                  </div>
-                  <div className="flex-1 space-y-2">
-                      <Label htmlFor="last_name">Last Name</Label>
-                      <Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} />
-                  </div>
-                </div>
-                <div className="space-y-2">
-                  <Label>System Roles</Label>
-                  <div className="p-2 space-y-2 overflow-y-auto border rounded-md max-h-32">
-                    {allRoles.map(role => (
-                        <div key={role.id} className="flex items-center space-x-2">
-                            <Checkbox id={`role-${role.id}`} checked={selectedSystemRoles.has(role.id)} onCheckedChange={() => handleSystemRoleChange(role.id)} />
-                            <label htmlFor={`role-${role.id}`} className="text-sm font-medium">{role.name}</label>
-                        </div>
-                    ))}
-                  </div>
-                </div>
-                <div className="flex items-center pt-2 space-x-2">
-                    <Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
-                    <Label htmlFor="is_active">User is Active</Label>
-                </div>
-            </div>
-
-            {/* Section 2: Project Role Assignments */}
-            <div className="space-y-4">
-                <h3 className="pb-2 font-semibold border-b">Project Role Assignments</h3>
-                {isEditMode ? (
-                <>
-                    <div className="p-4 space-y-3 border rounded-lg bg-muted/50">
-                        <p className="text-sm font-medium">Assign New Project Role</p>
-                        <div className="grid grid-cols-2 gap-2">
-                            <Select onValueChange={setSelectedProjectId} value={selectedProjectId}>
-                                <SelectTrigger><SelectValue placeholder="Select Project" /></SelectTrigger>
-                                <SelectContent>{allProjects.map(p => <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>)}</SelectContent>
-                            </Select>
-                            <Select onValueChange={setSelectedRoleId} value={selectedRoleId}>
-                                <SelectTrigger><SelectValue placeholder="Select Role" /></SelectTrigger>
-                                <SelectContent>{allRoles.map(r => <SelectItem key={r.id} value={String(r.id)}>{r.name}</SelectItem>)}</SelectContent>
-                            </Select>
-                        </div>
-                        <Button onClick={handleAddProjectRole} disabled={isLoading || !selectedProjectId || !selectedRoleId} size="sm" className="w-full">
-                            {isLoading ? 'Adding...' : 'Add Project Role'}
-                        </Button>
-                    </div>
-
+        <form onSubmit={handleSaveUserDetails}>
+            <DialogHeader>
+                <DialogTitle>{isEditMode ? `Edit User: ${user.username}` : 'Create New User'}</DialogTitle>
+            </DialogHeader>
+            <ScrollArea className="max-h-[70vh] -mr-6 pr-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 p-4">
+                
+                {/* Section 1: User Details & System Roles */}
+                <div className="space-y-4 border-r-0 md:border-r md:pr-4">
+                    <h3 className="font-semibold border-b pb-2">User Details & System Roles</h3>
                     <div className="space-y-2">
-                        <p className="text-sm font-medium">Current Assignments</p>
-                        <div className="pr-1 space-y-1 overflow-y-auto max-h-48">
-                            {projectRoles.length > 0 ? projectRoles.map(pr => (
-                                <div key={pr.id} className="flex items-center justify-between p-2 text-sm border rounded-md">
-                                    <div>
-                                        <span className="font-semibold">{pr.Project.name}</span>
-                                        <span className="text-muted-foreground"> as </span>
-                                        <span>{pr.Role.name}</span>
-                                    </div>
-                                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleRemoveProjectRole(pr)} disabled={isLoading}>
-                                        <Trash2 className="w-4 h-4 text-red-500" />
-                                    </Button>
-                                </div>
-                            )) : <p className="py-2 text-sm italic text-center text-muted-foreground">No project assignments.</p>}
-                        </div>
+                        <Label htmlFor="username">Username</Label>
+                        <Input id="username" value={formData.username || ''} onChange={handleInputChange} required disabled={isEditMode} />
                     </div>
-                </>
-                ) : <p className="py-4 text-sm italic text-center text-muted-foreground">Save the user first to assign project roles.</p>}
+                    <div className="space-y-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} required />
+                    </div>
+                    {!isEditMode && (
+                      <div className="space-y-2">
+                        <Label htmlFor="password">Password</Label>
+                        <Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} required />
+                      </div>
+                    )}
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                          <Label htmlFor="first_name">First Name</Label>
+                          <Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} />
+                      </div>
+                      <div className="space-y-2">
+                          <Label htmlFor="last_name">Last Name</Label>
+                          <Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} />
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <Label>System Roles</Label>
+                      <ScrollArea className="h-24 w-full rounded-md border p-2">
+                        {allRoles.map(role => (
+                            <div key={role.id} className="flex items-center space-x-2">
+                                <Checkbox id={`role-${role.id}`} checked={selectedSystemRoles.has(role.id)} onCheckedChange={() => handleSystemRoleChange(role.id)} />
+                                <label htmlFor={`role-${role.id}`} className="text-sm font-medium leading-none cursor-pointer">{role.name}</label>
+                            </div>
+                        ))}
+                      </ScrollArea>
+                    </div>
+                    <div className="flex items-center space-x-2 pt-2">
+                        <Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
+                        <Label htmlFor="is_active">User is Active</Label>
+                    </div>
+                </div>
+
+                {/* Section 2: Project Role Assignments */}
+                <div className="space-y-4">
+                    <h3 className="font-semibold border-b pb-2">Project Role Assignments</h3>
+                    {isEditMode ? (
+                    <>
+                        <div className="p-4 border rounded-lg bg-muted/50 space-y-3">
+                            <p className="text-sm font-medium">Assign New Project Role</p>
+                            <div className="grid grid-cols-2 gap-2">
+                                <Select onValueChange={setSelectedProjectId} value={selectedProjectId}>
+                                    <SelectTrigger><SelectValue placeholder="Select Project" /></SelectTrigger>
+                                    <SelectContent>{allProjects.map(p => <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>)}</SelectContent>
+                                </Select>
+                                <Select onValueChange={setSelectedRoleId} value={selectedRoleId}>
+                                    <SelectTrigger><SelectValue placeholder="Select Role" /></SelectTrigger>
+                                    <SelectContent>{allRoles.map(r => <SelectItem key={r.id} value={String(r.id)}>{r.name}</SelectItem>)}</SelectContent>
+                                </Select>
+                            </div>
+                            <Button type="button" onClick={handleAddProjectRole} disabled={isLoading || !selectedProjectId || !selectedRoleId} size="sm" className="w-full">
+                                {isLoading ? 'Adding...' : 'Add Project Role'}
+                            </Button>
+                        </div>
+
+                        <div className="space-y-2">
+                            <p className="text-sm font-medium">Current Assignments</p>
+                            <ScrollArea className="h-48 w-full rounded-md border p-1">
+                                <div className="space-y-1 p-1">
+                                {projectRoles.length > 0 ? projectRoles.map(pr => (
+                                    <div key={pr.id} className="flex justify-between items-center text-sm p-2 border rounded-md">
+                                        <div>
+                                            <span className="font-semibold">{pr.Project.name}</span>
+                                            <span className="text-muted-foreground"> as </span>
+                                            <span>{pr.Role.name}</span>
+                                        </div>
+                                        <Button type="button" variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleRemoveProjectRole(pr)} disabled={isLoading}>
+                                            <Trash2 className="h-4 w-4 text-red-500" />
+                                        </Button>
+                                    </div>
+                                )) : <p className="text-sm text-muted-foreground italic text-center py-2">No project assignments.</p>}
+                                </div>
+                            </ScrollArea>
+                        </div>
+                    </>
+                    ) : <p className="text-sm text-muted-foreground italic text-center py-4">Save the user first to assign project roles.</p>}
+                </div>
             </div>
-        </div>
-        </ScrollArea>
-        {error && <p className="pb-2 text-sm text-center text-red-500">{error}</p>}
-        <DialogFooter className="pt-4 border-t">
-            <Button onClick={() => setIsOpen(false)} variant="outline">Close</Button>
-            <Button onClick={handleSaveUserDetails} disabled={isLoading}>
-                {isLoading ? 'Saving...' : 'Save User Details'}
-            </Button>
-        </DialogFooter>
+            </ScrollArea>
+            {error && <p className="text-sm text-red-500 text-center pt-2">{error}</p>}
+            <DialogFooter className="pt-4 border-t">
+                <Button type="button" variant="outline" onClick={() => setIsOpen(false)} disabled={isLoading}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isLoading}>
+                    {isLoading ? 'Saving...' : 'Save User Details'}
+                </Button>
+            </DialogFooter>
+        </form>
       </DialogContent>
     </Dialog>
   );

frontend/app/(protected)/admin/roles/page.jsx

@@ -2,7 +2,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import api from '@/lib/api';
+import { api } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -55,16 +55,16 @@ export default function RolesPage() {
   return (
     <>
       <div className="space-y-4">
-        <div className="flex justify-between items-center">
+        <div className="flex items-center justify-between">
             <h2 className="text-2xl font-semibold">Roles & Permissions</h2>
             <Button onClick={handleCreate}>
-              <PlusCircle className="mr-2 h-4 w-4" /> Add Role
+              <PlusCircle className="w-4 h-4 mr-2" /> Add Role
             </Button>
           </div>
         {roles.map(role => (
           <Card key={role.id}>
             <CardHeader>
-              <div className="flex justify-between items-start">
+              <div className="flex items-start justify-between">
                 <div>
                   <CardTitle className="flex items-center gap-2">
                     <ShieldCheck className="text-primary" />
@@ -78,7 +78,7 @@ export default function RolesPage() {
               </div>
             </CardHeader>
             <CardContent>
-              <p className="text-sm font-medium mb-2">Assigned Permissions:</p>
+              <p className="mb-2 text-sm font-medium">Assigned Permissions:</p>
               <div className="flex flex-wrap gap-2">
                 {role.Permissions.length > 0 ? (
                   role.Permissions.map(perm => (

frontend/app/(protected)/admin/users/page.jsx

@@ -3,7 +3,7 @@
 
 import { useState, useEffect } from 'react';
 import { PlusCircle, MoreHorizontal } from 'lucide-react';
-import api from '@/lib/api';
+import { api } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

frontend/app/(protected)/dashboard/page.jsx

@@ -7,7 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Activity, File, FilePlus, ArrowRight, BellDot, Settings } from 'lucide-react';
-import api from '@/lib/api';
+import { api } from '@/lib/api';
 import { useAuth } from '@/lib/auth';
 import { can } from '@/lib/rbac';
 

frontend/app/(protected)/drawings/page.jsx

@@ -1,5 +1,5 @@
-import { getSession } from "@/lib/auth";
-export default async function Page(){
-  const { user } = await getSession();
-  return <div className="rounded-2xl p-5 bg-white">Drawings — list/table (ต่อเชื่อม backend)</div>;
+import { requireSession } from '@/lib/auth-server';
+export default async function Page() {
+  const { user } = await requireSession();
+  return <div className="p-5 bg-white rounded-2xl">Drawings — list/table (ต่อเชื่อม backend)</div>;
 }

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>
   );
-}
+}

frontend/app/_components/SideNavigation.jsx

@@ -0,0 +1,84 @@
+// File: frontend/app/_components/SideNavigation.jsx
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Home, FileText, Users, Settings, Package2, Upload, PlusCircle, Workflow, BarChart } from 'lucide-react';
+import { can } from "@/lib/rbac";
+import { cn } from "@/lib/utils";
+
+// Component นี้จะรับ user object ที่มี roles และ permissions มาจาก Server Component Parent
+export function SideNavigation({ user }) {
+  const pathname = usePathname();
+
+  // สร้าง Array ของเมนูหลักตามโครงสร้างเดิมของคุณ
+  const mainNavLinks = [
+    { href: '/dashboard', label: 'Dashboard', icon: Home, perm: null }, // หน้าแรกเข้าได้ทุกคน
+    { href: '/correspondences', label: 'Correspondences', icon: FileText, perm: 'correspondence:view' },
+    { href: '/drawings', label: 'Drawings', icon: FileText, perm: 'drawing:view' },
+    { href: '/rfas', label: 'RFAs', icon: FileText, perm: 'rfa:view' },
+    { href: '/transmittals', label: 'Transmittals', icon: FileText, perm: 'transmittal:view' },
+    { href: '/reports', label: 'Reports', icon: BarChart, perm: 'report:view' },
+  ];
+
+  // สร้าง Array ของเมนู Admin ตามโครงสร้างเดิมของคุณ
+  const adminNavLinks = [
+    { href: '/admin', label: 'Admin', icon: Settings, perm: 'admin:view' },
+    { href: '/users', label: 'ผู้ใช้/บทบาท', icon: Users, perm: 'users:manage' },
+    { href: '/workflow', label: 'Workflow', icon: Workflow, perm: 'workflow:view' },
+  ];
+
+  return (
+    <div className="flex flex-col h-full max-h-screen gap-2">
+      <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+        <Link href="/dashboard" className="flex items-center gap-2 font-semibold">
+          <Package2 className="w-6 h-6" />
+          <span className="">LCB P3 DMS</span>
+        </Link>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+          {/* Render เมนูหลัก */}
+          {mainNavLinks.map(({ href, label, icon: Icon, perm }) => 
+            (perm === null || can(user, perm)) && (
+              <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 === href || (href !== '/dashboard' && pathname.startsWith(href))) ? 'bg-muted text-primary' : ''
+                )}
+              >
+                <Icon className="w-4 h-4" />
+                {label}
+              </Link>
+            )
+          )}
+          
+          {/* Render เมนู Admin ถ้ามีสิทธิ์อย่างน้อย 1 เมนู */}
+          {adminNavLinks.some(link => can(user, link.perm)) && (
+            <>
+              <div className="my-2 border-t"></div>
+              {adminNavLinks.map(({ href, label, icon: Icon, perm }) =>
+                can(user, perm) && (
+                  <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="w-4 h-4" />
+                    {label}
+                  </Link>
+                )
+              )}
+            </>
+          )}
+        </nav>
+      </div>
+      {/* ส่วน Card ด้านล่างสามารถคงไว้ หรือเอาออกได้ตามต้องการ */}
+    </div>
+  );
+}

frontend/app/_components/TopBar.jsx

@@ -0,0 +1,44 @@
+// File: frontend/app/_components/TopBar.jsx <<'JSX'
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import { Bell } from "lucide-react";
+import { useAuth } from "@/lib/auth";
+import Link from "next/link";
+
+export default function TopBar() {
+  const { user, loading, logout } = useAuth();
+
+  return (
+    <header className="flex h-14 items-center gap-4 border-b bg-background px-4 lg:h-[60px] lg:px-6">
+      <div className="flex-1" />
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon" className="relative">
+              <Bell className="h-5 w-5" />
+              <span className="absolute right-1 top-1 inline-flex h-2 w-2 rounded-full bg-primary" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Notifications</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="ml-2">
+            {loading ? "Loading..." : (user?.first_name || "Account")}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <DropdownMenuItem asChild><Link href="/profile">Profile</Link></DropdownMenuItem>
+          <DropdownMenuItem asChild><Link href="/settings">Settings</Link></DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={logout}>Logout</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </header>
+  );
+}

frontend/app/_components/navigation.jsx

@@ -1,4 +1,4 @@
-//File: frontend/app/(protected)/_components/navigation.jsx
+//File: frontend/app/_components/navigation.jsx
 'use client'; // <-- 1. กำหนดให้ไฟล์นี้เป็น Client Component
 
 import Link from 'next/link';

frontend/app/globals.bak.css

@@ -0,0 +1,146 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ====== shadcn/ui theme (light + dark) ====== */
+:root {
+
+  /* โทน “น้ำทะเล” ตามธีมของคุณ */
+  --primary: 199 90% 40%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 199 60% 92%;
+  --secondary-foreground: 220 15% 20%;
+
+  --muted: 210 20% 96%;
+  --muted-foreground: 220 10% 35%;
+
+  --accent: 199 95% 48%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 220 15% 15%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 15% 15%;
+
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 199 90% 40%;
+
+  --radius: 0.8rem; /* โค้งมนตามแนวทาง UI ของโปรเจ็ค */
+}
+
+.dark {
+  --background: 220 18% 10%;
+  --foreground: 0 0% 100%;
+
+  --primary: 199 95% 58%;
+  --primary-foreground: 220 18% 10%;
+
+  --secondary: 218 14% 20%;
+  --secondary-foreground: 0 0% 100%;
+
+  --muted: 220 14% 18%;
+  --muted-foreground: 220 10% 70%;
+
+  --accent: 199 95% 62%;
+  --accent-foreground: 220 18% 10%;
+
+  --destructive: 0 62% 46%;
+  --destructive-foreground: 0 0% 100%;
+
+  --card: 220 18% 12%;
+  --card-foreground: 0 0% 100%;
+
+  --popover: 220 18% 12%;
+  --popover-foreground: 0 0% 100%;
+
+  --border: 220 14% 28%;
+  --input: 220 14% 28%;
+  --ring: 199 95% 62%;
+}
+
+/* Base styling */
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html,
+  body {
+    @apply h-full;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+/* Utility: container max width (ช่วยเรื่อง layout) */
+.container {
+  @apply mx-auto px-4;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/app/globals.css

@@ -1,144 +1,185 @@
+/* File:  frontend/app/globals.css */
+@import "tailwindcss";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* ====== shadcn/ui theme (light + dark) ====== */
+/* === Base & Theme (shadcn style) === */
+@layer base {
+  :root {
+    /* Sea palette — light */
+    --background: 0 0% 100%;
+    --foreground: 220 15% 15%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 15% 15%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220 15% 15%;
+
+    /* sea tones */
+    --primary: 199 90% 40%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 199 60% 92%;
+    --secondary-foreground: 220 15% 20%;
+    --muted: 210 20% 96%;
+    --muted-foreground: 220 10% 35%;
+    --accent: 199 95% 48%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 199 90% 40%;
+
+    --radius: 0.8rem;
+  }
+
+  .dark {
+    /* Sea palette — dark */
+    --background: 220 18% 10%;
+    --foreground: 0 0% 100%;
+    --card: 220 18% 12%;
+    --card-foreground: 0 0% 100%;
+    --popover: 220 18% 12%;
+    --popover-foreground: 0 0% 100%;
+
+    --primary: 199 95% 58%;
+    --primary-foreground: 220 18% 10%;
+    --secondary: 218 14% 20%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 220 14% 18%;
+    --muted-foreground: 220 10% 70%;
+    --accent: 199 95% 62%;
+    --accent-foreground: 220 18% 10%;
+
+    --destructive: 0 62% 46%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 14% 28%;
+    --input: 220 14% 28%;
+    --ring: 199 95% 62%;
+  }
+
+  * { @apply border-border; }
+  html, body { @apply h-full; }
+  body { @apply antialiased bg-background text-foreground; }
+}
+
+/* Utilities */
+.container { @apply px-4 mx-auto; }
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
 :root {
-
-  /* โทน “น้ำทะเล” ตามธีมของคุณ */
-  --primary: 199 90% 40%;
-  --primary-foreground: 0 0% 100%;
-
-  --secondary: 199 60% 92%;
-  --secondary-foreground: 220 15% 20%;
-
-  --muted: 210 20% 96%;
-  --muted-foreground: 220 10% 35%;
-
-  --accent: 199 95% 48%;
-  --accent-foreground: 0 0% 100%;
-
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 0 0% 100%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 220 15% 15%;
-
-  --popover: 0 0% 100%;
-  --popover-foreground: 220 15% 15%;
-
-  --border: 214 32% 91%;
-  --input: 214 32% 91%;
-  --ring: 199 90% 40%;
-
-  --radius: 0.8rem; /* โค้งมนตามแนวทาง UI ของโปรเจ็ค */
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
 }
 
 .dark {
-  --background: 220 18% 10%;
-  --foreground: 0 0% 100%;
-
-  --primary: 199 95% 58%;
-  --primary-foreground: 220 18% 10%;
-
-  --secondary: 218 14% 20%;
-  --secondary-foreground: 0 0% 100%;
-
-  --muted: 220 14% 18%;
-  --muted-foreground: 220 10% 70%;
-
-  --accent: 199 95% 62%;
-  --accent-foreground: 220 18% 10%;
-
-  --destructive: 0 62% 46%;
-  --destructive-foreground: 0 0% 100%;
-
-  --card: 220 18% 12%;
-  --card-foreground: 0 0% 100%;
-
-  --popover: 220 18% 12%;
-  --popover-foreground: 0 0% 100%;
-
-  --border: 220 14% 28%;
-  --input: 220 14% 28%;
-  --ring: 199 95% 62%;
-}
-
-/* Base styling */
-@layer base {
-  * {
-    @apply border-border;
-  }
-  html,
-  body {
-    @apply h-full;
-  }
-  body {
-    @apply bg-background text-foreground antialiased;
-  }
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-/* Utility: container max width (ช่วยเรื่อง layout) */
-.container {
-  @apply mx-auto px-4;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;

frontend/app/layout.jsx

@@ -1,157 +1,20 @@
-// frontend/app/layout.jsx
-'use client';
+// File: frontend/app/layout.jsx
+import './globals.css';
+import { Inter } from 'next/font/google';
 
-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';
+export const metadata = {
+  title: 'DMS',
+  description: 'Document Management System',
+};
 
-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';
-
-//  **1. Import `useAuth` และ `can` จากไฟล์จริงของคุณ**
-import { useAuth } from '@/lib/auth';
-import { can } from '@/lib/rbac';
-
-export default function ProtectedLayout({ children }) {
-  const pathname = usePathname();
-  
-  // **2. เรียกใช้งาน useAuth hook เพื่อดึงข้อมูล user**
-  const { user, logout } = useAuth();
-
-  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' 
-  };
+const inter = Inter({ subsets: ['latin'] });
 
+export default function RootLayout({ children }) {
   return (
-    <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>
-          <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>
-                </>
-              )}
-              {/* ====== จบส่วนที่แก้ไข ====== */}
-
-            </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>
+    <html lang="th" suppressHydrationWarning>
+      <body className={`${inter.className} min-h-screen bg-background text-foreground antialiased`}>
+        {children}
+      </body>
+    </html>
   );
-}
+}

frontend/app/page.jsx

@@ -17,7 +17,7 @@ export default function HomePage() {
         </TabsList>
 
         <TabsContent value="overview">
-          <div className="grid md:grid-cols-3 gap-4 mt-4">
+          <div className="grid gap-4 mt-4 md:grid-cols-3">
             <Card>
               <CardHeader>
                 <CardTitle>📑 RFAs</CardTitle>

frontend/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  },
+  "registries": {}
+}

frontend/components/ui/alert-dialog.jsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

frontend/components/ui/checkbox.jsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

frontend/components/ui/dialog.jsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props} />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

frontend/components/ui/scroll-area.jsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}>
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

frontend/components/ui/select.jsx

@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn("p-1", position === "popper" &&
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

frontend/components/ui/table.jsx

@@ -0,0 +1,86 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props} />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props} />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props} />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props} />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props} />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props} />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props} />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

frontend/docker shadcn.yml

@@ -0,0 +1,96 @@
+docker run --rm -it \
+  -v /share/Container/dms/frontend:/app \
+  -w /app \
+  -e CI=1 \
+  node:20-alpine sh -lc '
+set -eu
+
+echo "1) ตรวจและแก้ package.json → next/react/react-dom ต้องอยู่ใน dependencies + scripts ครบ"
+test -f package.json || { echo "❌ ไม่พบ package.json ที่ /app"; exit 1; }
+node -e "
+const fs=require(\"fs\");
+const p=JSON.parse(fs.readFileSync(\"package.json\",\"utf8\"));
+p.dependencies=p.dependencies||{};
+p.devDependencies=p.devDependencies||{};
+p.scripts=p.scripts||{};
+let changed=false;
+
+for(const k of [\"next\",\"react\",\"react-dom\"]){
+  if(p.devDependencies[k]){ p.dependencies[k]=p.devDependencies[k]; delete p.devDependencies[k]; changed=true; }
+  if(!p.dependencies[k]){ p.dependencies[k]=\"latest\"; changed=true; }
+}
+if(!p.scripts.dev){ p.scripts.dev=\"next dev\"; changed=true; }
+if(!p.scripts.build){ p.scripts.build=\"next build\"; changed=true; }
+if(!p.scripts.start){ p.scripts.start=\"next start\"; changed=true; }
+
+if(changed){ fs.writeFileSync(\"package.json\",JSON.stringify(p,null,2)); console.log(\"package.json patched\"); }
+"
+npm i
+
+echo "2) โครง Next.js: app/ หรือ src/app/ + layout.jsx + globals.css"
+APPDIR="app"; [ -d src/app ] && APPDIR="src/app"
+mkdir -p "$APPDIR"
+[ -f "$APPDIR/globals.css" ] || printf "%s\n%s\n%s\n" "@tailwind base;" "@tailwind components;" "@tailwind utilities;" > "$APPDIR/globals.css"
+if [ ! -f "$APPDIR/layout.jsx" ] && [ ! -f "$APPDIR/layout.tsx" ]; then
+  cat > "$APPDIR/layout.jsx" <<EOF
+import "./globals.css";
+export default function RootLayout({ children }) {
+  return (<html lang="th"><body>{children}</body></html>);
+}
+EOF
+fi
+grep -q "import \"./globals.css\"" "$APPDIR/layout.jsx" 2>/dev/null || sed -i "1i import \"./globals.css\";" "$APPDIR/layout.jsx" 2>/dev/null || true
+[ -f "$APPDIR/page.jsx" ] || [ -f "$APPDIR/page.tsx" ] || echo '\''export default function Page(){return <main className="p-6">OK</main>}'\'' > "$APPDIR/page.jsx"
+
+echo "3) สร้าง/อัปเดตไฟล์ config ที่ CLI ต้องมี: jsconfig, postcss, tailwind, next.config"
+[ -f jsconfig.json ] || cat > jsconfig.json <<JSON
+{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./*"] } } }
+JSON
+
+[ -f postcss.config.cjs ] || echo "module.exports={plugins:{tailwindcss:{},autoprefixer:{}}}" > postcss.config.cjs
+
+[ -f tailwind.config.js ] || npx tailwindcss init -p
+grep -q "content:" tailwind.config.js || \
+  sed -i "s|module.exports = {|module.exports = {\n  content: [\"./$APPDIR/**/*.{js,jsx,ts,tsx,mdx}\", \"./components/**/*.{js,jsx,ts,tsx,mdx}\", \"./pages/**/*.{js,jsx,ts,tsx,mdx}\", \"./src/**/*.{js,jsx,ts,tsx,mdx}\"],|g" tailwind.config.js
+grep -q "tailwindcss-animate" tailwind.config.js || \
+  sed -i '\''s|plugins: \[|plugins: [require("tailwindcss-animate"), |; s|plugins: \[\]|plugins: [require("tailwindcss-animate")]|'\'' tailwind.config.js
+
+# next.config (บางเวอร์ชัน CLI เช็คไฟล์นี้ด้วย)
+if [ ! -f next.config.js ] && [ ! -f next.config.mjs ]; then
+  cat > next.config.js <<EOF
+/** @type {import('next').NextConfig} */
+const nextConfig = { reactStrictMode: true };
+module.exports = nextConfig;
+EOF
+fi
+
+echo "4) components.json (คงของเดิม ถ้าไม่มีค่อยสร้าง)"
+if [ ! -f components.json ]; then
+  TYPESCRIPT=false; [ -f tsconfig.json ] && TYPESCRIPT=true
+  TAILWIND_FILE="tailwind.config.js"; [ -f tailwind.config.ts ] && TAILWIND_FILE="tailwind.config.ts"
+  cat > components.json <<EOF
+{
+  "\$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": $TYPESCRIPT,
+  "tailwind": {
+    "config": "$TAILWIND_FILE",
+    "css": "$APPDIR/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": { "components": "@/components", "utils": "@/lib/utils" }
+}
+EOF
+fi
+
+echo "5) ติดตั้ง dev deps tailwind/postcss (idempotent)"
+npm i -D tailwindcss postcss autoprefixer tailwindcss-animate >/dev/null 2>&1 || true
+
+echo "6) init (force) — ตอนนี้ควรผ่านการตรวจจับแล้ว"
+npx shadcn@latest init -y -f --no-src-dir
+
+echo "✅ เสร็จ — ถ้าต้องการเพิ่มคอมโพเนนต์ต่อ:"
+echo "npx shadcn@latest add -y dialog alert-dialog dropdown-menu checkbox scroll-area tabs tooltip switch button label input card badge progress tabs"
+'

frontend/docker-compose.yml

@@ -0,0 +1,70 @@
+# File: frontend/docker-compose.yml
+# DMS Container v0_8_0 แยก service/ lcbp3-frontend
+x-restart: &restart_policy
+  restart: unless-stopped
+
+x-logging: &default_logging
+  logging:
+    driver: "json-file"
+    options:
+      max-size: "10m"
+      max-file: "5"
+volumes:
+  frontend_node_modules:
+  frontend_next:
+  frontend_next_cache:
+services:
+  frontend:
+    <<: [*restart_policy, *default_logging]
+    image: dms-frontend:dev
+    # pull_policy: never  # <-- FINAL FIX ADDED HERE
+    container_name: dms_frontend
+    stdin_open: true
+    tty: true
+    # user: "node"
+    # user: "1000:1000"
+    user: "0:0"
+    # user: "${PUID:-1000}:${PGID:-1000}"
+    working_dir: /app
+    deploy:
+      resources:
+        limits:
+          cpus: "2.0"
+          memory: 2G
+    environment:
+      TZ: "Asia/Bangkok"
+      NODE_ENV: "development"
+      # NEXT_PUBLIC_API_BASE: "/api"
+      CHOKIDAR_USEPOLLING: "1"
+      CHOKIDAR_INTERVAL: "300"
+      WATCHPACK_POLLING: "true"
+      NEXT_TELEMETRY_DISABLED: "1"
+      NEXT_PUBLIC_API_BASE: "https://lcbp3.np-dms.work"
+      NEXT_PUBLIC_AUTH_MODE: "cookie"
+      NEXT_PUBLIC_DEBUG_AUTH: "1"
+      INTERNAL_API_BASE: "http://backend:3001"
+      JWT_ACCESS_SECRET: "9a6d8705a6695ab9bae4ca1cd46c72a6379aa72404b96e2c5b59af881bb55c639dd583afdce5a885c68e188da55ce6dbc1fb4aa9cd4055ceb51507e56204e4ca"
+      JWT_REFRESH_SECRET: "743e798bb10d6aba168bf68fc3cf8eff103c18bd34f1957a3906dc87987c0df139ab72498f2fe20d6c4c580f044ccba7d7bfa4393ee6035b73ba038f28d7480c"
+    expose:
+      - "3000"
+    networks:
+      lcbp3: {}
+    volumes:
+      - "/share/Container/dms/frontend:/app:rw"
+      - "frontend_node_modules:/app/node_modules"
+      - "frontend_next_cache:/app/.next/cache"
+      #- "/share/Container/dms/frontend/node_modules:/app/node_modules"
+      - "frontend_next:/app/.next"
+      - "/share/Container/dms/logs/frontend:/app/.logs"
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          'wget -qO- http://127.0.0.1:3000/health | grep -q ''"ok":true''',
+        ]
+      interval: 15s
+      timeout: 5s
+      retries: 30
+networks:
+  lcbp3:
+    external: true

frontend/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

frontend/lib/AuthContext.jsx

@@ -0,0 +1,58 @@
+// frontend/context/AuthContext.jsx
+'use client';
+
+import { createContext, useState, useContext, useEffect } from 'react';
+import { api } from '@/lib/api';
+import { cookieDriver } from '@/app/_auth/drivers/cookieDriver';
+
+const AuthContext = createContext(null);
+const COOKIE_NAME = "access_token";
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const initializeAuth = async () => {
+      const token = cookieDriver.get(COOKIE_NAME); 
+      if (token) {
+        try {
+          api.defaults.headers.Authorization = `Bearer ${token}`;
+          const response = await api.get('/auth/me');
+          setUser(response.data.user || response.data);
+        } catch (error) {
+          cookieDriver.remove(COOKIE_NAME);
+          delete api.defaults.headers.Authorization;
+        }
+      }
+      setLoading(false);
+    };
+    initializeAuth();
+  }, []);
+
+  const login = async (credentials) => {
+    const response = await api.post('/auth/login', credentials);
+    const { token, user } = response.data;
+    cookieDriver.set(COOKIE_NAME, token, { expires: 7 });
+    api.defaults.headers.Authorization = `Bearer ${token}`;
+    setUser(user);
+    return user;
+  };
+
+  const logout = () => {
+    cookieDriver.remove(COOKIE_NAME);
+    delete api.defaults.headers.Authorization;
+    setUser(null);
+    window.location.href = '/login';
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, isAuthenticated: !!user, loading, login, logout }}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => {
+  return useContext(AuthContext);
+};

frontend/lib/auth copy.js

@@ -1,79 +1,34 @@
-<<<<<<< HEAD
 // frontend/lib/auth.js
 import { cookies } from "next/headers";
 
 const COOKIE_NAME = "access_token";
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
 
 /**
- * Server-side session fetcher (ใช้ใน Server Components/Layouts)
- * - อ่านคุกกี้แบบ async: await cookies()
- * - ถ้าไม่มี token → return null
- * - ถ้ามี → เรียก /api/auth/me ที่ backend เพื่อตรวจสอบ
+ * Server-side session fetcher
  */
 export async function getSession() {
-  // ✅ ต้อง await
-  const cookieStore = await cookies();
+  const cookieStore = cookies();
   const token = cookieStore.get(COOKIE_NAME)?.value;
 
   if (!token) return null;
 
-  // เรียก backend ตรวจ session (ปรับ endpoint ให้ตรงของคุณ)
-  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/api/auth/me`, {
-    // ส่งต่อคุกกี้ไป backend (เลือกอย่างใดอย่างหนึ่ง)
-    // วิธี A: ส่ง header Cookie โดยตรง
-    headers: { Cookie: `${COOKIE_NAME}=${token}` },
-    // วิธี B: ถ้า proxy ผ่าน nginx ในโดเมนเดียวกัน ใช้ credentials รวมคุกกี้อัตโนมัติได้
-    // credentials: "include",
-    cache: "no-store",
-  });
+  try {
+    const res = await fetch(`${API_BASE}/api/auth/me`, {
+      headers: { Authorization: `Bearer ${token}` },
+      cache: "no-store",
+    });
 
-  if (!res.ok) return null;
-
-  const data = await res.json();
-  // คาดหวังโครงสร้าง { user, permissions } จาก backend
-  return {
-    user: data.user,
-    permissions: data.permissions || [],
-    token,
-  };
-}
-=======
-// frontend/lib/auth.js
-import { cookies } from "next/headers";
-
-const COOKIE_NAME = "access_token";
-
-/**
- * Server-side session fetcher (ใช้ใน Server Components/Layouts)
- * - อ่านคุกกี้แบบ async: await cookies()
- * - ถ้าไม่มี token → return null
- * - ถ้ามี → เรียก /api/auth/me ที่ backend เพื่อตรวจสอบ
- */
-export async function getSession() {
-  // ✅ ต้อง await
-  const cookieStore = await cookies();
-  const token = cookieStore.get(COOKIE_NAME)?.value;
-
-  if (!token) return null;
-
-  // เรียก backend ตรวจ session (ปรับ endpoint ให้ตรงของคุณ)
-  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/api/auth/me`, {
-    // ส่งต่อคุกกี้ไป backend (เลือกอย่างใดอย่างหนึ่ง)
-    // วิธี A: ส่ง header Cookie โดยตรง
-    headers: { Cookie: `${COOKIE_NAME}=${token}` },
-    // วิธี B: ถ้า proxy ผ่าน nginx ในโดเมนเดียวกัน ใช้ credentials รวมคุกกี้อัตโนมัติได้
-    // credentials: "include",
-    cache: "no-store",
-  });
-
-  if (!res.ok) return null;
-
-  const data = await res.json();
-  // คาดหวังโครงสร้าง { user, permissions } จาก backend
-  return {
-    user: data.user,
-    permissions: data.permissions || [],
-    token,
-  };
-}
->>>>>>> 71fc7eee (backend: Mod)
+    if (!res.ok) return null;
+    
+    const data = await res.json();
+    return {
+      user: data.user,
+      permissions: data.permissions || data.perms || [],
+      token,
+    };
+  } catch (error) {
+    console.error("Error fetching session:", error);
+    return null;
+  }
+}

frontend/lib/auth-server.js

@@ -0,0 +1,42 @@
+// File: frontend/lib/auth-server.js
+// frontend/lib/auth-server.js
+import 'server-only';
+import { cookies } from 'next/headers';
+
+export function getAccessToken() {
+  const cookieStore = cookies();
+  return cookieStore.get('access_token')?.value ?? null;
+}
+
+function buildCookieHeader() {
+  const store = cookies();
+  return store.getAll().map(c => `${c.name}=${c.value}`).join('; ');
+}
+
+export async function getSession() {
+  const token = getAccessToken();
+  if (!token) return null;
+
+  try {
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/api/auth/me`, {
+      method: 'GET',
+      headers: { cookie: buildCookieHeader(), accept: 'application/json' },
+      cache: 'no-store',
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    const user = data?.user ?? data; // รองรับทั้ง {user:{...}} หรือส่งตรง
+    return { user, token };
+  } catch {
+    return null;
+  }
+}
+
+export async function requireSession() {
+  const session = await getSession();
+  if (!session) {
+    const { redirect } = await import('next/navigation');
+    redirect('/login');
+  }
+  return session;
+}

frontend/lib/auth.js

@@ -1,82 +1,41 @@
 // frontend/lib/auth.js
-// frontend/lib/auth.js
-
 'use client';
 
-import { createContext, useState, useContext, useEffect } from 'react';
-import api from './api';
-// 1. Import cookieDriver ที่คุณมีอยู่แล้ว ซึ่งเป็นวิธีที่ถูกต้อง
-import { cookieDriver } from '@/app/_auth/drivers/cookieDriver';
+import { createContext, useContext, useEffect, useState, useCallback } from "react";
 
-const AuthContext = createContext(null);
-
-const COOKIE_NAME = "access_token";
+const AuthContext = createContext({
+  user: null,
+  isAuthenticated: false,
+  loading: true,
+  logout: () => {},
+});
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const initializeAuth = async () => {
-      // 2. อ่าน token จาก cookie ด้วย cookieDriver.get()
-      const token = cookieDriver.get(COOKIE_NAME); 
-      
-      if (token) {
-        try {
-          api.defaults.headers.Authorization = `Bearer ${token}`;
-          // สมมติว่ามี endpoint /auth/me สำหรับดึงข้อมูลผู้ใช้
-          const response = await api.get('/auth/me');
-          setUser(response.data.user || response.data); // รองรับทั้งสองรูปแบบ
-        } catch (error) {
-          console.error("Failed to initialize auth from cookie:", error);
-          cookieDriver.remove(COOKIE_NAME);
-          delete api.defaults.headers.Authorization;
-        }
-      }
-      setLoading(false);
-    };
-
-    initializeAuth();
+    fetch("/api/auth/me", { credentials: "include" })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => setUser(data?.user ?? null))
+      .finally(() => setLoading(false));
   }, []);
 
-  const login = async (credentials) => {
-    const response = await api.post('/auth/login', credentials);
-    const { token, user } = response.data;
-    
-    // 3. ตั้งค่า token ใน cookie ด้วย cookieDriver.set()
-    cookieDriver.set(COOKIE_NAME, token, { expires: 7, secure: true, sameSite: 'strict' });
-    api.defaults.headers.Authorization = `Bearer ${token}`;
-    setUser(user);
-    return user;
-  };
-
-  const logout = () => {
-    // 4. ลบ token ออกจาก cookie ด้วย cookieDriver.remove()
-    cookieDriver.remove(COOKIE_NAME);
-    delete api.defaults.headers.Authorization;
-    setUser(null);
-    window.location.href = '/login';
-  };
-
-  const value = {
-    user,
-    isAuthenticated: !!user,
-    loading,
-    login,
-    logout
-  };
+  const logout = useCallback(async () => {
+    try {
+      await fetch("/api/auth/logout", { method: "POST", credentials: "include" });
+    } finally {
+      window.location.href = "/login";
+    }
+  }, []);
 
   return (
-    <AuthContext.Provider value={value}>
-      {!loading && children}
+    <AuthContext.Provider value={{ user, isAuthenticated: !!user, loading, logout }}>
+      {children}
     </AuthContext.Provider>
   );
 }
 
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-};
+export function useAuth() {
+  return useContext(AuthContext);
+}

frontend/lib/session.js

@@ -0,0 +1,31 @@
+// frontend/lib/session.js
+import { cookies } from "next/headers";
+
+const COOKIE_NAME = "access_token";
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+
+/**
+ * Server-side function to get the current session from the request cookies.
+ * This can only be used in Server Components, Server Actions, or Route Handlers.
+ */
+export async function getSession() {
+  const cookieStore = cookies();
+  const token = cookieStore.get(COOKIE_NAME)?.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;
+    
+    const data = await res.json();
+    return data; // Expects { user, permissions, ... }
+  } catch (error) {
+    console.error("Error fetching session:", error);
+    return null;
+  }
+}

frontend/next.config.js

@@ -0,0 +1,3 @@
+/** @type {import(next).NextConfig} */
+const nextConfig = { reactStrictMode: true };
+module.exports = nextConfig;

frontend/package.json

@@ -10,32 +10,38 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "autoprefixer": "10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.10",
-    "jsonwebtoken": "^9.0.2",
     "js-cookie": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.451.0",
     "next": "15.0.3",
-    "postcss": "8.4.47",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "3.4.14",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.14",
+    "autoprefixer": "^10.4.21",
     "eslint": "9.13.0",
     "eslint-config-next": "15.0.3",
-    "prettier": "3.3.3"
+    "postcss": "^8.5.6",
+    "prettier": "3.3.3",
+    "tailwindcss": "^4.1.14",
+    "tailwindcss-animate": "^1.0.7"
   },
   "engines": {
     "node": ">=20.0.0"

frontend/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
   }
 };