Fixed imports.

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

@@ -0,0 +1,42 @@
+import { useApi, useMessages } from '@/components/hooks';
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormField,
+  FormSubmitButton,
+  TextField,
+} from '@umami/react-zen';
+
+export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
+  const { formatMessage, labels } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post('/teams', data),
+  });
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave?.();
+        onClose?.();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <FormField name="name" label={formatMessage(labels.name)}>
+        <TextField autoComplete="off" />
+      </FormField>
+      <FormButtons>
+        <Button isDisabled={isPending} onPress={onClose}>
+          {formatMessage(labels.cancel)}
+        </Button>
+        <FormSubmitButton variant="primary" isDisabled={isPending}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

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

@@ -0,0 +1,42 @@
+import {
+  Form,
+  FormField,
+  FormButtons,
+  TextField,
+  Button,
+  FormSubmitButton,
+} from '@umami/react-zen';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+
+export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
+  const { formatMessage, labels } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation({ mutationFn: (data: any) => post('/teams/join', data) });
+  const { touch } = useModified();
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        touch('teams:members');
+        onSave?.();
+        onClose?.();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <FormField
+        label={formatMessage(labels.accessCode)}
+        name="accessCode"
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField autoComplete="off" />
+      </FormField>
+      <FormButtons>
+        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
+        <FormSubmitButton variant="primary">{formatMessage(labels.join)}</FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { useLoginQuery, useMessages, useModified } from '@/components/hooks';
+import { useRouter } from 'next/navigation';
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { LogOut } from '@/components/icons';
+import { TeamLeaveForm } from './TeamLeaveForm';
+
+export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
+  const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+  const { user } = useLoginQuery();
+  const { touch } = useModified();
+
+  const handleLeave = async () => {
+    touch('teams');
+    router.push('/settings/teams');
+  };
+
+  return (
+    <DialogTrigger>
+      <Button>
+        <Icon>
+          <LogOut />
+        </Icon>
+        <Text>{formatMessage(labels.leave)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.leaveTeam)} style={{ width: 400 }}>
+          {({ close }) => (
+            <TeamLeaveForm
+              teamId={teamId}
+              userId={user.id}
+              teamName={teamName}
+              onSave={handleLeave}
+              onClose={close}
+            />
+          )}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { useApi, useMessages, useModified } from '@/components/hooks';
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+
+export function TeamLeaveForm({
+  teamId,
+  userId,
+  teamName,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  userId: string;
+  teamName: string;
+  onSave: () => void;
+  onClose: () => void;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
+  });
+  const { touch } = useModified();
+
+  const handleConfirm = async () => {
+    mutate(null, {
+      onSuccess: async () => {
+        touch('teams:members');
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <ConfirmationForm
+      buttonLabel={formatMessage(labels.leave)}
+      message={formatMessage(messages.confirmLeave, {
+        target: <b key={messages.confirmLeave.id}>{teamName}</b>,
+      })}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
+import { Plus } from '@/components/icons';
+import { useMessages, useModified } from '@/components/hooks';
+import { TeamAddForm } from './TeamAddForm';
+import { messages } from '@/components/messages';
+
+export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
+  const { formatMessage, labels } = useMessages();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const handleSave = async () => {
+    toast(formatMessage(messages.saved));
+    touch('teams');
+    onSave?.();
+  };
+
+  return (
+    <DialogTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Plus />
+        </Icon>
+        <Text>{formatMessage(labels.createTeam)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.createTeam)} style={{ width: 400 }}>
+          {({ close }) => <TeamAddForm onSave={handleSave} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { Row } from '@umami/react-zen';
+import { PageHeader } from '@/components/common/PageHeader';
+import { ROLES } from '@/lib/constants';
+import { useLoginQuery, useMessages } from '@/components/hooks';
+import { TeamsJoinButton } from './TeamsJoinButton';
+import { TeamsAddButton } from './TeamsAddButton';
+
+export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLoginQuery();
+  const cloudMode = !!process.env.cloudMode;
+
+  return (
+    <PageHeader title={formatMessage(labels.teams)}>
+      <Row gap="3">
+        {!cloudMode && <TeamsJoinButton />}
+        {allowCreate && user.role !== ROLES.viewOnly && <TeamsAddButton />}
+      </Row>
+    </PageHeader>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
+import { AddUser } from '@/components/icons';
+import { useMessages, useModified } from '@/components/hooks';
+import { TeamJoinForm } from './TeamJoinForm';
+
+export function TeamsJoinButton() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const handleJoin = () => {
+    toast(formatMessage(messages.saved));
+    touch('teams');
+  };
+
+  return (
+    <DialogTrigger>
+      <Button>
+        <Icon>
+          <AddUser />
+        </Icon>
+        <Text>{formatMessage(labels.joinTeam)}</Text>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.joinTeam)} style={{ width: 400 }}>
+          {({ close }) => <TeamJoinForm onSave={handleJoin} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { TypeConfirmationForm } from '@/components/common/TypeConfirmationForm';
+import { useApi, useMessages } from '@/components/hooks';
+
+const CONFIRM_VALUE = 'DELETE';
+
+export function TeamDeleteForm({
+  teamId,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { labels, formatMessage } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}`),
+  });
+
+  const handleConfirm = async () => {
+    mutate(null, {
+      onSuccess: async () => {
+        onSave?.();
+        onClose?.();
+      },
+    });
+  };
+
+  return (
+    <TypeConfirmationForm
+      confirmationValue={CONFIRM_VALUE}
+      onConfirm={handleConfirm}
+      onClose={onClose}
+      isLoading={isPending}
+      error={error}
+      buttonLabel={formatMessage(labels.delete)}
+      buttonVariant="danger"
+    />
+  );
+}

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

@@ -0,0 +1,66 @@
+import { useContext, useState } from 'react';
+import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
+import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
+
+import { ROLES } from '@/lib/constants';
+import { Users } from '@/components/icons';
+import { TeamLeaveButton } from '@/app/(main)/teams/TeamLeaveButton';
+import { TeamManage } from './TeamManage';
+import { TeamEditForm } from './TeamEditForm';
+import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
+import { TeamMembersDataTable } from './TeamMembersDataTable';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Panel } from '@/components/common/Panel';
+
+export function TeamDetails({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLoginQuery();
+  const { query, pathname } = useNavigation();
+  const [tab, setTab] = useState(query?.tab || 'details');
+
+  const isAdmin = pathname.includes('/admin');
+
+  const isTeamOwner =
+    !!team?.teamUser?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
+    user.role !== ROLES.viewOnly;
+
+  const canEdit =
+    user.isAdmin ||
+    (!!team?.teamUser?.find(
+      ({ userId, role }) =>
+        (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
+    ) &&
+      user.role !== ROLES.viewOnly);
+
+  return (
+    <Column gap="6">
+      <PageHeader title={team?.name} icon={<Users />}>
+        {!isTeamOwner && !isAdmin && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
+      </PageHeader>
+      <Panel>
+        <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
+          <TabList>
+            <Tab id="details">{formatMessage(labels.details)}</Tab>
+            <Tab id="members">{formatMessage(labels.members)}</Tab>
+            <Tab id="websites">{formatMessage(labels.websites)}</Tab>
+            {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
+          </TabList>
+          <TabPanel id="details" style={{ width: 500 }}>
+            <TeamEditForm teamId={teamId} allowEdit={canEdit} />
+          </TabPanel>
+          <TabPanel id="members">
+            <TeamMembersDataTable teamId={teamId} allowEdit />
+          </TabPanel>
+          <TabPanel id="websites">
+            <TeamWebsitesDataTable teamId={teamId} allowEdit />
+          </TabPanel>
+          <TabPanel id="manage">
+            <TeamManage teamId={teamId} />
+          </TabPanel>
+        </Tabs>
+      </Panel>
+    </Column>
+  );
+}

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

@@ -0,0 +1,78 @@
+import {
+  Form,
+  FormField,
+  FormButtons,
+  FormSubmitButton,
+  TextField,
+  Button,
+  useToast,
+} from '@umami/react-zen';
+import { getRandomChars } from '@/lib/crypto';
+import { useContext } from 'react';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
+
+const generateId = () => `team_${getRandomChars(16)}`;
+
+export function TeamEditForm({
+  teamId,
+  allowEdit,
+  onSave,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+  onSave?: () => void;
+}) {
+  const team = useContext(TeamContext);
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/teams/${teamId}`, data),
+  });
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        touch('teams');
+        touch(`teams:${teamId}`);
+        toast(formatMessage(messages.saved));
+        onSave?.();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
+      {({ setValue }) => {
+        return (
+          <>
+            <FormField name="id" label={formatMessage(labels.teamId)}>
+              <TextField isReadOnly allowCopy />
+            </FormField>
+            <FormField
+              name="name"
+              label={formatMessage(labels.name)}
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField isReadOnly={!allowEdit} />
+            </FormField>
+            <FormField name="accessCode" label={formatMessage(labels.accessCode)}>
+              <TextField isReadOnly allowCopy />
+            </FormField>
+            {allowEdit && (
+              <FormButtons justifyContent="space-between">
+                <Button onPress={() => setValue('accessCode', generateId(), { shouldDirty: true })}>
+                  {formatMessage(labels.regenerate)}
+                </Button>
+                <FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
+              </FormButtons>
+            )}
+          </>
+        );
+      }}
+    </Form>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { useMessages, useModified } from '@/components/hooks';
+import { useRouter } from 'next/navigation';
+import { Button, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
+import { ActionForm } from '@/components/common/ActionForm';
+import { TeamDeleteForm } from './TeamDeleteForm';
+
+export function TeamManage({ teamId }: { teamId: string }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const router = useRouter();
+  const { touch } = useModified();
+
+  const handleLeave = async () => {
+    touch('teams');
+    router.push('/settings/teams');
+  };
+
+  return (
+    <ActionForm
+      label={formatMessage(labels.deleteTeam)}
+      description={formatMessage(messages.deleteTeamWarning)}
+    >
+      <DialogTrigger>
+        <Button variant="danger">{formatMessage(labels.delete)}</Button>
+        <Modal>
+          <Dialog title={formatMessage(labels.deleteTeam)} style={{ width: 400 }}>
+            {({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
+          </Dialog>
+        </Modal>
+      </DialogTrigger>
+    </ActionForm>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { useMessages, useModified } from '@/components/hooks';
+import { Dialog, useToast } from '@umami/react-zen';
+import { TeamMemberEditForm } from './TeamMemberEditForm';
+import { ActionButton } from '@/components/input/ActionButton';
+import { Edit } from '@/components/icons';
+
+export function TeamMemberEditButton({
+  teamId,
+  userId,
+  role,
+  onSave,
+}: {
+  teamId: string;
+  userId: string;
+  role: string;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const handleSave = () => {
+    touch('teams:members');
+    toast(formatMessage(messages.saved));
+    onSave?.();
+  };
+
+  return (
+    <ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
+      <Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
+        {({ close }) => (
+          <TeamMemberEditForm
+            teamId={teamId}
+            userId={userId}
+            role={role}
+            onSave={handleSave}
+            onClose={close}
+          />
+        )}
+      </Dialog>
+    </ActionButton>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { useApi, useMessages } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
+import {
+  Button,
+  Select,
+  Form,
+  FormButtons,
+  FormField,
+  ListItem,
+  FormSubmitButton,
+} from '@umami/react-zen';
+
+export function TeamMemberEditForm({
+  teamId,
+  userId,
+  role,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  userId: string;
+  role: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post(`/teams/${teamId}/users/${userId}`, data),
+  });
+  const { formatMessage, labels } = useMessages();
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }}>
+      <FormField
+        name="role"
+        rules={{ required: formatMessage(labels.required) }}
+        label={formatMessage(labels.role)}
+      >
+        <Select>
+          <ListItem id={ROLES.teamManager}>{formatMessage(labels.manager)}</ListItem>
+          <ListItem id={ROLES.teamMember}>{formatMessage(labels.member)}</ListItem>
+          <ListItem id={ROLES.teamViewOnly}>{formatMessage(labels.viewOnly)}</ListItem>
+        </Select>
+      </FormField>
+
+      <FormButtons>
+        <Button isDisabled={isPending} onPress={onClose}>
+          {formatMessage(labels.cancel)}
+        </Button>
+        <FormSubmitButton variant="primary" isDisabled={false}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+import { messages } from '@/components/messages';
+import { Trash } from '@/components/icons';
+import { Dialog } from '@umami/react-zen';
+import { ActionButton } from '@/components/input/ActionButton';
+
+export function TeamMemberRemoveButton({
+  teamId,
+  userId,
+  userName,
+  onSave,
+}: {
+  teamId: string;
+  userId: string;
+  userName: string;
+  disabled?: boolean;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
+  });
+  const { touch } = useModified();
+
+  const handleConfirm = (close: () => void) => {
+    mutate(null, {
+      onSuccess: () => {
+        touch('teams:members');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ActionButton title={formatMessage(labels.delete)} icon={<Trash />}>
+      <Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
+        {({ close }) => (
+          <ConfirmationForm
+            message={formatMessage(messages.confirmRemove, {
+              target: userName,
+            })}
+            isLoading={isPending}
+            error={error}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+            buttonLabel={formatMessage(labels.remove)}
+            buttonVariant="danger"
+          />
+        )}
+      </Dialog>
+    </ActionButton>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { DataGrid } from '@/components/common/DataGrid';
+import { TeamMembersTable } from './TeamMembersTable';
+import { useTeamMembersQuery } from '@/components/hooks';
+
+export function TeamMembersDataTable({
+  teamId,
+  allowEdit = false,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+}) {
+  const queryResult = useTeamMembersQuery(teamId);
+
+  return (
+    <DataGrid query={queryResult} allowSearch>
+      {({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
+    </DataGrid>
+  );
+}

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

@@ -0,0 +1,25 @@
+'use client';
+import { TeamMembersDataTable } from './TeamMembersDataTable';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { useLoginQuery, useMessages, useTeam } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
+import { Column } from '@umami/react-zen';
+
+export function TeamMembersPage({ teamId }: { teamId: string }) {
+  const team = useTeam();
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+
+  const canEdit =
+    team?.members?.find(
+      ({ userId, role }) =>
+        (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
+    ) && user.role !== ROLES.viewOnly;
+
+  return (
+    <Column gap>
+      <SectionHeader title={formatMessage(labels.members)} />
+      <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
+    </Column>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { DataColumn, DataTable, Row } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
+import { TeamMemberRemoveButton } from './TeamMemberRemoveButton';
+import { TeamMemberEditButton } from './TeamMemberEditButton';
+
+export function TeamMembersTable({
+  data = [],
+  teamId,
+  allowEdit = false,
+}: {
+  data: any[];
+  teamId: string;
+  allowEdit: boolean;
+}) {
+  const { formatMessage, labels } = useMessages();
+
+  const roles = {
+    [ROLES.teamOwner]: formatMessage(labels.teamOwner),
+    [ROLES.teamManager]: formatMessage(labels.teamManager),
+    [ROLES.teamMember]: formatMessage(labels.teamMember),
+    [ROLES.teamViewOnly]: formatMessage(labels.viewOnly),
+  };
+
+  return (
+    <DataTable data={data}>
+      <DataColumn id="username" label={formatMessage(labels.username)}>
+        {(row: any) => row?.user?.username}
+      </DataColumn>
+      <DataColumn id="role" label={formatMessage(labels.role)}>
+        {(row: any) => roles[row?.role]}
+      </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>
+  );
+}

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

@@ -0,0 +1,20 @@
+'use client';
+import { createContext, ReactNode } from 'react';
+import { useTeamQuery } from '@/components/hooks';
+import { Loading } from '@umami/react-zen';
+
+export const TeamContext = createContext(null);
+
+export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
+  const { data: team, isLoading, isFetching } = useTeamQuery(teamId);
+
+  if (isFetching && isLoading) {
+    return <Loading position="page" />;
+  }
+
+  if (!team) {
+    return null;
+  }
+
+  return <TeamContext.Provider value={team}>{children}</TeamContext.Provider>;
+}

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

@@ -0,0 +1,28 @@
+import { useApi, useMessages } from '@/components/hooks';
+import { Icon, LoadingButton, Text } from '@umami/react-zen';
+import { Close } from '@/components/icons';
+
+export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/websites/${websiteId}`),
+  });
+
+  const handleRemoveTeamMember = async () => {
+    mutate(null, {
+      onSuccess: () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isPending}>
+      <Icon>
+        <Close />
+      </Icon>
+      <Text>{formatMessage(labels.remove)}</Text>
+    </LoadingButton>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { DataGrid } from '@/components/common/DataGrid';
+import { useTeamWebsitesQuery } from '@/components/hooks';
+import { TeamWebsitesTable } from './TeamWebsitesTable';
+
+export function TeamWebsitesDataTable({
+  teamId,
+  allowEdit = false,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+}) {
+  const queryResult = useTeamWebsitesQuery(teamId);
+
+  return (
+    <DataGrid query={queryResult} allowSearch>
+      {({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
+    </DataGrid>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { DataColumn, DataTable } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import Link from 'next/link';
+
+export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data: any[] }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DataTable data={data}>
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {(row: any) => <Link href={`/teams/${teamId}/websites/${row.id}`}>{row.name}</Link>}
+      </DataColumn>
+      <DataColumn id="domain" label={formatMessage(labels.domain)} />
+      <DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
+        {(row: any) => row?.createUser?.username}
+      </DataColumn>
+    </DataTable>
+  );
+}