Refactored forms and pages.

next.config.js

@@ -60,7 +60,7 @@ const redirects = [
   {
     source: '/settings',
     destination: process.env.CLOUD_MODE
-      ? `${process.env.CLOUD_URL}/settings/websites`
+      ? `${process.env.CLOUD_URL}/websites`
       : '/settings/websites',
     permanent: true,
   },

src/app/(main)/reports/ReportDeleteButton.js

@@ -0,0 +1,42 @@
+import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
+import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
+import { useApi, useMessages } from 'components/hooks';
+import { setValue } from 'store/cache';
+
+export function ReportDeleteButton({ reportId, reportName, onDelete }) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
+
+  const handleConfirm = close => {
+    mutate(reportId, {
+      onSuccess: () => {
+        setValue('reports', Date.now());
+        onDelete?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ModalTrigger>
+      <Button>
+        <Icon>
+          <Icons.Trash />
+        </Icon>
+        <Text>{formatMessage(labels.delete)}</Text>
+      </Button>
+      <Modal>
+        {close => (
+          <ConfirmDeleteForm
+            name={reportName}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+          />
+        )}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default ReportDeleteButton;

src/app/(main)/reports/ReportsDataTable.js

@@ -0,0 +1,22 @@
+'use client';
+import { useApi } from 'components/hooks';
+import ReportsTable from './ReportsTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
+import useCache from 'store/cache';
+
+function useReports() {
+  const { get } = useApi();
+  const modified = useCache(state => state?.reports);
+  return useFilterQuery(['reports', modified], params => get(`/reports`, params));
+}
+
+export default function ReportsDataTable() {
+  const queryResult = useReports();
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => <ReportsTable data={data} showDomain={true} />}
+    </DataTable>
+  );
+}

src/app/(main)/reports/ReportsHeader.js

@@ -1,22 +1,23 @@
 'use client';
 import PageHeader from 'components/layout/PageHeader';
-import Link from 'next/link';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import { useMessages } from 'components/hooks';
+import { useRouter } from 'next/navigation';
 
 export function ReportsHeader() {
   const { formatMessage, labels } = useMessages();
+  const router = useRouter();
+
+  const handleClick = () => router.push('/reports/create');
 
   return (
     <PageHeader title={formatMessage(labels.reports)}>
-      <Link href="/reports/create">
+      <Button variant="primary" onClick={handleClick}>
-        <Button variant="primary">
+        <Icon>
-          <Icon>
+          <Icons.Plus />
-            <Icons.Plus />
+        </Icon>
-          </Icon>
+        <Text>{formatMessage(labels.createReport)}</Text>
-          <Text>{formatMessage(labels.createReport)}</Text>
+      </Button>
-        </Button>
-      </Link>
     </PageHeader>
   );
 }

src/app/(main)/reports/ReportsList.js

@@ -1,37 +0,0 @@
-'use client';
-import { useApi } from 'components/hooks';
-import ReportsTable from './ReportsTable';
-import useFilterQuery from 'components/hooks/useFilterQuery';
-import DataTable from 'components/common/DataTable';
-
-function useReports() {
-  const { get, del, useMutation } = useApi();
-  const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
-  const queryResult = useFilterQuery(['reports'], params => get(`/reports`, params));
-
-  const deleteReport = id => {
-    mutate(id, {
-      onSuccess: () => {
-        queryResult.refetch();
-      },
-    });
-  };
-
-  return { queryResult, deleteReport };
-}
-
-export default function ReportsList() {
-  const { queryResult, deleteReport } = useReports();
-
-  const handleDelete = async (id, callback) => {
-    await deleteReport(id);
-    await queryResult.refetch();
-    callback?.();
-  };
-
-  return (
-    <DataTable queryResult={queryResult}>
-      {({ data }) => <ReportsTable data={data} showDomain={true} onDelete={handleDelete} />}
-    </DataTable>
-  );
-}

src/app/(main)/reports/ReportsTable.js

@@ -1,27 +1,14 @@
-import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
 import LinkButton from 'components/common/LinkButton';
 import { useMessages } from 'components/hooks';
 import useUser from 'components/hooks/useUser';
-import {
+import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-  Button,
-  GridColumn,
-  GridTable,
-  Icon,
-  Icons,
-  Modal,
-  ModalTrigger,
-  Text,
-} from 'react-basics';
 import { REPORT_TYPES } from 'lib/constants';
+import ReportDeleteButton from './ReportDeleteButton';
 
-export function ReportsTable({ data = [], onDelete, showDomain }) {
+export function ReportsTable({ data = [], showDomain }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
-  const handleConfirm = (id, callback) => {
-    onDelete?.(id, callback);
-  };
-
   return (
     <GridTable data={data}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
@@ -43,26 +30,15 @@ export function ReportsTable({ data = [], onDelete, showDomain }) {
           const { id, name, userId, website } = row;
           return (
             <>
-              <LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
               {(user.id === userId || user.id === website?.userId) && (
-                <ModalTrigger>
+                <ReportDeleteButton reportId={id} reportName={name} />
-                  <Button>
-                    <Icon>
-                      <Icons.Trash />
-                    </Icon>
-                    <Text>{formatMessage(labels.delete)}</Text>
-                  </Button>
-                  <Modal>
-                    {close => (
-                      <ConfirmDeleteForm
-                        name={name}
-                        onConfirm={handleConfirm.bind(null, id, close)}
-                        onClose={close}
-                      />
-                    )}
-                  </Modal>
-                </ModalTrigger>
               )}
+              <LinkButton href={`/reports/${id}`}>
+                <Icon>
+                  <Icons.ArrowRight />
+                </Icon>
+                <Text>{formatMessage(labels.view)}</Text>
+              </LinkButton>
             </>
           );
         }}

src/app/(main)/reports/[id]/BaseParameters.js

@@ -1,10 +1,10 @@
+import { useContext } from 'react';
 import { FormRow } from 'react-basics';
+import { parseDateRange } from 'lib/date';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
-import { parseDateRange } from 'lib/date';
-import { useContext } from 'react';
-import { ReportContext } from './Report';
 import { useMessages } from 'components/hooks';
+import { ReportContext } from './Report';
 
 export function BaseParameters({
   showWebsiteSelect = true,

src/app/(main)/reports/event-data/EventDataParameters.js

@@ -1,13 +1,13 @@
 import { useContext, useRef } from 'react';
-import { useApi, useMessages } from 'components/hooks';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
-import { ReportContext } from '../Report';
 import Empty from 'components/common/Empty';
-import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
 import Icons from 'components/icons';
-import FieldAddForm from '../FieldAddForm';
+import { useApi, useMessages } from 'components/hooks';
-import BaseParameters from '../BaseParameters';
+import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
-import ParameterList from '../ParameterList';
+import { ReportContext } from '../[id]/Report';
+import FieldAddForm from '../[id]/FieldAddForm';
+import ParameterList from '../[id]/ParameterList';
+import BaseParameters from '../[id]/BaseParameters';
 import styles from './EventDataParameters.module.css';
 
 function useFields(websiteId, startDate, endDate) {

src/app/(main)/reports/event-data/EventDataReport.js

@@ -1,7 +1,7 @@
-import Report from '../Report';
+import Report from '../[id]/Report';
-import ReportHeader from '../ReportHeader';
+import ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../ReportMenu';
+import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../ReportBody';
+import ReportBody from '../[id]/ReportBody';
 import EventDataParameters from './EventDataParameters';
 import EventDataTable from './EventDataTable';
 import Nodes from 'assets/nodes.svg';

src/app/(main)/reports/event-data/EventDataTable.js

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 
 export function EventDataTable() {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/funnel/FunnelChart.js

@@ -5,7 +5,7 @@ import useTheme from 'components/hooks/useTheme';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
 import styles from './FunnelChart.module.css';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 
 export function FunnelChart({ className, loading }) {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/funnel/FunnelParameters.js

@@ -13,10 +13,10 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import UrlAddForm from './UrlAddForm';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
-import BaseParameters from '../BaseParameters';
+import BaseParameters from '../[id]/BaseParameters';
-import ParameterList from '../ParameterList';
+import ParameterList from '../[id]/ParameterList';
-import PopupForm from '../PopupForm';
+import PopupForm from '../[id]/PopupForm';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);

src/app/(main)/reports/funnel/FunnelReport.js

@@ -2,10 +2,10 @@
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import Report from '../Report';
+import Report from '../[id]/Report';
-import ReportHeader from '../ReportHeader';
+import ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../ReportMenu';
+import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../ReportBody';
+import ReportBody from '../[id]/ReportBody';
 import Funnel from 'assets/funnel.svg';
 import { REPORT_TYPES } from 'lib/constants';
 

src/app/(main)/reports/funnel/FunnelTable.js

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import ListTable from 'components/metrics/ListTable';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 
 export function FunnelTable() {
   const { report } = useContext(ReportContext);

src/app/(main)/reports/insights/InsightsParameters.js

@@ -10,14 +10,14 @@ import {
   Popup,
   TooltipPopup,
 } from 'react-basics';
-import { ReportContext } from '../Report';
 import Icons from 'components/icons';
-import BaseParameters from '../BaseParameters';
+import BaseParameters from '../[id]/BaseParameters';
-import ParameterList from '../ParameterList';
+import { ReportContext } from '../[id]/Report';
+import ParameterList from '../[id]/ParameterList';
+import FilterSelectForm from '../[id]/FilterSelectForm';
+import FieldSelectForm from '../[id]/FieldSelectForm';
+import PopupForm from '../[id]/PopupForm';
 import styles from './InsightsParameters.module.css';
-import PopupForm from '../PopupForm';
-import FilterSelectForm from '../FilterSelectForm';
-import FieldSelectForm from '../FieldSelectForm';
 
 export function InsightsParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);

src/app/(main)/reports/insights/InsightsReport.js

@@ -1,8 +1,8 @@
 'use client';
-import Report from '../Report';
+import Report from '../[id]/Report';
-import ReportHeader from '../ReportHeader';
+import ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../ReportMenu';
+import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../ReportBody';
+import ReportBody from '../[id]/ReportBody';
 import InsightsParameters from './InsightsParameters';
 import InsightsTable from './InsightsTable';
 import Lightbulb from 'assets/lightbulb.svg';

src/app/(main)/reports/insights/InsightsTable.js

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useFormat, useMessages } from 'components/hooks';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 
 export function InsightsTable() {

src/app/(main)/reports/page.tsx

@@ -1,11 +1,11 @@
 import ReportsHeader from './ReportsHeader';
-import ReportsList from './ReportsList';
+import ReportsDataTable from './ReportsDataTable';
 
 export default function ReportsPage() {
   return (
     <>
       <ReportsHeader />
-      <ReportsList />
+      <ReportsDataTable />
     </>
   );
 }

src/app/(main)/reports/retention/RetentionParameters.js

@@ -1,9 +1,9 @@
 import { useContext, useRef } from 'react';
 import { useMessages } from 'components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 import { MonthSelect } from 'components/input/MonthSelect';
-import BaseParameters from '../BaseParameters';
+import BaseParameters from '../[id]/BaseParameters';
 import { parseDateRange } from 'lib/date';
 
 export function RetentionParameters() {

src/app/(main)/reports/retention/RetentionReport.js

@@ -1,10 +1,10 @@
 'use client';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
-import Report from '../Report';
+import Report from '../[id]/Report';
-import ReportHeader from '../ReportHeader';
+import ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../ReportMenu';
+import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../ReportBody';
+import ReportBody from '../[id]/ReportBody';
 import Magnet from 'assets/magnet.svg';
 import { REPORT_TYPES } from 'lib/constants';
 import { parseDateRange } from 'lib/date';

src/app/(main)/reports/retention/RetentionTable.js

@@ -1,9 +1,8 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
-import { ReportContext } from '../Report';
+import { ReportContext } from '../[id]/Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import { useMessages } from 'components/hooks';
+import { useMessages, useLocale } from 'components/hooks';
-import { useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
 import styles from './RetentionTable.module.css';
 

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

@@ -8,6 +8,7 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
+import { setValue } from 'store/cache';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 
@@ -20,8 +21,9 @@ export function TeamAddForm({ onSave, onClose }) {
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async () => {
-        onSave();
+        setValue('teams', Date.now());
-        onClose();
+        onSave?.();
+        onClose?.();
       },
     });
   };

src/app/(main)/settings/teams/TeamDeleteForm.js

@@ -1,6 +1,7 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
+import { setValue } from 'store/cache';
 
 export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
@@ -10,8 +11,9 @@ export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async () => {
-        onSave();
+        setValue('teams', Date.now());
-        onClose();
+        onSave?.();
+        onClose?.();
       },
     });
   };

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

@@ -25,16 +25,16 @@ export function TeamsTable({ data = [] }) {
 
           return (
             <>
+              {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
+              {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
               <Link href={`/settings/teams/${id}`}>
                 <Button>
                   <Icon>
                     <Icons.Edit />
                   </Icon>
-                  <Text>{formatMessage(labels.view)}</Text>
+                  <Text>{formatMessage(labels.edit)}</Text>
                 </Button>
               </Link>
-              {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
-              {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
             </>
           );
         }}

src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js

@@ -4,7 +4,7 @@ import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle }
 import useMessages from 'components/hooks/useMessages';
 import WebsitesDataTable from '../../websites/WebsitesDataTable';
 
-export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
+export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
@@ -57,4 +57,4 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
   );
 }
 
-export default TeamAddWebsiteForm;
+export default TeamWebsiteAddForm;

src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js

@@ -7,15 +7,12 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   const { del, useMutation } = useApi();
   const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/websites/${websiteId}`));
 
-  const handleRemoveTeamMember = () => {
+  const handleRemoveTeamMember = async () => {
-    mutate(
+    await mutate(null, {
-      {},
+      onSuccess: () => {
-      {
+        onSave();
-        onSuccess: () => {
-          onSave();
-        },
       },
-    );
+    });
   };
 
   return (

src/app/(main)/settings/teams/[id]/TeamWebsites.js

@@ -1,6 +1,6 @@
 import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import TeamWebsitesTable from './TeamWebsitesTable';
-import TeamAddWebsiteForm from './TeamAddWebsiteForm';
+import TeamWebsiteAddForm from './TeamWebsiteAddForm';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
@@ -36,7 +36,7 @@ export function TeamWebsites({ teamId }) {
             <Text>{formatMessage(labels.addWebsite)}</Text>
           </Button>
           <Modal title={formatMessage(labels.addWebsite)}>
-            {close => <TeamAddWebsiteForm teamId={teamId} onSave={handleChange} onClose={close} />}
+            {close => <TeamWebsiteAddForm teamId={teamId} onSave={handleChange} onClose={close} />}
           </Modal>
         </ModalTrigger>
       </ActionForm>

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

@@ -1,6 +1,7 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import WebsiteAddForm from './WebsiteAddForm';
 import useMessages from 'components/hooks/useMessages';
+import { setValue } from 'store/cache';
 
 export function WebsiteAddButton({ onSave }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -8,6 +9,7 @@ export function WebsiteAddButton({ onSave }) {
 
   const handleSave = async () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    setValue('websites', Date.now());
     onSave?.();
   };
 

src/app/(main)/settings/websites/WebsitesDataTable.js

@@ -4,13 +4,15 @@ import useUser from 'components/hooks/useUser';
 import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
-import WebsitesHeader from './WebsitesHeader';
+import useCache from 'store/cache';
 
 function useWebsites({ includeTeams, onlyTeams }) {
   const { user } = useUser();
   const { get } = useApi();
+  const modified = useCache(state => state?.websites);
+
   return useFilterQuery(
-    ['websites', { includeTeams, onlyTeams }],
+    ['websites', { includeTeams, onlyTeams, modified }],
     params => {
       return get(`/users/${user?.id}/websites`, {
         includeTeams,
@@ -23,9 +25,8 @@ function useWebsites({ includeTeams, onlyTeams }) {
 }
 
 export function WebsitesDataTable({
-  showHeader = true,
+  allowEdit = true,
-  showEditButton = true,
+  allowView = true,
-  showViewButton = true,
   showActions = true,
   showTeam,
   includeTeams,
@@ -35,22 +36,19 @@ export function WebsitesDataTable({
   const queryResult = useWebsites({ includeTeams, onlyTeams });
 
   return (
-    <>
+    <DataTable queryResult={queryResult}>
-      {showHeader && <WebsitesHeader />}
+      {({ data }) => (
-      <DataTable queryResult={queryResult}>
+        <WebsitesTable
-        {({ data }) => (
+          data={data}
-          <WebsitesTable
+          showTeam={showTeam}
-            data={data}
+          showActions={showActions}
-            showTeam={showTeam}
+          allowEdit={allowEdit}
-            showActions={showActions}
+          allowView={allowView}
-            showEditButton={showEditButton}
+        >
-            showViewButton={showViewButton}
+          {children}
-          >
+        </WebsitesTable>
-            {children}
+      )}
-          </WebsitesTable>
+    </DataTable>
-        )}
-      </DataTable>
-    </>
   );
 }
 

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

@@ -7,8 +7,8 @@ export function WebsitesTable({
   data = [],
   showTeam,
   showActions,
-  showEditButton,
+  allowEdit,
-  showViewButton,
+  allowView,
   children,
 }) {
   const { formatMessage, labels } = useMessages();
@@ -37,7 +37,7 @@ export function WebsitesTable({
 
           return (
             <>
-              {showActions && showEditButton && (!showTeam || ownerId === user.id) && (
+              {showActions && allowEdit && (!showTeam || ownerId === user.id) && (
                 <Link href={`/settings/websites/${id}`}>
                   <Button>
                     <Icon>
@@ -47,7 +47,7 @@ export function WebsitesTable({
                   </Button>
                 </Link>
               )}
-              {showActions && showViewButton && (
+              {showActions && allowView && (
                 <Link href={`/websites/${id}`}>
                   <Button>
                     <Icon>

src/app/(main)/settings/websites/page.js

@@ -1,9 +1,15 @@
 import WebsitesDataTable from './WebsitesDataTable';
+import WebsitesHeader from './WebsitesHeader';
 
 export default function () {
   if (process.env.cloudMode) {
     return null;
   }
 
-  return <WebsitesDataTable />;
+  return (
+    <>
+      <WebsitesHeader />
+      <WebsitesDataTable />
+    </>
+  );
 }

src/app/(main)/websites/[id]/WebsiteMetricsBar.js

@@ -3,8 +3,8 @@ import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'com
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import FilterSelectForm from '../../../(main)/reports/FilterSelectForm';
+import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
-import PopupForm from '../../../(main)/reports/PopupForm';
+import PopupForm from 'app/(main)/reports/[id]/PopupForm';
 import { formatShortTime } from 'lib/format';
 import { Button, Icon, Icons, Popup, PopupTrigger } from 'react-basics';
 import styles from './WebsiteMetricsBar.module.css';

src/app/not-found.tsx

@@ -2,7 +2,7 @@
 import { Flexbox } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 
-export default function Custom404() {
+export default function () {
   const { formatMessage, labels } = useMessages();
 
   return (

src/components/common/LinkButton.js

@@ -1,16 +1,14 @@
 import classNames from 'classnames';
 import Link from 'next/link';
-import { Icon, Icons, Text } from 'react-basics';
-import styles from './LinkButton.module.css';
 import { useLocale } from 'components/hooks';
+import styles from './LinkButton.module.css';
 
-export function LinkButton({ href, icon, className, children }) {
+export function LinkButton({ href, className, children }) {
   const { dir } = useLocale();
 
   return (
-    <Link className={classNames(styles.button, className)} href={href}>
+    <Link className={classNames(styles.button, className)} href={href} dir={dir}>
-      <Icon rotate={dir === 'rtl' ? 0 : 180}>{icon || <Icons.ArrowRight />}</Icon>
+      {children}
-      <Text>{children}</Text>
     </Link>
   );
 }

src/components/layout/Page.module.css

@@ -2,7 +2,6 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: var(--base50);
   position: relative;
   max-width: 1320px;
   min-height: calc(100vh - 60px);

src/index.ts

@@ -22,29 +22,31 @@ export * from 'components/hooks/useUser';
 export * from 'components/hooks/useWebsite';
 export * from 'components/hooks/useWebsiteReports';
 
-export * from 'app/(main)/settings/teams/TeamAddForm';
+export * from './app/(main)/settings/teams/[id]/TeamWebsiteAddForm';
-export * from 'app/(main)/settings/teams/[id]/TeamAddWebsiteForm';
-export * from 'app/(main)/settings/teams/TeamDeleteForm';
 export * from 'app/(main)/settings/teams/[id]/TeamEditForm';
-export * from 'app/(main)/settings/teams/TeamJoinForm';
-export * from 'app/(main)/settings/teams/TeamLeaveForm';
 export * from 'app/(main)/settings/teams/[id]/TeamMemberRemoveButton';
 export * from 'app/(main)/settings/teams/[id]/TeamMembers';
 export * from 'app/(main)/settings/teams/[id]/TeamMembersTable';
 export * from 'app/(main)/settings/teams/[id]/TeamSettings';
-export * from 'app/(main)/settings/teams/TeamsDataTable';
-export * from 'app/(main)/settings/teams/TeamsTable';
 export * from 'app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton';
 export * from 'app/(main)/settings/teams/[id]/TeamWebsites';
 export * from 'app/(main)/settings/teams/[id]/TeamWebsitesTable';
+export * from 'app/(main)/settings/teams/TeamAddForm';
+export * from 'app/(main)/settings/teams/TeamDeleteForm';
+export * from 'app/(main)/settings/teams/TeamsHeader';
+export * from 'app/(main)/settings/teams/TeamJoinForm';
+export * from 'app/(main)/settings/teams/TeamLeaveForm';
+export * from 'app/(main)/settings/teams/TeamsDataTable';
+export * from 'app/(main)/settings/teams/TeamsTable';
 export * from 'app/(main)/settings/teams/WebsiteTags';
 
 export * from 'app/(main)/settings/websites/[id]/ShareUrl';
 export * from 'app/(main)/settings/websites/[id]/TrackingCode';
-export * from 'app/(main)/settings/websites/WebsiteAddForm';
 export * from 'app/(main)/settings/websites/[id]/WebsiteDeleteForm';
 export * from 'app/(main)/settings/websites/[id]/WebsiteEditForm';
 export * from 'app/(main)/settings/websites/[id]/WebsiteResetForm';
+export * from 'app/(main)/settings/websites/WebsiteAddForm';
+export * from 'app/(main)/settings/websites/WebsitesHeader';
 export * from 'app/(main)/settings/websites/WebsiteSettings';
-export * from 'app/(main)/settings/websites/WebsitesDataTable';
+export * from './app/(main)/settings/websites/WebsitesDataTable';
 export * from 'app/(main)/settings/websites/WebsitesTable';

src/store/cache.js

@@ -0,0 +1,9 @@
+import { create } from 'zustand';
+
+const store = create(() => ({}));
+
+export function setValue(key, value) {
+  store.setState({ [key]: value });
+}
+
+export default store;

src/store/queries.js

@@ -1,13 +0,0 @@
-import { create } from 'zustand';
-
-const store = create(() => ({}));
-
-export function saveQuery(key, data) {
-  store.setState({ [key]: data });
-}
-
-export function getQuery(key) {
-  return store.getState()[key];
-}
-
-export default store;

src/store/websites.ts

@@ -4,10 +4,6 @@ import { DateRange } from 'lib/types';
 
 const store = create(() => ({}));
 
-export function getWebsiteDateRange(websiteId: string) {
-  return store.getState()?.[websiteId];
-}
-
 export function setWebsiteDateRange(websiteId: string, dateRange: DateRange) {
   store.setState(
     produce(state => {