Refactored settings components.

components/common/DateFilter.js

@@ -1,5 +1,5 @@
 import Calendar from 'assets/calendar-alt.svg';
-import DatePickerForm from 'components/forms/DatePickerForm';
+import DatePickerForm from 'components/metrics/DatePickerForm';
 import { endOfYear, isSameDay } from 'date-fns';
 import useLocale from 'hooks/useLocale';
 import { dateFormat } from 'lib/date';

components/common/EventDataButton.js

@@ -1,5 +1,5 @@
 import List from 'assets/list-ul.svg';
-import EventDataForm from 'components/forms/EventDataForm';
+import EventDataForm from 'components/metrics/EventDataForm';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import { Button, Icon, Modal } from 'react-basics';

components/common/HamburgerButton.js

@@ -12,7 +12,10 @@ const menuItems = [
     value: '/dashboard',
   },
   { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
-  { label: <FormattedMessage id="label.settings" defaultMessage="Settings" />, value: '/settings' },
+  {
+    label: <FormattedMessage id="label.settings" defaultMessage="SettingsLayout" />,
+    value: '/settings',
+  },
   {
     label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
     value: '/settings/profile',

components/forms/Form.module.css

@@ -1,63 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-  width: 300px;
-  margin: 0 auto;
-}
-
-.header {
-  font-size: 24px;
-  font-weight: 700;
-  text-align: center;
-  margin: 30px auto;
-}
-
-.info {
-  text-align: center;
-  padding: 30px 0;
-}
-
-.footer {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  font-size: 14px;
-  text-align: center;
-  margin: 30px auto;
-}
-
-.footer a {
-  font-weight: 600;
-}
-
-.buttons {
-  justify-content: center;
-}
-
-.button {
-  flex: 1;
-  justify-content: center;
-}
-
-.error {
-  width: 600px;
-  margin: 0 auto 30px;
-  background: var(--base50);
-  padding: 16px;
-  color: var(--red400);
-  border: 1px solid var(--red400);
-  border-radius: 5px;
-  text-align: center;
-}
-
-.success {
-  width: 600px;
-  margin: 60px auto;
-  background: var(--base50);
-  padding: 16px;
-  color: var(--green400);
-  border: 1px solid var(--green400);
-  border-radius: 5px;
-  text-align: center;
-}

components/forms/TrackingCodeForm.js

@@ -1,23 +0,0 @@
-import useConfig from 'hooks/useConfig';
-import { useRef } from 'react';
-import { Form, FormRow, TextArea } from 'react-basics';
-
-export default function TrackingCodeForm({ websiteId }) {
-  const ref = useRef(null);
-  const { trackerScriptName } = useConfig();
-  const code = `<script async defer src="${trackerScriptName}" data-website-id="${websiteId}"></script>`;
-
-  return (
-    <>
-      <Form ref={ref}>
-        <FormRow>
-          <p>
-            To track stats for this website, place the following code in the{' '}
-            <code>&lt;head&gt;</code> section of your HTML.
-          </p>
-          <TextArea rows={4} value={code} readOnly allowCopy />
-        </FormRow>
-      </Form>
-    </>
-  );
-}

components/layout/Header.js

@@ -10,7 +10,6 @@ import useUser from 'hooks/useUser';
 import { HOMEPAGE_URL } from 'lib/constants';
 import { useRouter } from 'next/router';
 import { Column, Icon, Row } from 'react-basics';
-import { FormattedMessage } from 'react-intl';
 import SettingsButton from '../settings/SettingsButton';
 import styles from './Header.module.css';
 
@@ -33,19 +32,6 @@ export default function Header() {
             <Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
           </Column>
           <HamburgerButton />
-          {user && !adminDisabled && (
-            <div className={styles.links}>
-              <Link href="/dashboard">
-                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-              </Link>
-              <Link href="/realtime">
-                <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-              </Link>
-              <Link href="/websites">
-                <FormattedMessage id="label.settings" defaultMessage="Settings" />
-              </Link>
-            </div>
-          )}
           <Column className={styles.buttons}>
             <ThemeButton />
             <LanguageButton menuAlign="right" />

components/layout/Layout.js

@@ -3,26 +3,14 @@ import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
 import useLocale from 'hooks/useLocale';
-import { useRouter } from 'next/router';
 
 export default function Layout({ title, children, header = true, footer = true }) {
   const { dir } = useLocale();
-  const { basePath } = useRouter();
 
   return (
     <Container dir={dir} style={{ maxWidth: 1140 }}>
       <Head>
         <title>{title ? `${title} | umami` : 'umami'}</title>
-        <link rel="icon" href={`${basePath}/favicon.ico`} />
-        <link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
-        <link rel="manifest" href={`${basePath}/site.webmanifest`} />
-        <link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
-        <meta name="msapplication-TileColor" content="#da532c" />
-        <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
-        <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       {header && <Header />}
       <main>{children}</main>

components/layout/Page.js

@@ -8,7 +8,7 @@ export default function Page({ className, error, loading, children }) {
   }
 
   if (loading) {
-    return <Loading />;
+    return <Loading icon="spinner" size="xl" position="page" />;
   }
 
   return <div className={classNames(styles.page, className)}>{children}</div>;

components/metrics/EventDataForm.js

@@ -19,7 +19,7 @@ import {
   TextField,
 } from 'react-basics';
 import { FormattedMessage } from 'react-intl';
-import { FormMessage } from './../layout/FormLayout';
+import { FormMessage } from '../layout/FormLayout';
 import styles from './EventDataForm.module.css';
 
 export const filterOptions = [

components/nav/Nav.js

@@ -19,10 +19,10 @@ export default function Nav() {
   const handleSelect = () => {};
 
   const items = [
-    { icon: <Website />, label: 'Websites', url: '/websites' },
-    { icon: <User />, label: 'Users', url: '/users', hidden: !user.isAdmin },
-    { icon: <Team />, label: 'Teams', url: '/teams' },
-    { icon: <User />, label: 'Profile', url: '/profile' },
+    { icon: <Website />, label: 'Websites', url: '/settings/websites' },
+    { icon: <User />, label: 'Users', url: '/settings/users' },
+    { icon: <Team />, label: 'Teams', url: '/settings/teams' },
+    { icon: <User />, label: 'Profile', url: '/settings/profile' },
   ];
 
   return (

components/pages/dashboard/Dashboard.js

@@ -3,13 +3,13 @@ import { Button, Loading } from 'react-basics';
 import { defineMessages, useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import WebsiteChartList from 'components/pages/WebsiteChartList';
+import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
 import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
 import useApi from 'hooks/useApi';
 import useRequireLogin from 'hooks/useRequireLogin';
 import useDashboard from 'store/dashboard';
 import DashboardEdit from './DashboardEdit';
-import styles from './WebsiteList.module.css';
+import styles from '../websites/WebsiteList.module.css';
 
 const messages = defineMessages({
   dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },

components/pages/login/LoginForm.js

@@ -14,7 +14,6 @@ import useApi from 'hooks/useApi';
 import { setUser } from 'store/app';
 import { setClientAuthToken } from 'lib/client';
 import Logo from 'assets/logo.svg';
-import styles from './Form.module.css';
 
 export default function LoginForm() {
   const router = useRouter();
@@ -34,13 +33,13 @@ export default function LoginForm() {
 
   return (
     <>
-      <div className={styles.header}>
+      <div>
         <Icon size="xl">
           <Logo />
         </Icon>
         <p>umami</p>
       </div>
-      <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+      <Form onSubmit={handleSubmit} error={error}>
         <FormRow label="Username">
           <FormInput name="username" rules={{ required: 'Required' }}>
             <TextField autoComplete="off" />
@@ -52,7 +51,7 @@ export default function LoginForm() {
           </FormInput>
         </FormRow>
         <FormButtons>
-          <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+          <SubmitButton variant="primary" disabled={isLoading}>
             Log in
           </SubmitButton>
         </FormButtons>

components/pages/settings/SettingsLayout.js

@@ -1,9 +1,9 @@
 import Layout from 'components/layout/Layout';
 import Menu from 'components/nav/Nav';
 import useRequireLogin from 'hooks/useRequireLogin';
-import styles from './Settings.module.css';
+import styles from './SettingsLayout.module.css';
 
-export default function Settings({ children }) {
+export default function SettingsLayout({ children }) {
   const { user } = useRequireLogin();
 
   if (!user) {

components/pages/settings/account/AccountDetails.js

@@ -0,0 +1,69 @@
+import { Button, Modal, useToast, Icon, Tabs, Item } from 'react-basics';
+import { useEffect, useState } from 'react';
+import useApi from 'hooks/useApi';
+import PasswordEditForm from 'components/pages/settings/account/PasswordEditForm';
+import PageHeader from 'components/layout/PageHeader';
+import AccountEditForm from 'components/pages/settings/account/AccountEditForm';
+import Lock from 'assets/lock.svg';
+import Page from 'components/layout/Page';
+import ApiKeysList from 'components/pages/settings/account/ApiKeysList';
+import useUser from 'hooks/useUser';
+
+export default function AccountDetails() {
+  const { user } = useUser();
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('detail');
+  const [showForm, setShowForm] = useState(false);
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['account'], () => get(`/accounts/${user.id}`), {
+    cacheTime: 0,
+  });
+  const { toast, showToast } = useToast();
+
+  const handleChangePassword = () => setShowForm(true);
+
+  const handleClose = () => {
+    setShowForm(false);
+  };
+
+  const handleSave = data => {
+    setValues(data);
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+  };
+
+  const handlePasswordSave = () => {
+    setShowForm(false);
+    showToast({ message: 'Password successfully changed', variant: 'success' });
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader title="Account">
+        <Button onClick={handleChangePassword}>
+          <Icon>
+            <Lock />
+          </Icon>
+          Change password
+        </Button>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="detail">Details</Item>
+        <Item key="apiKey">API Keys</Item>
+      </Tabs>
+      {tab === 'detail' && <AccountEditForm data={values} onSave={handleSave} />}
+      {tab === 'apiKey' && <ApiKeysList />}
+      {data && showForm && (
+        <Modal title="Change password" onClose={handleClose} style={{ fontWeight: 'bold' }}>
+          {close => <PasswordEditForm onSave={handlePasswordSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/account/AccountEditForm.js

@@ -0,0 +1,39 @@
+import { Form, FormRow, FormButtons, FormInput, TextField, SubmitButton } from 'react-basics';
+import { useRef } from 'react';
+import useApi from 'hooks/useApi';
+
+export default function AccountEditForm({ data, onSave }) {
+  const { id } = data;
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(({ name }) => post(`/accounts/${id}`, { name }));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  return (
+    <>
+      <Form key={id} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+        <FormRow label="Name">
+          <FormInput name="name">
+            <TextField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Email">
+          <FormInput name="email">
+            <TextField readOnly />
+          </FormInput>
+        </FormRow>
+        <FormButtons>
+          <SubmitButton variant="primary">Save</SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}

components/pages/settings/account/ApiKeyDeleteForm.js

@@ -0,0 +1,29 @@
+import useApi from 'hooks/useApi';
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+
+export default function ApiKeyDeleteForm({ apiKeyId, onSave, onClose }) {
+  const { del, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/api-key/${apiKeyId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <div>Are you sure you want to delete this API KEY?</div>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Delete
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/account/ApiKeysList.js

@@ -0,0 +1,46 @@
+import { Text, Icon, useToast, Banner, LoadingButton, Loading } from 'react-basics';
+import useApi from 'hooks/useApi';
+import ApiKeysTable from 'components/pages/settings/account/ApiKeysTable';
+
+export default function ApiKeysList() {
+  const { toast, showToast } = useToast();
+  const { get, post, useQuery, useMutation } = useApi();
+  const { mutate, isLoading: isUpdating } = useMutation(data => post('/api-key', data));
+  const { data, refetch, isLoading, error } = useQuery(['api-key'], () => get(`/api-key`));
+  const hasData = data && data.length !== 0;
+
+  const handleCreate = () => {
+    mutate(
+      {},
+      {
+        onSuccess: async () => {
+          showToast({ message: 'API key saved.', variant: 'success' });
+          await handleSave();
+        },
+      },
+    );
+  };
+
+  const handleSave = async () => {
+    await refetch();
+  };
+
+  if (error) {
+    return <Banner variant="error">Something went wrong.</Banner>;
+  }
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return (
+    <>
+      {toast}
+      <LoadingButton loading={isUpdating} onClick={handleCreate}>
+        <Icon icon="plus" /> Create key
+      </LoadingButton>
+      {hasData && <ApiKeysTable data={data} onSave={handleSave} />}
+      {!hasData && <Text>You don&apos;t have any API keys.</Text>}
+    </>
+  );
+}

components/pages/settings/account/ApiKeysTable.js

@@ -0,0 +1,100 @@
+import { formatDistance } from 'date-fns';
+import { useState } from 'react';
+import {
+  Button,
+  Icon,
+  Modal,
+  PasswordField,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Text,
+} from 'react-basics';
+import ApiKeyDeleteForm from 'components/pages/settings/account/ApiKeyDeleteForm';
+import Trash from 'assets/trash.svg';
+import styles from './ApiKeysTable.module.css';
+
+const columns = [
+  { name: 'apiKey', label: 'Key', style: { flex: 3 } },
+  { name: 'created', label: 'Created', style: { flex: 1 } },
+  { name: 'action', label: ' ', style: { flex: 1 } },
+];
+
+export default function ApiKeysTable({ data = [], onSave }) {
+  const [apiKeyId, setApiKeyId] = useState(null);
+
+  const handleSave = () => {
+    setApiKeyId(null);
+    onSave();
+  };
+
+  const handleClose = () => {
+    setApiKeyId(null);
+  };
+
+  const handleDelete = id => {
+    setApiKeyId(id);
+  };
+
+  return (
+    <>
+      <Table className={styles.table} columns={columns} rows={data}>
+        <TableHeader>
+          {(column, index) => {
+            return (
+              <TableColumn key={index} className={styles.header} style={{ ...column.style }}>
+                {column.label}
+              </TableColumn>
+            );
+          }}
+        </TableHeader>
+        <TableBody>
+          {(row, keys, rowIndex) => {
+            row.apiKey = <PasswordField className={styles.input} value={row.key} readOnly={true} />;
+
+            row.created = formatDistance(new Date(row.createdAt), new Date(), {
+              addSuffix: true,
+            });
+
+            row.action = (
+              <div className={styles.actions}>
+                <a target="_blank">
+                  <Button onClick={() => handleDelete(row.id)}>
+                    <Icon>
+                      <Trash />
+                    </Icon>
+                    <Text>Delete</Text>
+                  </Button>
+                </a>
+              </div>
+            );
+
+            return (
+              <TableRow key={rowIndex} data={row} keys={keys}>
+                {(data, key, colIndex) => {
+                  return (
+                    <TableCell
+                      key={colIndex}
+                      className={styles.cell}
+                      style={{ ...columns[colIndex]?.style }}
+                    >
+                      {data[key]}
+                    </TableCell>
+                  );
+                }}
+              </TableRow>
+            );
+          }}
+        </TableBody>
+      </Table>
+      {apiKeyId && (
+        <Modal title="Delete API key" onClose={handleClose}>
+          {close => <ApiKeyDeleteForm apiKeyId={apiKeyId} onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </>
+  );
+}

components/pages/settings/account/ApiKeysTable.module.css

@@ -0,0 +1,31 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.header:first-child,
+.cell:first-child {
+  min-width: 320px;
+}
+
+.input {
+  flex: 2;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.empty {
+  min-height: 300px;
+}

components/pages/settings/account/PasswordEditForm.js

@@ -0,0 +1,67 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import useApi from 'hooks/useApi';
+import useUser from 'hooks/useUser';
+
+export default function PasswordEditForm({ onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { user } = useUser();
+  const { mutate, error, isLoading } = useMutation(data =>
+    post(`/accounts/${user.id}/change-password`, data),
+  );
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label="Current password">
+        <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="New password">
+        <FormInput
+          name="newPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Confirm password">
+        <FormInput
+          name="confirmPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+            validate: samePassword,
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          Save
+        </Button>
+        <Button onClick={onClose}>Cancel</Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/account/PasswordResetForm.js

@@ -0,0 +1,50 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, SubmitButton } from 'react-basics';
+import useApi from 'hooks/useApi';
+
+export default function PasswordResetForm({ token, onSave }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data =>
+    post('/accounts/reset-password', { ...data, token }),
+  );
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <>
+      <Form ref={ref} onSubmit={handleSubmit} error={error}>
+        <h2>Reset your password</h2>
+        <FormRow label="New password">
+          <FormInput name="newPassword" rules={{ required: 'Required' }}>
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Confirm password">
+          <FormInput
+            name="confirmPassword"
+            rules={{ required: 'Required', validate: samePassword }}
+          >
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormButtons align="center">
+          <SubmitButton variant="primary">Update password</SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}

components/pages/settings/profile/ProfileSettings.js

@@ -3,7 +3,7 @@ import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from 'components/settings/ProfileDetails';
 import { useState } from 'react';
 import { Breadcrumbs, Icon, Item, Tabs, useToast, Modal, Button } from 'react-basics';
-import UserPasswordForm from 'components/forms/UserPasswordForm';
+import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
 import Pen from 'assets/pen.svg';
 
 export default function ProfileSettings() {

components/pages/settings/teams/TeamAddForm.js

@@ -1,11 +1,9 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, TextField, Button } from 'react-basics';
 import useApi from 'hooks/useApi';
-import styles from './Form.module.css';
-import { useMutation } from '@tanstack/react-query';
 
 export default function TeamAddForm({ onSave, onClose }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
   const ref = useRef(null);
 
@@ -18,7 +16,7 @@ export default function TeamAddForm({ onSave, onClose }) {
   };
 
   return (
-    <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
       <FormRow label="Name">
         <FormInput name="name" rules={{ required: 'Required' }}>
           <TextField autoComplete="off" />

components/pages/settings/teams/TeamDetails.js

@@ -1,17 +1,16 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
-import { useQuery } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
-import TeamEditForm from 'components/forms/TeamEditForm';
+import TeamEditForm from 'components/pages/settings/teams/TeamEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import TeamMembersTable from '../tables/TeamMembersTable';
+import TeamMembers from 'components/pages/settings/teams/TeamMembers';
 
 export default function TeamDetails({ teamId }) {
   const [values, setValues] = useState(null);
-  const [tab, setTab] = useState('general');
-  const { get } = useApi();
+  const [tab, setTab] = useState('details');
+  const { get, useQuery } = useApi();
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['team', teamId],
@@ -40,18 +39,18 @@ export default function TeamDetails({ teamId }) {
       <PageHeader>
         <Breadcrumbs>
           <Item>
-            <Link href="/teams">Teams</Link>
+            <Link href="/settings/teams">Teams</Link>
           </Item>
           <Item>{values?.name}</Item>
         </Breadcrumbs>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="general">General</Item>
+        <Item key="details">Details</Item>
         <Item key="members">Members</Item>
         <Item key="websites">Websites</Item>
       </Tabs>
-      {tab === 'general' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
-      {tab === 'members' && <TeamMembersTable teamId={teamId} />}
+      {tab === 'details' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
+      {tab === 'members' && <TeamMembers teamId={teamId} />}
     </Page>
   );
 }

components/pages/settings/teams/TeamEditForm.js

@@ -1,12 +1,24 @@
-import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
-import { useMutation } from '@tanstack/react-query';
-import { useRef } from 'react';
+import {
+  SubmitButton,
+  Form,
+  FormInput,
+  FormRow,
+  FormButtons,
+  TextField,
+  Button,
+  Flexbox,
+} from 'react-basics';
+import { getRandomChars } from 'next-basics';
+import { useRef, useState } from 'react';
 import useApi from 'hooks/useApi';
 
+const generateId = () => getRandomChars(16);
+
 export default function TeamEditForm({ teamId, data, onSave }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
   const ref = useRef(null);
+  const [accessCode, setAccessCode] = useState(data.accessCode);
 
   const handleSubmit = async data => {
     mutate(data, {
@@ -17,6 +29,15 @@ export default function TeamEditForm({ teamId, data, onSave }) {
     });
   };
 
+  const handleRegenerate = () => {
+    const code = generateId();
+    ref.current.setValue('accessCode', code, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setAccessCode(code);
+  };
+
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
       <FormRow label="Team ID">
@@ -27,6 +48,12 @@ export default function TeamEditForm({ teamId, data, onSave }) {
           <TextField />
         </FormInput>
       </FormRow>
+      <FormRow label="Access code">
+        <Flexbox gap={10}>
+          <TextField value={accessCode} readOnly allowCopy />
+          <Button onClick={handleRegenerate}>Regenerate</Button>
+        </Flexbox>
+      </FormRow>
       <FormButtons>
         <SubmitButton variant="primary">Save</SubmitButton>
       </FormButtons>

components/pages/settings/teams/TeamMembers.js

@@ -0,0 +1,16 @@
+import { Loading } from 'react-basics';
+import useApi from 'hooks/useApi';
+import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
+
+export default function TeamMembers({ teamId }) {
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['team-members', teamId], () =>
+    get(`/teams/${teamId}/users`),
+  );
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return <TeamMembersTable data={data} />;
+}

components/pages/settings/teams/TeamMembersTable.js

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import {
   Table,
   TableHeader,
@@ -11,9 +10,15 @@ import {
 } from 'react-basics';
 import styles from './TeamsTable.module.css';
 
-export default function TeamMembersTable({ columns = [], rows = [] }) {
+const columns = [
+  { name: 'username', label: 'Username', style: { flex: 4 } },
+  { name: 'role', label: 'Role' },
+  { name: 'action', label: '' },
+];
+
+export default function TeamMembersTable({ data = [] }) {
   return (
-    <Table className={styles.table} columns={columns} rows={rows}>
+    <Table className={styles.table} columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
@@ -25,18 +30,12 @@ export default function TeamMembersTable({ columns = [], rows = [] }) {
       </TableHeader>
       <TableBody>
         {(row, keys, rowIndex) => {
-          const { id } = row;
-
           row.action = (
             <div className={styles.actions}>
-              <Link href={`/teams/${id}`} shallow>
-                <a>
-                  <Button>
-                    <Icon icon="arrow-right" />
-                    Settings
-                  </Button>
-                </a>
-              </Link>
+              <Button>
+                <Icon icon="cross" />
+                Remove
+              </Button>
             </div>
           );
 
@@ -49,7 +48,7 @@ export default function TeamMembersTable({ columns = [], rows = [] }) {
                     className={styles.cell}
                     style={{ ...columns[colIndex]?.style }}
                   >
-                    {data[key]}
+                    {data[key] ?? data?.user?.[key]}
                   </TableCell>
                 );
               }}

components/pages/settings/teams/TeamsList.js

@@ -1,26 +1,20 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
+import { Button, Icon, Modal, useToast } from 'react-basics';
 import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import TeamAddForm from 'components/forms/TeamAddForm';
+import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
 import PageHeader from 'components/layout/PageHeader';
-import TeamsTable from 'components/tables/TeamsTable';
+import TeamsTable from 'components/pages/settings/teams/TeamsTable';
 import Page from 'components/layout/Page';
-import { useQuery } from '@tanstack/react-query';
 
 export default function TeamsList() {
   const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
-  const { get } = useApi();
+  const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
   const hasData = data && data.length !== 0;
   const { toast, showToast } = useToast();
 
-  const columns = [
-    { name: 'name', label: 'Name', style: { flex: 2 } },
-    { name: 'action', label: ' ' },
-  ];
-
   const handleAdd = () => {
     setEdit(true);
   };
@@ -43,15 +37,12 @@ export default function TeamsList() {
           <Icon icon="plus" /> Create team
         </Button>
       </PageHeader>
-
-      {hasData && <TeamsTable columns={columns} rows={data} />}
+      {hasData && <TeamsTable data={data} />}
       {!hasData && (
-        <EmptyPlaceholder msg="You don't have any teams configured.">
-          <Flexbox justifyContent="center" alignItems="center">
-            <Button variant="primary" onClick={handleAdd}>
-              <Icon icon="plus" /> Create team
-            </Button>
-          </Flexbox>
+        <EmptyPlaceholder message="You don't have any teams configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Create team
+          </Button>
         </EmptyPlaceholder>
       )}
       {edit && (

components/pages/settings/teams/TeamsTable.js

@@ -11,9 +11,14 @@ import {
 } from 'react-basics';
 import styles from './TeamsTable.module.css';
 
-export default function TeamsTable({ columns = [], rows = [] }) {
+const columns = [
+  { name: 'name', label: 'Name', style: { flex: 2 } },
+  { name: 'action', label: ' ' },
+];
+
+export default function TeamsTable({ data = [] }) {
   return (
-    <Table className={styles.table} columns={columns} rows={rows}>
+    <Table className={styles.table} columns={columns} rows={data}>
       <TableHeader>
         {(column, index) => {
           return (
@@ -29,7 +34,7 @@ export default function TeamsTable({ columns = [], rows = [] }) {
 
           row.action = (
             <div className={styles.actions}>
-              <Link href={`/teams/${id}`} shallow>
+              <Link href={`/settings/teams/${id}`}>
                 <a>
                   <Button>
                     <Icon icon="arrow-right" />

components/pages/settings/users/UserDelete.js

@@ -1,4 +1,4 @@
-import UserDeleteForm from 'components/forms/UserDeleteForm';
+import UserDeleteForm from 'components/pages/settings/users/UserDeleteForm';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { Button, Form, FormRow, Modal } from 'react-basics';

components/pages/settings/users/UserDeleteForm.js

@@ -9,7 +9,6 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
 
@@ -26,7 +25,7 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
   };
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error}>
       <p>
         To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </p>
@@ -36,10 +35,10 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+        <SubmitButton variant="primary" disabled={isLoading}>
           Save
         </SubmitButton>
-        <Button className={styles.button} disabled={isLoading} onClick={onClose}>
+        <Button disabled={isLoading} onClick={onClose}>
           Cancel
         </Button>
       </FormButtons>

components/pages/settings/users/UserSettings.js

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
-import UserDelete from 'components/pages/UserDelete';
-import UserEditForm from 'components/forms/UserEditForm';
-import UserPasswordForm from 'components/forms/UserPasswordForm';
+import UserDelete from 'components/pages/settings/users/UserDelete';
+import UserEditForm from 'components/pages/settings/users/UserEditForm';
+import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import useApi from 'hooks/useApi';

components/pages/settings/users/UsersList.js

@@ -1,6 +1,6 @@
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import UsersTable from 'components/tables/UsersTable';
+import UsersTable from 'components/pages/settings/users/UsersTable';
 import { useState } from 'react';
 import { Button, Icon, useToast } from 'react-basics';
 import { useMutation } from '@tanstack/react-query';

components/pages/settings/websites/ShareUrl.js

@@ -14,7 +14,7 @@ import useApi from 'hooks/useApi';
 
 const generateId = () => getRandomChars(16);
 
-export default function ShareUrlForm({ websiteId, data, onSave }) {
+export default function ShareUrl({ websiteId, data, onSave }) {
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();
@@ -23,7 +23,7 @@ export default function ShareUrlForm({ websiteId, data, onSave }) {
   );
   const ref = useRef(null);
   const url = useMemo(
-    () => `${location.origin}/share/${id}/${encodeURIComponent(name)}`,
+    () => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`,
     [id, name],
   );
 

components/pages/settings/websites/TrackingCode.js

@@ -0,0 +1,16 @@
+import { TextArea } from 'react-basics';
+import { TRACKER_SCRIPT_URL } from 'lib/constants';
+
+export default function TrackingCode({ websiteId }) {
+  const code = `<script async src="${TRACKER_SCRIPT_URL}" data-website-id="${websiteId}"></script>`;
+
+  return (
+    <>
+      <p>
+        To track stats for this website, place the following code in the <code>&lt;head&gt;</code>{' '}
+        section of your HTML.
+      </p>
+      <TextArea rows={4} value={code} readOnly allowCopy />
+    </>
+  );
+}

components/pages/settings/websites/WebsiteAddForm.js

@@ -9,12 +9,10 @@ import {
   SubmitButton,
 } from 'react-basics';
 import useApi from 'hooks/useApi';
-import styles from './Form.module.css';
-import { useMutation } from '@tanstack/react-query';
 import { DOMAIN_REGEX } from 'lib/constants';
 
 export default function WebsiteAddForm({ onSave, onClose }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
   const ref = useRef(null);
 
@@ -27,7 +25,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
   };
 
   return (
-    <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
       <FormRow label="Name">
         <FormInput name="name" rules={{ required: 'Required' }}>
           <TextField autoComplete="off" />

components/pages/settings/websites/WebsiteDeleteForm.js

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import {
   Button,
@@ -9,12 +8,11 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
 
 export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
-  const { del } = useApi();
+  const { del, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
 
   const handleSubmit = async data => {
@@ -26,7 +24,7 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
   };
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error}>
       <div>
         To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </div>
@@ -36,10 +34,10 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+        <SubmitButton variant="primary" disabled={isLoading}>
           Save
         </SubmitButton>
-        <Button className={styles.button} disabled={isLoading} onClick={onClose}>
+        <Button disabled={isLoading} onClick={onClose}>
           Cancel
         </Button>
       </FormButtons>

components/pages/settings/websites/WebsiteDetails.js

@@ -1,20 +1,19 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast, Button, Icon } from 'react-basics';
-import { useQuery } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
-import WebsiteEditForm from 'components/forms/WebsiteEditForm';
-import WebsiteReset from 'components/forms/WebsiteReset';
+import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
+import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
 import PageHeader from 'components/layout/PageHeader';
-import TrackingCodeForm from 'components/forms/TrackingCodeForm';
-import ShareUrlForm from 'components/forms/ShareUrlForm';
+import TrackingCode from 'components/pages/settings/websites/TrackingCode';
+import ShareUrl from 'components/pages/settings/websites/ShareUrl';
 import ExternalLink from 'assets/external-link.svg';
 
-export default function Websites({ websiteId }) {
+export default function WebsiteDetails({ websiteId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
-  const { get } = useApi();
+  const { get, useQuery } = useApi();
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['website', websiteId],
@@ -43,7 +42,7 @@ export default function Websites({ websiteId }) {
       <PageHeader>
         <Breadcrumbs>
           <Item>
-            <Link href="/websites">Websites</Link>
+            <Link href="/settings/websites">Websites</Link>
           </Item>
           <Item>{values?.name}</Item>
         </Breadcrumbs>
@@ -58,18 +57,18 @@ export default function Websites({ websiteId }) {
           </a>
         </Link>
       </PageHeader>
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="details">General</Item>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="details">Details</Item>
         <Item key="tracking">Tracking code</Item>
         <Item key="share">Share URL</Item>
-        <Item key="danger">Danger zone</Item>
+        <Item key="actions">Actions</Item>
       </Tabs>
       {tab === 'details' && (
         <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
       )}
-      {tab === 'tracking' && <TrackingCodeForm websiteId={websiteId} data={values} />}
-      {tab === 'share' && <ShareUrlForm websiteId={websiteId} data={values} onSave={handleSave} />}
-      {tab === 'danger' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
+      {tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
+      {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
+      {tab === 'actions' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
     </Page>
   );
 }

components/pages/settings/websites/WebsiteEditForm.js

@@ -1,11 +1,10 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
-import { useMutation } from '@tanstack/react-query';
 import { useRef } from 'react';
 import useApi from 'hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
 
 export default function WebsiteEditForm({ websiteId, data, onSave }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
   const ref = useRef(null);
 

components/pages/settings/websites/WebsiteReset.js

@@ -1,5 +1,5 @@
-import WebsiteDeleteForm from 'components/forms/WebsiteDeleteForm';
-import WebsiteResetForm from 'components/forms/WebsiteResetForm';
+import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
+import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { Button, Form, FormRow, Modal } from 'react-basics';

components/pages/settings/websites/WebsiteResetForm.js

@@ -1,4 +1,3 @@
-import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 import {
   Button,
@@ -9,12 +8,11 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'RESET';
 
 export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data =>
     post(`/websites/${websiteId}/reset`, data),
   );
@@ -28,7 +26,7 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
   };
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={error}>
       <div>
         To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </div>
@@ -38,10 +36,10 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+        <SubmitButton variant="primary" disabled={isLoading}>
           Save
         </SubmitButton>
-        <Button className={styles.button} disabled={isLoading} onClick={onClose}>
+        <Button disabled={isLoading} onClick={onClose}>
           Cancel
         </Button>
       </FormButtons>

components/pages/settings/websites/WebsitesList.js

@@ -1,20 +1,18 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
+import { Button, Icon, Modal, useToast } from 'react-basics';
 import useApi from 'hooks/useApi';
-import { useQuery } from '@tanstack/react-query';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import WebsiteAddForm from 'components/forms/WebsiteAddForm';
+import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
 import PageHeader from 'components/layout/PageHeader';
-import WebsitesTable from 'components/tables/WebsitesTable';
+import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import Page from 'components/layout/Page';
 import useUser from 'hooks/useUser';
 
 export default function WebsitesList() {
   const [edit, setEdit] = useState(false);
-  const [update, setUpdate] = useState(0);
-  const { get } = useApi();
-  const user = useUser();
-  const { data, isLoading, error } = useQuery(['websites', update], () =>
+  const { get, useQuery } = useApi();
+  const { user } = useUser();
+  const { data, isLoading, error, refetch } = useQuery(['websites', user.id], () =>
     get(`/users/${user.id}/websites`),
   );
   const hasData = data && data.length !== 0;
@@ -30,9 +28,9 @@ export default function WebsitesList() {
     setEdit(true);
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
+    await refetch();
     setEdit(false);
-    setUpdate(state => state + 1);
     showToast({ message: 'Website saved.', variant: 'success' });
   };
 
@@ -51,12 +49,10 @@ export default function WebsitesList() {
 
       {hasData && <WebsitesTable columns={columns} rows={data} />}
       {!hasData && (
-        <EmptyPlaceholder msg="You don't have any websites configured.">
-          <Flexbox justifyContent="center" alignItems="center">
-            <Button variant="primary" onClick={handleAdd}>
-              <Icon icon="plus" /> Add website
-            </Button>
-          </Flexbox>
+        <EmptyPlaceholder message="You don't have any websites configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Add website
+          </Button>
         </EmptyPlaceholder>
       )}
       {edit && (

components/pages/settings/websites/WebsitesTable.js

@@ -30,7 +30,7 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
 
           row.action = (
             <div className={styles.actions}>
-              <Link href={`/websites/${id}/settings`} shallow>
+              <Link href={`/settings/websites/${id}`}>
                 <a>
                   <Button>
                     <Icon icon="arrow-right" />
@@ -38,8 +38,8 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
                   </Button>
                 </a>
               </Link>
-              <Link href={`/websites/${id}`}>
-                <a>
+              <Link href={`/analytics/websites/${id}`}>
+                <a target="_blank">
                   <Button>
                     <Icon>
                       <ExternalLink />

components/pages/websites/WebsiteDetails.js

@@ -21,9 +21,9 @@ import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import { useState } from 'react';
 import { Column, Loading } from 'react-basics';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import EventDataButton from './../common/EventDataButton';
-import EventsChart from './../metrics/EventsChart';
-import EventsTable from './../metrics/EventsTable';
+import EventDataButton from '../../common/EventDataButton';
+import EventsChart from '../../metrics/EventsChart';
+import EventsTable from '../../metrics/EventsTable';
 import styles from './WebsiteDetails.module.css';
 
 const messages = defineMessages({