Settings refactor.

src/app/(main)/settings/SettingsLayout.tsx

@@ -13,6 +13,11 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
   const { pathname } = useNavigation();
 
   const items = [
+    {
+      id: 'preferences',
+      label: formatMessage(labels.preferences),
+      url: '/settings/preferences',
+    },
     {
       id: 'profile',
       label: formatMessage(labels.profile),

src/app/(main)/settings/preferences/PreferenceSettings.tsx

@@ -0,0 +1,39 @@
+import { Column, Label } from '@umami/react-zen';
+import { useLoginQuery, useMessages } from '@/components/hooks';
+import { TimezoneSetting } from './TimezoneSetting';
+import { DateRangeSetting } from './DateRangeSetting';
+import { LanguageSetting } from './LanguageSetting';
+import { ThemeSetting } from './ThemeSetting';
+
+export function PreferenceSettings() {
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <Column width="400px" gap="6">
+      <Column>
+        <Label>{formatMessage(labels.defaultDateRange)}</Label>
+        <DateRangeSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.language)}</Label>
+        <LanguageSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.timezone)}</Label>
+        <TimezoneSetting />
+      </Column>
+
+      <Column>
+        <Label>{formatMessage(labels.theme)}</Label>
+        <ThemeSetting />
+      </Column>
+    </Column>
+  );
+}

src/app/(main)/settings/preferences/PreferencesPage.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { PreferenceSettings } from './PreferenceSettings';
+
+export function PreferencesPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Column gap>
+      <SectionHeader title={formatMessage(labels.preferences)} />
+      <PreferenceSettings />
+    </Column>
+  );
+}

src/app/(main)/settings/preferences/ThemeSetting.tsx

@@ -6,15 +6,12 @@ export function ThemeSetting() {
 
   return (
     <Row gap>
-      <Button
-        variant={theme === 'light' ? 'primary' : 'secondary'}
-        onPress={() => setTheme('light')}
-      >
+      <Button variant={theme === 'light' ? 'primary' : undefined} onPress={() => setTheme('light')}>
         <Icon>
           <Sun />
         </Icon>
       </Button>
-      <Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}>
+      <Button variant={theme === 'dark' ? 'primary' : undefined} onPress={() => setTheme('dark')}>
         <Icon>
           <Moon />
         </Icon>

src/app/(main)/settings/preferences/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import { PreferencesPage } from './PreferencesPage';
+
+export default function () {
+  return <PreferencesPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Preferences',
+};

src/app/(main)/settings/profile/PasswordChangeButton.tsx

@@ -1,4 +1,13 @@
-import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
+import {
+  Button,
+  Icon,
+  Text,
+  useToast,
+  DialogTrigger,
+  Dialog,
+  Modal,
+  Column,
+} from '@umami/react-zen';
 import { PasswordEditForm } from './PasswordEditForm';
 import { LockKeyhole } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
@@ -21,7 +30,11 @@ export function PasswordChangeButton() {
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.changePassword)}>
-          {({ close }) => <PasswordEditForm onSave={handleSave} onClose={close} />}
+          {({ close }) => (
+            <Column width="300px">
+              <PasswordEditForm onSave={handleSave} onClose={close} />
+            </Column>
+          )}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/settings/profile/ProfileSettings.tsx

@@ -1,10 +1,6 @@
 import { Row, Column, Label } from '@umami/react-zen';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
-import { TimezoneSetting } from './TimezoneSetting';
-import { DateRangeSetting } from './DateRangeSetting';
-import { LanguageSetting } from './LanguageSetting';
-import { ThemeSetting } from './ThemeSetting';
 import { PasswordChangeButton } from './PasswordChangeButton';
 
 export function ProfileSettings() {
@@ -52,26 +48,6 @@ export function ProfileSettings() {
           </Row>
         </Column>
       )}
-
-      <Column>
-        <Label>{formatMessage(labels.defaultDateRange)}</Label>
-        <DateRangeSetting />
-      </Column>
-
-      <Column>
-        <Label>{formatMessage(labels.language)}</Label>
-        <LanguageSetting />
-      </Column>
-
-      <Column>
-        <Label>{formatMessage(labels.timezone)}</Label>
-        <TimezoneSetting />
-      </Column>
-
-      <Column>
-        <Label>{formatMessage(labels.theme)}</Label>
-        <ThemeSetting />
-      </Column>
     </Column>
   );
 }

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

@@ -25,7 +25,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
       <FormField name="name" label={formatMessage(labels.name)}>
         <TextField autoComplete="off" />
       </FormField>

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

@@ -25,7 +25,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
       <FormField
         label={formatMessage(labels.accessCode)}
         name="accessCode"

src/app/(main)/settings/teams/TeamsDataTable.tsx

