Converted user and website settings.

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) {

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();

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>
   );
 }

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} />;

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) {

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>
   );
 }

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)}>
+      <Modal>
-        {(close: () => void) => <UserAddForm onSave={handleSave} onClose={close} />}
+        <Dialog title={formatMessage(labels.createUser)}>
+          {({ close }) => <UserAddForm onSave={handleSave} onClose={close} />}
+        </Dialog>
       </Modal>
-    </ModalTrigger>
+    </DialogTrigger>
   );
 }

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}>
+    <DialogTrigger>
-      <Button disabled={userId === user?.id} variant="quiet">
+      <Button isDisabled={userId === user?.id}>
-        <Icon>
+        <Icon size="sm">
           <Icons.Trash />
         </Icon>
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>
-      <Modal title={formatMessage(labels.deleteUser)}>
+      <Modal>
-        {(close: () => void) => (
+        <Dialog title={formatMessage(labels.deleteUser)}>
+          {({ close }) => (
             <UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
           )}
+        </Dialog>
       </Modal>
-    </ModalTrigger>
+    </DialogTrigger>
   );
 }

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}
     />

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>
   );
 }

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}>
+    <DataTable data={data}>
-      <GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
+      <DataColumn id="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
-      <GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
+      <DataColumn id="role" label={formatMessage(labels.role)} style={{ maxWidth: 60 }}>
-        {row =>
+        {(row: any) =>
           formatMessage(
             labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
           )
         }
-      </GridColumn>
+      </DataColumn>
-      <GridColumn name="created" label={formatMessage(labels.created)} width={'150px'}>
+      <DataColumn id="created" label={formatMessage(labels.created)} style={{ maxWidth: 60 }}>
-        {row =>
+        {(row: any) =>
           formatDistance(new Date(row.createdAt), new Date(), {
             addSuffix: true,
             locale: dateLocale,
           })
         }
-      </GridColumn>
+      </DataColumn>
-      <GridColumn name="websites" label={formatMessage(labels.websites)} width={'120px'}>
+      <DataColumn id="websites" label={formatMessage(labels.websites)} style={{ maxWidth: 60 }}>
-        {row => row._count.website}
+        {(row: any) => row._count.websiteUser}
-      </GridColumn>
+      </DataColumn>
       {showActions && (
-        <GridColumn name="action" label=" " alignment="end">
+        <DataColumn id="action" align="end">
-          {row => {
+          {(row: any) => {
             const { id, username } = row;
             return (
-              <>
+              <Row gap="3">
                 <UserDeleteButton userId={id} username={username} />
-                <LinkButton href={`/settings/users/${id}`}>
+                <Button asChild>
+                  <Link href={`/settings/users/${id}`}>
                     <Icon>
                       <Icons.Edit />
                     </Icon>
                     <Text>{formatMessage(labels.edit)}</Text>
-                </LinkButton>
+                  </Link>
-              </>
+                </Button>
+              </Row>
             );
           }}
-        </GridColumn>
+        </DataColumn>
       )}
-    </GridTable>
+    </DataTable>
   );
 }

src/app/(main)/settings/users/[userId]/UserEditForm.tsx

@@ -1,22 +1,27 @@
 import {
-  Dropdown,
+  Select,
-  Item,
+  ListItem,
   Form,
-  FormRow,
+  FormField,
   FormButtons,
-  FormInput,
   TextField,
-  SubmitButton,
+  FormSubmitButton,
   PasswordField,
-} from 'react-basics';
+  useToast,
-import { useApi, useLogin, useMessages } from '@/components/hooks';
+} 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 }}>
+    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
-      <FormRow label={formatMessage(labels.username)}>
+      <FormField name="username" label={formatMessage(labels.username)}>
-        <FormInput name="username">
         <TextField />
-        </FormInput>
+      </FormField>
-      </FormRow>
+      <FormField
-      <FormRow label={formatMessage(labels.password)}>
-        <FormInput
         name="password"
+        label={formatMessage(labels.password)}
         rules={{
           minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
         }}
       >
         <PasswordField autoComplete="new-password" />
