Refactored to use app folder.

2026-02-04 12:47:13 +01:00 · 2023-09-29 05:29:22 -07:00 · 2023-09-29 05:29:22 -07:00 · 9a52cdd2e1
commit 9a52cdd2e1
parent 40cfcd41e9
258 changed files with 2025 additions and 2258 deletions
--- a/src/app/(app)/NavBar.js
+++ b/src/app/(app)/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;
--- a/src/app/(app)/NavBar.module.css
+++ b/src/app/(app)/NavBar.module.css
@ -0,0 +1,74 @@
+.navbar {
+  display: grid;
+  grid-template-columns: max-content 1fr 1fr;
+  position: relative;
+  align-items: center;
+  height: 60px;
+  background: var(--base75);
+  border-bottom: 1px solid var(--base300);
+  padding: 0 20px;
+}
+
+.logo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  min-width: 0;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  padding: 0 40px;
+  font-weight: 700;
+  max-height: 60px;
+}
+
+.links a,
+.links a:active,
+.links a:visited {
+  color: var(--font-color200);
+  line-height: 60px;
+  border-bottom: 2px solid transparent;
+}
+
+.links a:hover {
+  color: var(--font-color100);
+  border-bottom: 2px solid var(--primary400);
+}
+
+.links a.selected {
+  color: var(--font-color100);
+  border-bottom: 2px solid var(--primary400);
+}
+
+.actions,
+.mobile {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.mobile {
+  display: none;
+}
+
+@media only screen and (max-width: 768px) {
+  .navbar {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .links,
+  .actions {
+    display: none;
+  }
+
+  .mobile {
+    display: flex;
+  }
+}
--- a/src/app/(app)/Shell.tsx
+++ b/src/app/(app)/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;
--- a/src/app/(app)/console/TestConsole.js
+++ b/src/app/(app)/console/TestConsole.js
@ -0,0 +1,157 @@
+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 '../websites/[id]/WebsiteChart';
+import useApi from 'components/hooks/useApi';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import Script from 'next/script';
+import { Button, Column, Row } from 'react-basics';
+import styles from './TestConsole.module.css';
+
+export function TestConsole() {
+  const { get, useQuery } = useApi();
+  const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
+  const router = useRouter();
+  const {
+    basePath,
+    query: { id },
+  } = router;
+
+  function handleChange(value) {
+    router.push(`/console/${value}`);
+  }
+
+  function handleClick() {
+    window.umami.track({ url: '/page-view', referrer: 'https://www.google.com' });
+    window.umami.track('track-event-no-data');
+    window.umami.track('track-event-with-data', {
+      test: 'test-data',
+      boolean: true,
+      booleanError: 'true',
+      time: new Date(),
+      number: 1,
+      number2: Math.random() * 100,
+      time2: new Date().toISOString(),
+      nested: {
+        test: 'test-data',
+        number: 1,
+        object: {
+          test: 'test-data',
+        },
+      },
+      array: [1, 2, 3],
+    });
+  }
+
+  function handleIdentifyClick() {
+    window.umami.identify({
+      userId: 123,
+      name: 'brian',
+      number: Math.random() * 100,
+      test: 'test-data',
+      boolean: true,
+      booleanError: 'true',
+      time: new Date(),
+      time2: new Date().toISOString(),
+      nested: {
+        test: 'test-data',
+        number: 1,
+        object: {
+          test: 'test-data',
+        },
+      },
+      array: [1, 2, 3],
+    });
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const [websiteId] = id || [];
+  const website = data?.data.find(({ id }) => websiteId === id);
+
+  return (
+    <Page loading={isLoading} error={error}>
+      <Head>
+        <title>{website ? `${website.name} | Umami Console` : 'Umami Console'}</title>
+      </Head>
+      <PageHeader title="Test console">
+        <WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
+      </PageHeader>
+      {website && (
+        <>
+          <Script
+            async
+            data-website-id={website.id}
+            src={`${basePath}/script.js`}
+            data-cache="true"
+          />
+          <Row className={styles.test}>
+            <Column xs="4">
+              <div className={styles.header}>Page links</div>
+              <div>
+                <Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
+              </div>
+              <div>
+                <Link href={`/console/${websiteId}/page/2/?q=123 `}>page two</Link>
+              </div>
+              <div>
+                <a href="https://www.google.com" data-umami-event="external-link-direct">
+                  external link (direct)
+                </a>
+              </div>
+              <div>
+                <a
+                  href="https://www.google.com"
+                  data-umami-event="external-link-tab"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  external link (tab)
+                </a>
+              </div>
+            </Column>
+            <Column xs="4">
+              <div className={styles.header}>Click events</div>
+              <Button id="send-event-button" data-umami-event="button-click" variant="action">
+                Send event
+              </Button>
+              <p />
+              <Button
+                id="send-event-data-button"
+                data-umami-event="button-click"
+                data-umami-event-name="bob"
+                data-umami-event-id="123"
+                variant="action"
+              >
+                Send event with data
+              </Button>
+            </Column>
+            <Column xs="4">
+              <div className={styles.header}>Javascript events</div>
+              <Button id="manual-button" variant="action" onClick={handleClick}>
+                Run script
+              </Button>
+              <p />
+              <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>
+        </>
+      )}
+    </Page>
+  );
+}
+
+export default TestConsole;
--- a/src/app/(app)/console/TestConsole.module.css
+++ b/src/app/(app)/console/TestConsole.module.css
@ -0,0 +1,11 @@
+.test {
+  border: 1px solid var(--base400);
+  border-radius: 5px;
+  padding: 0 20px 20px 20px;
+}
+
+.header {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 20px 0;
+}
--- a/src/app/(app)/console/[[...id]]/page.tsx
+++ b/src/app/(app)/console/[[...id]]/page.tsx
@ -0,0 +1,15 @@
+import TestConsole from '../TestConsole';
+
+async function getEnabled() {
+  return !!process.env.ENABLE_TEST_CONSOLE;
+}
+
+export default async function ConsolePage() {
+  const enabled = await getEnabled();
+
+  if (!enabled) {
+    return null;
+  }
+
+  return <TestConsole />;
+}
--- a/src/app/(app)/dashboard/Dashboard.js
+++ b/src/app/(app)/dashboard/Dashboard.js
@ -0,0 +1,70 @@
+'use client';
+import { Button, Icon, Icons, Loading, Text } from 'react-basics';
+import Link from 'next/link';
+import PageHeader from 'components/layout/PageHeader';
+import Pager from 'components/common/Pager';
+import WebsiteChartList from '../websites/[id]/WebsiteChartList';
+import DashboardSettingsButton from 'app/(app)/dashboard/DashboardSettingsButton';
+import DashboardEdit from 'app/(app)/dashboard/DashboardEdit';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useApi from 'components/hooks/useApi';
+import useDashboard from 'store/dashboard';
+import useMessages from 'components/hooks/useMessages';
+import useLocale from 'components/hooks/useLocale';
+import useApiFilter from 'components/hooks/useApiFilter';
+
+export function Dashboard() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showCharts, editing } = useDashboard();
+  const { dir } = useLocale();
+  const { get, useQuery } = useApi();
+  const { page, handlePageChange } = useApiFilter();
+  const pageSize = 10;
+  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 (
+    <>
+      <PageHeader title={formatMessage(labels.dashboard)}>
+        {!editing && hasData && <DashboardSettingsButton />}
+      </PageHeader>
+      {!hasData && (
+        <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
+          <Link href="/settings/websites">
+            <Button>
+              <Icon rotate={dir === 'rtl' ? 180 : 0}>
+                <Icons.ArrowRight />
+              </Icon>
+              <Text>{formatMessage(messages.goToSettings)}</Text>
+            </Button>
+          </Link>
+        </EmptyPlaceholder>
+      )}
+      {hasData && (
+        <>
+          {editing && <DashboardEdit />}
+          {!editing && (
+            <>
+              <WebsiteChartList websites={data} showCharts={showCharts} limit={pageSize} />
+              <Pager
+                page={page}
+                pageSize={pageSize}
+                count={count}
+                onPageChange={handlePageChange}
+              />
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+
+export default Dashboard;
--- a/src/app/(app)/dashboard/DashboardEdit.js
+++ b/src/app/(app)/dashboard/DashboardEdit.js
@ -0,0 +1,112 @@
+import { useState, useMemo } from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
+import { Button } from 'react-basics';
+import { firstBy } from 'thenby';
+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';
+
+export function DashboardEdit() {
+  const settings = useDashboard();
+  const { websiteOrder } = settings;
+  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: websites } = result || {};
+
+  const ordered = useMemo(() => {
+    if (websites) {
+      return websites
+        .map(website => ({ ...website, order: order.indexOf(website.id) }))
+        .sort(firstBy('order'));
+    }
+    return [];
+  }, [websites, order]);
+
+  function handleWebsiteDrag({ destination, source }) {
+    if (!destination || destination.index === source.index) return;
+
+    const orderedWebsites = [...ordered];
+    const [removed] = orderedWebsites.splice(source.index, 1);
+    orderedWebsites.splice(destination.index, 0, removed);
+
+    setOrder(orderedWebsites.map(website => website?.id || 0));
+  }
+
+  function handleSave() {
+    saveDashboard({
+      editing: false,
+      websiteOrder: order,
+    });
+  }
+
+  function handleCancel() {
+    saveDashboard({ editing: false, websiteOrder });
+  }
+
+  function handleReset() {
+    setOrder([]);
+  }
+
+  return (
+    <Page loading={isLoading} error={error}>
+      <div className={styles.buttons}>
+        <Button onClick={handleSave} variant="action" size="small">
+          {formatMessage(labels.save)}
+        </Button>
+        <Button onClick={handleCancel} size="small">
+          {formatMessage(labels.cancel)}
+        </Button>
+        <Button onClick={handleReset} size="small">
+          {formatMessage(labels.reset)}
+        </Button>
+      </div>
+      <div className={styles.dragActive}>
+        <DragDropContext onDragEnd={handleWebsiteDrag}>
+          <Droppable droppableId={dragId}>
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
+              >
+                {ordered.map(({ id, name, domain }, index) => (
+                  <Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
+                    {(provided, snapshot) => (
+                      <div
+                        ref={provided.innerRef}
+                        className={classNames(styles.item, {
+                          [styles.active]: snapshot.isDragging,
+                        })}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        <div className={styles.text}>
+                          <h1>{name}</h1>
+                          <h2>{domain}</h2>
+                        </div>
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </Page>
+  );
+}
+
+export default DashboardEdit;
--- a/src/app/(app)/dashboard/DashboardEdit.module.css
+++ b/src/app/(app)/dashboard/DashboardEdit.module.css
@ -0,0 +1,40 @@
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.item {
+  padding: 5px 0;
+}
+
+.item h1 {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.item h2 {
+  font-size: 14px;
+  color: var(--base700);
+}
+
+.text {
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid var(--base400);
+  background: var(--base50);
+}
+
+.active .text {
+  border-color: var(--base600);
+  box-shadow: 4px 4px 4px var(--base100);
+}
+
+.dragActive {
+  cursor: grab;
+}
+
+.dragActive:active {
+  cursor: grabbing;
+}
--- a/src/app/(app)/dashboard/DashboardSettingsButton.js
+++ b/src/app/(app)/dashboard/DashboardSettingsButton.js
@ -0,0 +1,36 @@
+import { TooltipPopup, Icon, Text, Flexbox, Button } from 'react-basics';
+import Icons from 'components/icons';
+import { saveDashboard } from 'store/dashboard';
+import useMessages from 'components/hooks/useMessages';
+
+export function DashboardSettingsButton() {
+  const { formatMessage, labels } = useMessages();
+
+  const handleToggleCharts = () => {
+    saveDashboard(state => ({ showCharts: !state.showCharts }));
+  };
+
+  const handleEdit = () => {
+    saveDashboard({ editing: true });
+  };
+
+  return (
+    <Flexbox gap={10}>
+      <TooltipPopup label={formatMessage(labels.toggleCharts)} position="bottom">
+        <Button onClick={handleToggleCharts}>
+          <Icon>
+            <Icons.BarChart />
+          </Icon>
+        </Button>
+      </TooltipPopup>
+      <Button onClick={handleEdit}>
+        <Icon>
+          <Icons.Edit />
+        </Icon>
+        <Text>{formatMessage(labels.edit)}</Text>
+      </Button>
+    </Flexbox>
+  );
+}
+
+export default DashboardSettingsButton;
--- a/src/app/(app)/dashboard/DashboardSettingsButton.module.css
+++ b/src/app/(app)/dashboard/DashboardSettingsButton.module.css
@ -0,0 +1,5 @@
+.buttonGroup {
+  display: flex;
+  place-items: center;
+  gap: 10px;
+}
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@ -0,0 +1,10 @@
+import Dashboard from 'app/(app)/dashboard/Dashboard';
+import { Metadata } from 'next';
+
+export default function () {
+  return <Dashboard />;
+}
+
+export const metadata: Metadata = {
+  title: 'Dashboard | umami',
+};
--- a/src/app/(app)/layout.module.css
+++ b/src/app/(app)/layout.module.css
@ -0,0 +1,23 @@
+.layout {
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+}
+
+.nav {
+  height: 60px;
+  width: 100vw;
+  grid-column: 1;
+  grid-row: 1 / 2;
+  z-index: var(--z-index-popup);
+}
+
+.body {
+  grid-column: 1;
+  grid-row: 2 / 3;
+  min-height: 0;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  padding-bottom: 60px;
+}
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@ -0,0 +1,20 @@
+'use client';
+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>
+  );
+}
--- a/src/app/(app)/reports/BaseParameters.js
+++ b/src/app/(app)/reports/BaseParameters.js
@ -0,0 +1,55 @@
+import { FormRow } from 'react-basics';
+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';
+
+export function BaseParameters({
+  showWebsiteSelect = true,
+  allowWebsiteSelect = true,
+  showDateSelect = true,
+  allowDateSelect = true,
+}) {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+
+  const { parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const { value, startDate, endDate } = dateRange || {};
+
+  const handleWebsiteSelect = websiteId => {
+    updateReport({ websiteId, parameters: { websiteId } });
+  };
+
+  const handleDateChange = value => {
+    updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
+  };
+
+  return (
+    <>
+      {showWebsiteSelect && (
+        <FormRow label={formatMessage(labels.website)}>
+          {allowWebsiteSelect && (
+            <WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
+          )}
+        </FormRow>
+      )}
+      {showDateSelect && (
+        <FormRow label={formatMessage(labels.dateRange)}>
+          {allowDateSelect && (
+            <DateFilter
+              value={value}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={handleDateChange}
+            />
+          )}
+        </FormRow>
+      )}
+    </>
+  );
+}
+
+export default BaseParameters;
--- a/src/app/(app)/reports/FieldAddForm.js
+++ b/src/app/(app)/reports/FieldAddForm.js
@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { REPORT_PARAMETERS } from 'lib/constants';
+import PopupForm from './PopupForm';
+import FieldSelectForm from './FieldSelectForm';
+import FieldAggregateForm from './FieldAggregateForm';
+import FieldFilterForm from './FieldFilterForm';
+import styles from './FieldAddForm.module.css';
+
+export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
+  const [selected, setSelected] = useState();
+
+  const handleSelect = value => {
+    const { type } = value;
+
+    if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
+      value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
+      handleSave(value);
+      return;
+    }
+
+    setSelected(value);
+  };
+
+  const handleSave = value => {
+    onAdd(group, value);
+    onClose();
+  };
+
+  return createPortal(
+    <PopupForm className={styles.popup} element={element} onClose={onClose}>
+      {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
+      {selected && group === REPORT_PARAMETERS.fields && (
+        <FieldAggregateForm {...selected} onSelect={handleSave} />
+      )}
+      {selected && group === REPORT_PARAMETERS.filters && (
+        <FieldFilterForm {...selected} onSelect={handleSave} />
+      )}
+    </PopupForm>,
+    document.body,
+  );
+}
+
+export default FieldAddForm;
--- a/src/app/(app)/reports/FieldAddForm.module.css
+++ b/src/app/(app)/reports/FieldAddForm.module.css
@ -0,0 +1,38 @@
+.menu {
+  width: 360px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: var(--border-radius);
+}
+
+.item:hover {
+  background: var(--base75);
+}
+
+.type {
+  color: var(--font-color300);
+}
+
+.selected {
+  font-weight: bold;
+}
+
+.popup {
+  display: flex;
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dropdown {
+  min-width: 60px;
+}
--- a/src/app/(app)/reports/FieldAggregateForm.js
+++ b/src/app/(app)/reports/FieldAggregateForm.js
@ -0,0 +1,45 @@
+import { Form, FormRow, Menu, Item } from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export default function FieldAggregateForm({ name, type, onSelect }) {
+  const { formatMessage, labels } = useMessages();
+
+  const options = {
+    number: [
+      { label: formatMessage(labels.sum), value: 'sum' },
+      { label: formatMessage(labels.average), value: 'average' },
+      { label: formatMessage(labels.min), value: 'min' },
+      { label: formatMessage(labels.max), value: 'max' },
+    ],
+    date: [
+      { label: formatMessage(labels.min), value: 'min' },
+      { label: formatMessage(labels.max), value: 'max' },
+    ],
+    string: [
+      { label: formatMessage(labels.total), value: 'total' },
+      { label: formatMessage(labels.unique), value: 'unique' },
+    ],
+    uuid: [
+      { label: formatMessage(labels.total), value: 'total' },
+      { label: formatMessage(labels.unique), value: 'unique' },
+    ],
+  };
+
+  const items = options[type];
+
+  const handleSelect = value => {
+    onSelect({ name, type, value });
+  };
+
+  return (
+    <Form>
+      <FormRow label={name}>
+        <Menu onSelect={handleSelect}>
+          {items.map(({ label, value }) => {
+            return <Item key={value}>{label}</Item>;
+          })}
+        </Menu>
+      </FormRow>
+    </Form>
+  );
+}
--- a/src/app/(app)/reports/FieldFilterForm.js
+++ b/src/app/(app)/reports/FieldFilterForm.js
@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
+import { useMessages, useFilters, useFormat } from 'components/hooks';
+import styles from './FieldFilterForm.module.css';
+
+export default function FieldFilterForm({
+  name,
+  label,
+  type,
+  values,
+  onSelect,
+  allowFilterSelect = true,
+}) {
+  const { formatMessage, labels } = useMessages();
+  const [filter, setFilter] = useState('eq');
+  const [value, setValue] = useState();
+  const { getFilters } = useFilters();
+  const { formatValue } = useFormat();
+  const filters = getFilters(type);
+
+  const renderFilterValue = value => {
+    return filters.find(f => f.value === value)?.label;
+  };
+
+  const renderValue = value => {
+    return formatValue(value, name);
+  };
+
+  const handleAdd = () => {
+    onSelect({ name, type, filter, value });
+  };
+
+  return (
+    <Form>
+      <FormRow label={label} className={styles.filter}>
+        <Flexbox gap={10}>
+          {allowFilterSelect && (
+            <Dropdown
+              className={styles.dropdown}
+              items={filters}
+              value={filter}
+              renderValue={renderFilterValue}
+              onChange={setFilter}
+            >
+              {({ value, label }) => {
+                return <Item key={value}>{label}</Item>;
+              }}
+            </Dropdown>
+          )}
+          <Dropdown
+            className={styles.dropdown}
+            menuProps={{ className: styles.menu }}
+            items={values}
+            value={value}
+            renderValue={renderValue}
+            onChange={setValue}
+            style={{
+              minWidth: '250px',
+            }}
+          >
+            {value => {
+              return <Item key={value}>{formatValue(value, name)}</Item>;
+            }}
+          </Dropdown>
+        </Flexbox>
+        <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
+          {formatMessage(labels.add)}
+        </Button>
+      </FormRow>
+    </Form>
+  );
+}
--- a/src/app/(app)/reports/FieldFilterForm.module.css
+++ b/src/app/(app)/reports/FieldFilterForm.module.css
@ -0,0 +1,22 @@
+.selected {
+  font-weight: bold;
+}
+
+.popup {
+  display: flex;
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dropdown {
+  min-width: 180px;
+}
+
+.menu {
+  min-width: 360px;
+  max-height: 300px;
+}
--- a/src/app/(app)/reports/FieldSelectForm.js
+++ b/src/app/(app)/reports/FieldSelectForm.js
@ -0,0 +1,24 @@
+import { Menu, Item, Form, FormRow } from 'react-basics';
+import { useMessages } from 'components/hooks';
+import styles from './FieldSelectForm.module.css';
+
+export default function FieldSelectForm({ items, onSelect, showType = true }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <Form>
+      <FormRow label={formatMessage(labels.fields)}>
+        <Menu className={styles.menu} onSelect={key => onSelect(items[key])}>
+          {items.map(({ name, label, type }, index) => {
+            return (
+              <Item key={index} className={styles.item}>
+                <div>{label || name}</div>
+                {showType && type && <div className={styles.type}>{type}</div>}
+              </Item>
+            );
+          })}
+        </Menu>
+      </FormRow>
+    </Form>
+  );
+}
--- a/src/app/(app)/reports/FieldSelectForm.module.css
+++ b/src/app/(app)/reports/FieldSelectForm.module.css
@ -0,0 +1,20 @@
+.menu {
+  width: 360px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: var(--border-radius);
+}
+
+.item:hover {
+  background: var(--base75);
+}
+
+.type {
+  color: var(--font-color300);
+}
--- a/src/app/(app)/reports/FilterSelectForm.js
+++ b/src/app/(app)/reports/FilterSelectForm.js
@ -0,0 +1,43 @@
+import { useState } from 'react';
+import FieldSelectForm from './FieldSelectForm';
+import FieldFilterForm from './FieldFilterForm';
+import { useApi } from 'components/hooks';
+import { Loading } from 'react-basics';
+
+function useValues(websiteId, type) {
+  const { get, useQuery } = useApi();
+  const { data, error, isLoading } = useQuery(
+    ['websites:values', websiteId, type],
+    () =>
+      get(`/websites/${websiteId}/values`, {
+        type,
+      }),
+    { enabled: !!(websiteId && type) },
+  );
+
+  return { data, error, isLoading };
+}
+
+export default function FilterSelectForm({ websiteId, items, onSelect, allowFilterSelect }) {
+  const [field, setField] = useState();
+  const { data, isLoading } = useValues(websiteId, field?.name);
+
+  if (!field) {
+    return <FieldSelectForm items={items} onSelect={setField} showType={false} />;
+  }
+
+  if (isLoading) {
+    return <Loading position="center" icon="dots" />;
+  }
+
+  return (
+    <FieldFilterForm
+      name={field?.name}
+      label={field?.label}
+      type={field?.type}
+      values={data}
+      onSelect={onSelect}
+      allowFilterSelect={allowFilterSelect}
+    />
+  );
+}
--- a/src/app/(app)/reports/ParameterList.js
+++ b/src/app/(app)/reports/ParameterList.js
@ -0,0 +1,33 @@
+import { Icon, TooltipPopup } from 'react-basics';
+import Icons from 'components/icons';
+import Empty from 'components/common/Empty';
+import { useMessages } from 'components/hooks';
+import styles from './ParameterList.module.css';
+
+export function ParameterList({ items = [], children, onRemove }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <div className={styles.list}>
+      {!items.length && <Empty message={formatMessage(labels.none)} />}
+      {items.map((item, index) => {
+        return (
+          <div key={index} className={styles.item}>
+            {typeof children === 'function' ? children(item) : item}
+            <TooltipPopup
+              className={styles.icon}
+              label={formatMessage(labels.remove)}
+              position="right"
+            >
+              <Icon onClick={onRemove.bind(null, index)}>
+                <Icons.Close />
+              </Icon>
+            </TooltipPopup>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ParameterList;
--- a/src/app/(app)/reports/ParameterList.module.css
+++ b/src/app/(app)/reports/ParameterList.module.css
@ -0,0 +1,21 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  box-shadow: 1px 1px 1px var(--base400);
+  gap: 10px;
+}
+
+.icon {
+  align-self: center;
+}
--- a/src/app/(app)/reports/PopupForm.js
+++ b/src/app/(app)/reports/PopupForm.js
@ -0,0 +1,16 @@
+import classNames from 'classnames';
+import styles from './PopupForm.module.css';
+
+export function PopupForm({ className, style, children }) {
+  return (
+    <div
+      className={classNames(styles.form, className)}
+      style={style}
+      onClick={e => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default PopupForm;
--- a/src/app/(app)/reports/PopupForm.module.css
+++ b/src/app/(app)/reports/PopupForm.module.css
@ -0,0 +1,10 @@
+.form {
+  position: absolute;
+  background: var(--base50);
+  min-width: 300px;
+  padding: 20px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
--- a/src/app/(app)/reports/Report.js
+++ b/src/app/(app)/reports/Report.js
@ -0,0 +1,20 @@
+'use client';
+import { createContext } from 'react';
+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);
+
+  return (
+    <ReportContext.Provider value={{ ...report }}>
+      <div {...props} className={styles.container}>
+        {children}
+      </div>
+    </ReportContext.Provider>
+  );
+}
+
+export default Report;
--- a/src/app/(app)/reports/Report.module.css
+++ b/src/app/(app)/reports/Report.module.css
@ -0,0 +1,25 @@
+.container {
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: max-content 1fr;
+}
+
+.header {
+  grid-row: 1 / 2;
+  grid-column: 1 / 3;
+  margin-bottom: 40px;
+}
+
+.menu {
+  width: 300px;
+  padding-right: 20px;
+  border-right: 1px solid var(--base300);
+  grid-row: 2/3;
+  grid-column: 1 / 2;
+}
+
+.body {
+  padding-left: 20px;
+  grid-row: 2/3;
+  grid-column: 2 / 3;
+}
--- a/src/app/(app)/reports/ReportBody.js
+++ b/src/app/(app)/reports/ReportBody.js
@ -0,0 +1,7 @@
+import styles from './Report.module.css';
+
+export function ReportBody({ children }) {
+  return <div className={styles.body}>{children}</div>;
+}
+
+export default ReportBody;
--- a/src/app/(app)/reports/ReportHeader.js
+++ b/src/app/(app)/reports/ReportHeader.js
@ -0,0 +1,90 @@
+import { useContext } from 'react';
+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 './Report.module.css';
+
+export function ReportHeader({ icon }) {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels, messages } = useMessages();
+  const { showToast } = useToasts();
+  const { post, useMutation } = useApi();
+  const router = useRouter();
+  const { mutate: create, isLoading: isCreating } = useMutation(data => post(`/reports`, data));
+  const { mutate: update, isLoading: isUpdating } = useMutation(data =>
+    post(`/reports/${data.id}`, data),
+  );
+
+  const { name, description, parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const defaultName = formatMessage(labels.untitled);
+
+  const handleSave = async () => {
+    if (!report.id) {
+      create(report, {
+        onSuccess: async ({ id }) => {
+          showToast({ message: formatMessage(messages.saved), variant: 'success' });
+          router.push(`/reports/${id}`, null, { shallow: true });
+        },
+      });
+    } else {
+      update(report, {
+        onSuccess: async () => {
+          showToast({ message: formatMessage(messages.saved), variant: 'success' });
+        },
+      });
+    }
+  };
+
+  const handleNameChange = name => {
+    updateReport({ name: name || defaultName });
+  };
+
+  const handleDescriptionChange = description => {
+    updateReport({ description });
+  };
+
+  const Title = () => {
+    return (
+      <>
+        <Icon size="lg">{icon}</Icon>
+        <InlineEditField
+          key={name}
+          name="name"
+          value={name}
+          placeholder={defaultName}
+          onCommit={handleNameChange}
+        />
+      </>
+    );
+  };
+
+  return (
+    <div className={reportStyles.header}>
+      <PageHeader title={<Title />}>
+        <LoadingButton
+          variant="primary"
+          isLoading={isCreating || isUpdating}
+          disabled={!websiteId || !dateRange?.value || !name}
+          onClick={handleSave}
+        >
+          {formatMessage(labels.save)}
+        </LoadingButton>
+      </PageHeader>
+      <div className={styles.description}>
+        <InlineEditField
+          key={description}
+          name="description"
+          value={description}
+          placeholder={`+ ${formatMessage(labels.addDescription)}`}
+          onCommit={handleDescriptionChange}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ReportHeader;
--- a/src/app/(app)/reports/ReportHeader.module.css
+++ b/src/app/(app)/reports/ReportHeader.module.css
@ -0,0 +1,3 @@
+.description {
+  color: var(--font-color300);
+}
--- a/src/app/(app)/reports/ReportMenu.js
+++ b/src/app/(app)/reports/ReportMenu.js
@ -0,0 +1,7 @@
+import styles from './Report.module.css';
+
+export function ReportMenu({ children }) {
+  return <div className={styles.menu}>{children}</div>;
+}
+
+export default ReportMenu;
--- a/src/app/(app)/reports/ReportsHeader.js
+++ b/src/app/(app)/reports/ReportsHeader.js
@ -0,0 +1,24 @@
+'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';
+
+export function ReportsHeader() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <PageHeader title={formatMessage(labels.reports)}>
+      <Link href="/reports/create">
+        <Button variant="primary">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+          <Text>{formatMessage(labels.createReport)}</Text>
+        </Button>
+      </Link>
+    </PageHeader>
+  );
+}
+
+export default ReportsHeader;
--- a/src/app/(app)/reports/ReportsList.js
+++ b/src/app/(app)/reports/ReportsList.js
@ -0,0 +1,37 @@
+'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 reports = useFilterQuery(['reports'], params => get(`/reports`, params));
+
+  const deleteReport = id => {
+    mutate(id, {
+      onSuccess: () => {
+        reports.refetch();
+      },
+    });
+  };
+
+  return { reports, deleteReport };
+}
+
+export default function ReportsList() {
+  const { reports, deleteReport } = useReports();
+
+  const handleDelete = async (id, callback) => {
+    await deleteReport(id);
+    await reports.refetch();
+    callback?.();
+  };
+
+  return (
+    <DataTable {...reports.getProps()}>
+      {({ data }) => <ReportsTable data={data} showDomain={true} onDelete={handleDelete} />}
+    </DataTable>
+  );
+}
--- a/src/app/(app)/reports/ReportsTable.js
+++ b/src/app/(app)/reports/ReportsTable.js
@ -0,0 +1,75 @@
+import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
+import LinkButton from 'components/common/LinkButton';
+import { useMessages } from 'components/hooks';
+import useUser from 'components/hooks/useUser';
+import {
+  Button,
+  Flexbox,
+  GridColumn,
+  GridTable,
+  Icon,
+  Icons,
+  Modal,
+  ModalTrigger,
+  Text,
+} from 'react-basics';
+import { REPORT_TYPES } from 'lib/constants';
+
+export function ReportsTable({ data = [], onDelete, 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)} />
+      <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 (
+            <Flexbox gap={10}>
+              <LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
+              {(user.id === userId || user.id === website?.userId) && (
+                <ModalTrigger>
+                  <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>
+              )}
+            </Flexbox>
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default ReportsTable;
--- a/src/app/(app)/reports/[id]/ReportDetails.js
+++ b/src/app/(app)/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} />;
+}
--- a/src/app/(app)/reports/[id]/page.tsx
+++ b/src/app/(app)/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',
+};
--- a/src/app/(app)/reports/create/ReportTemplates.js
+++ b/src/app/(app)/reports/create/ReportTemplates.js
@ -0,0 +1,73 @@
+'use client';
+import Link from 'next/link';
+import { Button, Icons, Text, Icon } from 'react-basics';
+import PageHeader from 'components/layout/PageHeader';
+import Funnel from 'assets/funnel.svg';
+import Lightbulb from 'assets/lightbulb.svg';
+import Magnet from 'assets/magnet.svg';
+import styles from './ReportTemplates.module.css';
+import { useMessages } from 'components/hooks';
+
+function ReportItem({ title, description, url, icon }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <div className={styles.report}>
+      <div className={styles.title}>
+        <Icon size="lg">{icon}</Icon>
+        <Text>{title}</Text>
+      </div>
+      <div className={styles.description}>{description}</div>
+      <div className={styles.buttons}>
+        <Link href={url}>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.create)}</Text>
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export function ReportTemplates({ showHeader = true }) {
+  const { formatMessage, labels } = useMessages();
+
+  const reports = [
+    {
+      title: formatMessage(labels.insights),
+      description: formatMessage(labels.insightsDescription),
+      url: '/reports/insights',
+      icon: <Lightbulb />,
+    },
+    {
+      title: formatMessage(labels.funnel),
+      description: formatMessage(labels.funnelDescription),
+      url: '/reports/funnel',
+      icon: <Funnel />,
+    },
+    {
+      title: formatMessage(labels.retention),
+      description: formatMessage(labels.retentionDescription),
+      url: '/reports/retention',
+      icon: <Magnet />,
+    },
+  ];
+
+  return (
+    <>
+      {showHeader && <PageHeader title={formatMessage(labels.reports)} />}
+      <div className={styles.reports}>
+        {reports.map(({ title, description, url, icon }) => {
+          return (
+            <ReportItem key={title} icon={icon} title={title} description={description} url={url} />
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export default ReportTemplates;
--- a/src/app/(app)/reports/create/ReportTemplates.module.css
+++ b/src/app/(app)/reports/create/ReportTemplates.module.css
@ -0,0 +1,32 @@
+.reports {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 20px;
+}
+
+.report {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--base500);
+  border-radius: var(--border-radius);
+}
+
+.title {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: var(--font-size-lg);
+  font-weight: 700;
+}
+
+.description {
+  flex: 1;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/app/(app)/reports/create/page.tsx
+++ b/src/app/(app)/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',
+};
--- a/src/app/(app)/reports/event-data/EventDataParameters.js
+++ b/src/app/(app)/reports/event-data/EventDataParameters.js
@ -0,0 +1,145 @@
+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 BaseParameters from '../BaseParameters';
+import ParameterList from '../ParameterList';
+import styles from './EventDataParameters.module.css';
+
+function useFields(websiteId, startDate, endDate) {
+  const { get, useQuery } = useApi();
+  const { data, error, isLoading } = useQuery(
+    ['fields', websiteId, startDate, endDate],
+    () =>
+      get('/reports/event-data', {
+        websiteId,
+        startAt: +startDate,
+        endAt: +endDate,
+      }),
+    { enabled: !!(websiteId && startDate && endDate) },
+  );
+
+  return { data, error, isLoading };
+}
+
+export function EventDataParameters() {
+  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels, messages } = useMessages();
+  const ref = useRef(null);
+  const { parameters } = report || {};
+  const { websiteId, dateRange, fields, filters, groups } = parameters || {};
+  const { startDate, endDate } = dateRange || {};
+  const queryEnabled = websiteId && dateRange && fields?.length;
+  const { data, error } = useFields(websiteId, startDate, endDate);
+  const parametersSelected = websiteId && startDate && endDate;
+  const hasData = data?.length !== 0;
+
+  const parameterGroups = [
+    { label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
+    { label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
+  ];
+
+  const parameterData = {
+    fields,
+    filters,
+    groups,
+  };
+
+  const handleSubmit = values => {
+    runReport(values);
+  };
+
+  const handleAdd = (group, value) => {
+    const data = parameterData[group];
+
+    if (!data.find(({ name }) => name === value.name)) {
+      updateReport({ parameters: { [group]: data.concat(value) } });
+    }
+  };
+
+  const handleRemove = (group, index) => {
+    const data = [...parameterData[group]];
+    data.splice(index, 1);
+    updateReport({ parameters: { [group]: data } });
+  };
+
+  const AddButton = ({ group }) => {
+    return (
+      <PopupTrigger>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Popup position="bottom" alignment="start">
+          {(close, element) => {
+            return (
+              <FieldAddForm
+                fields={data.map(({ eventKey, eventDataType }) => ({
+                  name: eventKey,
+                  type: DATA_TYPES[eventDataType],
+                }))}
+                group={group}
+                element={element}
+                onAdd={handleAdd}
+                onClose={close}
+              />
+            );
+          }}
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <Form ref={ref} values={parameters} error={error} onSubmit={handleSubmit}>
+      <BaseParameters />
+      {!hasData && <Empty message={formatMessage(messages.noEventData)} />}
+      {parametersSelected &&
+        hasData &&
+        parameterGroups.map(({ label, group }) => {
+          return (
+            <FormRow
+              key={label}
+              label={label}
+              action={<AddButton group={group} onAdd={handleAdd} />}
+            >
+              <ParameterList
+                items={parameterData[group]}
+                onRemove={index => handleRemove(group, index)}
+              >
+                {({ name, value }) => {
+                  return (
+                    <div className={styles.parameter}>
+                      {group === REPORT_PARAMETERS.fields && (
+                        <>
+                          <div>{name}</div>
+                          <div className={styles.op}>{value}</div>
+                        </>
+                      )}
+                      {group === REPORT_PARAMETERS.filters && (
+                        <>
+                          <div>{name}</div>
+                          <div className={styles.op}>{value[0]}</div>
+                          <div>{value[1]}</div>
+                        </>
+                      )}
+                    </div>
+                  );
+                }}
+              </ParameterList>
+            </FormRow>
+          );
+        })}
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default EventDataParameters;
--- a/src/app/(app)/reports/event-data/EventDataParameters.module.css
+++ b/src/app/(app)/reports/event-data/EventDataParameters.module.css
@ -0,0 +1,12 @@
+.parameter {
+  display: flex;
+  gap: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.op {
+  font-weight: bold;
+}
--- a/src/app/(app)/reports/event-data/EventDataReport.js
+++ b/src/app/(app)/reports/event-data/EventDataReport.js
@ -0,0 +1,26 @@
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import EventDataParameters from './EventDataParameters';
+import EventDataTable from './EventDataTable';
+import Nodes from 'assets/nodes.svg';
+
+const defaultParameters = {
+  type: 'event-data',
+  parameters: { fields: [], filters: [] },
+};
+
+export default function EventDataReport({ reportId }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Nodes />} />
+      <ReportMenu>
+        <EventDataParameters />
+      </ReportMenu>
+      <ReportBody>
+        <EventDataTable />
+      </ReportBody>
+    </Report>
+  );
+}
--- a/src/app/(app)/reports/event-data/EventDataTable.js
+++ b/src/app/(app)/reports/event-data/EventDataTable.js
@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { GridTable, GridColumn } from 'react-basics';
+import { useMessages } from 'components/hooks';
+import { ReportContext } from '../Report';
+
+export function EventDataTable() {
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <GridTable data={report?.data || []}>
+      <GridColumn name="field" label={formatMessage(labels.field)} />
+      <GridColumn name="value" label={formatMessage(labels.value)} />
+      <GridColumn name="total" label={formatMessage(labels.total)} />
+    </GridTable>
+  );
+}
+
+export default EventDataTable;
--- a/src/app/(app)/reports/funnel/FunnelChart.js
+++ b/src/app/(app)/reports/funnel/FunnelChart.js
@ -0,0 +1,74 @@
+import { useCallback, useContext, useMemo } from 'react';
+import { Loading, StatusLight } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+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';
+
+export function FunnelChart({ className, loading }) {
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { colors } = useTheme();
+
+  const { parameters, data } = report || {};
+
+  const renderXLabel = useCallback(
+    (label, index) => {
+      return parameters.urls[index];
+    },
+    [parameters],
+  );
+
+  const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
+    const { opacity, labelColors, dataPoints } = model.tooltip;
+
+    if (!dataPoints?.length || !opacity) {
+      setTooltipPopup(null);
+      return;
+    }
+
+    setTooltipPopup(
+      <>
+        <div>
+          {formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
+        </div>
+        <div>
+          <StatusLight color={labelColors?.[0]?.backgroundColor}>
+            {formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
+          </StatusLight>
+        </div>
+      </>,
+    );
+  }, []);
+
+  const datasets = useMemo(() => {
+    return [
+      {
+        label: formatMessage(labels.uniqueVisitors),
+        data: data,
+        borderWidth: 1,
+        ...colors.chart.visitors,
+      },
+    ];
+  }, [data, colors, formatMessage, labels]);
+
+  if (loading) {
+    return <Loading icon="dots" className={styles.loading} />;
+  }
+
+  return (
+    <BarChart
+      className={className}
+      datasets={datasets}
+      unit="day"
+      loading={loading}
+      renderXLabel={renderXLabel}
+      renderTooltipPopup={renderTooltipPopup}
+      XAxisType="category"
+    />
+  );
+}
+
+export default FunnelChart;
--- a/src/app/(app)/reports/funnel/FunnelChart.module.css
+++ b/src/app/(app)/reports/funnel/FunnelChart.module.css
@ -0,0 +1,3 @@
+.loading {
+  height: 300px;
+}
--- a/src/app/(app)/reports/funnel/FunnelParameters.js
+++ b/src/app/(app)/reports/funnel/FunnelParameters.js
@ -0,0 +1,91 @@
+import { useContext, useRef } from 'react';
+import { useMessages } from 'components/hooks';
+import {
+  Icon,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  PopupTrigger,
+  Popup,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+import Icons from 'components/icons';
+import UrlAddForm from './UrlAddForm';
+import { ReportContext } from '../Report';
+import BaseParameters from '../BaseParameters';
+import ParameterList from '../ParameterList';
+import PopupForm from '../PopupForm';
+
+export function FunnelParameters() {
+  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const ref = useRef(null);
+
+  const { parameters } = report || {};
+  const { websiteId, dateRange, urls } = parameters || {};
+  const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
+
+  const handleSubmit = (data, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!queryDisabled) {
+      runReport(data);
+    }
+  };
+
+  const handleAddUrl = url => {
+    updateReport({ parameters: { urls: parameters.urls.concat(url) } });
+  };
+
+  const handleRemoveUrl = (index, e) => {
+    e.stopPropagation();
+    const urls = [...parameters.urls];
+    urls.splice(index, 1);
+    updateReport({ parameters: { urls } });
+  };
+
+  const AddUrlButton = () => {
+    return (
+      <PopupTrigger>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Popup position="bottom" alignment="start">
+          {(close, element) => {
+            return (
+              <PopupForm element={element} onClose={close}>
+                <UrlAddForm onAdd={handleAddUrl} />
+              </PopupForm>
+            );
+          }}
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters />
+      <FormRow label={formatMessage(labels.window)}>
+        <FormInput
+          name="window"
+          rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
+        >
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
+        <ParameterList items={urls} onRemove={handleRemoveUrl} />
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default FunnelParameters;
--- a/src/app/(app)/reports/funnel/FunnelReport.js
+++ b/src/app/(app)/reports/funnel/FunnelReport.js
@ -0,0 +1,30 @@
+'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 Funnel from 'assets/funnel.svg';
+import { REPORT_TYPES } from 'lib/constants';
+
+const defaultParameters = {
+  type: REPORT_TYPES.funnel,
+  parameters: { window: 60, urls: [] },
+};
+
+export default function FunnelReport({ reportId }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Funnel />} />
+      <ReportMenu>
+        <FunnelParameters />
+      </ReportMenu>
+      <ReportBody>
+        <FunnelChart />
+        <FunnelTable />
+      </ReportBody>
+    </Report>
+  );
+}
--- a/src/app/(app)/reports/funnel/FunnelReport.module.css
+++ b/src/app/(app)/reports/funnel/FunnelReport.module.css
@ -0,0 +1,10 @@
+.filters {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  line-height: 32px;
+  padding: 10px;
+  overflow: hidden;
+}
--- a/src/app/(app)/reports/funnel/FunnelTable.js
+++ b/src/app/(app)/reports/funnel/FunnelTable.js
@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import ListTable from 'components/metrics/ListTable';
+import { useMessages } from 'components/hooks';
+import { ReportContext } from '../Report';
+
+export function FunnelTable() {
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  return (
+    <ListTable
+      data={report?.data}
+      title={formatMessage(labels.url)}
+      metric={formatMessage(labels.visitors)}
+      showPercentage={true}
+    />
+  );
+}
+
+export default FunnelTable;
--- a/src/app/(app)/reports/funnel/UrlAddForm.js
+++ b/src/app/(app)/reports/funnel/UrlAddForm.js
@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { useMessages } from 'components/hooks';
+import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
+import styles from './UrlAddForm.module.css';
+
+export function UrlAddForm({ defaultValue = '', onAdd }) {
+  const [url, setUrl] = useState(defaultValue);
+  const { formatMessage, labels } = useMessages();
+
+  const handleSave = () => {
+    onAdd(url);
+    setUrl('');
+  };
+
+  const handleChange = e => {
+    setUrl(e.target.value);
+  };
+
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      handleSave();
+    }
+  };
+
+  return (
+    <Form>
+      <FormRow label={formatMessage(labels.url)}>
+        <Flexbox gap={10}>
+          <TextField
+            className={styles.input}
+            value={url}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+          <Button variant="primary" onClick={handleSave}>
+            {formatMessage(labels.add)}
+          </Button>
+        </Flexbox>
+      </FormRow>
+    </Form>
+  );
+}
+
+export default UrlAddForm;
--- a/src/app/(app)/reports/funnel/UrlAddForm.module.css
+++ b/src/app/(app)/reports/funnel/UrlAddForm.module.css
@ -0,0 +1,14 @@
+.form {
+  position: absolute;
+  background: var(--base50);
+  width: 300px;
+  padding: 30px;
+  margin-top: 10px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.input {
+  width: 100%;
+}
--- a/src/app/(app)/reports/funnel/page.tsx
+++ b/src/app/(app)/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',
+};
--- a/src/app/(app)/reports/insights/InsightsParameters.js
+++ b/src/app/(app)/reports/insights/InsightsParameters.js
@ -0,0 +1,148 @@
+import { useContext, useRef } from 'react';
+import { useFormat, useMessages, useFilters } from 'components/hooks';
+import {
+  Form,
+  FormRow,
+  FormButtons,
+  SubmitButton,
+  PopupTrigger,
+  Icon,
+  Popup,
+  TooltipPopup,
+} from 'react-basics';
+import { ReportContext } from '../Report';
+import Icons from 'components/icons';
+import BaseParameters from '../BaseParameters';
+import ParameterList from '../ParameterList';
+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);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { filterLabels } = useFilters();
+  const ref = useRef(null);
+  const { parameters } = report || {};
+  const { websiteId, dateRange, fields, filters } = parameters || {};
+  const { startDate, endDate } = dateRange || {};
+  const parametersSelected = websiteId && startDate && endDate;
+  const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
+
+  const fieldOptions = [
+    { name: 'url', type: 'string', label: formatMessage(labels.url) },
+    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
+    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
+    { name: 'query', type: 'string', label: formatMessage(labels.query) },
+    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
+    { name: 'os', type: 'string', label: formatMessage(labels.os) },
+    { name: 'device', type: 'string', label: formatMessage(labels.device) },
+    { name: 'country', type: 'string', label: formatMessage(labels.country) },
+    { name: 'region', type: 'string', label: formatMessage(labels.region) },
+    { name: 'city', type: 'string', label: formatMessage(labels.city) },
+  ];
+
+  const parameterGroups = [
+    { id: 'fields', label: formatMessage(labels.fields) },
+    { id: 'filters', label: formatMessage(labels.filters) },
+  ];
+
+  const parameterData = {
+    fields,
+    filters,
+  };
+
+  const handleSubmit = values => {
+    runReport(values);
+  };
+
+  const handleAdd = (id, value) => {
+    const data = parameterData[id];
+
+    if (!data.find(({ name }) => name === value.name)) {
+      updateReport({ parameters: { [id]: data.concat(value) } });
+    }
+  };
+
+  const handleRemove = (id, index) => {
+    const data = [...parameterData[id]];
+    data.splice(index, 1);
+    updateReport({ parameters: { [id]: data } });
+  };
+
+  const AddButton = ({ id }) => {
+    return (
+      <PopupTrigger>
+        <TooltipPopup label={formatMessage(labels.add)} position="top">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </TooltipPopup>
+        <Popup position="bottom" alignment="start" className={styles.popup}>
+          {close => {
+            return (
+              <PopupForm onClose={close}>
+                {id === 'fields' && (
+                  <FieldSelectForm
+                    items={fieldOptions}
+                    onSelect={handleAdd.bind(null, id)}
+                    showType={false}
+                  />
+                )}
+                {id === 'filters' && (
+                  <FilterSelectForm
+                    websiteId={websiteId}
+                    items={fieldOptions}
+                    onSelect={handleAdd.bind(null, id)}
+                  />
+                )}
+              </PopupForm>
+            );
+          }}
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
+      <BaseParameters />
+      {parametersSelected &&
+        parameterGroups.map(({ id, label }) => {
+          return (
+            <FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
+              <ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
+                {({ name, filter, value }) => {
+                  return (
+                    <div className={styles.parameter}>
+                      {id === 'fields' && (
+                        <>
+                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
+                        </>
+                      )}
+                      {id === 'filters' && (
+                        <>
+                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
+                          <div className={styles.op}>{filterLabels[filter]}</div>
+                          <div>{formatValue(value, name)}</div>
+                        </>
+                      )}
+                    </div>
+                  );
+                }}
+              </ParameterList>
+            </FormRow>
+          );
+        })}
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default InsightsParameters;
--- a/src/app/(app)/reports/insights/InsightsParameters.module.css
+++ b/src/app/(app)/reports/insights/InsightsParameters.module.css
@ -0,0 +1,17 @@
+.parameter {
+  display: flex;
+  gap: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.op {
+  font-weight: bold;
+}
+
+.popup {
+  margin-top: -10px;
+  margin-left: 30px;
+}
--- a/src/app/(app)/reports/insights/InsightsReport.js
+++ b/src/app/(app)/reports/insights/InsightsReport.js
@ -0,0 +1,28 @@
+'use client';
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import InsightsParameters from './InsightsParameters';
+import InsightsTable from './InsightsTable';
+import Lightbulb from 'assets/lightbulb.svg';
+import { REPORT_TYPES } from 'lib/constants';
+
+const defaultParameters = {
+  type: REPORT_TYPES.insights,
+  parameters: { fields: [], filters: [] },
+};
+
+export default function InsightsReport({ reportId }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Lightbulb />} />
+      <ReportMenu>
+        <InsightsParameters />
+      </ReportMenu>
+      <ReportBody>
+        <InsightsTable />
+      </ReportBody>
+    </Report>
+  );
+}
--- a/src/app/(app)/reports/insights/InsightsTable.js
+++ b/src/app/(app)/reports/insights/InsightsTable.js
@ -0,0 +1,49 @@
+import { useContext, useEffect, useState } from 'react';
+import { GridTable, GridColumn } from 'react-basics';
+import { useFormat, useMessages } from 'components/hooks';
+import { ReportContext } from '../Report';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+
+export function InsightsTable() {
+  const [fields, setFields] = useState();
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+
+  useEffect(
+    () => {
+      setFields(report?.parameters?.fields);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [report?.data],
+  );
+
+  if (!fields || !report?.parameters) {
+    return <EmptyPlaceholder />;
+  }
+
+  return (
+    <GridTable data={report?.data || []}>
+      {fields.map(({ name, label }) => {
+        return (
+          <GridColumn key={name} name={name} label={label}>
+            {row => formatValue(row[name], name)}
+          </GridColumn>
+        );
+      })}
+      <GridColumn
+        name="visitors"
+        label={formatMessage(labels.visitors)}
+        width="100px"
+        alignment="end"
+      >
+        {row => row.visitors.toLocaleString()}
+      </GridColumn>
+      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
+        {row => row.views.toLocaleString()}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default InsightsTable;
--- a/src/app/(app)/reports/insights/page.tsx
+++ b/src/app/(app)/reports/insights/page.tsx
@ -0,0 +1,10 @@
+import InsightsReport from './InsightsReport';
+import { Metadata } from 'next';
+
+export default function () {
+  return <InsightsReport reportId={null} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Insights Report | umami',
+};
--- a/src/app/(app)/reports/page.tsx
+++ b/src/app/(app)/reports/page.tsx
@ -0,0 +1,14 @@
+import ReportsHeader from './ReportsHeader';
+import ReportsList from './ReportsList';
+
+export default function ReportsPage() {
+  return (
+    <>
+      <ReportsHeader />
+      <ReportsList />
+    </>
+  );
+}
+export const metadata = {
+  title: 'Reports | umami',
+};
--- a/src/app/(app)/reports/retention/RetentionParameters.js
+++ b/src/app/(app)/reports/retention/RetentionParameters.js
@ -0,0 +1,46 @@
+import { useContext, useRef } from 'react';
+import { useMessages } from 'components/hooks';
+import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
+import { ReportContext } from '../Report';
+import { MonthSelect } from 'components/input/MonthSelect';
+import BaseParameters from '../BaseParameters';
+import { parseDateRange } from 'lib/date';
+
+export function RetentionParameters() {
+  const { report, runReport, isRunning, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const ref = useRef(null);
+
+  const { parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const { startDate } = dateRange || {};
+  const queryDisabled = !websiteId || !dateRange;
+
+  const handleSubmit = (data, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!queryDisabled) {
+      runReport(data);
+    }
+  };
+
+  const handleDateChange = value => {
+    updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
+  };
+
+  return (
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters showDateSelect={false} />
+      <FormRow label={formatMessage(labels.date)}>
+        <MonthSelect date={startDate} onChange={handleDateChange} />
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default RetentionParameters;
--- a/src/app/(app)/reports/retention/RetentionReport.js
+++ b/src/app/(app)/reports/retention/RetentionReport.js
@ -0,0 +1,34 @@
+'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 Magnet from 'assets/magnet.svg';
+import { REPORT_TYPES } from 'lib/constants';
+import { parseDateRange } from 'lib/date';
+import { endOfMonth, startOfMonth } from 'date-fns';
+
+const defaultParameters = {
+  type: REPORT_TYPES.retention,
+  parameters: {
+    dateRange: parseDateRange(
+      `range:${startOfMonth(new Date()).getTime()}:${endOfMonth(new Date()).getTime()}`,
+    ),
+  },
+};
+
+export default function RetentionReport({ reportId }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Magnet />} />
+      <ReportMenu>
+        <RetentionParameters />
+      </ReportMenu>
+      <ReportBody>
+        <RetentionTable />
+      </ReportBody>
+    </Report>
+  );
+}
--- a/src/app/(app)/reports/retention/RetentionReport.module.css
+++ b/src/app/(app)/reports/retention/RetentionReport.module.css
@ -0,0 +1,10 @@
+.filters {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  line-height: 32px;
+  padding: 10px;
+  overflow: hidden;
+}
--- a/src/app/(app)/reports/retention/RetentionTable.js
+++ b/src/app/(app)/reports/retention/RetentionTable.js
@ -0,0 +1,80 @@
+import { useContext } from 'react';
+import classNames from 'classnames';
+import { ReportContext } from '../Report';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { useMessages } from 'components/hooks';
+import { useLocale } from 'components/hooks';
+import { formatDate } from 'lib/date';
+import styles from './RetentionTable.module.css';
+
+export function RetentionTable() {
+  const { formatMessage, labels } = useMessages();
+  const { locale } = useLocale();
+  const { report } = useContext(ReportContext);
+  const { data } = report || {};
+
+  if (!data) {
+    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) {
+      return arr.concat({
+        date,
+        visitors,
+        records: days
+          .reduce((arr, day) => {
+            arr[day] = data.find(x => x.date === date && x.day === day);
+            return arr;
+          }, [])
+          .filter(n => n),
+      });
+    }
+    return arr;
+  }, []);
+
+  const totalDays = rows.length;
+
+  return (
+    <>
+      <div className={styles.table}>
+        <div className={classNames(styles.row, styles.header)}>
+          <div className={styles.date}>{formatMessage(labels.date)}</div>
+          <div className={styles.visitors}>{formatMessage(labels.visitors)}</div>
+          {days.map(n => (
+            <div key={n} className={styles.day}>
+              {formatMessage(labels.day)} {n}
+            </div>
+          ))}
+        </div>
+        {rows.map(({ date, visitors, records }, rowIndex) => {
+          return (
+            <div key={rowIndex} className={styles.row}>
+              <div className={styles.date}>{formatDate(`${date} 00:00:00`, 'PP', locale)}</div>
+              <div className={styles.visitors}>{visitors}</div>
+              {days.map(day => {
+                if (totalDays - rowIndex < day) {
+                  return null;
+                }
+                const percentage = records[day]?.percentage;
+                return (
+                  <div
+                    key={day}
+                    className={classNames(styles.cell, { [styles.empty]: !percentage })}
+                  >
+                    {percentage ? `${percentage.toFixed(2)}%` : ''}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+export default RetentionTable;
--- a/src/app/(app)/reports/retention/RetentionTable.module.css
+++ b/src/app/(app)/reports/retention/RetentionTable.module.css
@ -0,0 +1,52 @@
+.table {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  font-weight: 700;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  margin-bottom: 1px;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: var(--blue200);
+  border-radius: var(--border-radius);
+}
+
+.date {
+  display: flex;
+  align-items: center;
+  min-width: 160px;
+}
+
+.visitors {
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+}
+
+.day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+}
+
+.empty {
+  background: var(--blue100);
+}
--- a/src/app/(app)/reports/retention/page.js
+++ b/src/app/(app)/reports/retention/page.js
@ -0,0 +1,9 @@
+import RetentionReport from './RetentionReport';
+
+export default function () {
+  return <RetentionReport reportId={null} />;
+}
+
+export const metadata = {
+  title: 'Create Report | umami',
+};
--- a/src/app/(app)/settings/SideNav.js
+++ b/src/app/(app)/settings/SideNav.js
@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { Menu, Item } from 'react-basics';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import styles from './SideNav.module.css';
+
+export function SideNav({
+  selectedKey,
+  items,
+  shallow = true,
+  scroll = false,
+  onSelect = () => {},
+}) {
+  const pathname = usePathname();
+  return (
+    <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
+      {({ key, label, url }) => (
+        <Item
+          key={key}
+          className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
+        >
+          <Link href={url} shallow={shallow} scroll={scroll}>
+            {label}
+          </Link>
+        </Item>
+      )}
+    </Menu>
+  );
+}
+
+export default SideNav;
--- a/src/app/(app)/settings/SideNav.module.css
+++ b/src/app/(app)/settings/SideNav.module.css
@ -0,0 +1,19 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.item a {
+  color: var(--font-color100);
+  flex: 1;
+  padding: var(--size300) var(--size600);
+}
+
+.item {
+  padding: 0;
+  border-radius: var(--border-radius);
+}
+
+.selected {
+  font-weight: 700;
+}
--- a/src/app/(app)/settings/layout.module.css
+++ b/src/app/(app)/settings/layout.module.css
@ -0,0 +1,25 @@
+.layout {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 20px;
+}
+
+.menu {
+  width: 240px;
+  padding-top: 40px;
+  padding-right: 20px;
+}
+
+.content {
+  min-height: 50vh;
+}
+
+@media only screen and (max-width: 768px) {
+  .menu {
+    display: none;
+  }
+
+  .content {
+    margin-top: 20px;
+  }
+}
--- a/src/app/(app)/settings/layout.tsx
+++ b/src/app/(app)/settings/layout.tsx
@ -0,0 +1,33 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import useUser from 'components/hooks/useUser';
+import useMessages from 'components/hooks/useMessages';
+import SideNav from './SideNav';
+import styles from './layout.module.css';
+
+export default function SettingsLayout({ children }) {
+  const { user } = useUser();
+  const pathname = usePathname();
+  const { formatMessage, labels } = useMessages();
+  const cloudMode = Boolean(process.env.cloudMode);
+
+  const items = [
+    { key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
+    { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
+    user.isAdmin && { key: 'users', label: formatMessage(labels.users), url: '/settings/users' },
+    { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
+  ].filter(n => n);
+
+  const getKey = () => items.find(({ url }) => pathname === url)?.key;
+
+  return (
+    <div className={styles.layout}>
+      {!cloudMode && (
+        <div className={styles.menu}>
+          <SideNav items={items} shallow={true} selectedKey={getKey()} />
+        </div>
+      )}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}
--- a/src/app/(app)/settings/profile/DateRangeSetting.js
+++ b/src/app/(app)/settings/profile/DateRangeSetting.js
@ -0,0 +1,28 @@
+import DateFilter from 'components/input/DateFilter';
+import { Button, Flexbox } from 'react-basics';
+import useDateRange from 'components/hooks/useDateRange';
+import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import useMessages from 'components/hooks/useMessages';
+
+export function DateRangeSetting() {
+  const { formatMessage, labels } = useMessages();
+  const [dateRange, setDateRange] = useDateRange();
+  const { value } = dateRange;
+
+  const handleChange = value => setDateRange(value);
+  const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
+
+  return (
+    <Flexbox gap={10}>
+      <DateFilter
+        value={value}
+        startDate={dateRange.startDate}
+        endDate={dateRange.endDate}
+        onChange={handleChange}
+      />
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Flexbox>
+  );
+}
+
+export default DateRangeSetting;
--- a/src/app/(app)/settings/profile/LanguageSetting.js
+++ b/src/app/(app)/settings/profile/LanguageSetting.js
@ -0,0 +1,32 @@
+import { Button, Dropdown, Item, Flexbox } from 'react-basics';
+import useLocale from 'components/hooks/useLocale';
+import { DEFAULT_LOCALE } from 'lib/constants';
+import { languages } from 'lib/lang';
+import useMessages from 'components/hooks/useMessages';
+
+export function LanguageSetting() {
+  const { formatMessage, labels } = useMessages();
+  const { locale, saveLocale } = useLocale();
+  const options = Object.keys(languages);
+
+  const handleReset = () => saveLocale(DEFAULT_LOCALE);
+
+  const renderValue = value => languages[value].label;
+
+  return (
+    <Flexbox gap={10}>
+      <Dropdown
+        items={options}
+        value={locale}
+        renderValue={renderValue}
+        onChange={saveLocale}
+        menuProps={{ style: { height: 300, width: 300 } }}
+      >
+        {item => <Item key={item}>{languages[item].label}</Item>}
+      </Dropdown>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Flexbox>
+  );
+}
+
+export default LanguageSetting;
--- a/src/app/(app)/settings/profile/PasswordChangeButton.js
+++ b/src/app/(app)/settings/profile/PasswordChangeButton.js
@ -0,0 +1,31 @@
+import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
+import PasswordEditForm from 'app/(app)/settings/profile/PasswordEditForm';
+import Icons from 'components/icons';
+import useMessages from 'components/hooks/useMessages';
+
+export function PasswordChangeButton() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showToast } = useToasts();
+
+  const handleSave = () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  return (
+    <>
+      <ModalTrigger>
+        <Button>
+          <Icon>
+            <Icons.Lock />
+          </Icon>
+          <Text>{formatMessage(labels.changePassword)}</Text>
+        </Button>
+        <Modal title={formatMessage(labels.changePassword)}>
+          {close => <PasswordEditForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      </ModalTrigger>
+    </>
+  );
+}
+
+export default PasswordChangeButton;
--- a/src/app/(app)/settings/profile/PasswordEditForm.js
+++ b/src/app/(app)/settings/profile/PasswordEditForm.js
@ -0,0 +1,68 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+export function PasswordEditForm({ onSave, onClose }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return formatMessage(messages.noMatchPassword);
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label={formatMessage(labels.currentPassword)}>
+        <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+          <PasswordField autoComplete="current-password" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.newPassword)}>
+        <FormInput
+          name="newPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          }}
+        >
+          <PasswordField autoComplete="new-password" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.confirmPassword)}>
+        <FormInput
+          name="confirmPassword"
+          rules={{
+            required: formatMessage(labels.required),
+            minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+            validate: samePassword,
+          }}
+        >
+          <PasswordField autoComplete="confirm-password" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          {formatMessage(labels.save)}
+        </Button>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default PasswordEditForm;
--- a/src/app/(app)/settings/profile/ProfileHeader.js
+++ b/src/app/(app)/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;
--- a/src/app/(app)/settings/profile/ProfileSettings.js
+++ b/src/app/(app)/settings/profile/ProfileSettings.js
@ -0,0 +1,62 @@
+'use client';
+import { Form, FormRow } from 'react-basics';
+import TimezoneSetting from 'app/(app)/settings/profile/TimezoneSetting';
+import DateRangeSetting from 'app/(app)/settings/profile/DateRangeSetting';
+import LanguageSetting from 'app/(app)/settings/profile/LanguageSetting';
+import ThemeSetting from 'app/(app)/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 ProfileSettings() {
+  const { user } = useUser();
+  const { formatMessage, labels } = useMessages();
+  const cloudMode = Boolean(process.env.cloudMode);
+
+  if (!user) {
+    return null;
+  }
+
+  const { username, role } = user;
+
+  const renderRole = value => {
+    if (value === ROLES.user) {
+      return formatMessage(labels.user);
+    }
+    if (value === ROLES.admin) {
+      return formatMessage(labels.admin);
+    }
+    if (value === ROLES.viewOnly) {
+      return formatMessage(labels.viewOnly);
+    }
+
+    return formatMessage(labels.unknown);
+  };
+
+  return (
+    <Form>
+      <FormRow label={formatMessage(labels.username)}>{username}</FormRow>
+      <FormRow label={formatMessage(labels.role)}>{renderRole(role)}</FormRow>
+      {!cloudMode && (
+        <FormRow label={formatMessage(labels.password)}>
+          <PasswordChangeButton />
+        </FormRow>
+      )}
+      <FormRow label={formatMessage(labels.defaultDateRange)}>
+        <DateRangeSetting />
+      </FormRow>
+      <FormRow label={formatMessage(labels.language)}>
+        <LanguageSetting />
+      </FormRow>
+      <FormRow label={formatMessage(labels.timezone)}>
+        <TimezoneSetting />
+      </FormRow>
+      <FormRow label={formatMessage(labels.theme)}>
+        <ThemeSetting />
+      </FormRow>
+    </Form>
+  );
+}
+
+export default ProfileSettings;
--- a/src/app/(app)/settings/profile/ThemeSetting.js
+++ b/src/app/(app)/settings/profile/ThemeSetting.js
@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import { Button, Icon } from 'react-basics';
+import useTheme from 'components/hooks/useTheme';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
+import styles from './ThemeSetting.module.css';
+
+export function ThemeSetting() {
+  const { theme, saveTheme } = useTheme();
+
+  return (
+    <div className={styles.buttons}>
+      <Button
+        className={classNames({ [styles.active]: theme === 'light' })}
+        onClick={() => saveTheme('light')}
+      >
+        <Icon>
+          <Sun />
+        </Icon>
+      </Button>
+      <Button
+        className={classNames({ [styles.active]: theme === 'dark' })}
+        onClick={() => saveTheme('dark')}
+      >
+        <Icon>
+          <Moon />
+        </Icon>
+      </Button>
+    </div>
+  );
+}
+
+export default ThemeSetting;
--- a/src/app/(app)/settings/profile/ThemeSetting.module.css
+++ b/src/app/(app)/settings/profile/ThemeSetting.module.css
@ -0,0 +1,8 @@
+.buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.active {
+  border: 2px solid var(--primary400);
+}
--- a/src/app/(app)/settings/profile/TimezoneSetting.js
+++ b/src/app/(app)/settings/profile/TimezoneSetting.js
@ -0,0 +1,30 @@
+import { Dropdown, Item, Button, Flexbox } from 'react-basics';
+import { listTimeZones } from 'timezone-support';
+import useTimezone from 'components/hooks/useTimezone';
+import useMessages from 'components/hooks/useMessages';
+import { getTimezone } from 'lib/date';
+
+export function TimezoneSetting() {
+  const { formatMessage, labels } = useMessages();
+  const [timezone, saveTimezone] = useTimezone();
+  const options = listTimeZones();
+
+  const handleReset = () => saveTimezone(getTimezone());
+
+  return (
+    <Flexbox gap={10}>
+      <Dropdown
+        items={options}
+        value={timezone}
+        onChange={saveTimezone}
+        style={{ flex: 1 }}
+        menuProps={{ style: { height: 300 } }}
+      >
+        {item => <Item key={item}>{item}</Item>}
+      </Dropdown>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Flexbox>
+  );
+}
+
+export default TimezoneSetting;
--- a/src/app/(app)/settings/profile/page.js
+++ b/src/app/(app)/settings/profile/page.js
@ -0,0 +1,11 @@
+import ProfileHeader from './ProfileHeader';
+import ProfileSettings from './ProfileSettings';
+
+export default function () {
+  return (
+    <>
+      <ProfileHeader />
+      <ProfileSettings />
+    </>
+  );
+}
--- a/src/app/(app)/settings/teams/TeamAddForm.js
+++ b/src/app/(app)/settings/teams/TeamAddForm.js
@ -0,0 +1,48 @@
+import { useRef } from 'react';
+import {
+  Form,
+  FormRow,
+  FormInput,
+  FormButtons,
+  TextField,
+  Button,
+  SubmitButton,
+} from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+export function TeamAddForm({ onSave, onClose }) {
+  const { formatMessage, labels } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label={formatMessage(labels.name)}>
+        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          {formatMessage(labels.save)}
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          {formatMessage(labels.cancel)}
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default TeamAddForm;
--- a/src/app/(app)/settings/teams/TeamDeleteButton.js
+++ b/src/app/(app)/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;
--- a/src/app/(app)/settings/teams/TeamDeleteForm.js
+++ b/src/app/(app)/settings/teams/TeamDeleteForm.js
@ -0,0 +1,34 @@
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <p>
+        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
+      </p>
+      <FormButtons flex>
+        <SubmitButton variant="danger" disabled={isLoading}>
+          {formatMessage(labels.delete)}
+        </SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default TeamDeleteForm;
--- a/src/app/(app)/settings/teams/TeamJoinForm.js
+++ b/src/app/(app)/settings/teams/TeamJoinForm.js
@ -0,0 +1,44 @@
+import { useRef } from 'react';
+import {
+  Form,
+  FormRow,
+  FormInput,
+  FormButtons,
+  TextField,
+  Button,
+  SubmitButton,
+} from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+export function TeamJoinForm({ onSave, onClose }) {
+  const { formatMessage, labels, getMessage } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post('/teams/join', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error)}>
+      <FormRow label={formatMessage(labels.accessCode)}>
+        <FormInput name="accessCode" rules={{ required: formatMessage(labels.required) }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary">{formatMessage(labels.join)}</SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default TeamJoinForm;
--- a/src/app/(app)/settings/teams/TeamLeaveButton.js
+++ b/src/app/(app)/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.ArrowRight />
+        </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;
--- a/src/app/(app)/settings/teams/TeamLeaveForm.js
+++ b/src/app/(app)/settings/teams/TeamLeaveForm.js
@ -0,0 +1,37 @@
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
+
+  const handleSubmit = async () => {
+    mutate(
+      {},
+      {
+        onSuccess: async () => {
+          onSave();
+          onClose();
+        },
+      },
+    );
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <p>
+        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
+      </p>
+      <FormButtons flex>
+        <SubmitButton variant="danger" disabled={isLoading}>
+          {formatMessage(labels.leave)}
+        </SubmitButton>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default TeamLeaveForm;
--- a/src/app/(app)/settings/teams/TeamWebsiteRemoveButton.js
+++ b/src/app/(app)/settings/teams/TeamWebsiteRemoveButton.js
@ -0,0 +1,31 @@
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+
+export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/websites/${websiteId}`));
+
+  const handleRemoveTeamMember = () => {
+    mutate(
+      {},
+      {
+        onSuccess: () => {
+          onSave();
+        },
+      },
+    );
+  };
+
+  return (
+    <LoadingButton onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
+      <Icon>
+        <Icons.Close />
+      </Icon>
+      <Text>{formatMessage(labels.remove)}</Text>
+    </LoadingButton>
+  );
+}
+
+export default TeamWebsiteRemoveButton;
--- a/src/app/(app)/settings/teams/TeamsAddButton.js
+++ b/src/app/(app)/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;
--- a/src/app/(app)/settings/teams/TeamsHeader.js
+++ b/src/app/(app)/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;
--- a/src/app/(app)/settings/teams/TeamsJoinButton.js
+++ b/src/app/(app)/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;
--- a/src/app/(app)/settings/teams/TeamsList.js
+++ b/src/app/(app)/settings/teams/TeamsList.js
@ -0,0 +1,19 @@
+'use client';
+import DataTable from 'components/common/DataTable';
+import TeamsTable from 'app/(app)/settings/teams/TeamsTable';
+import useApi from 'components/hooks/useApi';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+
+export function TeamsList() {
+  const { get } = useApi();
+  const filterQuery = useFilterQuery(['teams'], params => {
+    return get(`/teams`, {
+      ...params,
+    });
+  });
+  const { getProps } = filterQuery;
+
+  return <DataTable {...getProps()}>{({ data }) => <TeamsTable data={data} />}</DataTable>;
+}
+
+export default TeamsList;
--- a/src/app/(app)/settings/teams/TeamsTable.js
+++ b/src/app/(app)/settings/teams/TeamsTable.js
@ -0,0 +1,46 @@
+'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, Flexbox, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
+import TeamDeleteButton from './TeamDeleteButton';
+import TeamLeaveButton from './TeamLeaveButton';
+
+export function TeamsTable({ data = [] }) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  return (
+    <GridTable data={data}>
+      <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 showDelete = user.id === owner?.userId;
+
+          return (
+            <Flexbox gap={10}>
+              <Link href={`/settings/teams/${id}`}>
+                <Button>
+                  <Icon>
+                    <Icons.Edit />
+                  </Icon>
+                  <Text>{formatMessage(labels.view)}</Text>
+                </Button>
+              </Link>
+              {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
+              {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
+            </Flexbox>
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default TeamsTable;
--- a/src/app/(app)/settings/teams/WebsiteTags.js
+++ b/src/app/(app)/settings/teams/WebsiteTags.js
@ -0,0 +1,31 @@
+import { Button, Icon, Icons, Text } from 'react-basics';
+import styles from './WebsiteTags.module.css';
+
+export function WebsiteTags({ items = [], websites = [], onClick }) {
+  if (websites.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.filters}>
+      {websites.map(websiteId => {
+        const website = items.find(a => a.id === websiteId);
+
+        return (
+          <div key={websiteId} className={styles.tag}>
+            <Button onClick={() => onClick(websiteId)} variant="primary" size="sm">
+              <Text>
+                <b>{`${website.name}`}</b>
+              </Text>
+              <Icon>
+                <Icons.Close />
+              </Icon>
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default WebsiteTags;
--- a/src/app/(app)/settings/teams/WebsiteTags.module.css
+++ b/src/app/(app)/settings/teams/WebsiteTags.module.css
@ -0,0 +1,11 @@
+.filters {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.tag {
+  text-align: center;
+  margin-bottom: 10px;
+  margin-right: 20px;
+}
--- a/src/app/(app)/settings/teams/[id]/TeamAddWebsiteForm.js
+++ b/src/app/(app)/settings/teams/[id]/TeamAddWebsiteForm.js
@ -0,0 +1,67 @@
+import useApi from 'components/hooks/useApi';
+import { useRef, useState } from 'react';
+import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
+import WebsiteTags from '../WebsiteTags';
+import useMessages from 'components/hooks/useMessages';
+
+export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
+  const { formatMessage, labels } = useMessages();
+  const { get, post, useQuery, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
+  const { data: websites } = useQuery(['websites'], () => get('/websites'));
+  const [newWebsites, setNewWebsites] = useState([]);
+  const formRef = useRef();
+
+  const hasData = websites && websites.data.length > 0;
+
+  const handleSubmit = () => {
+    mutate(
+      { websiteIds: newWebsites },
+      {
+        onSuccess: async () => {
+          onSave();
+          onClose();
+        },
+      },
+    );
+  };
+
+  const handleAddWebsite = value => {
+    if (!newWebsites.some(a => a === value)) {
+      const nextValue = [...newWebsites];
+
+      nextValue.push(value);
+
+      setNewWebsites(nextValue);
+    }
+  };
+
+  const handleRemoveWebsite = value => {
+    const newValue = newWebsites.filter(a => a !== value);
+
+    setNewWebsites(newValue);
+  };
+
+  return (
+    <>
+      {hasData && (
+        <Form onSubmit={handleSubmit} error={error} ref={formRef}>
+          <FormRow label={formatMessage(labels.websites)}>
+            <Dropdown items={websites.data} onChange={handleAddWebsite} style={{ width: 300 }}>
+              {({ id, name }) => <Item key={id}>{name}</Item>}
+            </Dropdown>
+          </FormRow>
+          <WebsiteTags items={websites.data} websites={newWebsites} onClick={handleRemoveWebsite} />
+          <FormButtons flex>
+            <SubmitButton disabled={newWebsites && newWebsites.length === 0}>
+              {formatMessage(labels.addWebsite)}
+            </SubmitButton>
+            <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+          </FormButtons>
+        </Form>
+      )}
+    </>
+  );
+}
+
+export default TeamAddWebsiteForm;
--- a/src/app/(app)/settings/teams/[id]/TeamEditForm.js
+++ b/src/app/(app)/settings/teams/[id]/TeamEditForm.js
@ -0,0 +1,73 @@
+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 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+const generateId = () => getRandomChars(16);
+
+export function TeamEditForm({ teamId, data, onSave, readOnly }) {
+  const { formatMessage, labels } = useMessages();
+  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, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        onSave(data);
+      },
+    });
+  };
+
+  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={formatMessage(labels.teamId)}>
+        <TextField value={teamId} readOnly allowCopy />
+      </FormRow>
+      <FormRow label={formatMessage(labels.name)}>
+        {!readOnly && (
+          <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+            <TextField />
+          </FormInput>
+        )}
+        {readOnly && data.name}
+      </FormRow>
+      <FormRow label={formatMessage(labels.accessCode)}>
+        <Flexbox gap={10}>
+          <TextField value={accessCode} readOnly allowCopy />
+          {!readOnly && (
+            <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
+          )}
+        </Flexbox>
+      </FormRow>
+      {!readOnly && (
+        <FormButtons>
+          <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+        </FormButtons>
+      )}
+    </Form>
+  );
+}
+
+export default TeamEditForm;
--- a/src/app/(app)/settings/teams/[id]/TeamMemberRemoveButton.js
+++ b/src/app/(app)/settings/teams/[id]/TeamMemberRemoveButton.js
@ -0,0 +1,35 @@
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+import { Icon, Icons, LoadingButton, Text } from 'react-basics';
+
+export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
+
+  const handleRemoveTeamMember = () => {
+    mutate(
+      {},
+      {
+        onSuccess: () => {
+          onSave();
+        },
+      },
+    );
+  };
+
+  return (
+    <LoadingButton
+      onClick={() => handleRemoveTeamMember()}
+      disabled={disabled}
+      isLoading={isLoading}
+    >
+      <Icon>
+        <Icons.Close />
+      </Icon>
+      <Text>{formatMessage(labels.remove)}</Text>
+    </LoadingButton>
+  );
+}
+
+export default TeamMemberRemoveButton;
--- a/src/app/(app)/settings/teams/[id]/TeamMembers.js
+++ b/src/app/(app)/settings/teams/[id]/TeamMembers.js
@ -0,0 +1,48 @@
+import { Loading, useToasts } from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+import useApiFilter from 'components/hooks/useApiFilter';
+import TeamMembersTable from './TeamMembersTable';
+
+export function TeamMembers({ teamId, readOnly }) {
+  const { showToast } = useToasts();
+  const { formatMessage, messages } = useMessages();
+  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    useApiFilter();
+  const { get, useQuery } = useApi();
+  const { data, isLoading, refetch } = useQuery(
+    ['teams:users', teamId, filter, page, pageSize],
+    () =>
+      get(`/teams/${teamId}/users`, {
+        filter,
+        page,
+        pageSize,
+      }),
+  );
+
+  if (isLoading) {
+    return <Loading icon="dots" style={{ minHeight: 300 }} />;
+  }
+
+  const handleSave = async () => {
+    await refetch();
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  return (
+    <>
+      <TeamMembersTable
+        onSave={handleSave}
+        teamId={teamId}
+        data={data}
+        readOnly={readOnly}
+        onFilterChange={handleFilterChange}
+        onPageChange={handlePageChange}
+        onPageSizeChange={handlePageSizeChange}
+        filterValue={filter}
+      />
+    </>
+  );
+}
+
+export default TeamMembers;
--- a/src/app/(app)/settings/teams/[id]/TeamMembersTable.js
+++ b/src/app/(app)/settings/teams/[id]/TeamMembersTable.js
@ -0,0 +1,68 @@
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import { ROLES } from 'lib/constants';
+import TeamMemberRemoveButton from './TeamMemberRemoveButton';
+import SettingsTable from 'components/common/SettingsTable';
+
+export function TeamMembersTable({
+  data = [],
+  teamId,
+  onSave,
+  readOnly,
+  filterValue,
+  onFilterChange,
+  onPageChange,
+  onPageSizeChange,
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  const columns = [
+    { name: 'username', label: formatMessage(labels.username) },
+    { name: 'role', label: formatMessage(labels.role) },
+    { name: 'action', label: ' ' },
+  ];
+
+  const cellRender = (row, data, key) => {
+    if (key === 'username') {
+      return row?.username;
+    }
+    if (key === 'role') {
+      return formatMessage(
+        labels[
+          Object.keys(ROLES).find(key => ROLES[key] === row?.teamUser[0]?.role) || labels.unknown
+        ],
+      );
+    }
+    return data[key];
+  };
+
+  return (
+    <SettingsTable
+      data={data}
+      columns={columns}
+      cellRender={cellRender}
+      showSearch={true}
+      showPaging={true}
+      onFilterChange={onFilterChange}
+      onPageChange={onPageChange}
+      onPageSizeChange={onPageSizeChange}
+      filterValue={filterValue}
+    >
+      {row => {
+        return (
+          !readOnly && (
+            <TeamMemberRemoveButton
+              teamId={teamId}
+              userId={row.id}
+              disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
+              onSave={onSave}
+            />
+          )
+        );
+      }}
+    </SettingsTable>
+  );
+}
+
+export default TeamMembersTable;
--- a/src/app/(app)/settings/teams/[id]/TeamSettings.js
+++ b/src/app/(app)/settings/teams/[id]/TeamSettings.js
@ -0,0 +1,65 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { Item, Loading, Tabs, useToasts } from 'react-basics';
+import PageHeader from 'components/layout/PageHeader';
+import { ROLES } from 'lib/constants';
+import useUser from 'components/hooks/useUser';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+import TeamEditForm from './TeamEditForm';
+import TeamMembers from './TeamMembers';
+import TeamWebsites from './TeamWebsites';
+
+export function TeamSettings({ teamId }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { user } = useUser();
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('details');
+  const { get, useQuery } = useApi();
+  const { showToast } = useToasts();
+  const { data, isLoading } = useQuery(
+    ['team', teamId],
+    () => {
+      if (teamId) {
+        return get(`/teams/${teamId}`);
+      }
+    },
+    { cacheTime: 0 },
+  );
+  const canEdit = data?.teamUser?.find(
+    ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
+  );
+
+  const handleSave = data => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    setValues(state => ({ ...state, ...data }));
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  if (isLoading || !values) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <PageHeader title={values?.name} />
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="details">{formatMessage(labels.details)}</Item>
+        <Item key="members">{formatMessage(labels.members)}</Item>
+        <Item key="websites">{formatMessage(labels.websites)}</Item>
+      </Tabs>
+      {tab === 'details' && (
+        <TeamEditForm teamId={teamId} data={values} onSave={handleSave} readOnly={!canEdit} />
+      )}
+      {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
+      {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
+    </>
+  );
+}
+
+export default TeamSettings;
--- a/Show more
+++ b/Show more