@@ -6,17 +6,16 @@ import { ReactNode } from 'react';
 export function TeamsDataTable({
   allowEdit,
   showActions,
-  children,
 }: {
   allowEdit?: boolean;
   showActions?: boolean;
   children?: ReactNode;
 }) {
   const { user } = useLoginQuery();
-  const queryResult = useUserTeamsQuery(user.id);
+  const query = useUserTeamsQuery(user.id);
 
   return (
-    <DataGrid query={queryResult} renderEmpty={() => children}>
+    <DataGrid query={query}>
       {({ data }) => {
         return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
       }}

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,8 +1,9 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import { Arrow, Edit } from '@/components/icons';
+import { Eye, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
 import { MenuButton } from '@/components/input/MenuButton';
+import Link from 'next/link';
 
 export function TeamsTable({
   data = [],
@@ -16,7 +17,9 @@ export function TeamsTable({
 
   return (
     <DataTable data={data}>
-      <DataColumn id="name" label={formatMessage(labels.name)} />
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {(row: any) => <Link href={`/settings/teams/${row.id}`}>{row.name}</Link>}
+      </DataColumn>
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
         {(row: any) => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
       </DataColumn>
@@ -36,12 +39,12 @@ export function TeamsTable({
                 <MenuItem href={`/teams/${id}`}>
                   <Row alignItems="center" gap>
                     <Icon>
-                      <Arrow />
+                      <Eye />
                     </Icon>
                     <Text>{formatMessage(labels.view)}</Text>
                   </Row>
                 </MenuItem>
-                <MenuItem href={`/teams/${id}/settings`}>
+                <MenuItem href={`/settings/teams/${id}`}>
                   <Row alignItems="center" gap>
                     <Icon>
                       <Edit />

src/app/(main)/settings/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)/settings/teams/[teamId]/TeamDetails.tsx

@@ -0,0 +1,59 @@
+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 } from '@/components/hooks';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { ROLES } from '@/lib/constants';
+import { Users } from '@/components/icons';
+import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
+import { TeamManage } from './TeamManage';
+import { TeamEditForm } from './TeamEditForm';
+import { TeamWebsitesDataTable } from './TeamWebsitesDataTable';
+import { TeamMembersDataTable } from './TeamMembersDataTable';
+
+export function TeamDetails({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLoginQuery();
+  const [tab, setTab] = useState('details');
+
+  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>
+      <SectionHeader title={team?.name} icon={<Users />}>
+        {!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
+      </SectionHeader>
+      <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">
+          <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>
+    </Column>
+  );
+}

src/app/(main)/settings/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 }} style={{ width: 400 }}>
+      {({ 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)/settings/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)}>
+            {({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
+          </Dialog>
+        </Modal>
+      </DialogTrigger>
+    </ActionForm>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { useMessages, useModified } from '@/components/hooks';
+import { Row, Button, Icon, Modal, DialogTrigger, Dialog, useToast } from '@umami/react-zen';
+import { TeamMemberEditForm } from './TeamMemberEditForm';
+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 (
+    <DialogTrigger>
+      <Button variant="quiet">
+        <Row alignItems="center" gap>
+          <Icon>
+            <Edit />
+          </Icon>
+        </Row>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.editMember)}>
+          {({ close }) => (
+            <TeamMemberEditForm
+              teamId={teamId}
+              userId={userId}
+              role={role}
+              onSave={handleSave}
+              onClose={close}
+            />
+          )}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/app/(main)/settings/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 }} style={{ minWidth: 400 }}>
+      <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)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx

@@ -0,0 +1,62 @@
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { useApi, useMessages, useModified } from '@/components/hooks';
+import { messages } from '@/components/messages';
+import { Trash } from '@/components/icons';
+import { Button, Icon, Modal, DialogTrigger, Dialog } from '@umami/react-zen';
+
+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 (
+    <DialogTrigger>
+      <Button variant="quiet">
+        <Icon>
+          <Trash />
+        </Icon>
+      </Button>
+      <Modal>
+        <Dialog title={formatMessage(labels.removeMember)}>
+          {({ close }) => (
+            <ConfirmationForm
+              message={formatMessage(messages.confirmRemove, {
+                target: <b key={messages.confirmRemove.id}>{userName}</b>,
+              })}
+              isLoading={isPending}
+              error={error}
+              onConfirm={handleConfirm.bind(null, close)}
+              onClose={close}
+              buttonLabel={formatMessage(labels.remove)}
+              buttonVariant="danger"
+            />
+          )}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/app/(main)/settings/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)/settings/teams/[teamId]/TeamMembersPage.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { TeamContext } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamMembersDataTable } from './TeamMembersDataTable';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { useLoginQuery, useMessages } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
+import { useContext } from 'react';
+import { Column } from '@umami/react-zen';
+
+export function TeamMembersPage({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+
+  const canEdit =
+    team?.teamUser?.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)/settings/teams/[teamId]/TeamMembersTable.tsx

@@ -0,0 +1,51 @@
+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) => {
+            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)/settings/teams/[teamId]/TeamSettingsPage.tsx

@@ -0,0 +1,11 @@
+'use client';
+import { TeamProvider } from '@/app/(main)/teams/[teamId]/TeamProvider';
+import { TeamDetails } from '@/app/(main)/settings/teams/[teamId]/TeamDetails';
+
+export function TeamSettingsPage({ teamId }: { teamId: string }) {
+  return (
+    <TeamProvider teamId={teamId}>
+      <TeamDetails teamId={teamId} />
+    </TeamProvider>
+  );
+}

src/app/(main)/settings/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)/settings/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)/settings/teams/[teamId]/TeamWebsitesTable.tsx

@@ -0,0 +1,58 @@
+import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
+import { useLoginQuery, useMessages } from '@/components/hooks';
+import { Eye, Edit } from '@/components/icons';
+import { MenuButton } from '@/components/input/MenuButton';
+import Link from 'next/link';
+
+export function TeamWebsitesTable({
+  teamId,
+  data = [],
+  allowEdit = false,
+}: {
+  teamId: string;
+  data: any[];
+  allowEdit?: boolean;
+}) {
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DataTable data={data}>
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {(row: any) => <Link href={`/settings/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>
+      <DataColumn id="action" label=" " align="end">
+        {(row: any) => {
+          const { id: websiteId } = row;
+
+          return (
+            <MenuButton>
+              <MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
+                <Row alignItems="center" gap>
+                  <Icon>
+                    <Eye />
+                  </Icon>
+                  <Text>{formatMessage(labels.view)}</Text>
+                </Row>
+              </MenuItem>
+              {allowEdit && (teamId || user?.isAdmin) && (
+                <MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
+                  <Row alignItems="center" gap>
+                    <Icon>
+                      <Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Row>
+                </MenuItem>
+              )}
+            </MenuButton>
+          );
+        }}
+      </DataColumn>
+    </DataTable>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { Metadata } from 'next';
+import { TeamSettingsPage } from './TeamSettingsPage';
+
+export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
+  const { teamId } = await params;
+
+  return <TeamSettingsPage teamId={teamId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Teams',
+};

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -1,5 +1,14 @@
 import { useMessages, useModified } from '@/components/hooks';
-import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
+import {
+  Button,
+  Icon,
+  Modal,
+  Dialog,
+  DialogTrigger,
+  Text,
+  Column,
+  useToast,
+} from '@umami/react-zen';
 import { Plus } from '@/components/icons';
 import { WebsiteAddForm } from './WebsiteAddForm';
 
@@ -24,7 +33,11 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.addWebsite)}>
-          {({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
+          {({ close }) => (
+            <Column width="300px">
+              <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
+            </Column>
+          )}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -6,7 +6,7 @@ import { Eye, SquarePen } from '@/components/icons';
 import Link from 'next/link';
 
 export interface WebsitesTableProps {
-  data: any[];
+  data: Record<string, any>[];
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
@@ -22,7 +22,8 @@ export function WebsitesTable({
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { renderUrl } = useNavigation();
+  const { renderUrl, pathname } = useNavigation();
+  const isSettings = pathname.includes('/settings');
 
   if (!data?.length) {
     return children;
@@ -31,7 +32,11 @@ export function WebsitesTable({
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>}
+        {(row: any) => (
+          <Link href={renderUrl(`${isSettings ? '/settings' : ''}/websites/${row.id}`, false)}>
+            {row.name}
+          </Link>
+        )}
       </DataColumn>
       <DataColumn id="domain" label={formatMessage(labels.domain)} />
       {showActions && (
@@ -41,7 +46,7 @@ export function WebsitesTable({
 
             return (
               <MenuButton>
-                {allowEdit && (
+                {allowView && (
                   <MenuItem href={renderUrl(`/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-view">
@@ -51,7 +56,7 @@ export function WebsitesTable({
                     </Row>
                   </MenuItem>
                 )}
-                {allowView && (
+                {allowEdit && (
                   <MenuItem href={renderUrl(`/settings/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-edit">

src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx

@@ -33,7 +33,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 420 }}>
+    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 400 }}>
       <FormField name="id" label={formatMessage(labels.websiteId)}>
         <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
       </FormField>

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { useMessages } from '@/components/hooks';
-import { Globe, Arrow } from '@/components/icons';
+import { Globe, Eye } from '@/components/icons';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
@@ -25,7 +25,7 @@ export function WebsiteSettings({
       <SectionHeader title={website?.name} icon={<Globe />}>
         <LinkButton href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Icon>
-            <Arrow />
+            <Eye />
           </Icon>
           <Text>{formatMessage(labels.view)}</Text>
         </LinkButton>
@@ -35,7 +35,7 @@ export function WebsiteSettings({
           <Tab id="details">{formatMessage(labels.details)}</Tab>
           <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
           <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
-          <Tab id="data">{formatMessage(labels.data)}</Tab>
+          <Tab id="manage">{formatMessage(labels.manage)}</Tab>
         </TabList>
         <TabPanel id="details">
           <WebsiteEditForm websiteId={websiteId} />
@@ -44,9 +44,9 @@ export function WebsiteSettings({
           <WebsiteTrackingCode websiteId={websiteId} />
         </TabPanel>
         <TabPanel id="share">
-          <WebsiteShareForm websiteId={websiteId} />
+          <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
         </TabPanel>
-        <TabPanel id="data">
+        <TabPanel id="manage">
           <WebsiteData websiteId={websiteId} />
         </TabPanel>
       </Tabs>