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>