feat(dashboard): เพมสวนจดการ user

frontend/app/(protected)/admin/_components/confirm-delete-dialog.jsx

@@ -0,0 +1,38 @@
+// File: frontend/app/(protected)/admin/_components/confirm-delete-dialog.jsx
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+
+export function ConfirmDeleteDialog({
+  isOpen,
+  setIsOpen,
+  title,
+  description,
+  onConfirm,
+  isLoading,
+}) {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm} disabled={isLoading} className="bg-red-600 hover:bg-red-700">
+            {isLoading ? 'Processing...' : 'Confirm'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,146 @@
+// File: frontend/app/(protected)/admin/_components/role-form-dialog.jsx
+'use client';
+
+import { useState, useEffect } from 'react';
+import api from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSuccess }) {
+  const [formData, setFormData] = useState({ name: '', description: '' });
+  const [selectedPermissions, setSelectedPermissions] = useState(new Set());
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const isEditMode = !!role;
+
+  useEffect(() => {
+    if (isOpen) {
+      if (isEditMode) {
+        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]);
+
+  const handleInputChange = (e) => {
+    const { id, value } = e.target;
+    setFormData((prev) => ({ ...prev, [id]: value }));
+  };
+  
+  const handlePermissionChange = (permissionId) => {
+    setSelectedPermissions(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(permissionId)) {
+        newSet.delete(permissionId);
+      } else {
+        newSet.add(permissionId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      if (isEditMode) {
+        // ในโหมดแก้ไข เราจะอัปเดตสิทธิ์เสมอ
+        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 {
+        // ในโหมดสร้างใหม่
+        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`, {
+                permissionIds: Array.from(selectedPermissions)
+            });
+        }
+      }
+      onSuccess();
+      setIsOpen(false);
+    } catch (err) {
+      setError(err.response?.data?.message || 'An unexpected error occurred.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="sm:max-w-md">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? `Edit Permissions for ${role.name}` : 'Create New Role'}</DialogTitle>
+            <DialogDescription>
+              Select the permissions for this role.
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="py-4 space-y-4">
+            {!isEditMode && (
+              <>
+                <div className="space-y-1">
+                  <Label htmlFor="name">Role Name</Label>
+                  <Input id="name" value={formData.name} onChange={handleInputChange} required />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="description">Description</Label>
+                  <Input id="description" value={formData.description} onChange={handleInputChange} />
+                </div>
+              </>
+            )}
+
+            <div>
+              <Label>Permissions</Label>
+              <ScrollArea className="h-60 w-full rounded-md border p-4 mt-1">
+                <div className="space-y-2">
+                  {allPermissions.map(perm => (
+                    <div key={perm.id} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={`perm-${perm.id}`}
+                        checked={selectedPermissions.has(perm.id)}
+                        onCheckedChange={() => handlePermissionChange(perm.id)}
+                      />
+                      <label htmlFor={`perm-${perm.id}`} className="text-sm font-medium leading-none">
+                        {perm.name}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          </div>
+
+          {error && <p className="text-sm text-red-500 text-center pb-2">{error}</p>}
+          <DialogFooter>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,172 @@
+// File: frontend/app/(protected)/admin/users/_components/user-form-dialog.jsx
+'use client';
+
+import { useState, useEffect } from 'react';
+import api from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Checkbox } from "@/components/ui/checkbox"
+
+export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
+  const [formData, setFormData] = useState({});
+  const [allRoles, setAllRoles] = useState([]);
+  const [selectedRoles, setSelectedRoles] = useState(new Set());
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const isEditMode = !!user;
+
+  useEffect(() => {
+    // ดึงข้อมูล Role ทั้งหมดมาเตรียมไว้
+    const fetchRoles = async () => {
+      try {
+        const res = await api.get('/rbac/roles');
+        setAllRoles(res.data);
+      } catch (err) {
+        console.error('Failed to fetch roles', err);
+      }
+    };
+    fetchRoles();
+  }, []);
+
+  useEffect(() => {
+    // เมื่อ user prop เปลี่ยน (เปิด dialog เพื่อแก้ไข) ให้ตั้งค่าฟอร์ม
+    if (isEditMode) {
+      setFormData({
+        username: user.username,
+        email: user.email,
+        first_name: user.first_name || '',
+        last_name: user.last_name || '',
+        is_active: user.is_active,
+      });
+      setSelectedRoles(new Set(user.Roles?.map(role => role.id) || []));
+    } else {
+      // ถ้าเป็นการสร้างใหม่ ให้เคลียร์ฟอร์ม
+      setFormData({
+        username: '',
+        email: '',
+        password: '',
+        first_name: '',
+        last_name: '',
+        is_active: true,
+      });
+      setSelectedRoles(new Set());
+    }
+    setError('');
+  }, [user, isOpen]);
+
+  const handleInputChange = (e) => {
+    const { id, value } = e.target;
+    setFormData((prev) => ({ ...prev, [id]: value }));
+  };
+  
+  const handleRoleChange = (roleId) => {
+    setSelectedRoles(prev => {
+        const newSet = new Set(prev);
+        if (newSet.has(roleId)) {
+            newSet.delete(roleId);
+        } else {
+            newSet.add(roleId);
+        }
+        return newSet;
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    const payload = { ...formData, roles: Array.from(selectedRoles) };
+    
+    try {
+      if (isEditMode) {
+        await api.put(`/users/${user.id}`, payload);
+      } else {
+        await api.post('/users', payload);
+      }
+      onSuccess(); // บอกให้หน้าหลัก refresh ข้อมูล
+      setIsOpen(false); // ปิด Dialog
+    } catch (err) {
+      setError(err.response?.data?.message || 'An unexpected error occurred.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="sm:max-w-[425px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>{isEditMode ? 'Edit User' : 'Create New User'}</DialogTitle>
+            <DialogDescription>
+              {isEditMode ? `Editing ${user.username}` : 'Fill in the details for the new user.'}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="username" className="text-right">Username</Label>
+              <Input id="username" value={formData.username || ''} onChange={handleInputChange} className="col-span-3" required disabled={isEditMode} />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="email" className="text-right">Email</Label>
+              <Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} className="col-span-3" required />
+            </div>
+            {!isEditMode && (
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="password" className="text-right">Password</Label>
+                <Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} className="col-span-3" required />
+              </div>
+            )}
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="first_name" className="text-right">First Name</Label>
+              <Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} className="col-span-3" />
+            </div>
+             <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="last_name" className="text-right">Last Name</Label>
+              <Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="roles" className="text-right">Roles</Label>
+              <div className="col-span-3 space-y-2">
+                 {allRoles.map(role => (
+                    <div key={role.id} className="flex items-center space-x-2">
+                        <Checkbox 
+                            id={`role-${role.id}`} 
+                            checked={selectedRoles.has(role.id)}
+                            onCheckedChange={() => handleRoleChange(role.id)}
+                        />
+                        <label htmlFor={`role-${role.id}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                            {role.name}
+                        </label>
+                    </div>
+                 ))}
+              </div>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="is_active" className="text-right">Active</Label>
+              <Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
+            </div>
+          </div>
+          {error && <p className="text-sm text-red-500 text-center">{error}</p>}
+          <DialogFooter>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/app/(protected)/admin/layout.jsx

@@ -0,0 +1,43 @@
+// File: frontend/app/(protected)/admin/layout.jsx
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Users, ShieldCheck } from 'lucide-react';
+import { cn } from '@/lib/utils'; // ตรวจสอบว่า import cn มาจากที่ถูกต้อง
+
+export default function AdminLayout({ children }) {
+  const pathname = usePathname();
+
+  const navLinks = [
+    { href: '/admin/users', label: 'User Management', icon: Users },
+    { href: '/admin/roles', label: 'Role & Permission', icon: ShieldCheck },
+  ];
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="text-3xl font-bold">Admin Settings</h1>
+        <p className="text-muted-foreground">Manage users, roles, and system permissions.</p>
+      </div>
+      <div className="flex border-b">
+        {navLinks.map(({ href, label, icon: Icon }) => (
+          <Link
+            key={href}
+            href={href}
+            className={cn(
+              'flex items-center gap-2 px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors',
+              pathname === href
+                ? 'border-primary text-primary'
+                : 'border-transparent text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+          </Link>
+        ))}
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+// File: frontend/app/(protected)/admin/roles/page.jsx
+'use client';
+
+import { useState, useEffect } from 'react';
+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';
+import { ShieldCheck, PlusCircle } from 'lucide-react';
+
+// Import Dialog component ที่เราเพิ่งสร้าง
+import { RoleFormDialog } from '../_components/role-form-dialog';
+
+export default function RolesPage() {
+  const [roles, setRoles] = useState([]);
+  const [allPermissions, setAllPermissions] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  // State สำหรับควบคุม Dialog
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState(null);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [rolesRes, permsRes] = await Promise.all([
+        api.get('/rbac/roles'),
+        api.get('/rbac/permissions'),
+      ]);
+      setRoles(rolesRes.data);
+      setAllPermissions(permsRes.data);
+    } catch (error) {
+      console.error("Failed to fetch RBAC data", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleCreate = () => {
+    setSelectedRole(null); // ไม่มี Role ที่เลือก = สร้างใหม่
+    setIsFormOpen(true);
+  };
+
+  const handleEdit = (role) => {
+    setSelectedRole(role);
+    setIsFormOpen(true);
+  };
+
+  if (loading) return <div>Loading role settings...</div>;
+
+  return (
+    <>
+      <div className="space-y-4">
+        <div className="flex justify-between items-center">
+            <h2 className="text-2xl font-semibold">Roles & Permissions</h2>
+            <Button onClick={handleCreate}>
+              <PlusCircle className="mr-2 h-4 w-4" /> Add Role
+            </Button>
+          </div>
+        {roles.map(role => (
+          <Card key={role.id}>
+            <CardHeader>
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle className="flex items-center gap-2">
+                    <ShieldCheck className="text-primary" />
+                    {role.name}
+                  </CardTitle>
+                  <CardDescription>{role.description || 'No description'}</CardDescription>
+                </div>
+                <Button variant="outline" size="sm" onClick={() => handleEdit(role)}>
+                    Edit Permissions
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm font-medium mb-2">Assigned Permissions:</p>
+              <div className="flex flex-wrap gap-2">
+                {role.Permissions.length > 0 ? (
+                  role.Permissions.map(perm => (
+                    <Badge key={perm.id} variant="secondary">{perm.name}</Badge>
+                  ))
+                ) : (
+                  <p className="text-sm text-muted-foreground">No permissions assigned.</p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <RoleFormDialog
+        isOpen={isFormOpen}
+        setIsOpen={setIsFormOpen}
+        role={selectedRole}
+        allPermissions={allPermissions}
+        onSuccess={fetchData}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,161 @@
+// File: frontend/app/(protected)/admin/users/page.jsx
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PlusCircle, MoreHorizontal } from 'lucide-react';
+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';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+
+// Import components ที่เราเพิ่งสร้าง
+import { UserFormDialog } from '../_components/user-form-dialog';
+import { ConfirmDeleteDialog } from '../_components/confirm-delete-dialog';
+
+
+export default function UsersPage() {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  
+  // State สำหรับควบคุม Dialog ทั้งหมด
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Function สำหรับดึงข้อมูลใหม่
+  const fetchUsers = async () => {
+    try {
+      setLoading(true);
+      const res = await api.get('/users');
+      setUsers(res.data);
+    } catch (error) {
+      console.error("Failed to fetch users", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  // Handlers สำหรับเปิด Dialog
+  const handleCreate = () => {
+    setSelectedUser(null);
+    setIsFormOpen(true);
+  };
+
+  const handleEdit = (user) => {
+    setSelectedUser(user);
+    setIsFormOpen(true);
+  };
+  
+  const handleDelete = (user) => {
+    setSelectedUser(user);
+    setIsDeleteOpen(true);
+  };
+
+  // Function ที่จะทำงานเมื่อยืนยันการลบ
+  const confirmDeactivate = async () => {
+    if (!selectedUser) return;
+    setIsSubmitting(true);
+    try {
+        await api.delete(`/users/${selectedUser.id}`);
+        fetchUsers(); // Refresh ข้อมูล
+        setIsDeleteOpen(false);
+    } catch (error) {
+        console.error("Failed to deactivate user", error);
+        // ควรมี Alert แจ้งเตือน
+    } finally {
+        setIsSubmitting(false);
+    }
+  };
+
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>User Accounts</CardTitle>
+              <CardDescription>Manage all user accounts and their roles.</CardDescription>
+            </div>
+            <Button onClick={handleCreate}>
+              <PlusCircle className="w-4 h-4 mr-2" /> Add User
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Username</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Roles</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead><span className="sr-only">Actions</span></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow><TableCell colSpan={5} className="text-center">Loading...</TableCell></TableRow>
+              ) : (
+                users.map((user) => (
+                  <TableRow key={user.id}>
+                    <TableCell className="font-medium">{user.username}</TableCell>
+                    <TableCell>{user.email}</TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        {user.Roles?.map(role => <Badge key={role.id} variant="secondary">{role.name}</Badge>)}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={user.is_active ? 'default' : 'destructive'}>
+                        {user.is_active ? 'Active' : 'Inactive'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" className="w-8 h-8 p-0"><MoreHorizontal className="w-4 h-4" /></Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                          <DropdownMenuItem onClick={() => handleEdit(user)}>Edit</DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => handleDelete(user)} className="text-red-500">
+                            Deactivate
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* Render Dialogs ที่นี่ (มันจะไม่แสดงผลจนกว่า state จะเป็น true) */}
+      <UserFormDialog 
+        user={selectedUser}
+        isOpen={isFormOpen}
+        setIsOpen={setIsFormOpen}
+        onSuccess={fetchUsers}
+      />
+      
+      <ConfirmDeleteDialog
+        isOpen={isDeleteOpen}
+        setIsOpen={setIsDeleteOpen}
+        isLoading={isSubmitting}
+        title="Are you sure?"
+        description={`This will deactivate the user "${selectedUser?.username}". They will no longer be able to log in.`}
+        onConfirm={confirmDeactivate}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,977 @@
+// frontend/app//(protected)/dashboard/page.jsx
+"use client";
+import React from "react";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import {
+  LayoutDashboard,
+  FileText,
+  Files,
+  Send,
+  Layers,
+  Users,
+  Settings,
+  Activity,
+  Search,
+  ChevronRight,
+  ShieldCheck,
+  Workflow,
+  Database,
+  Mail,
+  Server,
+  Shield,
+  BookOpen,
+  PanelLeft,
+  PanelRight,
+  ChevronDown,
+  Plus,
+  Filter,
+  Eye,
+  EyeOff,
+  SlidersHorizontal,
+  Columns3,
+  X,
+  ExternalLink,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Progress } from "@/components/ui/progress";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Switch } from "@/components/ui/switch";
+import { API_BASE } from "@/lib/api";
+
+const sea = {
+  light: "#E6F7FB",
+  light2: "#F3FBFD",
+  mid: "#2A7F98",
+  dark: "#0D5C75",
+  textDark: "#0E2932",
+};
+const can = (user, perm) => new Set(user?.permissions || []).has(perm);
+const Tag = ({ children }) => (
+  <Badge
+    className="px-3 py-1 text-xs border-0 rounded-full"
+    style={{ background: sea.light, color: sea.dark }}
+  >
+    {children}
+  </Badge>
+);
+const SidebarItem = ({ label, icon: Icon, active = false, badge }) => (
+  <button
+    className={`group w-full flex items-center gap-3 rounded-2xl px-4 py-3 text-left transition-all border ${
+      active ? "bg-white/70" : "bg-white/30 hover:bg-white/60"
+    }`}
+    style={{ borderColor: "#ffffff40", color: sea.textDark }}
+  >
+    <Icon className="w-5 h-5" />
+    <span className="font-medium grow">{label}</span>
+    {badge ? (
+      <span
+        className="text-xs rounded-full px-2 py-0.5"
+        style={{ background: sea.light, color: sea.dark }}
+      >
+        {badge}
+      </span>
+    ) : null}
+    <ChevronRight className="w-4 h-4 transition-opacity opacity-0 group-hover:opacity-100" />
+  </button>
+);
+const KPI = ({ label, value, icon: Icon, onClick }) => (
+  <Card
+    onClick={onClick}
+    className="transition border-0 shadow-sm cursor-pointer rounded-2xl hover:shadow"
+    style={{ background: "white" }}
+  >
+    <CardContent className="p-5">
+      <div className="flex items-start justify-between">
+        <span className="text-sm opacity-70">{label}</span>
+        <div className="p-2 rounded-xl" style={{ background: sea.light }}>
+          <Icon className="w-5 h-5" style={{ color: sea.dark }} />
+        </div>
+      </div>
+      <div className="mt-3 text-3xl font-bold" style={{ color: sea.textDark }}>
+        {value}
+      </div>
+      <div className="mt-2">
+        <Progress value={Math.min(100, (value / 400) * 100)} />
+      </div>
+    </CardContent>
+  </Card>
+);
+function PreviewDrawer({ open, onClose, children }) {
+  return (
+    <div
+      className={`fixed top-0 right-0 h-full w-full sm:w-[420px] bg-white shadow-2xl transition-transform z-50 ${
+        open ? "translate-x-0" : "translate-x-full"
+      }`}
+    >
+      <div className="flex items-center justify-between p-4 border-b">
+        <div className="font-medium">รายละเอียด</div>
+        <Button variant="ghost" size="icon" onClick={onClose}>
+          <X className="w-5 h-5" />
+        </Button>
+      </div>
+      <div className="p-4 overflow-auto h-[calc(100%-56px)]">{children}</div>
+    </div>
+  );
+}
+
+export default function DashboardPage() {
+  const [user, setUser] = React.useState(null);
+  const [sidebarOpen, setSidebarOpen] = React.useState(true);
+  const [densityCompact, setDensityCompact] = React.useState(false);
+  const [showCols, setShowCols] = React.useState({
+    type: true,
+    id: true,
+    title: true,
+    status: true,
+    due: true,
+    owner: true,
+    actions: true,
+  });
+  const [previewOpen, setPreviewOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState({
+    type: "All",
+    status: "All",
+    overdue: false,
+  });
+  const [activeQuery, setActiveQuery] = React.useState({});
+
+  React.useEffect(() => {
+    fetch(`${API_BASE}/auth/me`, { credentials: "include" })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data) => setUser(data?.user || null))
+      .catch(() => setUser(null));
+  }, []);
+
+  const quickLinks = [
+    {
+      label: "สร้าง RFA",
+      icon: FileText,
+      perm: "rfa:create",
+      href: "/rfas/new",
+    },
+    {
+      label: "อัปโหลด Drawing",
+      icon: Layers,
+      perm: "drawing:upload",
+      href: "/drawings/upload",
+    },
+    {
+      label: "สร้าง Transmittal",
+      icon: Send,
+      perm: "transmittal:create",
+      href: "/transmittals/new",
+    },
+    {
+      label: "บันทึกหนังสือสื่อสาร",
+      icon: Mail,
+      perm: "correspondence:create",
+      href: "/correspondences/new",
+    },
+  ];
+  const nav = [
+    { label: "แดชบอร์ด", icon: LayoutDashboard },
+    { label: "Drawings", icon: Layers },
+    { label: "RFAs", icon: FileText },
+    { label: "Transmittals", icon: Send },
+    { label: "Contracts & Volumes", icon: BookOpen },
+    { label: "Correspondences", icon: Files },
+    { label: "ผู้ใช้/บทบาท", icon: Users, perm: "users:manage" },
+    { label: "Reports", icon: Activity },
+    { label: "Workflow (n8n)", icon: Workflow, perm: "workflow:view" },
+    { label: "Health", icon: Server, perm: "health:view" },
+    { label: "Admin", icon: Settings, perm: "admin:view" },
+  ];
+  const kpis = [
+    {
+      key: "rfa-pending",
+      label: "RFAs รออนุมัติ",
+      value: 12,
+      icon: FileText,
+      query: { type: "RFA", status: "pending" },
+    },
+    {
+      key: "drawings",
+      label: "แบบ (Drawings) ล่าสุด",
+      value: 326,
+      icon: Layers,
+      query: { type: "Drawing" },
+    },
+    {
+      key: "trans-month",
+      label: "Transmittals เดือนนี้",
+      value: 18,
+      icon: Send,
+      query: { type: "Transmittal", month: "current" },
+    },
+    {
+      key: "overdue",
+      label: "เกินกำหนด (Overdue)",
+      value: 5,
+      icon: Activity,
+      query: { overdue: true },
+    },
+  ];
+  const recent = [
+    {
+      type: "RFA",
+      code: "RFA-LCP3-0012",
+      title: "ปรับปรุงรายละเอียดเสาเข็มท่าเรือ",
+      who: "สุรเชษฐ์ (Editor)",
+      when: "เมื่อวาน 16:40",
+    },
+    {
+      type: "Drawing",
+      code: "DWG-C-210A-Rev.3",
+      title: "แปลนโครงสร้างท่าเรือส่วนที่ 2",
+      who: "วรวิชญ์ (Admin)",
+      when: "วันนี้ 09:15",
+    },
+    {
+      type: "Transmittal",
+      code: "TR-2025-0916-04",
+      title: "ส่งแบบ Rebar Shop Drawing ชุด A",
+      who: "Supansa (Viewer)",
+      when: "16 ก.ย. 2025",
+    },
+    {
+      type: "Correspondence",
+      code: "CRSP-58",
+      title: "แจ้งเลื่อนประชุมตรวจแบบ",
+      who: "Kitti (Editor)",
+      when: "15 ก.ย. 2025",
+    },
+  ];
+  const items = [
+    {
+      t: "RFA",
+      id: "RFA-LCP3-0013",
+      title: "ยืนยันรายละเอียดท่อระบายน้ำ",
+      status: "Pending",
+      due: "20 ก.ย. 2025",
+      owner: "คุณแดง",
+    },
+    {
+      t: "Drawing",
+      id: "DWG-S-115-Rev.1",
+      title: "Section เสาเข็มพื้นที่ส่วนที่ 1",
+      status: "Review",
+      due: "19 ก.ย. 2025",
+      owner: "วิทยา",
+    },
+    {
+      t: "Transmittal",
+      id: "TR-2025-0915-03",
+      title: "ส่งแบบโครงสร้างท่าเรือ ชุด B",
+      status: "Sent",
+      due: "—",
+      owner: "สุธิดา",
+    },
+  ];
+  const visibleItems = items.filter((r) => {
+    if (filters.type !== "All" && r.t !== filters.type) return false;
+    if (filters.status !== "All" && r.status !== filters.status) return false;
+    if (filters.overdue && r.due === "—") return false;
+    return true;
+  });
+  const onKpiClick = (q) => {
+    setActiveQuery(q);
+    if (q?.type) setFilters((f) => ({ ...f, type: q.type }));
+    if (q?.overdue) setFilters((f) => ({ ...f, overdue: true }));
+  };
+
+  return (
+    <TooltipProvider>
+      <div
+        className="min-h-screen"
+        style={{
+          background: `linear-gradient(180deg, ${sea.light2} 0%, ${sea.light} 100%)`,
+        }}
+      >
+        <header
+          className="sticky top-0 z-40 border-b backdrop-blur-md"
+          style={{
+            borderColor: "#ffffff66",
+            background: "rgba(230,247,251,0.7)",
+          }}
+        >
+          <div className="flex items-center gap-3 px-4 py-2 mx-auto max-w-7xl">
+            <button
+              className="flex items-center justify-center shadow-sm h-9 w-9 rounded-2xl"
+              style={{ background: sea.dark }}
+              onClick={() => setSidebarOpen((v) => !v)}
+              aria-label={sidebarOpen ? "ซ่อนแถบด้านข้าง" : "แสดงแถบด้านข้าง"}
+            >
+              {sidebarOpen ? (
+                <PanelLeft className="w-5 h-5 text-white" />
+              ) : (
+                <PanelRight className="w-5 h-5 text-white" />
+              )}
+            </button>
+            <div>
+              <div className="text-xs opacity-70">
+                Document Management System
+              </div>
+              <div className="font-semibold" style={{ color: sea.textDark }}>
+                โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 — ส่วนที่ 1–4
+              </div>
+            </div>
+            <Tag>Phase 3</Tag>
+            <Tag>Port Infrastructure</Tag>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button className="flex items-center gap-2 ml-auto rounded-2xl btn-sea">
+                  System <ChevronDown className="w-4 h-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="min-w-56">
+                <DropdownMenuLabel>ระบบ</DropdownMenuLabel>
+                {can(user, "admin:view") && (
+                  <DropdownMenuItem>
+                    <Settings className="w-4 h-4 mr-2" /> Admin
+                  </DropdownMenuItem>
+                )}
+                {can(user, "users:manage") && (
+                  <DropdownMenuItem>
+                    <Users className="w-4 h-4 mr-2" /> ผู้ใช้/บทบาท
+                  </DropdownMenuItem>
+                )}
+                {can(user, "health:view") && (
+                  <DropdownMenuItem asChild>
+                    <a href="/health" className="flex items-center w-full">
+                      <Server className="w-4 h-4 mr-2" /> Health{" "}
+                      <ExternalLink className="w-3 h-3 ml-auto" />
+                    </a>
+                  </DropdownMenuItem>
+                )}
+                {can(user, "workflow:view") && (
+                  <DropdownMenuItem asChild>
+                    <a href="/workflow" className="flex items-center w-full">
+                      <Workflow className="w-4 h-4 mr-2" /> Workflow (n8n){" "}
+                      <ExternalLink className="w-3 h-3 ml-auto" />
+                    </a>
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button className="ml-2 rounded-2xl btn-sea">
+                  <Plus className="w-4 h-4 mr-1" /> New
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {quickLinks.map(({ label, icon: Icon, perm, href }) =>
+                  can(user, perm) ? (
+                    <DropdownMenuItem key={label} asChild>
+                      <Link href={href} className="flex items-center">
+                        <Icon className="w-4 h-4 mr-2" />
+                        {label}
+                      </Link>
+                    </DropdownMenuItem>
+                  ) : (
+                    <Tooltip key={label}>
+                      <TooltipTrigger asChild>
+                        <div className="px-2 py-1.5 text-sm opacity-40 cursor-not-allowed flex items-center">
+                          <Icon className="w-4 h-4 mr-2" />
+                          {label}
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        ไม่มีสิทธิ์ใช้งาน ({perm})
+                      </TooltipContent>
+                    </Tooltip>
+                  )
+                )}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Layers className="w-4 h-4 mr-2" /> Import / Bulk upload
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </header>
+
+        <div className="grid grid-cols-12 gap-6 px-4 py-6 mx-auto max-w-7xl">
+          {sidebarOpen && (
+            <aside className="col-span-12 lg:col-span-3 xl:col-span-3">
+              <div
+                className="p-4 border rounded-3xl"
+                style={{
+                  background: "rgba(255,255,255,0.7)",
+                  borderColor: "#ffffff66",
+                }}
+              >
+                <div className="flex items-center gap-2 mb-3">
+                  <ShieldCheck
+                    className="w-5 h-5"
+                    style={{ color: sea.dark }}
+                  />
+                  <div className="text-sm">
+                    RBAC:{" "}
+                    <span className="font-medium">{user?.role || "—"}</span>
+                  </div>
+                </div>
+                <div className="relative mb-3">
+                  <Search className="absolute w-4 h-4 -translate-y-1/2 left-3 top-1/2 opacity-70" />
+                  <Input
+                    placeholder="ค้นหา RFA / Drawing / Transmittal / Code…"
+                    className="bg-white border-0 pl-9 rounded-2xl"
+                  />
+                </div>
+                <div
+                  className="p-3 mb-3 border rounded-2xl"
+                  style={{ borderColor: "#eef6f8", background: "#ffffffaa" }}
+                >
+                  <div className="mb-2 text-xs font-medium">ตัวกรอง</div>
+                  <div className="grid grid-cols-2 gap-2">
+                    <select
+                      className="p-2 text-sm border rounded-xl"
+                      value={filters.type}
+                      onChange={(e) =>
+                        setFilters((f) => ({ ...f, type: e.target.value }))
+                      }
+                    >
+                      <option>All</option>
+                      <option>RFA</option>
+                      <option>Drawing</option>
+                      <option>Transmittal</option>
+                      <option>Correspondence</option>
+                    </select>
+                    <select
+                      className="p-2 text-sm border rounded-xl"
+                      value={filters.status}
+                      onChange={(e) =>
+                        setFilters((f) => ({ ...f, status: e.target.value }))
+                      }
+                    >
+                      <option>All</option>
+                      <option>Pending</option>
+                      <option>Review</option>
+                      <option>Sent</option>
+                    </select>
+                    <label className="flex items-center col-span-2 gap-2 text-sm">
+                      <Switch
+                        checked={filters.overdue}
+                        onCheckedChange={(v) =>
+                          setFilters((f) => ({ ...f, overdue: v }))
+                        }
+                      />{" "}
+                      แสดงเฉพาะ Overdue
+                    </label>
+                  </div>
+                  <div className="flex gap-2 mt-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="rounded-xl"
+                      style={{ borderColor: sea.mid, color: sea.dark }}
+                    >
+                      <Filter className="w-4 h-4 mr-1" />
+                      Apply
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="rounded-xl"
+                      onClick={() =>
+                        setFilters({
+                          type: "All",
+                          status: "All",
+                          overdue: false,
+                        })
+                      }
+                    >
+                      Reset
+                    </Button>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  {nav
+                    .filter((item) => !item.perm || can(user, item.perm))
+                    .map((n, i) => (
+                      <SidebarItem
+                        key={n.label}
+                        label={n.label}
+                        icon={n.icon}
+                        active={i === 0}
+                        badge={n.label === "RFAs" ? 12 : undefined}
+                      />
+                    ))}
+                </div>
+                <div className="flex items-center gap-2 mt-5 text-xs opacity-70">
+                  <Database className="w-4 h-4" /> dms_db • MariaDB 10.11
+                </div>
+              </div>
+            </aside>
+          )}
+
+          <main
+            className={`col-span-12 ${
+              sidebarOpen ? "lg:col-span-9 xl:col-span-9" : ""
+            } space-y-6`}
+          >
+            <motion.div
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.05, duration: 0.4 }}
+            >
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                {kpis.map((k) => (
+                  <KPI key={k.key} {...k} onClick={() => onKpiClick(k.query)} />
+                ))}
+              </div>
+            </motion.div>
+
+            <div className="flex items-center justify-between">
+              <div className="text-sm opacity-70">
+                ผลลัพธ์จากตัวกรอง: {filters.type}/{filters.status}
+                {filters.overdue ? " • Overdue" : ""}
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="rounded-xl"
+                  style={{ borderColor: sea.mid, color: sea.dark }}
+                  onClick={() => setDensityCompact((v) => !v)}
+                >
+                  <SlidersHorizontal className="w-4 h-4 mr-1" /> Density:{" "}
+                  {densityCompact ? "Compact" : "Comfort"}
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="rounded-xl"
+                      style={{ borderColor: sea.mid, color: sea.dark }}
+                    >
+                      <Columns3 className="w-4 h-4 mr-1" /> Columns
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    {Object.keys(showCols).map((key) => (
+                      <DropdownMenuItem
+                        key={key}
+                        onClick={() =>
+                          setShowCols((s) => ({ ...s, [key]: !s[key] }))
+                        }
+                      >
+                        {showCols[key] ? (
+                          <Eye className="w-4 h-4 mr-2" />
+                        ) : (
+                          <EyeOff className="w-4 h-4 mr-2" />
+                        )}
+                        {key}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+
+            <Card className="border-0 rounded-2xl">
+              <CardContent className="p-0">
+                <div className="overflow-x-auto">
+                  <table
+                    className={`min-w-full text-sm ${
+                      densityCompact ? "[&_*]:py-1" : ""
+                    }`}
+                  >
+                    <thead
+                      className="sticky top-[56px] z-10"
+                      style={{
+                        background: "white",
+                        borderBottom: "1px solid #efefef",
+                      }}
+                    >
+                      <tr className="text-left">
+                        {showCols.type && <th className="px-3 py-2">ประเภท</th>}
+                        {showCols.id && <th className="px-3 py-2">รหัส</th>}
+                        {showCols.title && (
+                          <th className="px-3 py-2">ชื่อเรื่อง</th>
+                        )}
+                        {showCols.status && (
+                          <th className="px-3 py-2">สถานะ</th>
+                        )}
+                        {showCols.due && (
+                          <th className="px-3 py-2">กำหนดส่ง</th>
+                        )}
+                        {showCols.owner && (
+                          <th className="px-3 py-2">ผู้รับผิดชอบ</th>
+                        )}
+                        {showCols.actions && (
+                          <th className="px-3 py-2">จัดการ</th>
+                        )}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {visibleItems.length === 0 && (
+                        <tr>
+                          <td
+                            className="px-3 py-8 text-center opacity-70"
+                            colSpan={7}
+                          >
+                            ไม่พบรายการตามตัวกรองที่เลือก
+                          </td>
+                        </tr>
+                      )}
+                      {visibleItems.map((row) => (
+                        <tr
+                          key={row.id}
+                          className="border-b cursor-pointer hover:bg-gray-50/50"
+                          style={{ borderColor: "#f3f3f3" }}
+                          onClick={() => setPreviewOpen(true)}
+                        >
+                          {showCols.type && (
+                            <td className="px-3 py-2">{row.t}</td>
+                          )}
+                          {showCols.id && (
+                            <td className="px-3 py-2 font-mono">{row.id}</td>
+                          )}
+                          {showCols.title && (
+                            <td className="px-3 py-2">{row.title}</td>
+                          )}
+                          {showCols.status && (
+                            <td className="px-3 py-2">
+                              <Tag>{row.status}</Tag>
+                            </td>
+                          )}
+                          {showCols.due && (
+                            <td className="px-3 py-2">{row.due}</td>
+                          )}
+                          {showCols.owner && (
+                            <td className="px-3 py-2">{row.owner}</td>
+                          )}
+                          {showCols.actions && (
+                            <td className="px-3 py-2">
+                              <div className="flex gap-2">
+                                <Button
+                                  size="sm"
+                                  className="rounded-xl btn-sea"
+                                >
+                                  เปิด
+                                </Button>
+                                <Button
+                                  size="sm"
+                                  variant="outline"
+                                  className="rounded-xl"
+                                  style={{
+                                    borderColor: sea.mid,
+                                    color: sea.dark,
+                                  }}
+                                >
+                                  Assign
+                                </Button>
+                              </div>
+                            </td>
+                          )}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <div
+                  className="px-4 py-2 text-xs border-t opacity-70"
+                  style={{ borderColor: "#efefef" }}
+                >
+                  เคล็ดลับ: ใช้ปุ่ม ↑/↓ เลื่อนแถว, Enter เปิด, / โฟกัสค้นหา
+                </div>
+              </CardContent>
+            </Card>
+
+            <Tabs defaultValue="overview" className="w-full">
+              <TabsList
+                className="border rounded-2xl bg-white/80"
+                style={{ borderColor: "#ffffff80" }}
+              >
+                <TabsTrigger value="overview">ภาพรวม</TabsTrigger>
+                <TabsTrigger value="reports">รายงาน</TabsTrigger>
+              </TabsList>
+              <TabsContent value="overview" className="mt-4 space-y-4">
+                <div className="grid gap-4 lg:grid-cols-5">
+                  <Card className="border-0 rounded-2xl lg:col-span-3">
+                    <CardContent className="p-5">
+                      <div className="flex items-center justify-between">
+                        <div
+                          className="font-semibold"
+                          style={{ color: sea.textDark }}
+                        >
+                          สถานะโครงการ
+                        </div>
+                        <Tag>Phase 3 • ส่วนที่ 1–4</Tag>
+                      </div>
+                      <div className="mt-4 space-y-3">
+                        <div>
+                          <div className="text-sm opacity-70">
+                            ความคืบหน้าโดยรวม
+                          </div>
+                          <Progress value={62} />
+                        </div>
+                        <div className="grid grid-cols-3 gap-3">
+                          <div
+                            className="p-4 border rounded-xl"
+                            style={{
+                              background: sea.light,
+                              borderColor: sea.light,
+                            }}
+                          >
+                            <div className="text-xs opacity-70">ส่วนที่ 1</div>
+                            <div className="text-lg font-semibold">
+                              เสร็จ 70%
+                            </div>
+                          </div>
+                          <div
+                            className="p-4 border rounded-xl"
+                            style={{
+                              background: sea.light,
+                              borderColor: sea.light,
+                            }}
+                          >
+                            <div className="text-xs opacity-70">ส่วนที่ 2</div>
+                            <div className="text-lg font-semibold">
+                              เสร็จ 58%
+                            </div>
+                          </div>
+                          <div
+                            className="p-4 border rounded-xl"
+                            style={{
+                              background: sea.light,
+                              borderColor: sea.light,
+                            }}
+                          >
+                            <div className="text-xs opacity-70">
+                              ส่วนที่ 3–4
+                            </div>
+                            <div className="text-lg font-semibold">
+                              เสร็จ 59%
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                  <Card className="border-0 rounded-2xl lg:col-span-2">
+                    <CardContent className="p-5 space-y-3">
+                      <div className="flex items-center justify-between">
+                        <div
+                          className="font-semibold"
+                          style={{ color: sea.textDark }}
+                        >
+                          System Health
+                        </div>
+                        <Tag>QNAP • Container Station</Tag>
+                      </div>
+                      <div className="space-y-2 text-sm">
+                        <div className="flex items-center gap-2">
+                          <Server className="w-4 h-4" /> Nginx Reverse Proxy{" "}
+                          <span
+                            className="ml-auto font-medium"
+                            style={{ color: sea.dark }}
+                          >
+                            Healthy
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Database className="w-4 h-4" /> MariaDB 10.11{" "}
+                          <span
+                            className="ml-auto font-medium"
+                            style={{ color: sea.dark }}
+                          >
+                            OK
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Workflow className="w-4 h-4" /> n8n (Postgres){" "}
+                          <span
+                            className="ml-auto font-medium"
+                            style={{ color: sea.dark }}
+                          >
+                            OK
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Shield className="w-4 h-4" /> RBAC Enforcement{" "}
+                          <span
+                            className="ml-auto font-medium"
+                            style={{ color: sea.dark }}
+                          >
+                            Enabled
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="pt-2 border-t"
+                        style={{ borderColor: "#eeeeee" }}
+                      >
+                        <Button
+                          variant="outline"
+                          className="rounded-xl"
+                          style={{ borderColor: sea.mid, color: sea.dark }}
+                        >
+                          เปิดหน้า /health
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+                <Card className="border-0 rounded-2xl">
+                  <CardContent className="p-5">
+                    <div className="flex items-center justify-between mb-3">
+                      <div
+                        className="font-semibold"
+                        style={{ color: sea.textDark }}
+                      >
+                        กิจกรรมล่าสุด
+                      </div>
+                      <div className="flex gap-2">
+                        <Tag>Admin</Tag>
+                        <Tag>Editor</Tag>
+                        <Tag>Viewer</Tag>
+                      </div>
+                    </div>
+                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+                      {recent.map((r) => (
+                        <div
+                          key={r.code}
+                          className="p-4 transition border rounded-2xl hover:shadow-sm"
+                          style={{
+                            background: "white",
+                            borderColor: "#efefef",
+                          }}
+                        >
+                          <div className="text-xs opacity-70">
+                            {r.type} • {r.code}
+                          </div>
+                          <div
+                            className="mt-1 font-medium"
+                            style={{ color: sea.textDark }}
+                          >
+                            {r.title}
+                          </div>
+                          <div className="mt-2 text-xs opacity-70">{r.who}</div>
+                          <div className="text-xs opacity-70">{r.when}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+              <TabsContent value="reports" className="mt-4">
+                <div className="grid gap-4 lg:grid-cols-2">
+                  <Card className="border-0 rounded-2xl">
+                    <CardContent className="p-5">
+                      <div
+                        className="mb-2 font-semibold"
+                        style={{ color: sea.textDark }}
+                      >
+                        Report A: RFA → Drawings → Revisions
+                      </div>
+                      <div className="text-sm opacity-70">
+                        รวมทุก Drawing Revision + Code
+                      </div>
+                      <div className="mt-3">
+                        <Button className="rounded-2xl btn-sea">
+                          Export CSV
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                  <Card className="border-0 rounded-2xl">
+                    <CardContent className="p-5">
+                      <div
+                        className="mb-2 font-semibold"
+                        style={{ color: sea.textDark }}
+                      >
+                        Report B: ไทม์ไลน์ RFA vs Drawing Rev
+                      </div>
+                      <div className="text-sm opacity-70">
+                        อิง Query #2 ที่กำหนดไว้
+                      </div>
+                      <div className="mt-3">
+                        <Button className="rounded-2xl btn-sea">
+                          ดูรายงาน
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+            </Tabs>
+
+            <div className="py-6 text-xs text-center opacity-70">
+              Sea-themed Dashboard • Sidebar ซ่อนได้ • RBAC แสดง/ซ่อน • Faceted
+              search • KPI click-through • Preview drawer • Column
+              visibility/Density
+            </div>
+          </main>
+        </div>
+
+        <PreviewDrawer open={previewOpen} onClose={() => setPreviewOpen(false)}>
+          <div className="space-y-2 text-sm">
+            <div>
+              <span className="opacity-70">รหัส:</span> RFA-LCP3-0013
+            </div>
+            <div>
+              <span className="opacity-70">ชื่อเรื่อง:</span>{" "}
+              ยืนยันรายละเอียดท่อระบายน้ำ
+            </div>
+            <div>
+              <span className="opacity-70">สถานะ:</span> <Tag>Pending</Tag>
+            </div>
+            <div>
+              <span className="opacity-70">แนบไฟล์:</span> 2 รายการ (PDF, DWG)
+            </div>
+            <div className="flex gap-2 pt-2">
+              {can(user, "rfa:create") && (
+                <Button className="btn-sea rounded-xl">แก้ไข</Button>
+              )}
+              <Button
+                variant="outline"
+                className="rounded-xl"
+                style={{ borderColor: sea.mid, color: sea.dark }}
+              >
+                เปิดเต็มหน้า
+              </Button>
+            </div>
+          </div>
+        </PreviewDrawer>
+
+        <style jsx global>{`
+          .btn-sea {
+            background: ${sea.dark};
+          }
+          .btn-sea:hover {
+            background: ${sea.mid};
+          }
+          .menu-sea {
+            background: ${sea.dark};
+          }
+          .menu-sea:hover {
+            background: ${sea.mid};
+          }
+        `}</style>
+      </div>
+    </TooltipProvider>
+  );
+}

frontend/app/(protected)/layout.jsx

@@ -1,8 +1,10 @@
 // frontend/app/(protected)/layout.jsx
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { usePathname } from 'next/navigation';
 import { cookies, headers } from "next/headers";
 import { can } from "@/lib/rbac";
+import { Home, FileText, Users, Settings } from 'lucide-react'; // เพิ่ม Users, Settings หรือไอคอนที่ต้องการ
 
 export const metadata = { title: "DMS | Protected" };