UTM report.

src/app/(main)/reports/utm/UTMParameters.tsx

@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import { useMessages } from 'components/hooks';
+import { Form, FormButtons, SubmitButton } from 'react-basics';
+import { ReportContext } from '../[reportId]/Report';
+import BaseParameters from '../[reportId]/BaseParameters';
+
+export function UTMParameters() {
+  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+
+  const { id, parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const queryDisabled = !websiteId || !dateRange;
+
+  const handleSubmit = (data: any, e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!queryDisabled) {
+      runReport(data);
+    }
+  };
+
+  return (
+    <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default UTMParameters;

src/app/(main)/reports/utm/UTMReport.tsx

@@ -0,0 +1,28 @@
+'use client';
+import Report from '../[reportId]/Report';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+import ReportBody from '../[reportId]/ReportBody';
+import UTMParameters from './UTMParameters';
+import UTMView from './UTMView';
+import Tag from 'assets/tag.svg';
+import { REPORT_TYPES } from 'lib/constants';
+
+const defaultParameters = {
+  type: REPORT_TYPES.utm,
+  parameters: {},
+};
+
+export default function UTMReport({ reportId }: { reportId?: string }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Tag />} />
+      <ReportMenu>
+        <UTMParameters />
+      </ReportMenu>
+      <ReportBody>
+        <UTMView />
+      </ReportBody>
+    </Report>
+  );
+}

src/app/(main)/reports/utm/UTMReportPage.tsx

@@ -0,0 +1,5 @@
+import UTMReport from './UTMReport';
+
+export default function UTMReportPage() {
+  return <UTMReport />;
+}

src/app/(main)/reports/utm/UTMView.module.css

@@ -0,0 +1,24 @@
+.title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.params {
+  display: grid;
+  gap: 10px;
+  padding: 20px 0;
+}
+
+.row {
+  display: flex;
+  gap: 20px;
+}
+
+.label {
+  min-width: 200px;
+}
+
+.value {
+  min-width: 50px;
+  text-align: right;
+}

src/app/(main)/reports/utm/UTMView.tsx

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { firstBy } from 'thenby';
+import { ReportContext } from '../[reportId]/Report';
+import styles from './UTMView.module.css';
+
+function toArray(data: { [key: string]: number }) {
+  return Object.keys(data)
+    .map(key => {
+      return { name: key, value: data[key] };
+    })
+    .sort(firstBy('value', -1));
+}
+
+export default function UTMView() {
+  const { report } = useContext(ReportContext);
+  const { data } = report || {};
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div>
+      {Object.keys(data).map(key => {
+        return (
+          <div key={key}>
+            <div className={styles.title}>{key}</div>
+            <div className={styles.params}>
+              {toArray(data[key]).map(({ name, value }) => {
+                return (
+                  <div key={name} className={styles.row}>
+                    <div className={styles.label}>{name}</div>
+                    <div className={styles.value}>{value}</div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import UTMReportPage from './UTMReportPage';
+
+export default function () {
+  return <UTMReportPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'UTM Report',
+};