Teams context settings.

next.config.js

@@ -78,6 +78,11 @@ const redirects = [
     destination: '/teams/:id/websites',
     permanent: true,
   },
+  {
+    source: '/teams/:id/settings',
+    destination: cloudMode ? `${cloudUrl}/teams/:id/settings` : '/teams/:id/settings/team',
+    permanent: true,
+  },
 ];
 
 if (cloudMode && cloudUrl && disableLogin) {

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',
 };

src/app/login/page.tsx

@@ -21,5 +21,5 @@ export default async function LoginPage() {
 }
 
 export const metadata: Metadata = {
-  title: 'Login | umami',
+  title: 'Login | Umami',
 };

src/app/logout/page.tsx

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

src/components/hooks/index.ts

@@ -25,5 +25,6 @@ export * from './useLocale';
 export * from './useMessages';
 export * from './useNavigation';
 export * from './useSticky';
+export * from './useTeamContext';
 export * from './useTheme';
 export * from './useTimezone';

src/components/hooks/queries/useLogin.ts

@@ -1,9 +1,13 @@
 import useStore, { setUser } from 'store/app';
 import useApi from './useApi';
+import { UseQueryResult } from '@tanstack/react-query';
 
 const selector = (state: { user: any }) => state.user;
 
-export function useLogin() {
+export function useLogin(): {
+  user: any;
+  setUser: (data: any) => void;
+} & UseQueryResult {
   const { get, useQuery } = useApi();
   const user = useStore(selector);
 
@@ -19,7 +23,7 @@ export function useLogin() {
     enabled: !user,
   });
 
-  return { user, ...query };
+  return { user, setUser, ...query };
 }
 
 export default useLogin;

src/components/hooks/queries/useWebsites.ts

@@ -2,14 +2,18 @@ import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 import useCache from 'store/cache';
 
