Teams context settings.

src/app/(main)/NavBar.tsx

@@ -8,14 +8,16 @@ import LanguageButton from 'components/input/LanguageButton';
 import ProfileButton from 'components/input/ProfileButton';
 import TeamsButton from 'components/input/TeamsButton';
 import Icons from 'components/icons';
-import { useLogin, useMessages, useNavigation } from 'components/hooks';
+import { useLogin, useMessages, useNavigation, useTeamContext } from 'components/hooks';
 import styles from './NavBar.module.css';
 
 export function NavBar() {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+  const { teamId, renderTeamUrl } = useTeamContext();
+
   const cloudMode = Boolean(process.env.cloudMode);
-  const { pathname, renderTeamUrl, teamId } = useNavigation();
 
   const links = [
     { label: formatMessage(labels.dashboard), url: renderTeamUrl('/dashboard') },

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

@@ -16,5 +16,5 @@ export default async function ({ params: { websiteId } }) {
 }
 
 export const metadata: Metadata = {
-  title: 'Test Console | umami',
+  title: 'Test Console | Umami',
 };

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

@@ -6,5 +6,5 @@ export default function () {
 }
 
 export const metadata: Metadata = {
-  title: 'Dashboard | umami',
+  title: 'Dashboard | Umami',
 };

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

@@ -1,12 +1,12 @@
 'use client';
 import PageHeader from 'components/layout/PageHeader';
 import { Icon, Icons, Text } from 'react-basics';
-import { useMessages, useNavigation } from 'components/hooks';
+import { useMessages, useTeamContext } from 'components/hooks';
 import LinkButton from 'components/common/LinkButton';
 
 export function ReportsHeader() {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useNavigation();
+  const { renderTeamUrl } = useTeamContext();
 
   return (
     <PageHeader title={formatMessage(labels.reports)}>

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

@@ -1,6 +1,6 @@
 import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
-import { useMessages, useLogin, useNavigation } from 'components/hooks';
+import { useMessages, useLogin, useTeamContext } from 'components/hooks';
 import { REPORT_TYPES } from 'lib/constants';
 import ReportDeleteButton from './ReportDeleteButton';
 
@@ -8,7 +8,7 @@ export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomai
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
   const breakpoint = useBreakpoint();
-  const { renderTeamUrl } = useNavigation();
+  const { renderTeamUrl } = useTeamContext();
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>

src/app/(main)/reports/[reportId]/BaseParameters.tsx

@@ -3,7 +3,7 @@ import { FormRow } from 'react-basics';
 import { parseDateRange } from 'lib/date';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
-import { useMessages } from 'components/hooks';
+import { useLogin, useMessages, useTeamContext } from 'components/hooks';
 import { ReportContext } from './Report';
 
 export interface BaseParametersProps {
@@ -21,6 +21,8 @@ export function BaseParameters({
 }: BaseParametersProps) {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
+  const { user } = useLogin();
+  const { teamId } = useTeamContext();
 
   const { parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
@@ -39,7 +41,12 @@ export function BaseParameters({
       {showWebsiteSelect && (
         <FormRow label={formatMessage(labels.website)}>
           {allowWebsiteSelect && (
-            <WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
+            <WebsiteSelect
+              userId={user.id}
+              teamId={teamId}
+              websiteId={websiteId}
+              onSelect={handleWebsiteSelect}
+            />
           )}
         </FormRow>
       )}

src/app/(main)/reports/[reportId]/ReportHeader.tsx

@@ -1,7 +1,6 @@
 import { useContext } from 'react';
-import { useRouter } from 'next/navigation';
 import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
-import { useMessages, useApi } from 'components/hooks';
+import { useMessages, useApi, useNavigation, useTeamContext } from 'components/hooks';
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
 import { REPORT_TYPES } from 'lib/constants';
@@ -10,8 +9,10 @@ export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels, messages } = useMessages();
   const { showToast } = useToasts();
+  const { router } = useNavigation();
+  const { renderTeamUrl } = useTeamContext();
+
   const { post, useMutation } = useApi();
-  const router = useRouter();
   const { mutate: create, isPending: isCreating } = useMutation({
     mutationFn: (data: any) => post(`/reports`, data),
   });
@@ -28,7 +29,7 @@ export function ReportHeader({ icon }) {
       create(report, {
         onSuccess: async ({ id }) => {
           showToast({ message: formatMessage(messages.saved), variant: 'success' });
-          router.push(`/reports/${id}`);
+          router.push(renderTeamUrl(`/reports/${id}`));
         },
       });
     } else {

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

@@ -10,5 +10,5 @@ export default function ReportDetailsPage({ params: { reportId } }) {
 }
 
 export const metadata: Metadata = {
-  title: 'Reports | umami',
+  title: 'Reports | Umami',
 };

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

@@ -6,7 +6,7 @@ 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, useNavigation } from 'components/hooks';
+import { useMessages, useTeamContext } from 'components/hooks';
 
 function ReportItem({ title, description, url, icon }) {
   const { formatMessage, labels } = useMessages();
@@ -34,7 +34,7 @@ function ReportItem({ title, description, url, icon }) {
 
 export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useNavigation();
+  const { renderTeamUrl } = useTeamContext();
 
   const reports = [
     {

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

@@ -6,5 +6,5 @@ export default function ReportsCreatePage() {
 }
 
 export const metadata: Metadata = {
-  title: 'Create Report | umami',
+  title: 'Create Report | Umami',
 };

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

@@ -11,7 +11,7 @@ const defaultParameters = {
   parameters: { fields: [], filters: [] },
 };
 
-export default function EventDataReport({ reportId }: { reportId: string }) {
+export default function EventDataReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Nodes />} />

src/app/(main)/reports/event-data/page.tsx

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

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

@@ -14,7 +14,7 @@ const defaultParameters = {
   parameters: { window: 60, urls: [] },
 };
 
-export default function FunnelReport({ reportId }) {
+export default function FunnelReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Funnel />} />

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

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

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

@@ -13,7 +13,7 @@ const defaultParameters = {
   parameters: { fields: [], filters: [] },
 };
 
-export default function InsightsReport({ reportId }: { reportId: string }) {
+export default function InsightsReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Lightbulb />} />

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

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

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

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

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

@@ -19,7 +19,7 @@ const defaultParameters = {
   },
 };
 
-export default function RetentionReport({ reportId }: { reportId: string }) {
+export default function RetentionReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Magnet />} />

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

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

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

@@ -1,6 +1,6 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useLogin, useMessages } from 'components/hooks';
+import { useLogin, useMessages, useTeamContext } from 'components/hooks';
 import SideNav from 'components/layout/SideNav';
 import styles from './layout.module.css';
 
@@ -9,12 +9,32 @@ export default function SettingsLayout({ children }) {
   const pathname = usePathname();
   const { formatMessage, labels } = useMessages();
   const cloudMode = !!process.env.cloudMode;
+  const { teamId, renderTeamUrl } = useTeamContext();
 
   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' },
+    {
+      key: 'team',
+      label: formatMessage(labels.team),
+      url: renderTeamUrl('/settings/team'),
+    },
+    teamId && {
+      key: 'members',
+      label: formatMessage(labels.members),
+      url: renderTeamUrl('/settings/members'),
+    },
+    {
+      key: 'websites',
+      label: formatMessage(labels.websites),
+      url: renderTeamUrl('/settings/websites'),
+    },
+    !teamId && { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
+    !teamId &&
+      user.isAdmin && {
+        key: 'users',
+        label: formatMessage(labels.users),
+        url: renderTeamUrl('/settings/users'),
+      },
+    !teamId && { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
   ].filter(n => n);
 
   const getKey = () => items.find(({ url }) => pathname === url)?.key;

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

@@ -12,5 +12,5 @@ export default function () {
 }
 
 export const metadata: Metadata = {
-  title: 'Profile Settings | umami',
+  title: 'Profile Settings | Umami',
 };

src/app/(main)/settings/teams/[teamId]/TeamData.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import TeamDeleteForm from '../TeamDeleteForm';

src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx

@@ -1,3 +1,4 @@
+'use client';
 import {
   SubmitButton,
   Form,

src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { touch } from 'store/cache';

src/app/(main)/settings/teams/[teamId]/TeamMembers.tsx

@@ -1,3 +1,4 @@
+'use client';
 import DataTable from 'components/common/DataTable';
 import TeamMembersTable from './TeamMembersTable';
 import useTeamMembers from 'components/hooks/queries/useTeamMembers';

src/app/(main)/settings/teams/[teamId]/TeamMembersTable.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';

src/app/(main)/settings/teams/[teamId]/TeamSettings.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { useState } from 'react';
 import { Item, Loading, Tabs, Flexbox, Text, Icon } from 'react-basics';
-import TeamsContext from 'app/(main)/teams/TeamsContext';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
 import Icons from 'components/icons';
@@ -27,32 +26,26 @@ export function TeamSettings({ teamId }: { teamId: string }) {
   );
 
   return (
-    <TeamsContext.Provider value={team}>
-      <Flexbox direction="column">
-        <PageHeader title={team?.name} icon={<Icons.Users />}>
-          <LinkButton href={`/teams/${teamId}`} variant="primary">
-            <Icon>
-              <Icons.Change />
-            </Icon>
-            <Text>{formatMessage(labels.view)}</Text>
-          </LinkButton>
-        </PageHeader>
-        <Tabs
-          selectedKey={tab}
-          onSelect={(value: any) => setTab(value)}
-          style={{ marginBottom: 30 }}
-        >
-          <Item key="details">{formatMessage(labels.details)}</Item>
-          <Item key="members">{formatMessage(labels.members)}</Item>
-          <Item key="websites">{formatMessage(labels.websites)}</Item>
-          <Item key="data">{formatMessage(labels.data)}</Item>
-        </Tabs>
-        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} allowEdit={canEdit} />}
-        {tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
-        {tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
-        {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
-      </Flexbox>
-    </TeamsContext.Provider>
+    <Flexbox direction="column">
+      <PageHeader title={team?.name} icon={<Icons.Users />}>
+        <LinkButton href={`/teams/${teamId}`} variant="primary">
+          <Icon>
+            <Icons.Change />
+          </Icon>
+          <Text>{formatMessage(labels.view)}</Text>
+        </LinkButton>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
+        <Item key="details">{formatMessage(labels.details)}</Item>
+        <Item key="members">{formatMessage(labels.members)}</Item>
+        <Item key="websites">{formatMessage(labels.websites)}</Item>
+        <Item key="data">{formatMessage(labels.data)}</Item>
+      </Tabs>
+      {tab === 'details' && <TeamEditForm teamId={teamId} data={team} allowEdit={canEdit} />}
+      {tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
+      {tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
+      {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
+    </Flexbox>
   );
 }
 

src/app/(main)/settings/teams/[teamId]/TeamWebsiteRemoveButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 

src/app/(main)/settings/teams/[teamId]/TeamWebsites.tsx

@@ -1,3 +1,4 @@
+'use client';
 import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 
 export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {

src/app/(main)/settings/teams/[teamId]/TeamWebsitesTable.tsx

@@ -1,3 +1,4 @@
+'use client';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Text } from 'react-basics';
 import { useMessages } from 'components/hooks';

src/app/(main)/settings/teams/[teamId]/page.tsx

@@ -1,9 +1,5 @@
 import TeamSettings from './TeamSettings';
 
 export default function ({ params: { teamId } }) {
-  if (process.env.cloudMode) {
-    return null;
-  }
-
   return <TeamSettings teamId={teamId} />;
 }

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

@@ -3,10 +3,6 @@ import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
 
 export default function () {
-  if (process.env.cloudMode) {
-    return null;
-  }
-
   return (
     <>
       <TeamsHeader />

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

@@ -1,9 +1,5 @@
 import UserSettings from './UserSettings';
 
 export default function ({ params: { userId } }) {
-  if (process.env.cloudMode) {
-    return null;
-  }
-
   return <UserSettings userId={userId} />;
 }

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

@@ -11,5 +11,5 @@ export default function () {
   );
 }
 export const metadata: Metadata = {
-  title: 'Users | umami',
+  title: 'Users | Umami',
 };

src/app/(main)/settings/websites/Websites.tsx

@@ -3,13 +3,13 @@ import { useLogin } from 'components/hooks';
 import WebsitesDataTable from './WebsitesDataTable';
 import WebsitesHeader from './WebsitesHeader';
 
-export default function Websites() {
+export default function Websites({ teamId }: { teamId: string }) {
   const { user } = useLogin();
 
   return (
     <>
       <WebsitesHeader showActions={user.role !== 'view-only'} />
-      <WebsitesDataTable userId={user.id} />
+      <WebsitesDataTable teamId={teamId} userId={user.id} allowEdit={true} />
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
-import { useMessages, useLogin, useNavigation } from 'components/hooks';
+import { useMessages, useLogin, useTeamContext } from 'components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
@@ -23,7 +23,7 @@ export function WebsitesTable({
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
   const breakpoint = useBreakpoint();
-  const { renderTeamUrl } = useNavigation();
+  const { renderTeamUrl } = useTeamContext();
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@@ -32,12 +32,12 @@ export function WebsitesTable({
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
-            const { id, userId } = row;
+            const { id } = row;
 
             return (
               <>
-                {allowEdit && !teamId && user.id === userId && (
-                  <Link href={`/settings/websites/${id}`}>
+                {allowEdit && (teamId || user.isAdmin) && (
+                  <Link href={renderTeamUrl(`/settings/websites/${id}`)}>
                     <Button>
                       <Icon>
                         <Icons.Edit />
@@ -47,7 +47,7 @@ export function WebsitesTable({
                   </Link>
                 )}
                 {allowView && (
-                  <Link href={renderTeamUrl(`/websites/${id}`)}>
+                  <Link href={renderTeamUrl(renderTeamUrl(`/websites/${id}`))}>
                     <Button>
                       <Icon>
                         <Icons.ArrowRight />

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

@@ -1,9 +1,5 @@
 import WebsiteSettings from '../WebsiteSettings';
 
 export default async function WebsiteSettingsPage({ params: { websiteId } }) {
-  if (process.env.cloudMode || !websiteId) {
-    return null;
-  }
-
   return <WebsiteSettings websiteId={websiteId} />;
 }

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

@@ -1,10 +1,10 @@
 import { Metadata } from 'next';
 import Websites from './Websites';
 
-export default function () {
-  return <Websites />;
+export default function ({ params: { teamId } }: { params: { teamId: string } }) {
+  return <Websites teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
-  title: 'Websites Settings | umami',
+  title: 'Websites Settings | Umami',
 };

src/app/(main)/teams/TeamsContext.tsx

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-export const TeamsContext = createContext(null);
-
-export default TeamsContext;

src/app/(main)/teams/[teamId]/Team.tsx

@@ -1,20 +0,0 @@
-'use client';
-import TeamsContext from '../TeamsContext';
-import { Loading } from 'react-basics';
-import { useTeam } from 'components/hooks';
-import { useParams } from 'next/navigation';
-
-export default function Team({ children }) {
-  const { id: teamId } = useParams();
-  const { data: team, isLoading, error } = useTeam(teamId as string);
-
-  if (error) {
-    return null;
-  }
-
-  if (isLoading) {
-    return <Loading position="page" />;
-  }
-
-  return <TeamsContext.Provider value={team}>{children}</TeamsContext.Provider>;
-}

src/app/(main)/teams/[teamId]/layout.tsx

@@ -1,5 +0,0 @@
-import Team from './Team';
-
-export default function ({ children }) {
-  return <Team>{children}</Team>;
-}

src/app/(main)/teams/[teamId]/reports/TeamReports.tsx

@@ -1,28 +0,0 @@
-'use client';
-import Link from 'next/link';
-import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
-import { useMessages, useNavigation } from 'components/hooks';
-import ReportsDataTable from 'app/(main)/reports/ReportsDataTable';
-
-export function TeamReports({ websiteId }) {
-  const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useNavigation();
-
-  return (
-    <>
-      <Flexbox alignItems="center" justifyContent="end">
-        <Link href={renderTeamUrl(`/reports/create`)}>
-          <Button variant="primary">
-            <Icon>
-              <Icons.Plus />
-            </Icon>
-            <Text>{formatMessage(labels.createReport)}</Text>
-          </Button>
-        </Link>
-      </Flexbox>
-      <ReportsDataTable websiteId={websiteId} />
-    </>
-  );
-}
-
-export default TeamReports;

src/app/(main)/teams/[teamId]/reports/[reportId]/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/reports/[reportId]/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/reports/create/page.tsx

@@ -1,10 +1,3 @@
-import { Metadata } from 'next';
-import ReportTemplates from 'app/(main)/reports/create/ReportTemplates';
+import Page from 'app/(main)/reports/create/page';
 
-export default function () {
-  return <ReportTemplates />;
-}
-
-export const metadata: Metadata = {
-  title: 'Create Report | umami',
-};
+export default Page;

src/app/(main)/teams/[teamId]/reports/event-data/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/reports/event-data/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/reports/funnel/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/reports/funnel/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/reports/insights/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/reports/insights/page';
+
+export default Page;

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

@@ -1,15 +1,3 @@
-import { Metadata } from 'next';
-import ReportsHeader from 'app/(main)/reports/ReportsHeader';
-import ReportsDataTable from 'app/(main)/reports/ReportsDataTable';
+import Page from 'app/(main)/reports/page';
 
-export default function ({ params: { teamId } }) {
-  return (
-    <>
-      <ReportsHeader />
-      <ReportsDataTable teamId={teamId} />
-    </>
-  );
-}
-export const metadata: Metadata = {
-  title: 'Reports | umami',
-};
+export default Page;

src/app/(main)/teams/[teamId]/reports/retention/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/reports/retention/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/settings/layout.tsx

@@ -0,0 +1,3 @@
+import Layout from 'app/(main)/settings/layout';
+
+export default Layout;

src/app/(main)/teams/[teamId]/settings/members/Members.tsx

@@ -0,0 +1,15 @@
+'use client';
+import TeamMembers from 'app/(main)/settings/teams/[teamId]/TeamMembers';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from 'components/hooks';
+
+export default function ({ teamId }: { teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <>
+      <PageHeader title={formatMessage(labels.members)} />
+      <TeamMembers teamId={teamId} allowEdit={true} />
+    </>
+  );
+}

src/app/(main)/teams/[teamId]/settings/members/page.tsx

@@ -0,0 +1,5 @@
+import Members from './Members';
+
+export default function ({ params: { teamId } }) {
+  return <Members teamId={teamId} />;
+}

src/app/(main)/teams/[teamId]/settings/team/Team.tsx

@@ -0,0 +1,26 @@
+'use client';
+import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
+import { useLogin, useMessages, useTeam } from 'components/hooks';
+import { Loading } from 'react-basics';
+import PageHeader from 'components/layout/PageHeader';
+import { ROLES } from 'lib/constants';
+
+export default function Team({ teamId }: { teamId: string }) {
+  const { user } = useLogin();
+  const { formatMessage, labels } = useMessages();
+  const { data: team, isLoading } = useTeam(teamId);
+  const allowEdit = !!team?.teamUser?.find(
+    ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
+  );
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <PageHeader title={formatMessage(labels.team)} />
+      <TeamEditForm teamId={teamId} data={team} allowEdit={allowEdit} />
+    </>
+  );
+}

src/app/(main)/teams/[teamId]/settings/team/page.tsx

@@ -0,0 +1,5 @@
+import Team from './Team';
+
+export default function ({ params: { teamId } }) {
+  return <Team teamId={teamId} />;
+}

src/app/(main)/teams/[teamId]/settings/websites/[websiteId]/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/settings/websites/[websiteId]/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/settings/websites/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/settings/websites/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/page.tsx

@@ -1,5 +1,3 @@
-import WebsiteDetails from 'app/(main)/websites/[websiteId]/WebsiteDetails';
+import Page from 'app/(main)/websites/[websiteId]/page';
 
-export default function TeamWebsitePage({ params: { websiteId } }) {
-  return <WebsiteDetails websiteId={websiteId} />;
-}
+export default Page;

src/app/(main)/teams/[teamId]/websites/page.tsx

@@ -1,11 +1,3 @@
-import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
-import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
+import Page from 'app/(main)/websites/page';
 
-export default function TeamWebsitesPage({ params: { teamId } }: { params: { teamId: string } }) {
-  return (
-    <>
-      <WebsitesHeader teamId={teamId} />
-      <WebsitesDataTable teamId={teamId} />
-    </>
-  );
-}
+export default Page;

src/app/(main)/websites/WebsitesBrowse.tsx

@@ -2,11 +2,11 @@
 import WebsitesDataTable from '../settings/websites/WebsitesDataTable';
 import { useLogin } from 'components/hooks';
 
-export function WebsitesBrowse() {
+export function WebsitesBrowse({ teamId, userId }: { teamId: string; userId: string }) {
   const { user } = useLogin();
   const allowEdit = !process.env.cloudMode;
 
-  return <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />;
+  return <WebsitesDataTable teamId={teamId} userId={userId || user.id} allowEdit={allowEdit} />;
 }
 
 export default WebsitesBrowse;

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

@@ -5,7 +5,7 @@ import { getDateArray } from 'lib/date';
 
 export function WebsiteChart({ websiteId }: { websiteId: string }) {
   const [dateRange] = useDateRange(websiteId);
-  const { startDate, endDate, unit, modified } = dateRange;
+  const { startDate, endDate, unit } = dateRange;
   const [timezone] = useTimezone();
   const {
     query: { url, referrer, os, browser, device, country, region, city, title },
@@ -15,7 +15,7 @@ export function WebsiteChart({ websiteId }: { websiteId: string }) {
   const { data, isLoading } = useQuery({
     queryKey: [
       'websites:pageviews',
-      { websiteId, modified, url, referrer, os, browser, device, country, region, city, title },
+      { websiteId, url, referrer, os, browser, device, country, region, city, title },
     ],
     queryFn: () =>
       get(`/websites/${websiteId}/pageviews`, {

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

@@ -19,7 +19,7 @@ export function WebsiteMetricsBar({
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
-  const { startDate, endDate, modified } = dateRange;
+  const { startDate, endDate } = dateRange;
   const { ref, isSticky } = useSticky({ enabled: sticky });
   const {
     query: { url, referrer, title, os, browser, device, country, region, city },
@@ -28,7 +28,7 @@ export function WebsiteMetricsBar({
   const { data, error, isLoading, isFetched } = useQuery({
     queryKey: [
       'websites:stats',
-      { websiteId, modified, url, referrer, title, os, browser, device, country, region, city },
+      { websiteId, url, referrer, title, os, browser, device, country, region, city },
     ],
     queryFn: () =>
       get(`/websites/${websiteId}/stats`, {

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

@@ -2,15 +2,15 @@ import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
 import WebsitesBrowse from './WebsitesBrowse';
 import { Metadata } from 'next';
 
-export default function WebsitesPage() {
+export default function WebsitesPage({ params: { teamId, userId } }) {
   return (
     <>
       <WebsitesHeader showActions={false} />
-      <WebsitesBrowse />
+      <WebsitesBrowse teamId={teamId} userId={userId} />
     </>
   );
 }
 
 export const metadata: Metadata = {
-  title: 'Websites | umami',
+  title: 'Websites | Umami',
 };