Merge branch 'dev' into dependabot/npm_and_yarn/postcss-8.4.31

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -6,7 +6,7 @@ const pkg = require('./package.json');
 const contentSecurityPolicy = `
   default-src 'self';
   img-src *;
-  script-src 'self' 'unsafe-eval';
+  script-src 'self' 'unsafe-eval' 'unsafe-inline';
   style-src 'self' 'unsafe-inline';
   connect-src 'self' api.umami.is;
   frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS};
@@ -74,16 +74,23 @@ if (process.env.CLOUD_MODE && process.env.CLOUD_URL && process.env.DISABLE_LOGIN
   });
 }
 
+const basePath = process.env.BASE_PATH;
+
+/** @type {import('next').NextConfig} */
 const config = {
+  reactStrictMode: false,
   env: {
-    cloudMode: process.env.CLOUD_MODE,
+    basePath: basePath || '',
+    cloudMode: !!process.env.CLOUD_MODE,
     cloudUrl: process.env.CLOUD_URL,
     configUrl: '/config',
     currentVersion: pkg.version,
     defaultLocale: process.env.DEFAULT_LOCALE,
+    disableLogin: process.env.DISABLE_LOGIN,
+    disableUI: process.env.DISABLE_UI,
     isProduction: process.env.NODE_ENV === 'production',
   },
-  basePath: process.env.BASE_PATH,
+  basePath,
   output: 'standalone',
   eslint: {
     ignoreDuringBuilds: true,
@@ -92,11 +99,23 @@ const config = {
     ignoreBuildErrors: true,
   },
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.{js|jsx|ts|tsx}$/,
-      use: ['@svgr/webpack'],
-    });
+    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+        use: ['@svgr/webpack'],
+      },
+    );
+
+    fileLoaderRule.exclude = /\.svg$/i;
 
     config.resolve.alias['public'] = path.resolve('./public');
 

package.json

@@ -61,16 +61,17 @@
     ".next/cache"
   ],
   "dependencies": {
+    "@clickhouse/client": "^0.2.2",
     "@fontsource/inter": "^4.5.15",
     "@prisma/client": "5.3.1",
+    "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^4.33.0",
-    "@umami/prisma-client": "^0.2.0",
+    "@umami/prisma-client": "^0.3.0",
     "@umami/redis-client": "^0.15.0",
     "chalk": "^4.1.1",
     "chart.js": "^4.2.1",
     "chartjs-adapter-date-fns": "^3.0.0",
     "classnames": "^2.3.1",
-    "clickhouse": "^2.5.0",
     "colord": "^2.9.2",
     "cors": "^2.8.5",
     "cross-spawn": "^7.0.3",
@@ -91,18 +92,17 @@
     "kafkajs": "^2.1.0",
     "maxmind": "^4.3.6",
     "moment-timezone": "^0.5.35",
-    "next": "13.5.2",
+    "next": "13.5.3",
     "next-basics": "^0.36.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
-    "react-basics": "^0.100.0",
+    "react-basics": "^0.102.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.4",
-    "react-intl": "^5.24.7",
+    "react-intl": "^6.4.7",
     "react-simple-maps": "^2.3.0",
-    "react-spring": "^9.4.4",
     "react-use-measure": "^2.0.4",
     "react-window": "^1.8.6",
     "request-ip": "^3.3.0",
@@ -123,12 +123,12 @@
     "@rollup/plugin-node-resolve": "^15.2.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@svgr/rollup": "^8.1.0",
-    "@svgr/webpack": "^6.2.1",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "cross-env": "^7.0.3",
     "esbuild": "^0.17.17",
     "eslint": "^8.33.0",
@@ -138,8 +138,8 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "extract-react-intl-messages": "^4.1.1",
-    "husky": "^7.0.0",
-    "lint-staged": "^11.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "postcss": "^8.4.31",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^15.1.0",

rollup.components.config.mjs

@@ -19,6 +19,7 @@ const customResolver = resolve({
 
 const aliasConfig = {
   entries: [
+    { find: /^app/, replacement: path.resolve('./src/app') },
     { find: /^components/, replacement: path.resolve('./src/components') },
     { find: /^hooks/, replacement: path.resolve('./src/hooks') },
     { find: /^lib/, replacement: path.resolve('./src/lib') },

src/app/(main)/NavBar.js

@@ -0,0 +1,58 @@
+'use client';
+import { Icon, Text } from 'react-basics';
+import Link from 'next/link';
+import classNames from 'classnames';
+import Icons from 'components/icons';
+import ThemeButton from 'components/input/ThemeButton';
+import LanguageButton from 'components/input/LanguageButton';
+import ProfileButton from 'components/input/ProfileButton';
+import useMessages from 'components/hooks/useMessages';
+import HamburgerButton from 'components/common/HamburgerButton';
+import { usePathname } from 'next/navigation';
+import styles from './NavBar.module.css';
+
+export function NavBar() {
+  const pathname = usePathname();
+  const { formatMessage, labels } = useMessages();
+
+  const links = [
+    { label: formatMessage(labels.dashboard), url: '/dashboard' },
+    { label: formatMessage(labels.websites), url: '/websites' },
+    { label: formatMessage(labels.reports), url: '/reports' },
+    { label: formatMessage(labels.settings), url: '/settings' },
+  ].filter(n => n);
+
+  return (
+    <div className={styles.navbar}>
+      <div className={styles.logo}>
+        <Icon size="lg">
+          <Icons.Logo />
+        </Icon>
+        <Text>umami</Text>
+      </div>
+      <div className={styles.links}>
+        {links.map(({ url, label }) => {
+          return (
+            <Link
+              key={url}
+              href={url}
+              className={classNames({ [styles.selected]: pathname.startsWith(url) })}
+            >
+              <Text>{label}</Text>
+            </Link>
+          );
+        })}
+      </div>
+      <div className={styles.actions}>
+        <ThemeButton />
+        <LanguageButton />
+        <ProfileButton />
+      </div>
+      <div className={styles.mobile}>
+        <HamburgerButton />
+      </div>
+    </div>
+  );
+}
+
+export default NavBar;

src/app/(main)/NavBar.module.css

@@ -1,7 +1,7 @@
 .navbar {
+  display: grid;
+  grid-template-columns: max-content 1fr 1fr;
   position: relative;
-  display: flex;
-  flex-direction: row;
   align-items: center;
   height: 60px;
   background: var(--base75);
@@ -9,17 +9,6 @@
   padding: 0 20px;
 }
 
-.left,
-.right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.right {
-  justify-content: flex-end;
-}
-
 .logo {
   display: flex;
   flex-direction: row;
@@ -35,29 +24,24 @@
   flex-direction: row;
   gap: 30px;
   padding: 0 40px;
-  flex: 1;
   font-weight: 700;
+  max-height: 60px;
 }
 
-.links a {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  line-height: 60px;
+.links a,
+.links a:active,
+.links a:visited {
   color: var(--font-color200);
+  line-height: 60px;
   border-bottom: 2px solid transparent;
 }
 
-.links span {
-  white-space: nowrap;
-}
-
 .links a:hover {
   color: var(--font-color100);
   border-bottom: 2px solid var(--primary400);
 }
 
-.links .selected {
+.links a.selected {
   color: var(--font-color100);
   border-bottom: 2px solid var(--primary400);
 }
@@ -68,7 +52,6 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  min-width: 0;
 }
 
 .mobile {
@@ -76,6 +59,10 @@
 }
 
 @media only screen and (max-width: 768px) {
+  .navbar {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   .links,
   .actions {
     display: none;

src/app/(main)/Shell.tsx

@@ -0,0 +1,27 @@
+'use client';
+import Script from 'next/script';
+import { usePathname } from 'next/navigation';
+import UpdateNotice from 'components/common/UpdateNotice';
+import { useRequireLogin, useConfig } from 'components/hooks';
+
+export function Shell({ children }) {
+  const { user } = useRequireLogin();
+  const config = useConfig();
+  const pathname = usePathname();
+
+  if (!user || !config) {
+    return null;
+  }
+
+  return (
+    <>
+      {children}
+      <UpdateNotice user={user} config={config} />
+      {process.env.NODE_ENV === 'production' && !pathname.includes('/share/') && (
+        <Script src={`telemetry.js`} />
+      )}
+    </>
+  );
+}
+
+export default Shell;

src/app/(main)/console/TestConsole.js

@@ -1,14 +1,15 @@
+'use client';
 import WebsiteSelect from 'components/input/WebsiteSelect';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EventsChart from 'components/metrics/EventsChart';
-import WebsiteChart from 'components/pages/websites/WebsiteChart';
+import WebsiteChart from '../../(main)/websites/[id]/WebsiteChart';
 import useApi from 'components/hooks/useApi';
 import Head from 'next/head';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import Script from 'next/script';
-import { Button, Column, Row } from 'react-basics';
+import { Button } from 'react-basics';
 import styles from './TestConsole.module.css';
 
 export function TestConsole() {
@@ -90,8 +91,8 @@ export function TestConsole() {
             src={`${basePath}/script.js`}
             data-cache="true"
           />
-          <Row className={styles.test}>
-            <Column xs="4">
+          <div className={styles.test}>
+            <div>
               <div className={styles.header}>Page links</div>
               <div>
                 <Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
@@ -114,8 +115,8 @@ export function TestConsole() {
                   external link (tab)
                 </a>
               </div>
-            </Column>
-            <Column xs="4">
+            </div>
+            <div>
               <div className={styles.header}>Click events</div>
               <Button id="send-event-button" data-umami-event="button-click" variant="action">
                 Send event
@@ -130,8 +131,8 @@ export function TestConsole() {
               >
                 Send event with data
               </Button>
-            </Column>
-            <Column xs="4">
+            </div>
+            <div>
               <div className={styles.header}>Javascript events</div>
               <Button id="manual-button" variant="action" onClick={handleClick}>
                 Run script
@@ -140,14 +141,12 @@ export function TestConsole() {
               <Button id="manual-button" variant="action" onClick={handleIdentifyClick}>
                 Run identify
               </Button>
-            </Column>
-          </Row>
-          <Row>
-            <Column>
-              <WebsiteChart websiteId={website.id} />
-              <EventsChart websiteId={website.id} />
-            </Column>
-          </Row>
+            </div>
+          </div>
+          <div>
+            <WebsiteChart websiteId={website.id} />
+            <EventsChart websiteId={website.id} />
+          </div>
         </>
       )}
     </Page>

src/app/(main)/console/[[...id]]/page.tsx

@@ -0,0 +1,20 @@
+import TestConsole from '../TestConsole';
+import { Metadata } from 'next';
+
+async function getEnabled() {
+  return !!process.env.ENABLE_TEST_CONSOLE;
+}
+
+export default async function ConsolePage() {
+  const enabled = await getEnabled();
+
+  if (!enabled) {
+    return null;
+  }
+
+  return <TestConsole />;
+}
+
+export const metadata: Metadata = {
+  title: 'Test Console | umami',
+};

src/app/(main)/dashboard/Dashboard.js

@@ -1,11 +1,11 @@
-import { Button, Icon, Icons, Text } from 'react-basics';
+'use client';
+import { Button, Icon, Icons, Loading, Text } from 'react-basics';
 import Link from 'next/link';
-import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import Pager from 'components/common/Pager';
-import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
-import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton';
-import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
+import WebsiteChartList from '../../(main)/websites/[id]/WebsiteChartList';
+import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
+import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import useApi from 'components/hooks/useApi';
 import useDashboard from 'store/dashboard';
@@ -20,18 +20,18 @@ export function Dashboard() {
   const { get, useQuery } = useApi();
   const { page, handlePageChange } = useApiFilter();
   const pageSize = 10;
-  const {
-    data: result,
-    isLoading,
-    error,
-  } = useQuery(['websites', page, pageSize], () =>
+  const { data: result, isLoading } = useQuery(['websites', page, pageSize], () =>
     get('/websites', { includeTeams: 1, page, pageSize }),
   );
   const { data, count } = result || {};
   const hasData = data && data?.length !== 0;
 
+  if (isLoading) {
+    return <Loading size="lg" />;
+  }
+
   return (
-    <Page loading={isLoading} error={error}>
+    <>
       <PageHeader title={formatMessage(labels.dashboard)}>
         {!editing && hasData && <DashboardSettingsButton />}
       </PageHeader>
@@ -63,7 +63,7 @@ export function Dashboard() {
           )}
         </>
       )}
-    </Page>
+    </>
   );
 }
 

src/app/(main)/dashboard/DashboardEdit.js

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useMemo } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
@@ -7,7 +8,6 @@ import useDashboard, { saveDashboard } from 'store/dashboard';
 import useMessages from 'components/hooks/useMessages';
 import useApi from 'components/hooks/useApi';
 import styles from './DashboardEdit.module.css';
-import Page from 'components/layout/Page';
 
 const dragId = 'dashboard-website-ordering';
 
@@ -17,11 +17,7 @@ export function DashboardEdit() {
   const { formatMessage, labels } = useMessages();
   const [order, setOrder] = useState(websiteOrder || []);
   const { get, useQuery } = useApi();
-  const {
-    data: result,
-    isLoading,
-    error,
-  } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
+  const { data: result } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
   const { data: websites } = result || {};
 
   const ordered = useMemo(() => {
@@ -59,7 +55,7 @@ export function DashboardEdit() {
   }
 
   return (
-    <Page loading={isLoading} error={error}>
+    <>
       <div className={styles.buttons}>
         <Button onClick={handleSave} variant="action" size="small">
           {formatMessage(labels.save)}
@@ -105,7 +101,7 @@ export function DashboardEdit() {
           </Droppable>
         </DragDropContext>
       </div>
-    </Page>
+    </>
   );
 }
 

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

@@ -0,0 +1,10 @@
+import Dashboard from 'app/(main)/dashboard/Dashboard';
+import { Metadata } from 'next';
+
+export default function DashboardPage() {
+  return <Dashboard />;
+}
+
+export const metadata: Metadata = {
+  title: 'Dashboard | umami',
+};

src/app/(main)/layout.module.css

@@ -10,7 +10,6 @@
   width: 100vw;
   grid-column: 1;
   grid-row: 1 / 2;
-  z-index: var(--z-index-popup);
 }
 
 .body {

src/app/(main)/layout.tsx

@@ -0,0 +1,19 @@
+import Shell from './Shell';
+import NavBar from './NavBar';
+import Page from 'components/layout/Page';
+import styles from './layout.module.css';
+
+export default function AppLayout({ children }) {
+  return (
+    <Shell>
+      <main className={styles.layout}>
+        <nav className={styles.nav}>
+          <NavBar />
+        </nav>
+        <section className={styles.body}>
+          <Page>{children}</Page>
+        </section>
+      </main>
+    </Shell>
+  );
+}

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,18 @@
+'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';
+
+export default function ReportsDataTable() {
+  const { get } = useApi();
+  const modified = useCache(state => state?.reports);
+  const queryResult = useFilterQuery(['reports', { modified }], params => get(`/reports`, params));
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => <ReportsTable data={data} showDomain={true} />}
+    </DataTable>
+  );
+}

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

@@ -0,0 +1,25 @@
+'use client';
+import PageHeader from 'components/layout/PageHeader';
+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)}>
+      <Button variant="primary" onClick={handleClick}>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.createReport)}</Text>
+      </Button>
+    </PageHeader>
+  );
+}
+
+export default ReportsHeader;

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

@@ -0,0 +1,50 @@
+import LinkButton from 'components/common/LinkButton';
+import { useMessages } from 'components/hooks';
+import useUser from 'components/hooks/useUser';
+import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
+import { REPORT_TYPES } from 'lib/constants';
+import ReportDeleteButton from './ReportDeleteButton';
+
+export function ReportsTable({ data = [], showDomain }) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  return (
+    <GridTable data={data}>
+      <GridColumn name="name" label={formatMessage(labels.name)} />
+      <GridColumn name="description" label={formatMessage(labels.description)} />
+      <GridColumn name="type" label={formatMessage(labels.type)}>
+        {row => {
+          return formatMessage(
+            labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === row.type)],
+          );
+        }}
+      </GridColumn>
+      {showDomain && (
+        <GridColumn name="domain" label={formatMessage(labels.domain)}>
+          {row => row.website.domain}
+        </GridColumn>
+      )}
+      <GridColumn name="action" label="" alignment="end">
+        {row => {
+          const { id, name, userId, website } = row;
+          return (
+            <>
+              {(user.id === userId || user.id === website?.userId) && (
+                <ReportDeleteButton reportId={id} reportName={name} />
+              )}
+              <LinkButton href={`/reports/${id}`}>
+                <Icon>
+                  <Icons.ArrowRight />
+                </Icon>
+                <Text>{formatMessage(labels.view)}</Text>
+              </LinkButton>
+            </>
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default ReportsTable;

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/[id]/FilterSelectForm.js

@@ -1,16 +1,20 @@
 import { useState } from 'react';
 import FieldSelectForm from './FieldSelectForm';
 import FieldFilterForm from './FieldFilterForm';
-import { useApi } from 'components/hooks';
+import { useApi, useDateRange } from 'components/hooks';
 import { Loading } from 'react-basics';
 
 function useValues(websiteId, type) {
   const { get, useQuery } = useApi();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate } = dateRange;
   const { data, error, isLoading } = useQuery(
     ['websites:values', websiteId, type],
     () =>
       get(`/websites/${websiteId}/values`, {
         type,
+        startAt: +startDate,
+        endAt: +endDate,
       }),
     { enabled: !!(websiteId && type) },
   );

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

@@ -1,20 +1,18 @@
+'use client';
 import { createContext } from 'react';
-import Page from 'components/layout/Page';
-import styles from './reports.module.css';
 import { useReport } from 'components/hooks';
+import styles from './Report.module.css';
 
 export const ReportContext = createContext(null);
 
 export function Report({ reportId, defaultParameters, children, ...props }) {
   const report = useReport(reportId, defaultParameters);
 
-  //console.log({ report });
-
   return (
     <ReportContext.Provider value={{ ...report }}>
-      <Page {...props} className={styles.container}>
+      <div {...props} className={styles.container}>
         {children}
-      </Page>
+      </div>
     </ReportContext.Provider>
   );
 }

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

@@ -1,4 +1,4 @@
-import styles from './reports.module.css';
+import styles from './Report.module.css';
 
 export function ReportBody({ children }) {
   return <div className={styles.body}>{children}</div>;

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

@@ -0,0 +1,26 @@
+'use client';
+import FunnelReport from '../funnel/FunnelReport';
+import EventDataReport from '../event-data/EventDataReport';
+import InsightsReport from '../insights/InsightsReport';
+import RetentionReport from '../retention/RetentionReport';
+import { useApi } from 'components/hooks';
+
+const reports = {
+  funnel: FunnelReport,
+  'event-data': EventDataReport,
+  insights: InsightsReport,
+  retention: RetentionReport,
+};
+
+export default function ReportDetails({ reportId }) {
+  const { get, useQuery } = useApi();
+  const { data: report } = useQuery(['reports', reportId], () => get(`/reports/${reportId}`));
+
+  if (!report) {
+    return null;
+  }
+
+  const ReportComponent = reports[report.type];
+
+  return <ReportComponent reportId={reportId} />;
+}

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

@@ -1,11 +1,11 @@
 import { useContext } from 'react';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages, useApi } from 'components/hooks';
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
-import reportStyles from './reports.module.css';
+import reportStyles from './Report.module.css';
 
 export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);

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

@@ -1,4 +1,4 @@
-import styles from './reports.module.css';
+import styles from './Report.module.css';
 
 export function ReportMenu({ children }) {
   return <div className={styles.menu}>{children}</div>;

src/app/(main)/reports/[id]/page.tsx

@@ -0,0 +1,14 @@
+import ReportDetails from './ReportDetails';
+import { Metadata } from 'next';
+
+export default function ReportDetailsPage({ params: { id } }) {
+  if (!id) {
+    return null;
+  }
+
+  return <ReportDetails reportId={id} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Reports | umami',
+};

src/app/(main)/reports/create/ReportTemplates.js

@@ -1,6 +1,6 @@
+'use client';
 import Link from 'next/link';
 import { Button, Icons, Text, Icon } from 'react-basics';
-import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import Funnel from 'assets/funnel.svg';
 import Lightbulb from 'assets/lightbulb.svg';
@@ -57,7 +57,7 @@ export function ReportTemplates({ showHeader = true }) {
   ];
 
   return (
-    <Page>
+    <>
       {showHeader && <PageHeader title={formatMessage(labels.reports)} />}
       <div className={styles.reports}>
         {reports.map(({ title, description, url, icon }) => {
@@ -66,7 +66,7 @@ export function ReportTemplates({ showHeader = true }) {
           );
         })}
       </div>
-    </Page>
+    </>
   );
 }
 

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

@@ -0,0 +1,10 @@
+import ReportTemplates from './ReportTemplates';
+import { Metadata } from 'next';
+
+export default function ReportsCreatePage() {
+  return <ReportTemplates />;
+}
+
+export const metadata: Metadata = {
+  title: 'Create Report | umami',
+};

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 'components/pages/reports/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 BaseParameters from '../BaseParameters';
-import ParameterList from '../ParameterList';
+import { useApi, useMessages } from 'components/hooks';
+import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
+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 ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+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 'components/pages/reports/Report';
-import BaseParameters from '../BaseParameters';
-import ParameterList from '../ParameterList';
-import PopupForm from '../PopupForm';
+import { ReportContext } from '../[id]/Report';
+import BaseParameters from '../[id]/BaseParameters';
+import ParameterList from '../[id]/ParameterList';
+import PopupForm from '../[id]/PopupForm';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);

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

@@ -1,10 +1,11 @@
+'use client';
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import Report from '../Report';
-import ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+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/funnel/page.tsx

@@ -0,0 +1,10 @@
+import FunnelReport from './FunnelReport';
+import { Metadata } from 'next';
+
+export default function FunnelReportPage() {
+  return <FunnelReport reportId={null} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Funnel Report | umami',
+};

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

@@ -10,14 +10,14 @@ import {
   Popup,
   TooltipPopup,
 } from 'react-basics';
-import { ReportContext } from 'components/pages/reports/Report';
 import Icons from 'components/icons';
-import BaseParameters from '../BaseParameters';
-import ParameterList from '../ParameterList';
+import BaseParameters from '../[id]/BaseParameters';
+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,7 +1,8 @@
-import Report from '../Report';
-import ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+'use client';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+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/insights/page.tsx

@@ -0,0 +1,10 @@
+import InsightsReport from './InsightsReport';
+import { Metadata } from 'next';
+
+export default function InsightsReportPage() {
+  return <InsightsReport reportId={null} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Insights Report | umami',
+};

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

@@ -0,0 +1,14 @@
+import ReportsHeader from './ReportsHeader';
+import ReportsDataTable from './ReportsDataTable';
+
+export default function ReportsPage() {
+  return (
+    <>
+      <ReportsHeader />
+      <ReportsDataTable />
+    </>
+  );
+}
+export const metadata = {
+  title: 'Reports | umami',
+};

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 'components/pages/reports/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,9 +1,10 @@
+'use client';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
-import Report from '../Report';
-import ReportHeader from '../ReportHeader';
-import ReportMenu from '../ReportMenu';
-import ReportBody from '../ReportBody';
+import Report from '../[id]/Report';
+import ReportHeader from '../[id]/ReportHeader';
+import ReportMenu from '../[id]/ReportMenu';
+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,13 +1,14 @@
 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 { useLocale } from 'components/hooks';
+import { useMessages, useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
 import styles from './RetentionTable.module.css';
 
-export function RetentionTable() {
+const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
+
+export function RetentionTable({ days = DAYS }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const { report } = useContext(ReportContext);
@@ -17,8 +18,6 @@ export function RetentionTable() {
     return <EmptyPlaceholder />;
   }
 
-  const days = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
-
   const rows = data.reduce((arr, row) => {
     const { date, visitors, day } = row;
     if (day === 0) {

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

@@ -0,0 +1,9 @@
+import RetentionReport from './RetentionReport';
+
+export default function RetentionReportPage() {
+  return <RetentionReport reportId={null} />;
+}
+
+export const metadata = {
+  title: 'Create Report | umami',
+};

src/app/(main)/settings/layout.module.css

@@ -0,0 +1,31 @@
+.layout {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 20px;
+}
+
+.menu {
+  width: 240px;
+  padding-top: 34px;
+  padding-right: 20px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  min-height: 50vh;
+}
+
+@media only screen and (max-width: 992px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .menu {
+    display: none;
+  }
+
+  .content {
+    margin-top: 20px;
+  }
+}

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

@@ -1,15 +1,15 @@
-import { Row, Column } from 'react-basics';
-import { useRouter } from 'next/router';
-import SideNav from './SideNav';
+'use client';
+import { usePathname } from 'next/navigation';
 import useUser from 'components/hooks/useUser';
 import useMessages from 'components/hooks/useMessages';
-import styles from './SettingsLayout.module.css';
+import SideNav from 'components/layout/SideNav';
+import styles from './layout.module.css';
 
-export function SettingsLayout({ children }) {
+export default function SettingsLayout({ children }) {
   const { user } = useUser();
-  const { pathname } = useRouter();
+  const pathname = usePathname();
   const { formatMessage, labels } = useMessages();
-  const cloudMode = Boolean(process.env.cloudMode);
+  const cloudMode = !!process.env.cloudMode;
 
   const items = [
     { key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
@@ -20,18 +20,18 @@ export function SettingsLayout({ children }) {
 
   const getKey = () => items.find(({ url }) => pathname === url)?.key;
 
+  if (cloudMode) {
+    return null;
+  }
+
   return (
-    <Row>
+    <div className={styles.layout}>
       {!cloudMode && (
-        <Column className={styles.menu} defaultSize={12} md={4} lg={3} xl={2}>
+        <div className={styles.menu}>
           <SideNav items={items} shallow={true} selectedKey={getKey()} />
-        </Column>
+        </div>
       )}
-      <Column className={styles.content} defaultSize={12} md={8} lg={9} xl={10}>
-        {children}
-      </Column>
-    </Row>
+      <div className={styles.content}>{children}</div>
+    </div>
   );
 }
-
-export default SettingsLayout;

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

@@ -1,5 +1,5 @@
 import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
-import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
+import PasswordEditForm from 'app/(main)/settings/profile/PasswordEditForm';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
 

src/app/(main)/settings/profile/ProfileHeader.js

@@ -0,0 +1,11 @@
+'use client';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from 'components/hooks';
+
+export function ProfileHeader() {
+  const { formatMessage, labels } = useMessages();
+
+  return <PageHeader title={formatMessage(labels.profile)}></PageHeader>;
+}
+
+export default ProfileHeader;

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

@@ -1,14 +1,15 @@
+'use client';
 import { Form, FormRow } from 'react-basics';
-import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
-import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
-import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
-import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
+import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting';
+import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
+import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting';
+import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
 import useUser from 'components/hooks/useUser';
 import useMessages from 'components/hooks/useMessages';
 import { ROLES } from 'lib/constants';
 
-export function ProfileDetails() {
+export function ProfileSettings() {
   const { user } = useUser();
   const { formatMessage, labels } = useMessages();
   const cloudMode = Boolean(process.env.cloudMode);
@@ -58,4 +59,4 @@ export function ProfileDetails() {
   );
 }
 
-export default ProfileDetails;
+export default ProfileSettings;

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

@@ -0,0 +1,16 @@
+import ProfileHeader from './ProfileHeader';
+import ProfileSettings from './ProfileSettings';
+import { Metadata } from 'next';
+
+export default function () {
+  return (
+    <>
+      <ProfileHeader />
+      <ProfileSettings />
+    </>
+  );
+}
+
+export const metadata: Metadata = {
+  title: 'Profile Settings | umami',
+};

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();
-        onClose();
+        setValue('teams', Date.now());
+        onSave?.();
+        onClose?.();
       },
     });
   };

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

@@ -0,0 +1,25 @@
+import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import TeamDeleteForm from './TeamDeleteForm';
+
+export function TeamDeleteButton({ teamId, teamName, onDelete }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <ModalTrigger>
+      <Button>
+        <Icon>
+          <Icons.Trash />
+        </Icon>
+        <Text>{formatMessage(labels.delete)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.deleteTeam)}>
+        {close => (
+          <TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
+        )}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default TeamDeleteButton;

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();
-        onClose();
+        setValue('teams', Date.now());
+        onSave?.();
+        onClose?.();
       },
     });
   };

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

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

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

@@ -0,0 +1,35 @@
+import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import useLocale from 'components/hooks/useLocale';
+import useUser from 'components/hooks/useUser';
+import TeamDeleteForm from './TeamLeaveForm';
+
+export function TeamLeaveButton({ teamId, teamName, onLeave }) {
+  const { formatMessage, labels } = useMessages();
+  const { dir } = useLocale();
+  const { user } = useUser();
+
+  return (
+    <ModalTrigger>
+      <Button>
+        <Icon rotate={dir === 'rtl' ? 180 : 0}>
+          <Icons.Logout />
+        </Icon>
+        <Text>{formatMessage(labels.leave)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.leaveTeam)}>
+        {close => (
+          <TeamDeleteForm
+            teamId={teamId}
+            userId={user.id}
+            teamName={teamName}
+            onSave={onLeave}
+            onClose={close}
+          />
+        )}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default TeamLeaveButton;

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

@@ -0,0 +1,24 @@
+import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
+import Icons from 'components/icons';
+import useMessages from 'components/hooks/useMessages';
+import TeamAddForm from './TeamAddForm';
+
+export function TeamsAddButton({ onAdd }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <ModalTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.createTeam)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.createTeam)}>
+        {close => <TeamAddForm onSave={onAdd} onClose={close} />}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default TeamsAddButton;

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

@@ -0,0 +1,26 @@
+'use client';
+import DataTable from 'components/common/DataTable';
+import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
+import useApi from 'components/hooks/useApi';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import useCache from 'store/cache';
+
+export function TeamsDataTable() {
+  const { get } = useApi();
+  const modified = useCache(state => state?.teams);
+  const queryResult = useFilterQuery(['teams', { modified }], params => {
+    return get(`/teams`, {
+      ...params,
+    });
+  });
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => {
+        return <TeamsTable data={data} />;
+      }}
+    </DataTable>
+  );
+}
+
+export default TeamsDataTable;

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

@@ -0,0 +1,24 @@
+'use client';
+import { Flexbox } from 'react-basics';
+import PageHeader from 'components/layout/PageHeader';
+import { ROLES } from 'lib/constants';
+import useUser from 'components/hooks/useUser';
+import useMessages from 'components/hooks/useMessages';
+import TeamsJoinButton from './TeamsJoinButton';
+import TeamsAddButton from './TeamsAddButton';
+
+export function TeamsHeader() {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  return (
+    <PageHeader title={formatMessage(labels.teams)}>
+      <Flexbox gap={10}>
+        <TeamsJoinButton />
+        {user.role !== ROLES.viewOnly && <TeamsAddButton />}
+      </Flexbox>
+    </PageHeader>
+  );
+}
+
+export default TeamsHeader;

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

@@ -0,0 +1,29 @@
+import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
+import Icons from 'components/icons';
+import useMessages from 'components/hooks/useMessages';
+import TeamJoinForm from './TeamJoinForm';
+
+export function TeamsJoinButton() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showToast } = useToasts();
+
+  const handleJoin = () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  return (
+    <ModalTrigger>
+      <Button variant="secondary">
+        <Icon>
+          <Icons.AddUser />
+        </Icon>
+        <Text>{formatMessage(labels.joinTeam)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.joinTeam)}>
+        {close => <TeamJoinForm onSave={handleJoin} onClose={close} />}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default TeamsJoinButton;

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

@@ -0,0 +1,47 @@
+'use client';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import { ROLES } from 'lib/constants';
+import Link from 'next/link';
+import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
+import TeamDeleteButton from './TeamDeleteButton';
+import TeamLeaveButton from './TeamLeaveButton';
+
+export function TeamsTable({ data = [] }) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+  const breakpoint = useBreakpoint();
+
+  return (
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+      <GridColumn name="name" label={formatMessage(labels.name)} />
+      <GridColumn name="owner" label={formatMessage(labels.owner)}>
+        {row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
+      </GridColumn>
+      <GridColumn name="action" label=" " alignment="end">
+        {row => {
+          const { id, name, teamUser } = row;
+          const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
+          const isOwner = user.id === owner?.userId;
+
+          return (
+            <>
+              {isOwner && <TeamDeleteButton teamId={id} teamName={name} />}
+              {!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
+              <Link href={`/settings/teams/${id}`}>
+                <Button>
+                  <Icon>
+                    <Icons.Edit />
+                  </Icon>
+                  <Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
+                </Button>
+              </Link>
+            </>
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default TeamsTable;

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

@@ -1,6 +1,7 @@
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+import { setValue } from 'store/cache';
 
 export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
   const { formatMessage, labels } = useMessages();
@@ -12,7 +13,8 @@ export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
       {},
       {
         onSuccess: () => {
-          onSave();
+          setValue('team:members', Date.now());
+          onSave?.();
         },
       },
     );

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

@@ -0,0 +1,29 @@
+import useApi from 'components/hooks/useApi';
+import TeamMembersTable from './TeamMembersTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
+import useCache from 'store/cache';
+
+export function TeamMembers({ teamId, readOnly }) {
+  const { get } = useApi();
+  const modified = useCache(state => state?.['team:members']);
+  const queryResult = useFilterQuery(
+    ['team:members', { teamId, modified }],
+    params => {
+      return get(`/teams/${teamId}/users`, {
+        ...params,
+      });
+    },
+    { enabled: !!teamId },
+  );
+
+  return (
+    <>
+      <DataTable queryResult={queryResult}>
+        {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
+      </DataTable>
+    </>
+  );
+}
+
+export default TeamMembers;