Changed route ids to be more explicit.

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

@@ -0,0 +1,23 @@
+import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
+import { useMessages } from 'components/hooks';
+import TeamDeleteForm from '../TeamDeleteForm';
+
+export function TeamData({ teamId }: { teamId: string }) {
+  const { formatMessage, labels, messages } = useMessages();
+
+  return (
+    <ActionForm
+      label={formatMessage(labels.deleteTeam)}
+      description={formatMessage(messages.deleteTeamWarning)}
+    >
+      <ModalTrigger>
+        <Button variant="danger">{formatMessage(labels.delete)}</Button>
+        <Modal title={formatMessage(labels.deleteTeam)}>
+          {(close: () => void) => <TeamDeleteForm teamId={teamId} onClose={close} />}
+        </Modal>
+      </ModalTrigger>
+    </ActionForm>
+  );
+}
+
+export default TeamData;

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

@@ -0,0 +1,84 @@
+import {
+  SubmitButton,
+  Form,
+  FormInput,
+  FormRow,
+  FormButtons,
+  TextField,
+  Button,
+  Flexbox,
+  useToasts,
+} from 'react-basics';
+import { getRandomChars } from 'next-basics';
+import { useRef, useState } from 'react';
+import { useApi, useMessages } from 'components/hooks';
+
+const generateId = () => getRandomChars(16);
+
+export function TeamEditForm({
+  teamId,
+  data,
+  readOnly,
+}: {
+  teamId: string;
+  data?: { name: string; accessCode: string };
+  readOnly?: boolean;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/teams/${teamId}`, data),
+  });
+  const ref = useRef(null);
+  const [accessCode, setAccessCode] = useState(data.accessCode);
+  const { showToast } = useToasts();
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        showToast({ message: formatMessage(messages.saved), variant: 'success' });
+      },
+    });
+  };
+
+  const handleRegenerate = () => {
+    const code = generateId();
+    ref.current.setValue('accessCode', code, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setAccessCode(code);
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow label={formatMessage(labels.teamId)}>
+        <TextField value={teamId} readOnly allowCopy />
+      </FormRow>
+      <FormRow label={formatMessage(labels.name)}>
+        {!readOnly && (
+          <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+            <TextField />
+          </FormInput>
+        )}
+        {readOnly && data.name}
+      </FormRow>
+      <FormRow label={formatMessage(labels.accessCode)}>
+        <Flexbox gap={10}>
+          <TextField value={accessCode} readOnly allowCopy />
+          {!readOnly && (
+            <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
+          )}
+        </Flexbox>
+      </FormRow>
+      {!readOnly && (
+        <FormButtons>
+          <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+        </FormButtons>
+      )}
+    </Form>
+  );
+}
+
+export default TeamEditForm;

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

@@ -0,0 +1,45 @@
+import { useApi, useMessages } from 'components/hooks';
+import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+import { setValue } from 'store/cache';
+
+export function TeamMemberRemoveButton({
+  teamId,
+  userId,
+  disabled,
+  onSave,
+}: {
+  teamId: string;
+  userId: string;
+  disabled?: boolean;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
+  });
+
+  const handleRemoveTeamMember = () => {
+    mutate(null, {
+      onSuccess: () => {
+        setValue('team:members', Date.now());
+        onSave?.();
+      },
+    });
+  };
+
+  return (
+    <LoadingButton
+      onClick={() => handleRemoveTeamMember()}
+      disabled={disabled}
+      isLoading={isPending}
+    >
+      <Icon>
+        <Icons.Close />
+      </Icon>
+      <Text>{formatMessage(labels.remove)}</Text>
+    </LoadingButton>
+  );
+}
+
+export default TeamMemberRemoveButton;

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

@@ -0,0 +1,26 @@
+import { useApi, useFilterQuery } from 'components/hooks';
+import DataTable from 'components/common/DataTable';
+import useCache from 'store/cache';
+import TeamMembersTable from './TeamMembersTable';
+
+export function TeamMembers({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
+  const { get } = useApi();
+  const modified = useCache(state => state?.['team:members']);
+  const queryResult = useFilterQuery({
+    queryKey: ['team:members', { teamId, modified }],
+    queryFn: params => {
+      return get(`/teams/${teamId}/users`, {
+        ...params,
+      });
+    },
+    enabled: !!teamId,
+  });
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => <TeamMembersTable data={data} teamId={teamId} readOnly={readOnly} />}
+    </DataTable>
+  );
+}
+
+export default TeamMembers;

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

@@ -0,0 +1,43 @@
+import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
+import { useMessages, useLogin } from 'components/hooks';
+import { ROLES } from 'lib/constants';
+import TeamMemberRemoveButton from './TeamMemberRemoveButton';
+
+export function TeamMembersTable({
+  data = [],
+  teamId,
+  readOnly,
+}: {
+  data: any[];
+  teamId: string;
+  readOnly: boolean;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLogin();
+  const breakpoint = useBreakpoint();
+
+  const roles = {
+    [ROLES.teamOwner]: formatMessage(labels.teamOwner),
+    [ROLES.teamMember]: formatMessage(labels.teamMember),
+  };
+
+  return (
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+      <GridColumn name="username" label={formatMessage(labels.username)} />
+      <GridColumn name="role" label={formatMessage(labels.role)}>
+        {row => roles[row?.teamUser?.[0]?.role]}
+      </GridColumn>
+      <GridColumn name="action" label=" " alignment="end">
+        {row => {
+          return (
+            !readOnly &&
+            row?.teamUser?.[0]?.role !== ROLES.teamOwner &&
+            user?.id !== row?.id && <TeamMemberRemoveButton teamId={teamId} userId={row.id} />
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default TeamMembersTable;

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

@@ -0,0 +1,59 @@
+'use client';
+import { useState } from 'react';
+import { Item, Loading, Tabs, Flexbox, Text, Icon } from 'react-basics';
+import TeamsContext from 'app/(main)/teams/TeamsContext';
+import PageHeader from 'components/layout/PageHeader';
+import { ROLES } from 'lib/constants';
+import Icons from 'components/icons';
+import { useLogin, useTeam, useMessages } from 'components/hooks';
+import TeamEditForm from './TeamEditForm';
+import TeamMembers from './TeamMembers';
+import TeamWebsites from './TeamWebsites';
+import TeamData from './TeamData';
+import LinkButton from 'components/common/LinkButton';
+
+export function TeamSettings({ teamId }: { teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLogin();
+  const { data: team, isLoading } = useTeam(teamId);
+  const [tab, setTab] = useState('details');
+
+  if (isLoading) {
+    return <Loading position="page" />;
+  }
+
+  const canEdit = team?.teamUser?.find(
+    ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
+  );
+
+  return (
+    <TeamsContext.Provider value={team}>
+      <Flexbox direction="column">
+        <PageHeader title={team?.name} icon={<Icons.Users />}>
+          <LinkButton href={`/teams/${teamId}`} variant="primary">
+            <Icon>
+              <Icons.External />
+            </Icon>
+            <Text>{formatMessage(labels.view)}</Text>
+          </LinkButton>
+        </PageHeader>
+        <Tabs
+          selectedKey={tab}
+          onSelect={(value: any) => setTab(value)}
+          style={{ marginBottom: 30 }}
+        >
+          <Item key="details">{formatMessage(labels.details)}</Item>
+          <Item key="members">{formatMessage(labels.members)}</Item>
+          <Item key="websites">{formatMessage(labels.websites)}</Item>
+          <Item key="data">{formatMessage(labels.data)}</Item>
+        </Tabs>
+        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} readOnly={!canEdit} />}
+        {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
+        {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
+        {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
+      </Flexbox>
+    </TeamsContext.Provider>
+  );
+}
+
+export default TeamSettings;

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

@@ -0,0 +1,29 @@
+import { useApi, useMessages } from 'components/hooks';
+import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+
+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>
+        <Icons.Close />
+      </Icon>
+      <Text>{formatMessage(labels.remove)}</Text>
+    </LoadingButton>
+  );
+}
+
+export default TeamWebsiteRemoveButton;

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

@@ -0,0 +1,7 @@
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
+
+export function TeamWebsites({ teamId }: { teamId: string; readOnly: boolean }) {
+  return <WebsitesDataTable teamId={teamId} />;
+}
+
+export default TeamWebsites;

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

@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export function TeamWebsitesTable({
+  data = [],
+}: {
+  data: any[];
+  readOnly: boolean;
+  onRemove: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  return (
+    <GridTable data={data}>
+      <GridColumn name="name" label={formatMessage(labels.name)} />
+      <GridColumn name="domain" label={formatMessage(labels.domain)} />
+      <GridColumn name="action" label=" " alignment="end">
+        {row => {
+          const { id: websiteId } = row;
+          return (
+            <Link href={`/websites/${websiteId}`}>
+              <Button>
+                <Icon>
+                  <Icons.External />
+                </Icon>
+                <Text>{formatMessage(labels.view)}</Text>
+              </Button>
+            </Link>
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default TeamWebsitesTable;

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

@@ -0,0 +1,9 @@
+import TeamSettings from './TeamSettings';
+
+export default function ({ params: { teamId } }) {
+  if (process.env.cloudMode) {
+    return null;
+  }
+
+  return <TeamSettings teamId={teamId} />;
+}