Fixed 'use client' usage.

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

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';

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

@@ -1,4 +1,3 @@
-'use client';
 import { useReports } from 'components/hooks';
 import ReportsTable from './ReportsTable';
 import DataTable from 'components/common/DataTable';

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

@@ -1,4 +1,3 @@
-'use client';
 import PageHeader from 'components/layout/PageHeader';
 import { Icon, Icons, Text } from 'react-basics';
 import { useMessages, useTeamUrl } from 'components/hooks';

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

@@ -0,0 +1,15 @@
+'use client';
+import ReportsHeader from './ReportsHeader';
+import ReportsDataTable from './ReportsDataTable';
+
+export default function ReportsPage({ teamId }: { teamId: string }) {
+  return (
+    <>
+      <ReportsHeader />
+      <ReportsDataTable teamId={teamId} />
+    </>
+  );
+}
+export const metadata = {
+  title: 'Reports | Umami',
+};

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

@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
 import { useMessages, useLogin, useTeamUrl } from 'components/hooks';

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

@@ -1,11 +1,10 @@
-'use client';
 import { useContext } from 'react';
 import { FormRow } from 'react-basics';
 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 './Report';
+import { ReportContext } from './ReportPage';
 
 export interface BaseParametersProps {
   showWebsiteSelect?: boolean;

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

@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { REPORT_PARAMETERS } from 'lib/constants';

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

@@ -1,4 +1,3 @@
-'use client';
 import { Form, FormRow, Menu, Item } from 'react-basics';
 import { useMessages } from 'components/hooks';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { useState, useMemo } from 'react';
 import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
 import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';

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

@@ -1,4 +1,3 @@
-'use client';
 import { Menu, Item, Form, FormRow } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import styles from './FieldSelectForm.module.css';

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

@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { Loading } from 'react-basics';
 import { subDays } from 'date-fns';

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

@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import { Icon, TooltipPopup } from 'react-basics';
 import Icons from 'components/icons';

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

@@ -1,4 +1,3 @@
-'use client';
 import { CSSProperties, ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from './PopupForm.module.css';

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

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

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

@@ -1,4 +1,3 @@
-'use client';
 import FunnelReport from '../funnel/FunnelReport';
 import EventDataReport from '../event-data/EventDataReport';
 import InsightsReport from '../insights/InsightsReport';

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

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

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

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

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

@@ -1,20 +1,22 @@
-'use client';
 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';
-import classNames from 'classnames';
 
 export const ReportContext = createContext(null);
 
-export interface ReportProps {
+export function ReportPage({
+  reportId,
+  defaultParameters,
+  children,
+  className,
+}: {
   reportId: string;
   defaultParameters: { [key: string]: any };
   children: ReactNode;
   className?: string;
-}
-
-export function Report({ reportId, defaultParameters, children, className }: ReportProps) {
+}) {
   const report = useReport(reportId, defaultParameters);
 
   if (!report) {
@@ -28,4 +30,4 @@ export function Report({ reportId, defaultParameters, children, className }: Rep
   );
 }
 
-export default Report;
+export default ReportPage;

src/app/(main)/reports/create/ReportCreatePage.tsx

@@ -0,0 +1,6 @@
+'use client';
+import ReportTemplates from './ReportTemplates';
+
+export default function ReportCreatePage() {
+  return <ReportTemplates />;
+}

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -1,4 +1,3 @@
-'use client';
 import Link from 'next/link';
 import { Button, Icons, Text, Icon } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
@@ -8,30 +7,6 @@ import Magnet from 'assets/magnet.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages, useTeamUrl } from 'components/hooks';
 
-function ReportItem({ title, description, url, icon }) {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <div className={styles.report}>
-      <div className={styles.title}>
-        <Icon size="lg">{icon}</Icon>
-        <Text>{title}</Text>
-      </div>
-      <div className={styles.description}>{description}</div>
-      <div className={styles.buttons}>
-        <Link href={url}>
-          <Button variant="primary">
-            <Icon>
-              <Icons.Plus />
-            </Icon>
-            <Text>{formatMessage(labels.create)}</Text>
-          </Button>
-        </Link>
-      </div>
-    </div>
-  );
-}
-
 export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl } = useTeamUrl();
@@ -71,4 +46,28 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
   );
 }
 
+function ReportItem({ title, description, url, icon }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <div className={styles.report}>
+      <div className={styles.title}>
+        <Icon size="lg">{icon}</Icon>
+        <Text>{title}</Text>
+      </div>
+      <div className={styles.description}>{description}</div>
+      <div className={styles.buttons}>
+        <Link href={url}>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.create)}</Text>
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
 export default ReportTemplates;

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

@@ -1,8 +1,8 @@
-import ReportTemplates from './ReportTemplates';
+import ReportCreatePage from './ReportCreatePage';
 import { Metadata } from 'next';
 
