- {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/[id]/ReportDetails.tsx b/src/app/(main)/reports/[reportId]/ReportPage.tsx
similarity index 64%
rename from src/app/(main)/reports/[id]/ReportDetails.tsx
rename to src/app/(main)/reports/[reportId]/ReportPage.tsx
index e4d4688a0..7ecebd318 100644
--- a/src/app/(main)/reports/[id]/ReportDetails.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportPage.tsx
@@ -3,21 +3,19 @@ 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';
+import UTMReport from '../utm/UTMReport';
+import { useReport } from 'components/hooks';
const reports = {
funnel: FunnelReport,
'event-data': EventDataReport,
insights: InsightsReport,
retention: RetentionReport,
+ utm: UTMReport,
};
-export default function ReportDetails({ reportId }: { reportId: string }) {
- const { get, useQuery } = useApi();
- const { data: report } = useQuery({
- queryKey: ['reports', reportId],
- queryFn: () => get(`/reports/${reportId}`),
- });
+export default function ReportPage({ reportId }: { reportId: string }) {
+ const { report } = useReport(reportId);
if (!report) {
return null;
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..1bd84aec5 100644
--- a/src/app/(main)/reports/create/ReportTemplates.tsx
+++ b/src/app/(main)/reports/create/ReportTemplates.tsx
@@ -1,12 +1,57 @@
-'use client';
import Link from 'next/link';
import { Button, Icons, Text, Icon } from 'react-basics';
import PageHeader from 'components/layout/PageHeader';
import Funnel from 'assets/funnel.svg';
import Lightbulb from 'assets/lightbulb.svg';
import Magnet from 'assets/magnet.svg';
+import Tag from 'assets/tag.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:
,
+ },
+ {
+ title: formatMessage(labels.utm),
+ description: formatMessage(labels.utmDescription),
+ url: renderTeamUrl('/reports/utm'),
+ icon:
,
+ },
+ ];
+
+ return (
+ <>
+ {showHeader &&
}
+
+ {reports.map(({ title, description, url, icon }) => {
+ return (
+
+ );
+ })}
+
+
+ );
+}
function ReportItem({ title, description, url, icon }) {
const { formatMessage, labels } = useMessages();
@@ -32,42 +77,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..e0afda3f5 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;
@@ -60,10 +60,9 @@ export function EventDataParameters() {
}
};
- const handleRemove = (group: string, index: number) => {
+ const handleRemove = (group: string) => {
const data = [...parameterData[group]];
- data.splice(index, 1);
- updateReport({ parameters: { [group]: data } });
+ updateReport({ parameters: { [group]: data.filter(({ name }) => name !== group) } });
};
const AddButton = ({ group, onAdd }) => {
@@ -76,8 +75,8 @@ export function EventDataParameters() {
{(close: () => void) => {
return (
({
- name: eventKey,
+ fields={data.map(({ dataKey, eventDataType }) => ({
+ name: dataKey,
type: DATA_TYPES[eventDataType],
}))}
group={group}
@@ -93,7 +92,7 @@ export function EventDataParameters() {
return (