UTM report.

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

@@ -1,28 +0,0 @@
-import FunnelReport from '../funnel/FunnelReport';
-import EventDataReport from '../event-data/EventDataReport';
-import InsightsReport from '../insights/InsightsReport';
-import RetentionReport from '../retention/RetentionReport';
-import { useApi } from 'components/hooks';
-
-const reports = {
-  funnel: FunnelReport,
-  'event-data': EventDataReport,
-  insights: InsightsReport,
-  retention: RetentionReport,
-};
-
-export default function ReportDetails({ reportId }: { reportId: string }) {
-  const { get, useQuery } = useApi();
-  const { data: report } = useQuery({
-    queryKey: ['reports', reportId],
-    queryFn: () => get(`/reports/${reportId}`),
-  });
-
-  if (!report) {
-    return null;
-  }
-
-  const ReportComponent = reports[report.type];
-
-  return <ReportComponent reportId={reportId} />;
-}

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

@@ -1,6 +1,27 @@
 'use client';
-import ReportDetails from './ReportDetails';
+import FunnelReport from '../funnel/FunnelReport';
+import EventDataReport from '../event-data/EventDataReport';
+import InsightsReport from '../insights/InsightsReport';
+import RetentionReport from '../retention/RetentionReport';
+import UTMReport from '../utm/UTMReport';
+import { useReport } from 'components/hooks';
 
-export default function ReportPage({ reportId }) {
-  return <ReportDetails reportId={reportId} />;
+const reports = {
+  funnel: FunnelReport,
+  'event-data': EventDataReport,
+  insights: InsightsReport,
+  retention: RetentionReport,
+  utm: UTMReport,
+};
+
+export default function ReportPage({ reportId }: { reportId: string }) {
+  const { report } = useReport(reportId);
+
+  if (!report) {
+    return null;
+  }
+
+  const ReportComponent = reports[report.type];
+
+  return <ReportComponent reportId={reportId} />;
 }