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

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';