update api users and groups and users 13

components/users/users-table.tsx

@@ -37,6 +37,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
 
 interface User {
   id: string;
@@ -425,28 +426,30 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
             </DialogHeader>
             <form onSubmit={handleAddUser} className="space-y-4">
               <div className="space-y-2">
-                <Label htmlFor="username">Nom d'utilisateur</Label>
+                <Label htmlFor="username">Username</Label>
                 <Input
                   id="username"
                   value={formData.username}
-                  onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value }))}
+                  onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value.trim() }))}
                   required
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="firstName">Prénom</Label>
+                <Label htmlFor="firstName">First Name</Label>
                 <Input
                   id="firstName"
                   value={formData.firstName}
-                  onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value }))}
+                  onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value.trim() }))}
+                  required
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="lastName">Nom</Label>
+                <Label htmlFor="lastName">Last Name</Label>
                 <Input
                   id="lastName"
                   value={formData.lastName}
-                  onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value }))}
+                  onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value.trim() }))}
+                  required
                 />
               </div>
               <div className="space-y-2">
@@ -455,12 +458,12 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                   id="email"
                   type="email"
                   value={formData.email}
-                  onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
+                  onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value.trim() }))}
                   required
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="password">Mot de passe</Label>
+                <Label htmlFor="password">Password</Label>
                 <Input
                   id="password"
                   type="password"
@@ -470,44 +473,26 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="roles">Rôles</Label>
+                <Label>Roles</Label>
-                <div className="flex flex-wrap gap-2">
+                <div className="space-y-2">
                   {roles.map((role) => (
                     <div key={role.id} className="flex items-center space-x-2">
-                      <input
+                      <Checkbox
-                        type="checkbox"
                         id={`role-${role.id}`}
                         checked={formData.roles.includes(role.name)}
-                        onChange={(e) => {
+                        onCheckedChange={(checked) => {
                           setFormData(prev => ({
                             ...prev,
-                            roles: e.target.checked
+                            roles: checked
                               ? [...prev.roles, role.name]
                               : prev.roles.filter(r => r !== role.name)
                           }));
                         }}
                       />
-                      <label htmlFor={`role-${role.id}`}>{role.name}</label>
+                      <Label htmlFor={`role-${role.id}`}>{role.name}</Label>
                     </div>
                   ))}
                 </div>
-                <div className="flex flex-wrap gap-2 mt-2">
-                  {formData.roles.map(role => (
-                    <span key={role} className="px-2 py-1 bg-gray-100 rounded-md text-sm">
-                      {role}
-                      <button
-                        type="button"
-                        onClick={() => setFormData(prev => ({
-                          ...prev,
-                          roles: prev.roles.filter(r => r !== role)
-                        }))}
-                        className="ml-2 text-gray-500 hover:text-gray-700"
-                      >
-                        ×
-                      </button>
-                    </span>
-                  ))}
-                </div>
               </div>
               <Button type="submit" className="w-full">
                 Créer l'utilisateur