-export function useWebsites({ userId, teamId }: { userId?: string; teamId?: string }) {
+export function useWebsites(
+  { userId, teamId }: { userId?: string; teamId?: string },
+  params?: { [key: string]: string | number },
+) {
   const { get } = useApi();
   const modified = useCache((state: any) => state?.websites);
 
   return useFilterQuery({
-    queryKey: ['websites', { userId, teamId, modified }],
-    queryFn: (params: any) => {
+    queryKey: ['websites', { userId, teamId, modified, ...params }],
+    queryFn: (data: any) => {
       return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId}/websites`, {
+        ...data,
         ...params,
       });
     },

src/components/hooks/useNavigation.ts

@@ -7,13 +7,10 @@ export function useNavigation(): {
   query: { [key: string]: string };
   router: any;
   renderUrl: (params: any, reset?: boolean) => string;
-  renderTeamUrl: (url: string) => string;
-  teamId?: string;
 } {
   const router = useRouter();
   const pathname = usePathname();
   const params = useSearchParams();
-  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
 
   const query = useMemo(() => {
     const obj = {};
@@ -29,11 +26,7 @@ export function useNavigation(): {
     return reset ? pathname : buildUrl(pathname, { ...query, ...params });
   }
 
-  function renderTeamUrl(url: string) {
-    return teamId ? `/teams/${teamId}${url}` : url;
-  }
-
-  return { pathname, query, router, renderUrl, renderTeamUrl, teamId };
+  return { pathname, query, router, renderUrl };
 }
 
 export default useNavigation;

src/components/hooks/useTeamContext.ts

@@ -0,0 +1,17 @@
+import { usePathname } from 'next/navigation';
+
+export function useTeamContext(): {
+  teamId?: string;
+  renderTeamUrl: (url: string) => string;
+} {
+  const pathname = usePathname();
+  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
+
+  function renderTeamUrl(url: string) {
+    return teamId ? `/teams/${teamId}${url}` : url;
+  }
+
+  return { teamId, renderTeamUrl };
+}
+
+export default useTeamContext;

src/components/input/TeamsButton.module.css

@@ -1,3 +1,7 @@
+.button {
+  font-weight: 700;
+}
+
 .menu {
   background: var(--base50);
 }

src/components/input/TeamsButton.tsx

@@ -1,9 +1,9 @@
 import { Key } from 'react';
 import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
+import classNames from 'classnames';
 import Icons from 'components/icons';
 import { useLogin, useMessages, useNavigation } from 'components/hooks';
 import styles from './TeamsButton.module.css';
-import classNames from 'classnames';
 
 export function TeamsButton({ teamId }: { teamId: string }) {
   const { user } = useLogin();

src/components/input/WebsiteSelect.tsx

@@ -1,30 +1,27 @@
 import { useState, Key } from 'react';
 import { Dropdown, Item } from 'react-basics';
-import { useApi } from 'components/hooks';
-import { useMessages } from 'components/hooks';
-import styles from './WebsiteSelect.module.css';
+import { useWebsite, useWebsites, useMessages } from 'components/hooks';
 import Empty from 'components/common/Empty';
+import styles from './WebsiteSelect.module.css';
 
 export function WebsiteSelect({
   websiteId,
+  teamId,
+  userId,
   onSelect,
 }: {
   websiteId?: string;
+  teamId?: string;
+  userId?: string;
   onSelect?: (key: any) => void;
 }) {
+  const { formatMessage, labels, messages } = useMessages();
   const [query, setQuery] = useState('');
   const [selectedId, setSelectedId] = useState<Key>(websiteId);
-  const { formatMessage, labels, messages } = useMessages();
-  const { get, useQuery } = useApi();
-  const { data: websites, isLoading } = useQuery({
-    queryKey: ['websites:me', { query }],
-    queryFn: () => get('/me/websites', { query, pageSize: 5 }),
-  });
-  const { data: website } = useQuery({
-    queryKey: ['websites', { selectedId }],
-    queryFn: () => get(`/websites/${selectedId}`),
-    enabled: !!selectedId,
-  });
+
+  const { data: website } = useWebsite(selectedId as string);
+
+  const queryResult = useWebsites({ teamId, userId }, { query, pageSize: 5 });
 
   const renderValue = () => {
     return website?.name;
@@ -46,7 +43,7 @@ export function WebsiteSelect({
   return (
     <Dropdown
       menuProps={{ className: styles.dropdown }}
-      items={websites?.data}
+      items={queryResult?.result?.data as any[]}
       value={selectedId as string}
       renderValue={renderValue}
       renderEmpty={renderEmpty}
@@ -55,7 +52,7 @@ export function WebsiteSelect({
       placeholder={formatMessage(labels.selectWebsite)}
       allowSearch={true}
       onSearch={handleSearch}
-      isLoading={isLoading}
+      isLoading={queryResult.query.isLoading}
     >
       {({ id, name }) => <Item key={id}>{name}</Item>}
     </Dropdown>

src/lib/prisma.ts

@@ -176,12 +176,13 @@ async function rawQuery(sql: string, data: object): Promise<any> {
 }
 
 async function pagedQuery<T>(model: string, criteria: T, filters: SearchFilter) {
-  const { page = 1, pageSize = DEFAULT_PAGE_SIZE, orderBy, sortDescending = false } = filters || {};
+  const { page = 1, pageSize, orderBy, sortDescending = false } = filters || {};
+  const size = +pageSize || DEFAULT_PAGE_SIZE;
 
   const data = await prisma.client[model].findMany({
     ...criteria,
     ...{
-      ...(pageSize > 0 && { take: +pageSize, skip: +pageSize * (page - 1) }),
+      ...(size > 0 && { take: +size, skip: +size * (page - 1) }),
       ...(orderBy && {
         orderBy: [
           {

src/pages/api/teams/[teamId]/users/index.ts

@@ -46,11 +46,24 @@ export default async (
 
     const { query, page, pageSize } = req.query;
 
-    const users = await getTeamUsers(teamId, {
-      query,
-      page,
-      pageSize: +pageSize || undefined,
-    });
+    const users = await getTeamUsers(
+      {
+        where: { teamId },
+        include: {
+          user: {
+            select: {
+              id: true,
+              username: true,
+            },
+          },
+        },
+      },
+      {
+        query,
+        page,
+        pageSize,
+      },
+    );
 
     return ok(res, users);
   }

src/queries/admin/teamUser.ts

@@ -1,7 +1,8 @@
-import { TeamUser } from '@prisma/client';
+import { Prisma, TeamUser } from '@prisma/client';
 import { uuid } from 'lib/crypto';
 import prisma from 'lib/prisma';
 import { FilterResult, TeamUserSearchFilter } from 'lib/types';
+import TeamUserFindManyArgs = Prisma.TeamUserFindManyArgs;
 
 export async function getTeamUser(teamId: string, userId: string): Promise<TeamUser> {
   return prisma.client.teamUser.findFirst({
@@ -13,23 +14,29 @@ export async function getTeamUser(teamId: string, userId: string): Promise<TeamU
 }
 
 export async function getTeamUsers(
-  teamId: string,
+  criteria: TeamUserFindManyArgs,
   filters?: TeamUserSearchFilter,
 ): Promise<FilterResult<TeamUser[]>> {
+  const { query } = filters;
+  const mode = prisma.getQueryMode();
+
+  const where: Prisma.TeamUserWhereInput = {
+    ...criteria.where,
+    user: {
+      username: query
+        ? {
+            contains: query,
+            mode,
+          }
+        : undefined,
+    },
+  };
+
   return prisma.pagedQuery(
     'teamUser',
     {
-      where: {
-        teamId,
-      },
-      include: {
-        user: {
-          select: {
-            id: true,
-            username: true,
-          },
-        },
-      },
+      ...criteria,
+      where,
     },
     filters,
   );

src/queries/admin/website.ts

@@ -28,37 +28,23 @@ export async function getWebsites(
   criteria: WebsiteFindManyArgs,
   filters: WebsiteSearchFilter,
 ): Promise<FilterResult<Website[]>> {
-  const { userId, teamId, query } = filters;
+  const { query } = filters;
   const mode = prisma.getQueryMode();
 
   const where: Prisma.WebsiteWhereInput = {
     ...criteria.where,
-    AND: [
-      {
-        OR: [
-          {
-            ...(userId && { userId }),
-            ...(teamId && { teamId }),
-          },
-        ],
-      },
-      {
-        OR: query
-          ? [
-              {
-                name: { contains: query, mode },
-              },
-              {
-                domain: { contains: query, mode },
-              },
-            ]
-          : [],
-      },
-    ],
+    name: {
+      contains: query ? query : undefined,
+      mode,
+    },
+    domain: {
+      contains: query ? query : undefined,
+      mode,
+    },
     deletedAt: null,
   };
 
-  return prisma.pagedQuery('website', { where }, filters);
+  return prisma.pagedQuery('website', { ...criteria, where }, filters);
 }
 
 export async function getAllWebsites(userId: string) {