Updated components build.

src/app/(main)/teams/TeamLeaveForm.tsx

@@ -32,7 +32,7 @@ export function TeamLeaveForm({
     <ConfirmationForm
       buttonLabel={formatMessage(labels.leave)}
       message={formatMessage(messages.confirmLeave, {
-        target: <b key={messages.confirmLeave.id}>{teamName}</b>,
+        target: teamName,
       })}
       onConfirm={handleConfirm}
       onClose={onClose}

src/app/(main)/teams/TeamProvider.tsx

@@ -1,9 +1,10 @@
 'use client';
 import { createContext, ReactNode } from 'react';
-import { useTeamQuery } from '@/components/hooks';
 import { Loading } from '@umami/react-zen';
+import { useTeamQuery } from '@/components/hooks/queries/useTeamQuery';
+import { Team } from '@/generated/prisma/client';
 
-export const TeamContext = createContext(null);
+export const TeamContext = createContext<Team>(null);
 
 export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
   const { data: team, isLoading, isFetching } = useTeamQuery(teamId);

src/app/(main)/teams/[teamId]/TeamEditForm.tsx

@@ -6,7 +6,7 @@ import {
   TextField,
   Button,
 } from '@umami/react-zen';
-import { getRandomChars } from '@/lib/crypto';
+import { getRandomChars } from '@/lib/generate';
 import { useMessages, useTeam, useUpdateQuery } from '@/components/hooks';
 
 const generateId = () => `team_${getRandomChars(16)}`;

src/app/(main)/teams/[teamId]/TeamSettings.tsx

@@ -13,7 +13,7 @@ import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
-  const team = useTeam();
+  const team: any = useTeam();
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
   const { query, pathname } = useNavigation();

src/app/(main)/teams/[teamId]/TeamWebsitesTable.tsx

@@ -1,8 +1,19 @@
-import { DataColumn, DataTable } from '@umami/react-zen';
+import { DataColumn, DataTable, Row } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import Link from 'next/link';
+import { ROLES } from '@/lib/constants';
+import { TeamMemberEditButton } from '@/app/(main)/teams/[teamId]/TeamMemberEditButton';
+import { TeamMemberRemoveButton } from '@/app/(main)/teams/[teamId]/TeamMemberRemoveButton';
 
-export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data: any[] }) {
+export function TeamWebsitesTable({
+  teamId,
+  data = [],
+  allowEdit,
+}: {
+  teamId: string;
+  data: any[];
+  allowEdit: boolean;
+}) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -14,6 +25,26 @@ export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data:
       <DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
         {(row: any) => row?.createUser?.username}
       </DataColumn>
+      {allowEdit && (
+        <DataColumn id="action" align="end">
+          {(row: any) => {
+            if (row?.role === ROLES.teamOwner) {
+              return null;
+            }
+
+            return (
+              <Row alignItems="center">
+                <TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
+                <TeamMemberRemoveButton
+                  teamId={teamId}
+                  userId={row?.user?.id}
+                  userName={row?.user?.username}
+                />
+              </Row>
+            );
+          }}
+        </DataColumn>
+      )}
     </DataTable>
   );
 }