Allow only team owner to remove other members

src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx

@@ -1,15 +1,24 @@
 'use client';
+import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 import TeamMembersDataTable from './TeamMembersDataTable';
 import PageHeader from 'components/layout/PageHeader';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages } from 'components/hooks';
+import { ROLES } from 'lib/constants';
+import { useContext } from 'react';
 
 export function TeamMembersPage({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
+  const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
 
+  const canEdit = team?.teamUser?.find(
+    ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
+  );
+
   return (
     <>
       <PageHeader title={formatMessage(labels.members)} />
-      <TeamMembersDataTable teamId={teamId} allowEdit={true} />
+      <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
     </>
   );
 }

src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx

@@ -6,7 +6,7 @@ import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 export function TeamMembersTable({
   data = [],
   teamId,
-  allowEdit,
+  allowEdit = false,
 }: {
   data: any[];
   teamId: string;