feat: view customize on member's role

frontend/src/app/[locale]/projects/[projectId]/settings/MembersTable.tsx

@@ -21,12 +21,13 @@ import Avatar from 'boring-avatars';
 
 type Props = {
   members: MemberType[];
+  isDisabled: boolean;
   onChangeRole: (userEdit: UserType, role: number) => void;
   onDeleteMember: (userDeleted: UserType) => void;
   messages: SettingsMessages;
 };
 
-export default function MembersTable({ members, onChangeRole, onDeleteMember, messages }: Props) {
+export default function MembersTable({ members, isDisabled, onChangeRole, onDeleteMember, messages }: Props) {
   const headerColumns = [
     { name: messages.avatar, uid: 'avatar' },
     { name: messages.email, uid: 'email', sortable: true },
@@ -71,7 +72,7 @@ export default function MembersTable({ members, onChangeRole, onDeleteMember, me
         return (
           <Dropdown>
             <DropdownTrigger>
-              <Button size="sm" variant="light" endContent={<ChevronDown size={16} />}>
+              <Button size="sm" isDisabled={isDisabled} variant="light" endContent={<ChevronDown size={16} />}>
                 <span className="w-12">{messages[memberRoles[cellValue].uid]}</span>
               </Button>
             </DropdownTrigger>
@@ -86,7 +87,13 @@ export default function MembersTable({ members, onChangeRole, onDeleteMember, me
         );
       case 'delete':
         return (
-          <Button size="sm" color="danger" variant="light" onClick={() => onDeleteMember(member.User)}>
+          <Button
+            size="sm"
+            isDisabled={isDisabled}
+            color="danger"
+            variant="light"
+            onClick={() => onDeleteMember(member.User)}
+          >
             {messages.deleteMember}
           </Button>
         );

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -69,13 +69,20 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
     <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
       <div className="w-full p-3 flex items-center justify-between">
         <h3 className="font-bold">{messages.memberManagement}</h3>
-        <Button startContent={<Plus size={16} />} size="sm" color="primary" onClick={() => setIsDialogOpen(true)}>
+        <Button
+          startContent={<Plus size={16} />}
+          size="sm"
+          color="primary"
+          isDisabled={!context.isProjectManager(Number(projectId))}
+          onClick={() => setIsDialogOpen(true)}
+        >
           {messages.addMember}
         </Button>
       </div>
 
       <MembersTable
         members={members}
+        isDisabled={!context.isProjectManager(Number(projectId))}
         onChangeRole={handleChangeRole}
         onDeleteMember={handleDeleteMember}
         messages={messages}