Refactored queries.

src/app/(main)/NavBar.tsx

@@ -6,31 +6,30 @@ 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';
+import { useMessages, useNavigation } from 'components/hooks';
 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 cloudMode = Boolean(process.env.cloudMode);
+  const { pathname, renderTeamUrl } = useNavigation();
 
   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' },
+    { label: formatMessage(labels.dashboard), url: renderTeamUrl('/dashboard') },
+    { label: formatMessage(labels.websites), url: renderTeamUrl('/websites') },
+    { label: formatMessage(labels.reports), url: renderTeamUrl('/reports') },
+    { label: formatMessage(labels.settings), url: renderTeamUrl('/settings') },
   ].filter(n => n);
 
   const menuItems = [
     {
       label: formatMessage(labels.dashboard),
-      url: '/dashboard',
+      url: renderTeamUrl('/dashboard'),
     },
     !cloudMode && {
       label: formatMessage(labels.settings),
-      url: '/settings',
+      url: renderTeamUrl('/settings'),
       children: [
         {
           label: formatMessage(labels.websites),

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

@@ -5,14 +5,14 @@ async function getEnabled() {
   return !!process.env.ENABLE_TEST_CONSOLE;
 }
 
-export default async function ({ params: { id } }) {
+export default async function ({ params: { websiteId } }) {
   const enabled = await getEnabled();
 
   if (!enabled) {
     return null;
   }
 
-  return <TestConsole websiteId={id?.[0]} />;
+  return <TestConsole websiteId={websiteId?.[0]} />;
 }
 
 export const metadata: Metadata = {

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

@@ -3,8 +3,14 @@ import { useReports } from 'components/hooks';
 import ReportsTable from './ReportsTable';
 import DataTable from 'components/common/DataTable';
 
-export default function ReportsDataTable({ websiteId }: { websiteId?: string }) {
-  const queryResult = useReports(websiteId);
+export default function ReportsDataTable({
+  websiteId,
+  teamId,
+}: {
+  websiteId?: string;
+  teamId?: string;
+}) {
+  const queryResult = useReports({ websiteId, teamId });
 
   return (
     <DataTable queryResult={queryResult}>

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

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

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 } from 'components/hooks';
+import { useMessages, useNavigation } from 'components/hooks';
 
 function ReportItem({ title, description, url, icon }) {
   const { formatMessage, labels } = useMessages();
@@ -32,26 +32,27 @@ function ReportItem({ title, description, url, icon }) {
   );
 }
 
-export function ReportTemplates({ showHeader = true }) {
+export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
   const { formatMessage, labels } = useMessages();
+  const { renderTeamUrl } = useNavigation();
 
   const reports = [
     {
       title: formatMessage(labels.insights),
       description: formatMessage(labels.insightsDescription),
-      url: '/reports/insights',
+      url: renderTeamUrl('/reports/insights'),
       icon: <Lightbulb />,
     },
     {
       title: formatMessage(labels.funnel),
       description: formatMessage(labels.funnelDescription),
-      url: '/reports/funnel',
+      url: renderTeamUrl('/reports/funnel'),
       icon: <Funnel />,
     },
     {
       title: formatMessage(labels.retention),
       description: formatMessage(labels.retentionDescription),
-      url: '/reports/retention',
+      url: renderTeamUrl('/reports/retention'),
       icon: <Magnet />,
     },
   ];

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

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

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

@@ -28,7 +28,7 @@ export function LanguageSetting() {
         items={options}
         value={locale}
         renderValue={renderValue}
-        onChange={saveLocale}
+        onChange={val => saveLocale(val as string)}
         allowSearch={true}
         onSearch={setSearch}
         menuProps={{ className: styles.menu }}

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

@@ -7,7 +7,7 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import { setValue } from 'store/cache';
+import { touch } from 'store/cache';
 import { useApi, useMessages } from 'components/hooks';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
@@ -17,10 +17,10 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
     mutationFn: (data: any) => post('/teams', data),
   });
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
-        setValue('teams', Date.now());
+        touch('teams');
         onSave?.();
         onClose?.();
       },

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

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

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

@@ -18,11 +18,11 @@ const generateId = () => getRandomChars(16);
 export function TeamEditForm({
   teamId,
   data,
-  readOnly,
+  allowEdit,
 }: {
   teamId: string;
   data?: { name: string; accessCode: string };
-  readOnly?: boolean;
+  allowEdit?: boolean;
 }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
@@ -57,22 +57,24 @@ export function TeamEditForm({
         <TextField value={teamId} readOnly allowCopy />
       </FormRow>
       <FormRow label={formatMessage(labels.name)}>
-        {!readOnly && (
+        {allowEdit && (
           <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
             <TextField />
           </FormInput>
         )}
-        {readOnly && data.name}
+        {!allowEdit && 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 && (
+      {allowEdit && (
+        <FormRow label={formatMessage(labels.accessCode)}>
+          <Flexbox gap={10}>
+            <TextField value={accessCode} readOnly allowCopy />
+            {allowEdit && (
+              <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
+            )}
+          </Flexbox>
+        </FormRow>
+      )}
+      {allowEdit && (
         <FormButtons>
           <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
         </FormButtons>

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

@@ -1,6 +1,6 @@
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
-import { setValue } from 'store/cache';
+import { touch } from 'store/cache';
 
 export function TeamMemberRemoveButton({
   teamId,
@@ -22,7 +22,7 @@ export function TeamMemberRemoveButton({
   const handleRemoveTeamMember = () => {
     mutate(null, {
       onSuccess: () => {
-        setValue('team:members', Date.now());
+        touch('team:members');
         onSave?.();
       },
     });

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

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

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

@@ -6,11 +6,11 @@ import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 export function TeamMembersTable({
   data = [],
   teamId,
-  readOnly,
+  allowEdit,
 }: {
   data: any[];
   teamId: string;
-  readOnly: boolean;
+  allowEdit: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
@@ -23,16 +23,20 @@ export function TeamMembersTable({
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
-      <GridColumn name="username" label={formatMessage(labels.username)} />
+      <GridColumn name="username" label={formatMessage(labels.username)}>
+        {row => row?.user?.username}
+      </GridColumn>
       <GridColumn name="role" label={formatMessage(labels.role)}>
-        {row => roles[row?.teamUser?.[0]?.role]}
+        {row => roles[row?.role]}
       </GridColumn>
       <GridColumn name="action" label=" " alignment="end">
         {row => {
           return (
-            !readOnly &&
-            row?.teamUser?.[0]?.role !== ROLES.teamOwner &&
-            user?.id !== row?.id && <TeamMemberRemoveButton teamId={teamId} userId={row.id} />
+            allowEdit &&
+            row?.role !== ROLES.teamOwner &&
+            user?.id !== row?.id && (
+              <TeamMemberRemoveButton teamId={teamId} userId={row?.user?.id} />
+            )
           );
         }}
       </GridColumn>

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

@@ -47,9 +47,9 @@ export function TeamSettings({ teamId }: { teamId: string }) {
           <Item key="websites">{formatMessage(labels.websites)}</Item>
           <Item key="data">{formatMessage(labels.data)}</Item>
         </Tabs>
-        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} readOnly={!canEdit} />}
-        {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
-        {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
+        {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>

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

@@ -1,7 +1,7 @@
 import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 
-export function TeamWebsites({ teamId }: { teamId: string; readOnly: boolean }) {
-  return <WebsitesDataTable teamId={teamId} />;
+export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
+  return <WebsitesDataTable teamId={teamId} allowEdit={allowEdit} />;
 }
 
 export default TeamWebsites;

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

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

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

@@ -5,6 +5,7 @@ import WebsitesHeader from './WebsitesHeader';
 
 export default function Websites() {
   const { user } = useLogin();
+
   return (
     <>
       <WebsitesHeader showActions={user.role !== 'view-only'} />

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 } from 'components/hooks';
+import { useMessages, useLogin, useNavigation } from 'components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
@@ -23,6 +23,7 @@ export function WebsitesTable({
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
   const breakpoint = useBreakpoint();
+  const { renderTeamUrl } = useNavigation();
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@@ -46,7 +47,7 @@ export function WebsitesTable({
                   </Link>
                 )}
                 {allowView && (
-                  <Link href={teamId ? `/teams/${teamId}/websites/${id}` : `/websites/${id}`}>
+                  <Link href={renderTeamUrl(`/websites/${id}`)}>
                     <Button>
                       <Icon>
                         <Icons.External />

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

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

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

@@ -0,0 +1,27 @@
+'use client';
+import Link from 'next/link';
+import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
+import { useMessages } from 'components/hooks';
+import ReportsDataTable from 'app/(main)/reports/ReportsDataTable';
+
+export function TeamReports({ websiteId }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <>
+      <Flexbox alignItems="center" justifyContent="end">
+        <Link href={`/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/create/page.tsx

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

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

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

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

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

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

@@ -43,7 +43,7 @@ export default function WebsiteExpandedView({
   const { formatMessage, labels } = useMessages();
   const {
     router,
-    makeUrl,
+    renderUrl,
     pathname,
     query: { view },
   } = useNavigation();
@@ -52,69 +52,69 @@ export default function WebsiteExpandedView({
     {
       key: 'url',
       label: formatMessage(labels.pages),
-      url: makeUrl({ view: 'url' }),
+      url: renderUrl({ view: 'url' }),
     },
     {
       key: 'referrer',
       label: formatMessage(labels.referrers),
-      url: makeUrl({ view: 'referrer' }),
+      url: renderUrl({ view: 'referrer' }),
     },
     {
       key: 'browser',
       label: formatMessage(labels.browsers),
-      url: makeUrl({ view: 'browser' }),
+      url: renderUrl({ view: 'browser' }),
     },
     {
       key: 'os',
       label: formatMessage(labels.os),
-      url: makeUrl({ view: 'os' }),
+      url: renderUrl({ view: 'os' }),
     },
     {
       key: 'device',
       label: formatMessage(labels.devices),
-      url: makeUrl({ view: 'device' }),
+      url: renderUrl({ view: 'device' }),
     },
     {
       key: 'country',
       label: formatMessage(labels.countries),
-      url: makeUrl({ view: 'country' }),
+      url: renderUrl({ view: 'country' }),
     },
     {
       key: 'region',
       label: formatMessage(labels.regions),
-      url: makeUrl({ view: 'region' }),
+      url: renderUrl({ view: 'region' }),
     },
     {
       key: 'city',
       label: formatMessage(labels.cities),
-      url: makeUrl({ view: 'city' }),
+      url: renderUrl({ view: 'city' }),
     },
     {
       key: 'language',
       label: formatMessage(labels.languages),
-      url: makeUrl({ view: 'language' }),
+      url: renderUrl({ view: 'language' }),
     },
     {
       key: 'screen',
       label: formatMessage(labels.screens),
-      url: makeUrl({ view: 'screen' }),
+      url: renderUrl({ view: 'screen' }),
     },
     {
       key: 'event',
       label: formatMessage(labels.events),
-      url: makeUrl({ view: 'event' }),
+      url: renderUrl({ view: 'event' }),
     },
     {
       key: 'query',
       label: formatMessage(labels.queryParameters),
-      url: makeUrl({ view: 'query' }),
+      url: renderUrl({ view: 'query' }),
     },
   ];
 
   const DetailsComponent = views[view] || (() => null);
 
   const handleChange = (view: any) => {
-    router.push(makeUrl({ view }));
+    router.push(renderUrl({ view }));
   };
 
   const renderValue = (value: string) => items.find(({ key }) => key === value)?.label;

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

@@ -11,7 +11,7 @@ export function WebsiteFilterButton({
   className?: string;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { makeUrl, router } = useNavigation();
+  const { renderUrl, router } = useNavigation();
 
   const fieldOptions = [
     { name: 'url', type: 'string', label: formatMessage(labels.url) },
@@ -25,7 +25,7 @@ export function WebsiteFilterButton({
   ];
 
   const handleAddFilter = ({ name, value }) => {
-    router.push(makeUrl({ [name]: value }));
+    router.push(renderUrl({ [name]: value }));
   };
 
   return (

src/app/(main)/websites/[websiteId]/event-data/EventDataTable.tsx

@@ -6,7 +6,7 @@ import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
-  const { makeUrl } = useNavigation();
+  const { renderUrl } = useNavigation();
 
   if (data.length === 0) {
     return <Empty />;
@@ -16,7 +16,7 @@ export function EventDataTable({ data = [] }) {
     <GridTable data={data}>
       <GridColumn name="eventName" label={formatMessage(labels.event)}>
         {row => (
-          <Link href={makeUrl({ event: row.eventName })} shallow={true}>
+          <Link href={renderUrl({ event: row.eventName })} shallow={true}>
             {row.eventName}
           </Link>
         )}

src/app/(main)/websites/[websiteId]/event-data/EventDataValueTable.tsx

@@ -8,12 +8,12 @@ import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataValueTable({ data = [], event }: { data: any[]; event: string }) {
   const { formatMessage, labels } = useMessages();
-  const { makeUrl } = useNavigation();
+  const { renderUrl } = useNavigation();
 
   const Title = () => {
     return (
       <>
-        <Link href={makeUrl({ event: undefined })}>
+        <Link href={renderUrl({ event: undefined })}>
           <Button>
             <Icon rotate={180}>
               <Icons.ArrowRight />

src/app/(main)/websites/[websiteId]/event-data/page.tsx

@@ -1,15 +1,15 @@
 import WebsiteHeader from '../WebsiteHeader';
 import WebsiteEventData from './WebsiteEventData';
 
-export default function WebsiteEventDataPage({ params: { id } }) {
-  if (!id) {
+export default function WebsiteEventDataPage({ params: { websiteId } }) {
+  if (!websiteId) {
     return null;
   }
 
   return (
     <>
-      <WebsiteHeader websiteId={id} />
-      <WebsiteEventData websiteId={id} />
+      <WebsiteHeader websiteId={websiteId} />
+      <WebsiteEventData websiteId={websiteId} />
     </>
   );
 }

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

@@ -1,5 +1,5 @@
 import WebsiteDetails from './WebsiteDetails';
 
-export default function WebsitePage({ params: { id } }) {
-  return <WebsiteDetails websiteId={id} />;
+export default function WebsitePage({ params: { websiteId } }) {
+  return <WebsiteDetails websiteId={websiteId} />;
 }

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

@@ -1,9 +1,9 @@
 import Realtime from './Realtime';
 
-export default function WebsiteRealtimePage({ params: { id } }) {
-  if (!id) {
+export default function WebsiteRealtimePage({ params: { websiteId } }) {
+  if (!websiteId) {
     return null;
   }
 
-  return <Realtime websiteId={id} />;
+  return <Realtime websiteId={websiteId} />;
 }

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

@@ -1,9 +1,9 @@
 import WebsiteReports from './WebsiteReports';
 
-export default function WebsiteReportsPage({ params: { id } }) {
-  if (!id) {
+export default function WebsiteReportsPage({ params: { websiteId } }) {
+  if (!websiteId) {
     return null;
   }
 
-  return <WebsiteReports websiteId={id} />;
+  return <WebsiteReports websiteId={websiteId} />;
 }