-export default function ReportsCreatePage() {
-  return <ReportTemplates />;
+export default function () {
+  return <ReportCreatePage />;
 }
 
 export const metadata: Metadata = {

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

@@ -1,11 +1,10 @@
-'use client';
 import { useContext } from 'react';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
 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 '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import FieldAddForm from '../[reportId]/FieldAddForm';
 import ParameterList from '../[reportId]/ParameterList';
 import BaseParameters from '../[reportId]/BaseParameters';

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

@@ -1,5 +1,4 @@
-'use client';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -14,7 +13,7 @@ const defaultParameters = {
 
 export default function EventDataReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Nodes />} />
       <ReportMenu>
         <EventDataParameters />
@@ -22,6 +21,6 @@ export default function EventDataReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <EventDataTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }

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

@@ -0,0 +1,6 @@
+'use client';
+import EventDataReport from './EventDataReport';
+
+export default function EventDataReportPage() {
+  return <EventDataReport />;
+}

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

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

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

@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import EventDataReport from './EventDataReport';
 
-export default function EventDataReportPage() {
+export default function () {
   return <EventDataReport />;
 }
 

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

@@ -1,10 +1,9 @@
-'use client';
 import { JSX, useCallback, useContext, useMemo } from 'react';
 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 '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import styles from './FunnelChart.module.css';
 
 export interface FunnelChartProps {

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

@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import {
@@ -14,7 +13,7 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import UrlAddForm from './UrlAddForm';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import BaseParameters from '../[reportId]/BaseParameters';
 import ParameterList from '../[reportId]/ParameterList';
 import PopupForm from '../[reportId]/PopupForm';

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

@@ -1,8 +1,7 @@
-'use client';
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -16,7 +15,7 @@ const defaultParameters = {
 
 export default function FunnelReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Funnel />} />
       <ReportMenu>
         <FunnelParameters />
@@ -25,6 +24,6 @@ export default function FunnelReport({ reportId }: { reportId?: string }) {
         <FunnelChart />
         <FunnelTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }

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

@@ -0,0 +1,6 @@
+'use client';
+import FunnelReport from './FunnelReport';
+
+export default function FunnelReportPage() {
+  return <FunnelReport />;
+}

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

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

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

@@ -1,4 +1,3 @@
-'use client';
 import { useState } from 'react';
 import { useMessages } from 'components/hooks';
 import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';

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

@@ -1,8 +1,8 @@
-import FunnelReport from './FunnelReport';
+import FunnelReportPage from './FunnelReportPage';
 import { Metadata } from 'next';
 
-export default function FunnelReportPage() {
-  return <FunnelReport />;
+export default function () {
+  return <FunnelReportPage />;
 }
 
 export const metadata: Metadata = {

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

@@ -1,4 +1,3 @@
-'use client';
 import { useContext } from 'react';
 import { useFormat, useMessages, useFilters } from 'components/hooks';
 import {
@@ -13,7 +12,7 @@ import {
 } from 'react-basics';
 import Icons from 'components/icons';
 import BaseParameters from '../[reportId]/BaseParameters';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import ParameterList from '../[reportId]/ParameterList';
 import FilterSelectForm from '../[reportId]/FilterSelectForm';
 import FieldSelectForm from '../[reportId]/FieldSelectForm';

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

@@ -1,5 +1,4 @@
-'use client';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -15,7 +14,7 @@ const defaultParameters = {
 
 export default function InsightsReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Lightbulb />} />
       <ReportMenu>
         <InsightsParameters />
@@ -23,6 +22,6 @@ export default function InsightsReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <InsightsTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }

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

@@ -0,0 +1,6 @@
+'use client';
+import InsightsReport from './InsightsReport';
+
+export default function InsightsReportPage() {
+  return <InsightsReport />;
+}

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

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

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

@@ -1,8 +1,8 @@
-import InsightsReport from './InsightsReport';
+import InsightsReportPage from './InsightsReportPage';
 import { Metadata } from 'next';
 
-export default function InsightsReportPage() {
-  return <InsightsReport />;
+export default function () {
+  return <InsightsReportPage />;
 }
 
 export const metadata: Metadata = {

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

@@ -1,14 +1,10 @@
-import ReportsHeader from './ReportsHeader';
-import ReportsDataTable from './ReportsDataTable';
+import ReportsPage from './ReportsPage';
+import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }: { params: { teamId: string } }) {
-  return (
-    <>
-      <ReportsHeader />
-      <ReportsDataTable teamId={teamId} />
-    </>
-  );
+  return <ReportsPage teamId={teamId} />;
 }
-export const metadata = {
+
+export const metadata: Metadata = {
   title: 'Reports | Umami',
 };

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

@@ -1,8 +1,7 @@
-'use client';
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
 import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
-import { ReportContext } from '../[reportId]/Report';
+import { ReportContext } from '../[reportId]/ReportPage';
 import { MonthSelect } from 'components/input/MonthSelect';
 import BaseParameters from '../[reportId]/BaseParameters';
 import { parseDateRange } from 'lib/date';

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

@@ -1,7 +1,6 @@
-'use client';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
-import Report from '../[reportId]/Report';
+import ReportPage from '../[reportId]/ReportPage';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
@@ -21,7 +20,7 @@ const defaultParameters = {
 
 export default function RetentionReport({ reportId }: { reportId?: string }) {
   return (
-    <Report reportId={reportId} defaultParameters={defaultParameters}>
+    <ReportPage reportId={reportId} defaultParameters={defaultParameters}>
       <ReportHeader icon={<Magnet />} />
       <ReportMenu>
         <RetentionParameters />
@@ -29,6 +28,6 @@ export default function RetentionReport({ reportId }: { reportId?: string }) {
       <ReportBody>
         <RetentionTable />
       </ReportBody>
-    </Report>
+    </ReportPage>
   );
 }

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

@@ -0,0 +1,6 @@
+'use client';
+import RetentionReport from './RetentionReport';
+
+export default function RetentionReportPage() {
+  return <RetentionReport />;
+}

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

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

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

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import RetentionReport from './RetentionReport';
+import RetentionReportPage from './RetentionReportPage';
 
-export default function RetentionReportPage() {
-  return <RetentionReport />;
+export default function () {
+  return <RetentionReportPage />;
 }
 
 export const metadata: Metadata = {