Converted user and website settings.

2026-02-06 21:57:16 +01:00 · 2025-02-21 16:55:05 -08:00 · 2025-02-21 16:55:05 -08:00 · b5c6194f36
commit b5c6194f36
parent 4c24e54fdd
59 changed files with 363 additions and 554 deletions
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@ -14,7 +14,7 @@ export function App({ children }) {
  const pathname = usePathname();

  if (isLoading) {
-    return <Loading />;
+    return <Loading position="page" />;
  }

  if (error) {
--- a/src/app/(main)/console/[[...websiteId]]/page.tsx
+++ b/src/app/(main)/console/[[...websiteId]]/page.tsx
@ -5,7 +5,7 @@ async function getEnabled() {
  return !!process.env.ENABLE_TEST_CONSOLE;
 }

-export default async function ({ params }: { params: { websiteId: string } }) {
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
  const { websiteId } = await params;

  const enabled = await getEnabled();
--- a/src/app/(main)/reports/ReportsDataTable.tsx
+++ b/src/app/(main)/reports/ReportsDataTable.tsx
@ -1,6 +1,6 @@
 import { useReports } from '@/components/hooks';
 import { ReportsTable } from './ReportsTable';
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';

 export function ReportsDataTable({
@ -15,8 +15,8 @@ export function ReportsDataTable({
  const queryResult = useReports({ websiteId, teamId });

  return (
-    <DataTable queryResult={queryResult} renderEmpty={() => children}>
+    <DataGrid queryResult={queryResult} renderEmpty={() => children}>
      {({ data }) => <ReportsTable data={data} showDomain={!websiteId} />}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/reports/[reportId]/page.tsx
+++ b/src/app/(main)/reports/[reportId]/page.tsx
@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { ReportPage } from './ReportPage';

-export default async function ({ params }: { params: { reportId: string } }) {
+export default async function ({ params }: { params: Promise<{ reportId: string }> }) {
  const { reportId } = await params;

  return <ReportPage reportId={reportId} />;
--- a/src/app/(main)/settings/layout.tsx
+++ b/src/app/(main)/settings/layout.tsx
@ -1,5 +1,5 @@
-import { SettingsLayout } from './SettingsLayout';
 import { Metadata } from 'next';
+import { SettingsLayout } from './SettingsLayout';

 export default function ({ children }) {
  if (process.env.cloudMode) {
--- a/src/app/(main)/settings/teams/TeamsDataTable.tsx
+++ b/src/app/(main)/settings/teams/TeamsDataTable.tsx
@ -1,4 +1,4 @@
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { TeamsTable } from '@/app/(main)/settings/teams/TeamsTable';
 import { useLogin, useTeams } from '@/components/hooks';
 import { ReactNode } from 'react';
@ -16,10 +16,10 @@ export function TeamsDataTable({
  const queryResult = useTeams(user.id);

  return (
-    <DataTable queryResult={queryResult} renderEmpty={() => children}>
+    <DataGrid queryResult={queryResult} renderEmpty={() => children}>
      {({ data }) => {
        return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
      }}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/settings/users/UserAddButton.tsx
+++ b/src/app/(main)/settings/users/UserAddButton.tsx
@ -1,29 +1,40 @@
-import { Button, Icon, Text, Modal, Icons, ModalTrigger, useToasts } from 'react-basics';
+import {
+  Button,
+  Icon,
+  Text,
+  Modal,
+  Icons,
+  DialogTrigger,
+  Dialog,
+  useToast,
+} from '@umami/react-zen';
 import { UserAddForm } from './UserAddForm';
 import { useMessages, useModified } from '@/components/hooks';

 export function UserAddButton({ onSave }: { onSave?: () => void }) {
  const { formatMessage, labels, messages } = useMessages();
-  const { showToast } = useToasts();
+  const { toast } = useToast();
  const { touch } = useModified();

  const handleSave = () => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    toast(formatMessage(messages.saved));
    touch('users');
    onSave?.();
  };

  return (
-    <ModalTrigger>
+    <DialogTrigger>
      <Button variant="primary">
        <Icon>
          <Icons.Plus />
        </Icon>
        <Text>{formatMessage(labels.createUser)}</Text>
      </Button>
-      <Modal title={formatMessage(labels.createUser)}>
-        {(close: () => void) => <UserAddForm onSave={handleSave} onClose={close} />}
+      <Modal>
+        <Dialog title={formatMessage(labels.createUser)}>
+          {({ close }) => <UserAddForm onSave={handleSave} onClose={close} />}
+        </Dialog>
      </Modal>
-    </ModalTrigger>
+    </DialogTrigger>
  );
 }
--- a/src/app/(main)/settings/users/UserDeleteButton.tsx
+++ b/src/app/(main)/settings/users/UserDeleteButton.tsx
@ -1,4 +1,4 @@
-import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
+import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
 import { useMessages, useLogin } from '@/components/hooks';
 import { UserDeleteForm } from './UserDeleteForm';

@ -15,18 +15,20 @@ export function UserDeleteButton({
  const { user } = useLogin();

  return (
-    <ModalTrigger disabled={userId === user?.id}>
-      <Button disabled={userId === user?.id} variant="quiet">
-        <Icon>
+    <DialogTrigger>
+      <Button isDisabled={userId === user?.id}>
+        <Icon size="sm">
          <Icons.Trash />
        </Icon>
        <Text>{formatMessage(labels.delete)}</Text>
      </Button>
-      <Modal title={formatMessage(labels.deleteUser)}>
-        {(close: () => void) => (
-          <UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
-        )}
+      <Modal>
+        <Dialog title={formatMessage(labels.deleteUser)}>
+          {({ close }) => (
+            <UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
+          )}
+        </Dialog>
      </Modal>
-    </ModalTrigger>
+    </DialogTrigger>
  );
 }
--- a/src/app/(main)/settings/users/UserDeleteForm.tsx
+++ b/src/app/(main)/settings/users/UserDeleteForm.tsx
@ -1,3 +1,4 @@
+import { useToast } from '@umami/react-zen';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { ConfirmationForm } from '@/components/common/ConfirmationForm';

@ -6,11 +7,13 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
  const { del, useMutation } = useApi();
  const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
  const { touch } = useModified();
+  const { toast } = useToast();

  const handleConfirm = async () => {
    mutate(null, {
      onSuccess: async () => {
        touch('users');
+        toast(formatMessage(messages.successMessage));
        onSave?.();
        onClose?.();
      },
@ -23,6 +26,7 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
      onConfirm={handleConfirm}
      onClose={onClose}
      buttonLabel={formatMessage(labels.delete)}
+      buttonVariant="danger"
      isLoading={isPending}
      error={error}
    />
--- a/src/app/(main)/settings/users/UsersDataTable.tsx
+++ b/src/app/(main)/settings/users/UsersDataTable.tsx
@ -1,4 +1,4 @@
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { useUsers } from '@/components/hooks';
 import { UsersTable } from './UsersTable';
 import { ReactNode } from 'react';
@ -13,8 +13,8 @@ export function UsersDataTable({
  const queryResult = useUsers();

  return (
-    <DataTable queryResult={queryResult} renderEmpty={() => children}>
+    <DataGrid queryResult={queryResult} renderEmpty={() => children}>
      {({ data }) => <UsersTable data={data} showActions={showActions} />}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/settings/users/UsersTable.tsx
+++ b/src/app/(main)/settings/users/UsersTable.tsx
@ -1,9 +1,9 @@
-import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import { Row, Button, Text, Icon, Icons, DataTable, DataColumn } from '@umami/react-zen';
+import Link from 'next/link';
 import { formatDistance } from 'date-fns';
 import { ROLES } from '@/lib/constants';
 import { useMessages, useLocale } from '@/components/hooks';
 import { UserDeleteButton } from './UserDeleteButton';
-import { LinkButton } from '@/components/common/LinkButton';

 export function UsersTable({
  data = [],
@ -16,44 +16,46 @@ export function UsersTable({
  const { dateLocale } = useLocale();

  return (
-    <GridTable data={data}>
-      <GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
-      <GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
-        {row =>
+    <DataTable data={data}>
+      <DataColumn id="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
+      <DataColumn id="role" label={formatMessage(labels.role)} style={{ maxWidth: 60 }}>
+        {(row: any) =>
          formatMessage(
            labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
          )
        }
-      </GridColumn>
-      <GridColumn name="created" label={formatMessage(labels.created)} width={'150px'}>
-        {row =>
+      </DataColumn>
+      <DataColumn id="created" label={formatMessage(labels.created)} style={{ maxWidth: 60 }}>
+        {(row: any) =>
          formatDistance(new Date(row.createdAt), new Date(), {
            addSuffix: true,
            locale: dateLocale,
          })
        }
-      </GridColumn>
-      <GridColumn name="websites" label={formatMessage(labels.websites)} width={'120px'}>
-        {row => row._count.website}
-      </GridColumn>
+      </DataColumn>
+      <DataColumn id="websites" label={formatMessage(labels.websites)} style={{ maxWidth: 60 }}>
+        {(row: any) => row._count.websiteUser}
+      </DataColumn>
      {showActions && (
-        <GridColumn name="action" label=" " alignment="end">
-          {row => {
+        <DataColumn id="action" align="end">
+          {(row: any) => {
            const { id, username } = row;
            return (
-              <>
+              <Row gap="3">
                <UserDeleteButton userId={id} username={username} />
-                <LinkButton href={`/settings/users/${id}`}>
-                  <Icon>
-                    <Icons.Edit />
-                  </Icon>
-                  <Text>{formatMessage(labels.edit)}</Text>
-                </LinkButton>
-              </>
+                <Button asChild>
+                  <Link href={`/settings/users/${id}`}>
+                    <Icon>
+                      <Icons.Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Link>
+                </Button>
+              </Row>
            );
          }}
-        </GridColumn>
+        </DataColumn>
      )}
-    </GridTable>
+    </DataTable>
  );
 }
--- a/src/app/(main)/settings/users/[userId]/UserEditForm.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserEditForm.tsx
@ -1,22 +1,27 @@
 import {
-  Dropdown,
-  Item,
+  Select,
+  ListItem,
  Form,
-  FormRow,
+  FormField,
  FormButtons,
-  FormInput,
  TextField,
-  SubmitButton,
+  FormSubmitButton,
  PasswordField,
-} from 'react-basics';
-import { useApi, useLogin, useMessages } from '@/components/hooks';
+  useToast,
+} from '@umami/react-zen';
+import { useApi, useLogin, useMessages, useModified } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
-import { useContext, useRef } from 'react';
+import { useContext } from 'react';
 import { UserContext } from './UserProvider';

 export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () => void }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getMessage } = useMessages();
  const { post, useMutation } = useApi();
+  const user = useContext(UserContext);
+  const { user: login } = useLogin();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
  const { mutate, error } = useMutation({
    mutationFn: ({
      username,
@ -28,61 +33,47 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
      role: string;
    }) => post(`/users/${userId}`, { username, password, role }),
  });
-  const ref = useRef(null);
-  const user = useContext(UserContext);
-  const { user: login } = useLogin();

  const handleSubmit = async (data: any) => {
    mutate(data, {
      onSuccess: async () => {
-        ref.current.reset(data);
+        toast(formatMessage(messages.saved));
+        touch(`user:${user.id}`);
        onSave?.();
      },
    });
  };

-  const renderValue = (value: string) => {
-    if (value === ROLES.user) {
-      return formatMessage(labels.user);
-    }
-    if (value === ROLES.admin) {
-      return formatMessage(labels.admin);
-    }
-    if (value === ROLES.viewOnly) {
-      return formatMessage(labels.viewOnly);
-    }
-  };
-
  return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error} values={user} style={{ width: 300 }}>
-      <FormRow label={formatMessage(labels.username)}>
-        <FormInput name="username">
-          <TextField />
-        </FormInput>
-      </FormRow>
-      <FormRow label={formatMessage(labels.password)}>
-        <FormInput
-          name="password"
-          rules={{
-            minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
-          }}
-        >
-          <PasswordField autoComplete="new-password" />
-        </FormInput>
-      </FormRow>
+    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
+      <FormField name="username" label={formatMessage(labels.username)}>
+        <TextField />
+      </FormField>
+      <FormField
+        name="password"
+        label={formatMessage(labels.password)}
+        rules={{
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+        }}
+      >
+        <PasswordField autoComplete="new-password" />
+      </FormField>
+
      {user.id !== login.id && (
-        <FormRow label={formatMessage(labels.role)}>
-          <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
-            <Dropdown renderValue={renderValue}>
-              <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
-              <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
-              <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
-            </Dropdown>
-          </FormInput>
-        </FormRow>
+        <FormField
+          name="role"
+          label={formatMessage(labels.role)}
+          rules={{ required: formatMessage(labels.required) }}
+        >
+          <Select defaultSelectedKey={user.role}>
+            <ListItem id={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</ListItem>
+            <ListItem id={ROLES.user}>{formatMessage(labels.user)}</ListItem>
+            <ListItem id={ROLES.admin}>{formatMessage(labels.admin)}</ListItem>
+          </Select>
+        </FormField>
      )}
      <FormButtons>
-        <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+        <FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
      </FormButtons>
    </Form>
  );
--- a/src/app/(main)/settings/users/[userId]/UserPage.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserPage.tsx
@ -2,7 +2,7 @@
 import { UserSettings } from './UserSettings';
 import { UserProvider } from './UserProvider';

-export default function ({ userId }: { userId: string }) {
+export function UserPage({ userId }: { userId: string }) {
  return (
    <UserProvider userId={userId}>
      <UserSettings userId={userId} />
--- a/src/app/(main)/settings/users/[userId]/UserProvider.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserProvider.tsx
@ -1,6 +1,6 @@
 import { createContext, ReactNode, useEffect } from 'react';
+import { Loading } from '@umami/react-zen';
 import { useModified, useUser } from '@/components/hooks';
-import { Loading } from 'react-basics';

 export const UserContext = createContext(null);

@ -18,5 +18,5 @@ export function UserProvider({ userId, children }: { userId: string; children: R
    return <Loading position="page" />;
  }

-  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
+  return <UserContext.Provider value={{ ...user, modified }}>{children}</UserContext.Provider>;
 }
--- a/src/app/(main)/settings/users/[userId]/UserSettings.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserSettings.tsx
@ -1,46 +1,31 @@
-import { Key, useContext, useState } from 'react';
-import { Item, Tabs, useToasts } from 'react-basics';
+import { useContext } from 'react';
+import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 import { UserEditForm } from './UserEditForm';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { useMessages } from '@/components/hooks';
 import { UserWebsites } from './UserWebsites';
 import { UserContext } from './UserProvider';
-import { Breadcrumb } from '@/components/common/Breadcrumb';

 export function UserSettings({ userId }: { userId: string }) {
-  const { formatMessage, labels, messages } = useMessages();
-  const [tab, setTab] = useState<Key>('details');
+  const { formatMessage, labels } = useMessages();
  const user = useContext(UserContext);
-  const { showToast } = useToasts();
-
-  const handleSave = () => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-  };
-
-  const breadcrumb = (
-    <Breadcrumb
-      data={[
-        {
-          label: formatMessage(labels.users),
-          url: '/settings/users',
-        },
-        {
-          label: user.username,
-        },
-      ]}
-    />
-  );

  return (
    <>
-      <PageHeader title={user?.username} icon={<Icons.User />} breadcrumb={breadcrumb} />
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="details">{formatMessage(labels.details)}</Item>
-        <Item key="websites">{formatMessage(labels.websites)}</Item>
+      <PageHeader title={user?.username} icon={<Icons.User />} />
+      <Tabs>
+        <TabList>
+          <Tab id="details">{formatMessage(labels.details)}</Tab>
+          <Tab id="websites">{formatMessage(labels.websites)}</Tab>
+        </TabList>
+        <TabPanel id="details">
+          <UserEditForm userId={userId} />
+        </TabPanel>
+        <TabPanel id="websites">
+          <UserWebsites userId={userId} />
+        </TabPanel>
      </Tabs>
-      {tab === 'details' && <UserEditForm userId={userId} onSave={handleSave} />}
-      {tab === 'websites' && <UserWebsites userId={userId} />}
    </>
  );
 }
--- a/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
+++ b/src/app/(main)/settings/users/[userId]/UserWebsites.tsx
@ -1,15 +1,15 @@
 import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable';
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { useWebsites } from '@/components/hooks';

 export function UserWebsites({ userId }) {
  const queryResult = useWebsites({ userId });

  return (
-    <DataTable queryResult={queryResult}>
+    <DataGrid queryResult={queryResult}>
      {({ data }) => (
        <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
      )}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/settings/users/[userId]/page.tsx
+++ b/src/app/(main)/settings/users/[userId]/page.tsx
@ -1,7 +1,7 @@
 import { UserPage } from './UserPage';
 import { Metadata } from 'next';

-export default async function ({ params }: { params: { userId: string } }) {
+export default async function ({ params }: { params: Promise<{ userId: string }> }) {
  const { userId } = await params;

  return <UserPage userId={userId} />;
--- a/src/app/(main)/settings/websites/WebsitesDataTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesDataTable.tsx
@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { WebsitesTable } from '@/app/(main)/settings/websites/WebsitesTable';
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { useWebsites } from '@/components/hooks';

 export function WebsitesDataTable({
@ -19,7 +19,7 @@ export function WebsitesDataTable({
  const queryResult = useWebsites({ teamId });

  return (
-    <DataTable queryResult={queryResult} renderEmpty={() => children}>
+    <DataGrid queryResult={queryResult} renderEmpty={() => children}>
      {({ data }) => (
        <WebsitesTable
          teamId={teamId}
@ -29,6 +29,6 @@ export function WebsitesDataTable({
          allowView={allowView}
        />
      )}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/settings/websites/WebsitesSettingsPage.tsx
+++ b/src/app/(main)/settings/websites/WebsitesSettingsPage.tsx
@ -10,7 +10,7 @@ export function WebsitesSettingsPage({ teamId }: { teamId: string }) {

  return (
    <>
-      <WebsitesHeader teamId={teamId} allowCreate={canCreate} />
+      <WebsitesHeader allowCreate={canCreate} />
      <WebsitesDataTable teamId={teamId} />
    </>
  );
--- a/src/app/(main)/settings/websites/WebsitesTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesTable.tsx
@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import { Row, Text, Icon, Icons, DataTable, DataColumn, Button } from '@umami/react-zen';
+import Link from 'next/link';
 import { useMessages, useTeamUrl } from '@/components/hooks';
-import { LinkButton } from '@/components/common/LinkButton';

 export interface WebsitesTableProps {
  data: any[];
@ -27,37 +27,41 @@ export function WebsitesTable({
  }

  return (
-    <GridTable data={data}>
-      <GridColumn name="name" label={formatMessage(labels.name)} />
-      <GridColumn name="domain" label={formatMessage(labels.domain)} />
+    <DataTable data={data}>
+      <DataColumn id="name" label={formatMessage(labels.name)} />
+      <DataColumn id="domain" label={formatMessage(labels.domain)} />
      {showActions && (
-        <GridColumn name="action" label=" " alignment="end">
-          {row => {
-            const { id: websiteId } = row;
+        <DataColumn id="action" label=" " align="end">
+          {(row: any) => {
+            const websiteId = row.id;

            return (
-              <>
+              <Row gap="3">
                {allowEdit && (
-                  <LinkButton href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
-                    <Icon data-test="link-button-edit">
-                      <Icons.Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </LinkButton>
+                  <Button asChild>
+                    <Link href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
+                      <Icon data-test="link-button-edit">
+                        <Icons.Edit />
+                      </Icon>
+                      <Text>{formatMessage(labels.edit)}</Text>
+                    </Link>
+                  </Button>
                )}
                {allowView && (
-                  <LinkButton href={renderTeamUrl(`/websites/${websiteId}`)}>
-                    <Icon>
-                      <Icons.ArrowRight />
-                    </Icon>
-                    <Text>{formatMessage(labels.view)}</Text>
-                  </LinkButton>
+                  <Button asChild>
+                    <Link href={renderTeamUrl(`/websites/${websiteId}`)}>
+                      <Icon data-test="link-button-view">
+                        <Icons.Arrow />
+                      </Icon>
+                      <Text>{formatMessage(labels.view)}</Text>
+                    </Link>
+                  </Button>
                )}
-              </>
+              </Row>
            );
          }}
-        </GridColumn>
+        </DataColumn>
      )}
-    </GridTable>
+    </DataTable>
  );
 }
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx
@ -1,5 +1,12 @@
-import { useContext, useRef } from 'react';
-import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
+import { useContext } from 'react';
+import {
+  FormSubmitButton,
+  Form,
+  FormField,
+  FormButtons,
+  TextField,
+  useToast,
+} from '@umami/react-zen';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { DOMAIN_REGEX } from '@/lib/constants';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
@ -8,16 +15,17 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
  const website = useContext(WebsiteContext);
  const { formatMessage, labels, messages } = useMessages();
  const { post, useMutation } = useApi();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
  const { mutate, error } = useMutation({
    mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
  });
-  const ref = useRef(null);
-  const { touch } = useModified();

  const handleSubmit = async (data: any) => {
    mutate(data, {
      onSuccess: async () => {
-        ref.current.reset(data);
+        toast(formatMessage(messages.saved));
        touch(`website:${website.id}`);
        onSave?.();
      },
@ -25,38 +33,36 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
  };

  return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error} values={website}>
-      <FormRow label={formatMessage(labels.websiteId)}>
-        <TextField data-test="text-field-websiteId" value={website?.id} readOnly allowCopy />
-      </FormRow>
-      <FormRow label={formatMessage(labels.name)}>
-        <FormInput
-          data-test="input-name"
-          name="name"
-          rules={{ required: formatMessage(labels.required) }}
-        >
-          <TextField />
-        </FormInput>
-      </FormRow>
-      <FormRow label={formatMessage(labels.domain)}>
-        <FormInput
-          data-test="input-domain"
-          name="domain"
-          rules={{
-            required: formatMessage(labels.required),
-            pattern: {
-              value: DOMAIN_REGEX,
-              message: formatMessage(messages.invalidDomain),
-            },
-          }}
-        >
-          <TextField />
-        </FormInput>
-      </FormRow>
+    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 420 }}>
+      <FormField name="id" label={formatMessage(labels.websiteId)}>
+        <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
+      </FormField>
+      <FormField
+        label={formatMessage(labels.name)}
+        data-test="input-name"
+        name="name"
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField />
+      </FormField>
+      <FormField
+        label={formatMessage(labels.domain)}
+        data-test="input-domain"
+        name="domain"
+        rules={{
+          required: formatMessage(labels.required),
+          pattern: {
+            value: DOMAIN_REGEX,
+            message: formatMessage(messages.invalidDomain),
+          },
+        }}
+      >
+        <TextField />
+      </FormField>
      <FormButtons>
-        <SubmitButton data-test="button-submit" variant="primary">
+        <FormSubmitButton data-test="button-submit" variant="primary">
          {formatMessage(labels.save)}
-        </SubmitButton>
+        </FormSubmitButton>
      </FormButtons>
    </Form>
  );
--- a/src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx
@ -1,11 +1,10 @@
+import { useContext } from 'react';
+import { Button, Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
+import Link from 'next/link';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
-import { Breadcrumb } from '@/components/common/Breadcrumb';
 import { useMessages } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { PageHeader } from '@/components/layout/PageHeader';
-import Link from 'next/link';
-import { Key, useContext, useState } from 'react';
-import { Button, Icon, Item, Tabs, Text, useToasts } from 'react-basics';
 import { ShareUrl } from './ShareUrl';
 import { TrackingCode } from './TrackingCode';
 import { WebsiteData } from './WebsiteData';
@ -19,31 +18,11 @@ export function WebsiteSettings({
  openExternal?: boolean;
 }) {
  const website = useContext(WebsiteContext);
-  const { formatMessage, labels, messages } = useMessages();
-  const [tab, setTab] = useState<Key>('details');
-  const { showToast } = useToasts();
-
-  const handleSave = () => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-  };
-
-  const breadcrumb = (
-    <Breadcrumb
-      data={[
-        {
-          label: formatMessage(labels.websites),
-          url: website.teamId ? `/teams/${website.teamId}/settings/websites` : '/settings/websites',
-        },
-        {
-          label: website.name,
-        },
-      ]}
-    />
-  );
+  const { formatMessage, labels } = useMessages();

  return (
    <>
-      <PageHeader title={website?.name} icon={<Icons.Globe />} breadcrumb={breadcrumb}>
+      <PageHeader title={website?.name} icon={<Icons.Globe />}>
        <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
          <Button variant="primary">
            <Icon>
@ -53,16 +32,26 @@ export function WebsiteSettings({
          </Button>
        </Link>
      </PageHeader>
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
-        <Item key="details">{formatMessage(labels.details)}</Item>
-        <Item key="tracking">{formatMessage(labels.trackingCode)}</Item>
-        <Item key="share">{formatMessage(labels.shareUrl)}</Item>
-        <Item key="data">{formatMessage(labels.data)}</Item>
+      <Tabs>
+        <TabList>
+          <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>
+        </TabList>
+        <TabPanel id="details">
+          <WebsiteEditForm websiteId={websiteId} />
+        </TabPanel>
+        <TabPanel id="tracking">
+          <TrackingCode websiteId={websiteId} />
+        </TabPanel>
+        <TabPanel id="share">
+          <ShareUrl />
+        </TabPanel>
+        <TabPanel id="data">
+          <WebsiteData websiteId={websiteId} />
+        </TabPanel>
      </Tabs>
-      {tab === 'details' && <WebsiteEditForm websiteId={websiteId} onSave={handleSave} />}
-      {tab === 'tracking' && <TrackingCode websiteId={websiteId} />}
-      {tab === 'share' && <ShareUrl onSave={handleSave} />}
-      {tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleSave} />}
    </>
  );
 }
--- a/src/app/(main)/settings/websites/[websiteId]/page.tsx
+++ b/src/app/(main)/settings/websites/[websiteId]/page.tsx
@ -1,7 +1,7 @@
 import { WebsiteSettingsPage } from './WebsiteSettingsPage';
 import { Metadata } from 'next';

-export default async function ({ params }: { params: { websiteId: string } }) {
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
  const { websiteId } = await params;

  return <WebsiteSettingsPage websiteId={websiteId} />;
--- a/src/app/(main)/settings/websites/page.tsx
+++ b/src/app/(main)/settings/websites/page.tsx
@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { WebsitesSettingsPage } from './WebsitesSettingsPage';

-export default async function ({ params }: { params: { teamId: string } }) {
+export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
  const { teamId } = await params;

  return <WebsitesSettingsPage teamId={teamId} />;
--- a/src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx
@ -1,4 +1,4 @@
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { TeamMembersTable } from './TeamMembersTable';
 import { useTeamMembers } from '@/components/hooks';

@ -12,8 +12,8 @@ export function TeamMembersDataTable({
  const queryResult = useTeamMembers(teamId);

  return (
-    <DataTable queryResult={queryResult}>
+    <DataGrid queryResult={queryResult}>
      {({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/teams/[teamId]/settings/team/page.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/team/page.tsx
@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { TeamPage } from './TeamPage';

-export default async function ({ params }: { params: { teamId: string } }) {
+export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
  const { teamId } = await params;

  return <TeamPage teamId={teamId} />;
--- a/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesDataTable.tsx
@ -1,4 +1,4 @@
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { useTeamWebsites } from '@/components/hooks';
 import { TeamWebsitesTable } from './TeamWebsitesTable';

@ -12,8 +12,8 @@ export function TeamWebsitesDataTable({
  const queryResult = useTeamWebsites(teamId);

  return (
-    <DataTable queryResult={queryResult}>
+    <DataGrid queryResult={queryResult}>
      {({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/teams/[teamId]/settings/websites/page.tsx
+++ b/src/app/(main)/teams/[teamId]/settings/websites/page.tsx
@ -1,7 +1,7 @@
 import { TeamWebsitesPage } from './TeamWebsitesPage';
 import { Metadata } from 'next';

-export default async function ({ params }: { params: { teamId: string } }) {
+export default async function ({ params }: { params: Promise<{ teamId: string }> }) {
  const { teamId } = await params;

  return <TeamWebsitesPage teamId={teamId} />;
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@ -1,7 +1,7 @@
 import { Dropdown, Icon, Icons, Item, Text } from 'react-basics';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useLocale, useMessages, useNavigation } from '@/components/hooks';
-import { SideNav } from '@/components/layout/SideNav';
+import { MenuNav } from '@/components/layout/MenuNav';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
 import { CountriesTable } from '@/components/metrics/CountriesTable';
@ -156,7 +156,7 @@ export function WebsiteExpandedView({
          </Icon>
          <Text>{formatMessage(labels.back)}</Text>
        </LinkButton>
-        <SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
+        <MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
        <Dropdown
          className={styles.dropdown}
          items={items}
--- a/src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx
+++ b/src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx
@ -1,6 +1,6 @@
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { Grid, GridRow } from '@/components/layout/Grid';
-import { SideNav } from '@/components/layout/SideNav';
+import { MenuNav } from '@/components/layout/MenuNav';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -145,7 +145,7 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
  return (
    <Grid className={styles.container}>
      <GridRow columns="compare">
-        <SideNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
+        <MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
        <div>
          <div className={styles.title}>{formatMessage(labels.previous)}</div>
          <Component
--- a/src/app/(main)/websites/[websiteId]/compare/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/compare/page.tsx
@ -1,7 +1,7 @@
 import { WebsiteComparePage } from './WebsiteComparePage';
 import { Metadata } from 'next';

-export default async function ({ params }: { params: { websiteId: string } }) {
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
  const { websiteId } = await params;

  return <WebsiteComparePage websiteId={websiteId} />;
--- a/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
@ -1,6 +1,6 @@
 import { useWebsiteEvents } from '@/components/hooks';
 import { EventsTable } from './EventsTable';
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';

 export function EventsDataTable({
@ -13,8 +13,8 @@ export function EventsDataTable({
  const queryResult = useWebsiteEvents(websiteId);

  return (
-    <DataTable queryResult={queryResult} allowSearch={true} autoFocus={false}>
+    <DataGrid queryResult={queryResult} allowSearch={true} autoFocus={false}>
      {({ data }) => <EventsTable data={data} />}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/events/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/page.tsx
@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { EventsPage } from './EventsPage';

-export default async function ({ params }: { params: { websiteId: string } }) {
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
  const { websiteId } = await params;

  return <EventsPage websiteId={websiteId} />;
--- a/src/app/(main)/websites/[websiteId]/realtime/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/page.tsx
@ -1,7 +1,7 @@
 import { WebsiteRealtimePage } from './WebsiteRealtimePage';
 import { Metadata } from 'next';

-export default async function ({ params }: { params: { websiteId: string } }) {
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
  const { websiteId } = await params;

  return <WebsiteRealtimePage websiteId={websiteId} />;
--- a/src/app/(main)/websites/[websiteId]/reports/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/reports/page.tsx
@ -1,7 +1,7 @@
 import { WebsiteReportsPage } from './WebsiteReportsPage';
 import { Metadata } from 'next';

-export default async function ({ params }: { params: { websiteId: string } }) {
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
  const { websiteId } = await params;

  return <WebsiteReportsPage websiteId={websiteId} />;
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
@ -1,6 +1,6 @@
 import { useWebsiteSessions } from '@/components/hooks';
 import { SessionsTable } from './SessionsTable';
-import { DataTable } from '@/components/common/DataTable';
+import { DataGrid } from '@/components/common/DataGrid';
 import { ReactNode } from 'react';

 export function SessionsDataTable({
@ -14,8 +14,8 @@ export function SessionsDataTable({
  const queryResult = useWebsiteSessions(websiteId);

  return (
-    <DataTable queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
+    <DataGrid queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
      {({ data }) => <SessionsTable data={data} showDomain={!websiteId} />}
-    </DataTable>
+    </DataGrid>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/page.tsx
@ -4,7 +4,7 @@ import { Metadata } from 'next';
 export default async function WebsitePage({
  params,
 }: {
-  params: { websiteId: string; sessionId: string };
+  params: Promise<{ websiteId: string; sessionId: string }>;
 }) {
  const { websiteId, sessionId } = await params;

--- a/src/app/(main)/websites/[websiteId]/sessions/page.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/page.tsx
@ -1,7 +1,7 @@
 import { SessionsPage } from './SessionsPage';
 import { Metadata } from 'next';

-export default async function ({ params }: { params: { websiteId: string } }) {
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
  const { websiteId } = await params;

  return <SessionsPage websiteId={websiteId} />;
--- a/src/app/api/users/[userId]/route.ts
+++ b/src/app/api/users/[userId]/route.ts
@ -27,7 +27,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ use
  const schema = z.object({
    username: z.string().max(255),
    password: z.string().max(255),
-    role: z.string().regex(/admin|user|view-only/i),
+    role: z.enum(['admin', 'user', 'view-only']),
  });

  const { auth, body, error } = await parseRequest(request, schema);
--- a/src/app/login/LoginForm.tsx
+++ b/src/app/login/LoginForm.tsx
@ -35,15 +35,7 @@ export function LoginForm() {
  };

  return (
-    <Column
-      justifyContent="center"
-      alignItems="center"
-      padding="8"
-      gap="6"
-      backgroundColor="1"
-      borderRadius="3"
-      shadow="3"
-    >
+    <Column justifyContent="center" alignItems="center" padding="8" gap="6">
      <Icon size="lg">
        <Logo />
      </Icon>