update api users and groups and users 9

components/users/users-table.tsx

@@ -219,19 +219,15 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
         throw new Error("Erreur lors de la mise à jour des rôles");
       }
 
-      await fetchUsers();
-      
-      setFormData({
-        username: "",
-        lastName: "",
-        firstName: "",
-        email: "",
-        password: "",
-        roles: [],
-        enabled: true,
-      });
+      setUsers(prevUsers => prevUsers.map(user => 
+        user.id === selectedUser.id 
+          ? { ...user, roles: formData.roles }
+          : user
+      ));
+
       setManageRolesDialog(false);
       setSelectedUser(null);
+      setFormData(prev => ({ ...prev, roles: [] }));
       
       toast({
         title: "Succès",
@@ -668,7 +664,13 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
         </DialogContent>
       </Dialog>
 
-      <Dialog open={manageRolesDialog} onOpenChange={setManageRolesDialog}>
+      <Dialog open={manageRolesDialog} onOpenChange={(open) => {
+        if (!open) {
+          setFormData(prev => ({ ...prev, roles: [] }));
+          setSelectedUser(null);
+        }
+        setManageRolesDialog(open);
+      }}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Gérer les rôles de {selectedUser?.username}</DialogTitle>
@@ -702,26 +704,6 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                   </div>
                 ))}
               </div>
-              <div className="flex flex-wrap gap-2 mt-4">
-                {formData.roles.map(role => (
-                  <span 
-                    key={role} 
-                    className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground"
-                  >
-                    {role}
-                    <button
-                      type="button"
-                      onClick={() => setFormData(prev => ({
-                        ...prev,
-                        roles: prev.roles.filter(r => r !== role)
-                      }))}
-                      className="ml-1.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-primary-foreground hover:bg-primary-foreground/20 focus:outline-none focus:ring-2 focus:ring-primary-foreground focus:ring-offset-2"
-                    >
-                      ×
-                    </button>
-                  </span>
-                ))}
-              </div>
             </div>
             <div className="flex justify-end space-x-2">
               <Button
@@ -729,15 +711,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
                 onClick={() => {
                   setManageRolesDialog(false);
                   setSelectedUser(null);
-                  setFormData({
-                    username: "",
-                    lastName: "",
-                    firstName: "",
-                    email: "",
-                    password: "",
-                    roles: [],
-                    enabled: true,
-                  });
+                  setFormData(prev => ({ ...prev, roles: [] }));
                 }}
               >
                 Annuler