Changed route ids to be more explicit.

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 } }) {
-  if (!id) {
+export default function ReportDetailsPage({ params: { reportId } }) {
+  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 FieldAddForm from '../[id]/FieldAddForm';
-import ParameterList from '../[id]/ParameterList';
-import BaseParameters from '../[id]/BaseParameters';
+import { ReportContext } from '../[reportId]/Report';
+import FieldAddForm from '../[reportId]/FieldAddForm';
+import ParameterList from '../[reportId]/ParameterList';
+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 ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import Report from '../[reportId]/Report';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+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 BaseParameters from '../[id]/BaseParameters';
-import ParameterList from '../[id]/ParameterList';
-import PopupForm from '../[id]/PopupForm';
+import { ReportContext } from '../[reportId]/Report';
+import BaseParameters from '../[reportId]/BaseParameters';
+import ParameterList from '../[reportId]/ParameterList';
+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 ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import Report from '../[reportId]/Report';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+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 { ReportContext } from '../[id]/Report';
-import ParameterList from '../[id]/ParameterList';
-import FilterSelectForm from '../[id]/FilterSelectForm';
-import FieldSelectForm from '../[id]/FieldSelectForm';
-import PopupForm from '../[id]/PopupForm';
+import BaseParameters from '../[reportId]/BaseParameters';
+import { ReportContext } from '../[reportId]/Report';
+import ParameterList from '../[reportId]/ParameterList';
+import FilterSelectForm from '../[reportId]/FilterSelectForm';
+import FieldSelectForm from '../[reportId]/FieldSelectForm';
+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 ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import Report from '../[reportId]/Report';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+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 ReportHeader from '../[id]/ReportHeader';
-import ReportMenu from '../[id]/ReportMenu';
-import ReportBody from '../[id]/ReportBody';
+import Report from '../[reportId]/Report';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+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';