Changed route ids to be more explicit.

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

@@ -7,7 +7,7 @@ import WebsiteSelect from 'components/input/WebsiteSelect';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EventsChart from 'components/metrics/EventsChart';
-import WebsiteChart from 'app/(main)/websites/[id]/WebsiteChart';
+import WebsiteChart from '../websites/[websiteId]/WebsiteChart';
 import { useApi, useNavigation } from 'components/hooks';
 import styles from './TestConsole.module.css';
 

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

@@ -3,7 +3,7 @@ import { Button, Icon, Icons, Loading, Text } from 'react-basics';
 import Link from 'next/link';
 import PageHeader from 'components/layout/PageHeader';
 import Pager from 'components/common/Pager';
-import WebsiteChartList from 'app/(main)/websites/[id]/WebsiteChartList';
+import WebsiteChartList from '../websites/[websiteId]/WebsiteChartList';
 import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
 import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';

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

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

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

@@ -4,10 +4,10 @@ import Empty from 'components/common/Empty';
 import Icons from 'components/icons';
 import { useApi, useMessages } from 'components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
-import FieldAddForm from '../[id]/FieldAddForm';
+import FieldAddForm from '../[reportId]/FieldAddForm';
-import ParameterList from '../[id]/ParameterList';
+import ParameterList from '../[reportId]/ParameterList';
-import BaseParameters from '../[id]/BaseParameters';
+import BaseParameters from '../[reportId]/BaseParameters';
 import styles from './EventDataParameters.module.css';
 
 function useFields(websiteId, startDate, endDate) {

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

@@ -1,7 +1,7 @@
-import Report from '../[id]/Report';
+import Report from '../[reportId]/Report';
-import ReportHeader from '../[id]/ReportHeader';
+import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
+import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import ReportBody from '../[reportId]/ReportBody';
 import EventDataParameters from './EventDataParameters';
 import EventDataTable from './EventDataTable';
 import Nodes from 'assets/nodes.svg';

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

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
 
 export function EventDataTable() {
   const { report } = useContext(ReportContext);

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

@@ -3,7 +3,7 @@ import { Loading, StatusLight } from 'react-basics';
 import { useMessages, useTheme } from 'components/hooks';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
 import styles from './FunnelChart.module.css';
 
 export interface FunnelChartProps {

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

@@ -13,10 +13,10 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import UrlAddForm from './UrlAddForm';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
-import BaseParameters from '../[id]/BaseParameters';
+import BaseParameters from '../[reportId]/BaseParameters';
-import ParameterList from '../[id]/ParameterList';
+import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[id]/PopupForm';
+import PopupForm from '../[reportId]/PopupForm';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);

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

@@ -2,10 +2,10 @@
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import Report from '../[id]/Report';
+import Report from '../[reportId]/Report';
-import ReportHeader from '../[id]/ReportHeader';
+import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
+import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import ReportBody from '../[reportId]/ReportBody';
 import Funnel from 'assets/funnel.svg';
 import { REPORT_TYPES } from 'lib/constants';
 

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

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import ListTable from 'components/metrics/ListTable';
 import { useMessages } from 'components/hooks';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
 
 export function FunnelTable() {
   const { report } = useContext(ReportContext);

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

@@ -11,12 +11,12 @@ import {
   TooltipPopup,
 } from 'react-basics';
 import Icons from 'components/icons';
-import BaseParameters from '../[id]/BaseParameters';
+import BaseParameters from '../[reportId]/BaseParameters';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
-import ParameterList from '../[id]/ParameterList';
+import ParameterList from '../[reportId]/ParameterList';
-import FilterSelectForm from '../[id]/FilterSelectForm';
+import FilterSelectForm from '../[reportId]/FilterSelectForm';
-import FieldSelectForm from '../[id]/FieldSelectForm';
+import FieldSelectForm from '../[reportId]/FieldSelectForm';
-import PopupForm from '../[id]/PopupForm';
+import PopupForm from '../[reportId]/PopupForm';
 import styles from './InsightsParameters.module.css';
 
 export function InsightsParameters() {

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

@@ -1,8 +1,8 @@
 'use client';
-import Report from '../[id]/Report';
+import Report from '../[reportId]/Report';
-import ReportHeader from '../[id]/ReportHeader';
+import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
+import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import ReportBody from '../[reportId]/ReportBody';
 import InsightsParameters from './InsightsParameters';
 import InsightsTable from './InsightsTable';
 import Lightbulb from 'assets/lightbulb.svg';

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

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { useFormat, useMessages } from 'components/hooks';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 
 export function InsightsTable() {

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

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
 import { MonthSelect } from 'components/input/MonthSelect';
-import BaseParameters from '../[id]/BaseParameters';
+import BaseParameters from '../[reportId]/BaseParameters';
 import { parseDateRange } from 'lib/date';
 
 export function RetentionParameters() {

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

@@ -1,10 +1,10 @@
 'use client';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
-import Report from '../[id]/Report';
+import Report from '../[reportId]/Report';
-import ReportHeader from '../[id]/ReportHeader';
+import ReportHeader from '../[reportId]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
+import ReportMenu from '../[reportId]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import ReportBody from '../[reportId]/ReportBody';
 import Magnet from 'assets/magnet.svg';
 import { REPORT_TYPES } from 'lib/constants';
 import { parseDateRange } from 'lib/date';

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

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
-import { ReportContext } from '../[id]/Report';
+import { ReportContext } from '../[reportId]/Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import { useMessages, useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';

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

@@ -1,6 +1,6 @@
 'use client';
 import { useState } from 'react';
-import { Item, Loading, Tabs, Flexbox } from 'react-basics';
+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';
@@ -10,6 +10,7 @@ import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
 import TeamData from './TeamData';
+import LinkButton from 'components/common/LinkButton';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
   const { formatMessage, labels } = useMessages();
@@ -28,7 +29,14 @@ export function TeamSettings({ teamId }: { teamId: string }) {
   return (
     <TeamsContext.Provider value={team}>
       <Flexbox direction="column">
-        <PageHeader title={team?.name} icon={<Icons.Users />} />
+        <PageHeader title={team?.name} icon={<Icons.Users />}>
+          <LinkButton href={`/teams/${teamId}`} variant="primary">
+            <Icon>
+              <Icons.External />
+            </Icon>
+            <Text>{formatMessage(labels.view)}</Text>
+          </LinkButton>
+        </PageHeader>
         <Tabs
           selectedKey={tab}
           onSelect={(value: any) => setTab(value)}

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

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

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

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

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

@@ -4,12 +4,12 @@ import { Item, Tabs, Button, Text, Icon, Loading } from 'react-basics';
 import Link from 'next/link';
 import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
-import WebsiteEditForm from './[id]/WebsiteEditForm';
+import WebsiteEditForm from './[websiteId]/WebsiteEditForm';
-import WebsiteData from './[id]/WebsiteData';
+import WebsiteData from './[websiteId]/WebsiteData';
-import TrackingCode from './[id]/TrackingCode';
+import TrackingCode from './[websiteId]/TrackingCode';
-import ShareUrl from './[id]/ShareUrl';
+import ShareUrl from './[websiteId]/ShareUrl';
 import { useWebsite, useMessages } from 'components/hooks';
-import WebsiteContext from 'app/(main)/websites/[id]/WebsiteContext';
+import WebsiteContext from '../../websites/[websiteId]/WebsiteContext';
 
 export function WebsiteSettings({ websiteId, openExternal = false }) {
   const { formatMessage, labels } = useMessages();

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

@@ -1,12 +1,14 @@
 import { TextArea } from 'react-basics';
 import { useMessages, useConfig } from 'components/hooks';
 
+const SCRIPT_NAME = 'script.js';
+
 export function TrackingCode({ websiteId, hostUrl }: { websiteId: string; hostUrl?: string }) {
   const { formatMessage, messages } = useMessages();
   const config = useConfig();
 
   const trackerScriptName =
-    config?.trackerScriptName?.split(',')?.map((n: string) => n.trim())?.[0] || 'script.js';
+    config?.trackerScriptName?.split(',')?.map((n: string) => n.trim())?.[0] || SCRIPT_NAME;
 
   const url = trackerScriptName?.startsWith('http')
     ? trackerScriptName

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
-import PopupForm from 'app/(main)/reports/[id]/PopupForm';
+import PopupForm from '../../reports/[reportId]/PopupForm';
-import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
+import FilterSelectForm from '../../reports/[reportId]/FilterSelectForm';
 import { useMessages, useNavigation } from 'components/hooks';
 
 export function WebsiteFilterButton({