-        </FormInput>
+      </FormField>
-      </FormRow>
+
       {user.id !== login.id && (
-        <FormRow label={formatMessage(labels.role)}>
+        <FormField
-          <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
+          name="role"
-            <Dropdown renderValue={renderValue}>
+          label={formatMessage(labels.role)}
-              <Item key={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</Item>
+          rules={{ required: formatMessage(labels.required) }}
-              <Item key={ROLES.user}>{formatMessage(labels.user)}</Item>
+        >
-              <Item key={ROLES.admin}>{formatMessage(labels.admin)}</Item>
+          <Select defaultSelectedKey={user.role}>
-            </Dropdown>
+            <ListItem id={ROLES.viewOnly}>{formatMessage(labels.viewOnly)}</ListItem>
-          </FormInput>
+            <ListItem id={ROLES.user}>{formatMessage(labels.user)}</ListItem>
-        </FormRow>
+            <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>
   );

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} />

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>;
 }

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -1,46 +1,31 @@
-import { Key, useContext, useState } from 'react';
+import { useContext } from 'react';
-import { Item, Tabs, useToasts } from 'react-basics';
+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 { formatMessage, labels } = useMessages();
-  const [tab, setTab] = useState<Key>('details');
   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} />
+      <PageHeader title={user?.username} icon={<Icons.User />} />
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+      <Tabs>
-        <Item key="details">{formatMessage(labels.details)}</Item>
+        <TabList>
-        <Item key="websites">{formatMessage(labels.websites)}</Item>
+          <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} />}
     </>
   );
 }

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>
   );
 }

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} />;

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>
   );
 }

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} />
     </>
   );

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}>
+    <DataTable data={data}>
-      <GridColumn name="name" label={formatMessage(labels.name)} />
+      <DataColumn id="name" label={formatMessage(labels.name)} />
-      <GridColumn name="domain" label={formatMessage(labels.domain)} />
+      <DataColumn id="domain" label={formatMessage(labels.domain)} />
       {showActions && (
-        <GridColumn name="action" label=" " alignment="end">
+        <DataColumn id="action" label=" " align="end">
-          {row => {
+          {(row: any) => {
-            const { id: websiteId } = row;
+            const websiteId = row.id;
 
             return (
-              <>
+              <Row gap="3">
                 {allowEdit && (
-                  <LinkButton href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
+                  <Button asChild>
+                    <Link href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
                       <Icon data-test="link-button-edit">
                         <Icons.Edit />
                       </Icon>
                       <Text>{formatMessage(labels.edit)}</Text>
-                  </LinkButton>
+                    </Link>
+                  </Button>
                 )}
                 {allowView && (
-                  <LinkButton href={renderTeamUrl(`/websites/${websiteId}`)}>
+                  <Button asChild>
-                    <Icon>
+                    <Link href={renderTeamUrl(`/websites/${websiteId}`)}>
-                      <Icons.ArrowRight />
+                      <Icon data-test="link-button-view">
+                        <Icons.Arrow />
                       </Icon>
                       <Text>{formatMessage(labels.view)}</Text>
-                  </LinkButton>
+                    </Link>
+                  </Button>
                 )}
-              </>
+              </Row>
             );
           }}
-        </GridColumn>
+        </DataColumn>
       )}
-    </GridTable>
+    </DataTable>
   );
 }

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

@@ -1,5 +1,12 @@
-import { useContext, useRef } from 'react';
+import { useContext } from 'react';
-import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
+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,21 +33,20 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   };
 
   return (
-    <Form ref={ref} onSubmit={handleSubmit} error={error} values={website}>
+    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 420 }}>
-      <FormRow label={formatMessage(labels.websiteId)}>
+      <FormField name="id" label={formatMessage(labels.websiteId)}>
-        <TextField data-test="text-field-websiteId" value={website?.id} readOnly allowCopy />
+        <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
-      </FormRow>
+      </FormField>
-      <FormRow label={formatMessage(labels.name)}>
+      <FormField
-        <FormInput
+        label={formatMessage(labels.name)}
         data-test="input-name"
         name="name"
         rules={{ required: formatMessage(labels.required) }}
       >
         <TextField />
-        </FormInput>
+      </FormField>
-      </FormRow>
+      <FormField
-      <FormRow label={formatMessage(labels.domain)}>
+        label={formatMessage(labels.domain)}
-        <FormInput
         data-test="input-domain"
         name="domain"
         rules={{
@@ -51,12 +58,11 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
         }}
       >
         <TextField />
