feat(dashboard): backend and frontend

README.md

@@ -132,5 +132,5 @@ git checkout -b feature/dashboard-update-251004
 # แก้ไฟล์ frontend/app/dashboard/\* และที่เกี่ยวข้อง
 
 git add frontend/app/dashboard
-git commit -m "feat(dashboard): เพิ่ม KPI tiles + แก้ layout grid"
+git commit -m "feat(dashboard): เพิ่มส่วนจัดการ user"
 git push -u origin feature/dashboard-update-251004

backend/src/middleware/index.js

@@ -0,0 +1,39 @@
+// File: backend/src/middleware/index.js
+import * as abac from "./abac.js";
+import * as auth from "./auth.js";
+import * as authJwt from "./authJwt.js";
+import * as errorHandler from "./errorHandler.js";
+import * as loadPrincipal from "./loadPrincipal.js";
+import * as permGuard from "./permGuard.js";
+import * as permissions from "./permissions.js";
+import * as rbac from "./rbac.js";
+import * as requirePerm from "./requirePerm.js";
+
+// Export ทุกอย่างออกมาเป็น named exports
+// เพื่อให้สามารถ import แบบ `import { authJwt, permGuard } from '../middleware';` ได้
+export {
+  abac,
+  auth,
+  authJwt,
+  errorHandler,
+  loadPrincipal,
+  permGuard,
+  permissions,
+  rbac,
+  requirePerm,
+};
+
+// (Optional) สร้าง default export สำหรับกรณีที่ต้องการ import ทั้งหมดใน object เดียว
+const middleware = {
+  abac,
+  auth,
+  authJwt,
+  errorHandler,
+  loadPrincipal,
+  permGuard,
+  permissions,
+  rbac,
+  requirePerm,
+};
+
+export default middleware;

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

@@ -4,90 +4,143 @@
 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 { 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"
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Trash2 } from 'lucide-react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
 
 export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
   const [formData, setFormData] = useState({});
   const [allRoles, setAllRoles] = useState([]);
-  const [selectedRoles, setSelectedRoles] = useState(new Set());
+  const [selectedSystemRoles, setSelectedSystemRoles] = useState(new Set());
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const [allProjects, setAllProjects] = useState([]);
+  const [projectRoles, setProjectRoles] = useState([]);
+  const [selectedProjectId, setSelectedProjectId] = useState('');
+  const [selectedRoleId, setSelectedRoleId] = useState('');
 
   const isEditMode = !!user;
 
   useEffect(() => {
-    // ดึงข้อมูล Role ทั้งหมดมาเตรียมไว้
-    const fetchRoles = async () => {
+    const fetchPrerequisites = async () => {
       try {
-        const res = await api.get('/rbac/roles');
-        setAllRoles(res.data);
+        const [rolesRes, projectsRes] = await Promise.all([
+          api.get('/rbac/roles'),
+          api.get('/projects'),
+        ]);
+        setAllRoles(rolesRes.data);
+        setAllProjects(projectsRes.data);
       } catch (err) {
-        console.error('Failed to fetch roles', err);
+        console.error('Failed to fetch prerequisites', err);
       }
     };
-    fetchRoles();
-  }, []);
+    if (isOpen) {
+        fetchPrerequisites();
+    }
+  }, [isOpen]);
 
   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());
+    const fetchUserData = async () => {
+        if (isEditMode) {
+            setFormData({
+                username: user.username,
+                email: user.email,
+                first_name: user.first_name || '',
+                last_name: user.last_name || '',
+                is_active: user.is_active,
+            });
+            setSelectedSystemRoles(new Set(user.Roles?.map(role => role.id) || []));
+            
+            try {
+                const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
+                setProjectRoles(res.data);
+            } catch (err) {
+                console.error("Failed to fetch user's project roles", err);
+                setProjectRoles([]);
+            }
+
+        } else {
+            setFormData({ username: '', email: '', password: '', first_name: '', last_name: '', is_active: true });
+            setSelectedSystemRoles(new Set());
+            setProjectRoles([]);
+        }
+        setError('');
+        setSelectedProjectId('');
+        setSelectedRoleId('');
+    };
+    
+    if (isOpen) {
+        fetchUserData();
     }
-    setError('');
   }, [user, isOpen]);
 
   const handleInputChange = (e) => {
     const { id, value } = e.target;
     setFormData((prev) => ({ ...prev, [id]: value }));
   };
-  
-  const handleRoleChange = (roleId) => {
-    setSelectedRoles(prev => {
+
+  const handleSystemRoleChange = (roleId) => {
+    setSelectedSystemRoles(prev => {
         const newSet = new Set(prev);
-        if (newSet.has(roleId)) {
-            newSet.delete(roleId);
-        } else {
-            newSet.add(roleId);
-        }
+        if (newSet.has(roleId)) newSet.delete(roleId);
+        else newSet.add(roleId);
         return newSet;
     });
   };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  const handleAddProjectRole = async () => {
+      if (!selectedProjectId || !selectedRoleId) {
+          setError("Please select both a project and a role.");
+          return;
+      }
+      setIsLoading(true);
+      setError('');
+      try {
+          await api.post('/rbac/user-project-roles', {
+              userId: user.id,
+              projectId: selectedProjectId,
+              roleId: selectedRoleId
+          });
+          const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
+          setProjectRoles(res.data);
+          setSelectedProjectId('');
+          setSelectedRoleId('');
+      } catch(err) {
+          setError(err.response?.data?.message || 'Failed to add project role.');
+      } finally {
+          setIsLoading(false);
+      }
+  };
+
+  const handleRemoveProjectRole = async (assignment) => {
+      setIsLoading(true);
+      setError('');
+      try {
+          await api.delete('/rbac/user-project-roles', {
+              data: {
+                  userId: user.id,
+                  projectId: assignment.project_id,
+                  roleId: assignment.role_id
+              }
+          });
+          setProjectRoles(prev => prev.filter(p => p.id !== assignment.id));
+      } catch(err) {
+          setError(err.response?.data?.message || 'Failed to remove project role.');
+      } finally {
+          setIsLoading(false);
+      }
+  };
+
+  const handleSaveUserDetails = async () => {
     setIsLoading(true);
     setError('');
-
-    const payload = { ...formData, roles: Array.from(selectedRoles) };
+    const payload = { ...formData, roles: Array.from(selectedSystemRoles) };
     
     try {
       if (isEditMode) {
@@ -95,77 +148,119 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
       } else {
         await api.post('/users', payload);
       }
-      onSuccess(); // บอกให้หน้าหลัก refresh ข้อมูล
-      setIsOpen(false); // ปิด Dialog
+      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-[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} />
+      <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>
-            <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>
+
+            {/* 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>
-                 ))}
-              </div>
+
+                    <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>
+                    </div>
+                </>
+                ) : <p className="py-4 text-sm italic text-center text-muted-foreground">Save the user first to assign project roles.</p>}
             </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'}
+        </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>
-        </form>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );