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

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