lcbp3.np-dms.work/frontend/app/(protected)/admin/_components/user-form-dialog.jsx

// 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, 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 { 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 }) {
  // State for form fields
  const [formData, setFormData] = useState({});
  const [selectedSystemRoles, setSelectedSystemRoles] = useState(new Set());
  
  // 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 {
        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 prerequisites', err);
        setError('Could not load required data (roles, projects).');
      }
    };
    if (isOpen) {
        fetchPrerequisites();
    }
  }, [isOpen]);

  // Effect to set up the form when the user prop changes (for editing) or when opening for creation
  useEffect(() => {
    const setupForm = async () => {
        if (isEditMode) {
            // Edit mode: populate form with user data
            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) || []));
            
            // Fetch this user's specific project roles
            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 {
            // 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) {
        setupForm();
    }
  }, [user, isOpen]);

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    setFormData((prev) => ({ ...prev, [id]: value }));
  };

  const handleSystemRoleChange = (roleId) => {
    setSelectedSystemRoles(prev => {
        const newSet = new Set(prev);
        if (newSet.has(roleId)) newSet.delete(roleId);
        else newSet.add(roleId);
        return newSet;
    });
  };

  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
          });
          // Refresh the list after adding
          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 }
          });
          // 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.');
      } finally {
          setIsLoading(false);
      }
  };

  const handleSaveUserDetails = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');
    const payload = { ...formData, roles: Array.from(selectedSystemRoles) };
    
    try {
      if (isEditMode) {
        await api.put(`/users/${user.id}`, payload);
      } else {
        await api.post('/users', payload);
      }
      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 {
      setIsLoading(false);
    }
  };
  
  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent className="sm:max-w-3xl">
        <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">
                        <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="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>
            </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>
  );
}