space updates

* space UI
* space management
* space permissions
* other fixes

apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx

@@ -1,10 +1,36 @@
 import { Group, Table, Avatar, Text, Badge } from "@mantine/core";
-import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query.ts";
+import {
+  useChangeMemberRoleMutation,
+  useWorkspaceMembersQuery,
+} from "@/features/workspace/queries/workspace-query.ts";
 import { UserAvatar } from "@/components/ui/user-avatar.tsx";
 import React from "react";
+import RoleSelectMenu from "@/components/ui/role-select-menu.tsx";
+import {
+  getUserRoleLabel,
+  userRoleData,
+} from "@/features/workspace/types/user-role-data.ts";
 
 export default function WorkspaceMembersTable() {
   const { data, isLoading } = useWorkspaceMembersQuery();
+  const changeMemberRoleMutation = useChangeMemberRoleMutation();
+
+  const handleRoleChange = async (
+    userId: string,
+    currentRole: string,
+    newRole: string,
+  ) => {
+    if (newRole === currentRole) {
+      return;
+    }
+
+    const memberRoleUpdate = {
+      userId: userId,
+      role: newRole,
+    };
+
+    await changeMemberRoleMutation.mutateAsync(memberRoleUpdate);
+  };
 
   return (
     <>
@@ -39,7 +65,15 @@ export default function WorkspaceMembersTable() {
                   <Badge variant="light">Active</Badge>
                 </Table.Td>
 
-                <Table.Td>{user.role}</Table.Td>
+                <Table.Td>
+                  <RoleSelectMenu
+                    roles={userRoleData}
+                    roleName={getUserRoleLabel(user.role)}
+                    onChange={(newRole) =>
+                      handleRoleChange(user.id, user.role, newRole)
+                    }
+                  />
+                </Table.Td>
               </Table.Tr>
             ))}
           </Table.Tbody>