Fixed pages.

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

@@ -4,7 +4,7 @@ import { parseDateRange } from 'lib/date';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
 import { useMessages, useTeamUrl } from 'components/hooks';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 
 export interface BaseParametersProps {
   showWebsiteSelect?: boolean;

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

@@ -0,0 +1,33 @@
+import { createContext, ReactNode } from 'react';
+import { Loading } from 'react-basics';
+import classNames from 'classnames';
+import { useReport } from 'components/hooks';
+import styles from './Report.module.css';
+
+export const ReportContext = createContext(null);
+
+export function Report({
+  reportId,
+  defaultParameters,
+  children,
+  className,
+}: {
+  reportId: string;
+  defaultParameters: { [key: string]: any };
+  children: ReactNode;
+  className?: string;
+}) {
+  const report = useReport(reportId, defaultParameters);
+
+  if (!report) {
+    return reportId ? <Loading position="page" /> : null;
+  }
+
+  return (
+    <ReportContext.Provider value={report}>
+      <div className={classNames(styles.container, className)}>{children}</div>
+    </ReportContext.Provider>
+  );
+}
+
+export default Report;

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

@@ -1,6 +1,6 @@
 import styles from './ReportBody.module.css';
 import { useContext } from 'react';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 
 export function ReportBody({ children }) {
   const { report } = useContext(ReportContext);

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

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
 import { useMessages, useApi, useNavigation, useTeamUrl } from 'components/hooks';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
 import { REPORT_TYPES } from 'lib/constants';
 

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

@@ -1,6 +1,6 @@
 import styles from './ReportMenu.module.css';
 import { useContext } from 'react';
-import { ReportContext } from './ReportPage';
+import { ReportContext } from './Report';
 
 export function ReportMenu({ children }) {
   const { report } = useContext(ReportContext);

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

@@ -1,33 +1,6 @@
-import { createContext, ReactNode } from 'react';
-import { Loading } from 'react-basics';
-import classNames from 'classnames';
-import { useReport } from 'components/hooks';
-import styles from './Report.module.css';
+'use client';
+import ReportDetails from './ReportDetails';
 
-export const ReportContext = createContext(null);
-
-export function ReportPage({
-  reportId,
-  defaultParameters,
-  children,
-  className,
-}: {
-  reportId: string;
-  defaultParameters: { [key: string]: any };
-  children: ReactNode;
-  className?: string;
-}) {
-  const report = useReport(reportId, defaultParameters);
-
-  if (!report) {
-    return reportId ? <Loading position="page" /> : null;
-  }
-
-  return (
-    <ReportContext.Provider value={report}>
-      <div className={classNames(styles.container, className)}>{children}</div>
-    </ReportContext.Provider>
-  );
+export default function ReportPage({ reportId }) {
+  return <ReportDetails reportId={reportId} />;
 }
-
-export default ReportPage;

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

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