-        </FormInput>
+      </FormField>
-      </FormRow>
       <FormButtons>
-        <SubmitButton data-test="button-submit" variant="primary">
+        <FormSubmitButton data-test="button-submit" variant="primary">
           {formatMessage(labels.save)}
-        </SubmitButton>
+        </FormSubmitButton>
       </FormButtons>
     </Form>
   );

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 { formatMessage, labels } = 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,
-        },
-      ]}
-    />
-  );
 
   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 }}>
+      <Tabs>
-        <Item key="details">{formatMessage(labels.details)}</Item>
+        <TabList>
-        <Item key="tracking">{formatMessage(labels.trackingCode)}</Item>
+          <Tab id="details">{formatMessage(labels.details)}</Tab>
-        <Item key="share">{formatMessage(labels.shareUrl)}</Item>
+          <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
-        <Item key="data">{formatMessage(labels.data)}</Item>
+          <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} />}
     </>
   );
 }

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} />;

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} />;

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>
   );
 }

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} />;

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>
   );
 }

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} />;

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}

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

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} />;

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>
   );
 }

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} />;

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} />;

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} />;

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>
   );
 }

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;
 

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} />;

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);

src/app/login/LoginForm.tsx

@@ -35,15 +35,7 @@ export function LoginForm() {
   };
 
   return (
-    <Column
+    <Column justifyContent="center" alignItems="center" padding="8" gap="6">
-      justifyContent="center"
-      alignItems="center"
-      padding="8"
-      gap="6"
-      backgroundColor="1"
-      borderRadius="3"
-      shadow="3"
-    >
       <Icon size="lg">
         <Logo />
       </Icon>

src/assets/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11"><circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z"/></svg>
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11"><circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z"/></svg>

src/components/common/ConfirmationForm.tsx

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
+import { Row, Button, FormSubmitButton, Form, FormButtons } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 
 export interface ConfirmationFormProps {
   message: ReactNode;
   buttonLabel?: ReactNode;
-  buttonVariant?: 'none' | 'primary' | 'secondary' | 'quiet' | 'danger';
+  buttonVariant?: 'primary' | 'quiet' | 'danger';
   isLoading?: boolean;
   error?: string | Error;
   onConfirm?: () => void;
@@ -24,13 +24,13 @@ export function ConfirmationForm({
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Form error={error}>
+    <Form onSubmit={onConfirm} error={error}>
-      <p>{message}</p>
+      <Row marginY="4">{message}</Row>
-      <FormButtons flex>
+      <FormButtons>
-        <LoadingButton isLoading={isLoading} onClick={onConfirm} variant={buttonVariant}>
+        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
+        <FormSubmitButton isLoading={isLoading} variant={buttonVariant}>
           {buttonLabel || formatMessage(labels.ok)}
-        </LoadingButton>
+        </FormSubmitButton>
-        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
       </FormButtons>
     </Form>
   );

src/components/common/DataGrid.tsx

@@ -1,12 +1,10 @@
 import { ReactNode } from 'react';
-import classNames from 'classnames';
+import { Loading, SearchField, Row, Column } from '@umami/react-zen';
-import { Loading, SearchField } from 'react-basics';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Pager } from '@/components/common/Pager';
-import { PagedQueryResult } from '@/lib/types';
-import styles from './DataTable.module.css';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { PagedQueryResult } from '@/lib/types';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
@@ -20,7 +18,7 @@ export interface DataTableProps {
   children: ReactNode | ((data: any) => ReactNode);
 }
 
-export function DataTable({
+export function DataGrid({
   queryResult,
   searchDelay = 600,
   allowSearch = true,
@@ -30,12 +28,8 @@ export function DataTable({
   children,
 }: DataTableProps) {
   const { formatMessage, labels, messages } = useMessages();
-  const {
+  const { result, params, setParams, query } = queryResult || {};
-    result,
+  const { error, isLoading, isFetched } = query || {};
-    params,
-    setParams,
-    query: { error, isLoading, isFetched },
-  } = queryResult || {};
   const { page, pageSize, count, data } = result || {};
   const { search } = params || {};
   const hasData = Boolean(!isLoading && data?.length);
@@ -43,45 +37,38 @@ export function DataTable({
   const { router, renderUrl } = useNavigation();
 
   const handleSearch = (search: string) => {
-    setParams({ ...params, search, page: params.page ? page : 1 });
+    setParams({ ...params, search });
   };
 
   const handlePageChange = (page: number) => {
-    setParams({ ...params, search, page });
+    setParams({ ...params, page });
     router.push(renderUrl({ page }));
   };
 
   return (
     <>
       {allowSearch && (hasData || search) && (
+        <Row width="280px" alignItems="center" marginBottom="6">
           <SearchField
-          className={styles.search}
             value={search}
             onSearch={handleSearch}
             delay={searchDelay || DEFAULT_SEARCH_DELAY}
             autoFocus={autoFocus}
             placeholder={formatMessage(labels.search)}
           />
+        </Row>
       )}
       <LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
-        <div
+        <Column>
-          className={classNames(styles.body, {
-            [styles.status]: isLoading || noResults || !hasData,
-          })}
-        >
           {hasData ? (typeof children === 'function' ? children(result) : children) : null}
           {isLoading && <Loading position="page" />}
           {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
           {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
-        </div>
+        </Column>
         {allowPaging && hasData && (
-          <Pager
+          <Row marginTop="6">
-            className={styles.pager}
+            <Pager page={page} pageSize={pageSize} count={count} onPageChange={handlePageChange} />
-            page={page}
+          </Row>
-            pageSize={pageSize}
-            count={count}
-            onPageChange={handlePageChange}
-          />
         )}
       </LoadingPanel>
     </>

src/components/common/LoadingPanel.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
-import { Loading } from 'react-basics';
+import { Loading } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { Empty } from '@/components/common/Empty';
 import styles from './LoadingPanel.module.css';

src/components/common/Pager.tsx

@@ -1,7 +1,5 @@
-import classNames from 'classnames';
+import { Button, Icon, Icons, Row, Text } from '@umami/react-zen';
-import { Button, Icon, Icons } from 'react-basics';
 import { useMessages } from '@/components/hooks';
-import styles from './Pager.module.css';
 
 export interface PagerProps {
   page: string | number;
@@ -11,7 +9,7 @@ export interface PagerProps {
   className?: string;
 }
 
-export function Pager({ page, pageSize, count, onPageChange, className }: PagerProps) {
+export function Pager({ page, pageSize, count, onPageChange }: PagerProps) {
   const { formatMessage, labels } = useMessages();
   const maxPage = pageSize && count ? Math.ceil(+count / +pageSize) : 0;
   const lastPage = page === maxPage;
@@ -34,24 +32,21 @@ export function Pager({ page, pageSize, count, onPageChange, className }: PagerP
   }
 
   return (
-    <div className={classNames(styles.pager, className)}>
+    <Row alignItems="center" justifyContent="space-between" gap="3" flexGrow={1}>
-      <div className={styles.count}>{formatMessage(labels.numberOfRecords, { x: count })}</div>
+      <Text>{formatMessage(labels.numberOfRecords, { x: count })}</Text>
-      <div className={styles.nav}>
+      <Row alignItems="center" justifyContent="flex-end" gap="3">
-        <Button onClick={() => handlePageChange(-1)} disabled={firstPage}>
+        <Text>{formatMessage(labels.pageOf, { current: page, total: maxPage })}</Text>
-          <Icon rotate={90}>
+        <Button onPress={() => handlePageChange(-1)} isDisabled={firstPage}>
-            <Icons.ChevronDown />
+          <Icon size="sm" rotate={180}>
+            <Icons.Chevron />
           </Icon>
         </Button>
-        <div className={styles.text}>
+        <Button onPress={() => handlePageChange(1)} isDisabled={lastPage}>
-          {formatMessage(labels.pageOf, { current: page, total: maxPage })}
+          <Icon size="sm">
-        </div>
+            <Icons.Chevron />
-        <Button onClick={() => handlePageChange(1)} disabled={lastPage}>
-          <Icon rotate={270}>
-            <Icons.ChevronDown />
           </Icon>
         </Button>
-      </div>
+      </Row>
-      <div></div>
+    </Row>
-    </div>
   );
 }

src/components/hooks/useApi.ts

@@ -8,7 +8,7 @@ import { useApp } from '@/store/app';
 const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 
 async function handleResponse(res: FetchResponse): Promise<any> {
-  if (!res.ok) {
+  if (res.error) {
     const { message, code } = res?.error?.error || {};
     return Promise.reject(new Error(code || message || 'Unexpectd error.'));
   }

src/components/input/LanguageButton.module.css

@@ -24,6 +24,7 @@
 }
 
 .selected {
+  color: var(--font-color);
   font-weight: 700;
   background: var(--blue100);
 }

src/components/layout/MenuLayout.tsx

@@ -1,22 +1,18 @@
 import { ReactNode } from 'react';
-import { usePathname } from 'next/navigation';
+import { Grid, Column } from '@umami/react-zen';
-import { SideNav } from '@/components/layout/SideNav';
+import { MenuNav } from '@/components/layout/MenuNav';
-import styles from './MenuLayout.module.css';
 
 export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
-  const pathname = usePathname();
   const cloudMode = !!process.env.cloudMode;
 
-  const getKey = () => items.find(({ url }) => pathname === url)?.key;
-
   return (
-    <div className={styles.layout}>
+    <Grid columns="auto 1fr" gap="5">
       {!cloudMode && (
-        <div className={styles.menu}>
+        <Column width="240px">
-          <SideNav items={items} shallow={true} selectedKey={getKey()} />
+          <MenuNav items={items} shallow={true} />
-        </div>
+        </Column>
       )}
-      <div className={styles.content}>{children}</div>
+      <Column>{children}</Column>
-    </div>
+    </Grid>
   );
 }

src/components/layout/MenuNav.tsx

@@ -0,0 +1,29 @@
+import { List, ListItem, Text } from '@umami/react-zen';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+export interface SideNavProps {
+  items: any[];
+  shallow?: boolean;
+  scroll?: boolean;
+}
+
+export function MenuNav({ items, shallow = true, scroll = false }: SideNavProps) {
+  const pathname = usePathname();
+
+  return (
+    <List>
+      {items.map(({ key, label, url }) => {
+        const isSelected = pathname.startsWith(url);
+
+        return (
+          <ListItem key={key}>
+            <Link href={url} shallow={shallow} scroll={scroll}>
+              <Text weight={isSelected ? 'bold' : 'regular'}>{label}</Text>
+            </Link>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}

src/components/layout/NavGroup.module.css

@@ -1,80 +0,0 @@
-.group {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--base600);
-  font-size: 11px;
-  font-weight: 600;
-  padding: 10px 20px;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.body {
-  display: none;
-}
-
-.expanded .body {
-  display: block;
-}
-
-.item {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border-inline-end: 2px solid var(--base200);
-  padding: 1rem 2rem;
-  gap: var(--size500);
-  font-weight: 600;
-  width: 200px;
-  margin-inline-end: -2px;
-}
-
-a.item {
-  color: var(--base700);
-}
-
-.item.selected {
-  color: var(--base900);
-  border-inline-end-color: var(--primary400);
-  background: var(--blue100);
-}
-
-.item:hover {
-  color: var(--base900);
-}
-
-.minimized .text,
-.minimized .header {
-  display: none;
-}
-
-.minimized .item {
-  width: 60px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.divider:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  border-top: 1px solid var(--base300);
-  width: 160px;
-}
-
-.minimized .divider:before {
-  width: 60px;
-}

src/components/layout/NavGroup.tsx

@@ -1,64 +0,0 @@
-import { useState } from 'react';
-import { Icon, Text, TooltipPopup } from 'react-basics';
-import classNames from 'classnames';
-import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import { Icons } from '@/components/icons';
-import styles from './NavGroup.module.css';
-
-export interface NavGroupProps {
-  title: string;
-  items: any[];
-  defaultExpanded?: boolean;
-  allowExpand?: boolean;
-  minimized?: boolean;
-}
-
-export function NavGroup({
-  title,
-  items,
-  defaultExpanded = true,
-  allowExpand = true,
-  minimized = false,
-}: NavGroupProps) {
-  const pathname = usePathname();
-  const [expanded, setExpanded] = useState(defaultExpanded);
-
-  const handleExpand = () => setExpanded(state => !state);
-
-  return (
-    <div
-      className={classNames(styles.group, {
-        [styles.expanded]: expanded,
-        [styles.minimized]: minimized,
-      })}
-    >
-      {title && (
-        <div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
-          <Text>{title}</Text>
-          <Icon size="sm" rotate={expanded ? 0 : -90}>
-            <Icons.ChevronDown />
-          </Icon>
-        </div>
-      )}
-      <div className={styles.body}>
-        {items.map(({ label, url, icon, divider }) => {
-          return (
-            <TooltipPopup key={label} label={label} position="right" disabled={!minimized}>
-              <Link
-                href={url}
-                className={classNames(styles.item, {
-                  [styles.divider]: divider,
-                  [styles.selected]: pathname.startsWith(url),
-                })}
-              >
-                <Icon>{icon}</Icon>
-                <Text className={styles.text}>{label}</Text>
-              </Link>
-            </TooltipPopup>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

src/components/layout/PageHeader.tsx

@@ -1,29 +1,23 @@
 import { ReactNode } from 'react';
-import { Heading, Icon, Breadcrumbs, Breadcrumb, Row } from '@umami/react-zen';
+import { Heading, Icon, Row } from '@umami/react-zen';
 
 export function PageHeader({
   title,
   icon,
-  breadcrumb,
   children,
 }: {
   title?: ReactNode;
   icon?: ReactNode;
   className?: string;
-  breadcrumb?: ReactNode;
   children?: ReactNode;
 }) {
   return (
-    <>
+    <Row justifyContent="space-between" alignItems="center" paddingBottom="6">
-      <Breadcrumbs>
+      <Row gap="3">
-        <Breadcrumb>{breadcrumb}</Breadcrumb>
-      </Breadcrumbs>
-      <Row justifyContent="space-between" paddingY="6">
         {icon && <Icon size="lg">{icon}</Icon>}
-
         {title && <Heading>{title}</Heading>}
+      </Row>
       <Row justifyContent="flex-end">{children}</Row>
     </Row>
-    </>
   );
 }

src/components/layout/SideNav.tsx

@@ -1,44 +0,0 @@
-import classNames from 'classnames';
-import { Menu, Item } from 'react-basics';
-import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import styles from './SideNav.module.css';
-
-export interface SideNavProps {
-  selectedKey: string;
-  items: any[];
-  shallow?: boolean;
-  scroll?: boolean;
-  className?: string;
-  onSelect?: () => void;
-}
-
-export function SideNav({
-  selectedKey,
-  items,
-  shallow = true,
-  scroll = false,
-  className,
-  onSelect = () => {},
-}: SideNavProps) {
-  const pathname = usePathname();
-  return (
-    <Menu
-      items={items}
-      selectedKey={selectedKey}
-      className={classNames(styles.menu, className)}
-      onSelect={onSelect}
-    >
-      {({ key, label, url }) => (
-        <Item
-          key={key}
-          className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
-        >
-          <Link href={url} shallow={shallow} scroll={scroll}>
-            {label}
-          </Link>
-        </Item>
-      )}
-    </Menu>
-  );
-}

src/index.ts

@@ -44,7 +44,7 @@ export * from '@/app/(main)/teams/[teamId]/TeamProvider';
 export * from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 
 export * from '@/components/common/ConfirmationForm';
-export * from '@/components/common/DataTable';
+export * from '@/components/common/DataGrid';
 export * from '@/components/common/Empty';
 export * from '@/components/common/ErrorBoundary';
 export * from '@/components/common/ErrorMessage';
@@ -59,6 +59,5 @@ export * from '@/components/common/Pager';
 export * from '@/components/common/TypeConfirmationForm';
 
 export * from '@/components/input/TeamsButton';
-export * from '@/components/input/ThemeButton';
 
 export { ROLES } from '@/lib/constants';

src/lib/fetch.ts

@@ -1,10 +1,18 @@
 import { buildUrl } from '@/lib/url';
 
+export interface ErrorResponse {
+  error: {
+    status: number;
+    message: string;
+    code?: string;
+  };
+}
+
 export interface FetchResponse {
   ok: boolean;
   status: number;
   data?: any;
-  error?: any;
+  error?: ErrorResponse;
 }
 
 export async function request(

src/styles/global.css

@@ -4,6 +4,7 @@ body {
   color: var(--font-color);
   font-size: var(--font-size);
   background-color: var(--background-color);
+  width: 100%;
   min-height: 100vh;
 }
 

src/styles/variables.css

@@ -1,3 +1,4 @@
 html body {
   --primary-color: #147af3;
+  --primary-font-color: var(--light-color);
 }