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,
  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"

export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
  const [formData, setFormData] = useState({});
  const [allRoles, setAllRoles] = useState([]);
  const [selectedRoles, setSelectedRoles] = useState(new Set());
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const isEditMode = !!user;

  useEffect(() => {
    // ดึงข้อมูล Role ทั้งหมดมาเตรียมไว้
    const fetchRoles = async () => {
      try {
        const res = await api.get('/rbac/roles');
        setAllRoles(res.data);
      } catch (err) {
        console.error('Failed to fetch roles', err);
      }
    };
    fetchRoles();
  }, []);

  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());
    }
    setError('');
  }, [user, isOpen]);

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    setFormData((prev) => ({ ...prev, [id]: value }));
  };
  
  const handleRoleChange = (roleId) => {
    setSelectedRoles(prev => {
        const newSet = new Set(prev);
        if (newSet.has(roleId)) {
            newSet.delete(roleId);
        } else {
            newSet.add(roleId);
        }
        return newSet;
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    const payload = { ...formData, roles: Array.from(selectedRoles) };
    
    try {
      if (isEditMode) {
        await api.put(`/users/${user.id}`, payload);
      } else {
        await api.post('/users', payload);
      }
      onSuccess(); // บอกให้หน้าหลัก refresh ข้อมูล
      setIsOpen(false); // ปิด 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-[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} />
            </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>
                    </div>
                 ))}
              </div>
            </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'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}