- {formatMessage(
- labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
- )}
+ REPORT_TYPES[key] === report?.type)],
+ ),
+ },
+ ]}
+ />
{icon}
diff --git a/src/app/(main)/reports/[reportId]/ReportMenu.module.css b/src/app/(main)/reports/[reportId]/ReportMenu.module.css
new file mode 100644
index 000000000..ee1c60852
--- /dev/null
+++ b/src/app/(main)/reports/[reportId]/ReportMenu.module.css
@@ -0,0 +1,7 @@
+.menu {
+ width: 300px;
+ padding-inline-end: 20px;
+ border-inline-end: 1px solid var(--base300);
+ grid-row: 2 / 3;
+ grid-column: 1 / 2;
+}
diff --git a/src/app/(main)/reports/[id]/ReportMenu.tsx b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
similarity index 100%
rename from src/app/(main)/reports/[id]/ReportMenu.tsx
rename to src/app/(main)/reports/[reportId]/ReportMenu.tsx
diff --git a/src/app/(main)/reports/[reportId]/ReportPage.tsx b/src/app/(main)/reports/[reportId]/ReportPage.tsx
new file mode 100644
index 000000000..227efa8d9
--- /dev/null
+++ b/src/app/(main)/reports/[reportId]/ReportPage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import ReportDetails from './ReportDetails';
+
+export default function ReportPage({ reportId }) {
+ return
;
+}
diff --git a/src/app/(main)/reports/[reportId]/page.tsx b/src/app/(main)/reports/[reportId]/page.tsx
new file mode 100644
index 000000000..690daf478
--- /dev/null
+++ b/src/app/(main)/reports/[reportId]/page.tsx
@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import ReportPage from './ReportPage';
+
+export default function ({ params: { reportId } }) {
+ return
;
+}
+
+export const metadata: Metadata = {
+ title: 'Reports',
+};
diff --git a/src/app/(main)/reports/create/ReportCreatePage.tsx b/src/app/(main)/reports/create/ReportCreatePage.tsx
new file mode 100644
index 000000000..ff3a761a2
--- /dev/null
+++ b/src/app/(main)/reports/create/ReportCreatePage.tsx
@@ -0,0 +1,6 @@
+'use client';
+import ReportTemplates from './ReportTemplates';
+
+export default function ReportCreatePage() {
+ return
;
+}
diff --git a/src/app/(main)/reports/create/ReportTemplates.tsx b/src/app/(main)/reports/create/ReportTemplates.tsx
index 003cb3fc4..ae84046ad 100644
--- a/src/app/(main)/reports/create/ReportTemplates.tsx
+++ b/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';
@@ -6,7 +5,46 @@ import Funnel from 'assets/funnel.svg';
import Lightbulb from 'assets/lightbulb.svg';
import Magnet from 'assets/magnet.svg';
import styles from './ReportTemplates.module.css';
-import { useMessages } from 'components/hooks';
+import { useMessages, useTeamUrl } from 'components/hooks';
+
+export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
+ const { formatMessage, labels } = useMessages();
+ const { renderTeamUrl } = useTeamUrl();
+
+ const reports = [
+ {
+ title: formatMessage(labels.insights),
+ description: formatMessage(labels.insightsDescription),
+ url: renderTeamUrl('/reports/insights'),
+ icon:
,
+ },
+ {
+ title: formatMessage(labels.funnel),
+ description: formatMessage(labels.funnelDescription),
+ url: renderTeamUrl('/reports/funnel'),
+ icon:
,
+ },
+ {
+ title: formatMessage(labels.retention),
+ description: formatMessage(labels.retentionDescription),
+ url: renderTeamUrl('/reports/retention'),
+ icon:
,
+ },
+ ];
+
+ return (
+ <>
+ {showHeader &&
}
+
+ {reports.map(({ title, description, url, icon }) => {
+ return (
+
+ );
+ })}
+
+ >
+ );
+}
function ReportItem({ title, description, url, icon }) {
const { formatMessage, labels } = useMessages();
@@ -32,42 +70,4 @@ function ReportItem({ title, description, url, icon }) {
);
}
-export function ReportTemplates({ showHeader = true }) {
- const { formatMessage, labels } = useMessages();
-
- const reports = [
- {
- title: formatMessage(labels.insights),
- description: formatMessage(labels.insightsDescription),
- url: '/reports/insights',
- icon:
,
- },
- {
- title: formatMessage(labels.funnel),
- description: formatMessage(labels.funnelDescription),
- url: '/reports/funnel',
- icon:
,
- },
- {
- title: formatMessage(labels.retention),
- description: formatMessage(labels.retentionDescription),
- url: '/reports/retention',
- icon:
,
- },
- ];
-
- return (
- <>
- {showHeader &&
}
-
- {reports.map(({ title, description, url, icon }) => {
- return (
-
- );
- })}
-
- >
- );
-}
-
export default ReportTemplates;
diff --git a/src/app/(main)/reports/create/page.tsx b/src/app/(main)/reports/create/page.tsx
index a1a761bcd..c2b1c18c5 100644
--- a/src/app/(main)/reports/create/page.tsx
+++ b/src/app/(main)/reports/create/page.tsx
@@ -1,10 +1,10 @@
-import ReportTemplates from './ReportTemplates';
+import ReportCreatePage from './ReportCreatePage';
import { Metadata } from 'next';
-export default function ReportsCreatePage() {
- return
;
+export default function () {
+ return
;
}
export const metadata: Metadata = {
- title: 'Create Report | umami',
+ title: 'Create Report',
};
diff --git a/src/app/(main)/reports/event-data/EventDataParameters.tsx b/src/app/(main)/reports/event-data/EventDataParameters.tsx
index 7a39131ba..efa9fb675 100644
--- a/src/app/(main)/reports/event-data/EventDataParameters.tsx
+++ b/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) {
@@ -29,7 +29,7 @@ function useFields(websiteId, startDate, endDate) {
export function EventDataParameters() {
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
const { formatMessage, labels, messages } = useMessages();
- const { parameters } = report || {};
+ const { id, parameters } = report || {};
const { websiteId, dateRange, fields, filters, groups } = parameters || {};
const { startDate, endDate } = dateRange || {};
const queryEnabled = websiteId && dateRange && fields?.length;
@@ -93,7 +93,7 @@ export function EventDataParameters() {
return (