Bootstrap User Journey report.

src/app/(main)/reports/journey/JourneyParameters.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 JourneyParameters() {
+  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 JourneyParameters;

src/app/(main)/reports/journey/JourneyReport.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 JourneyParameters from './JourneyParameters';
+import JourneyView from './JourneyView';
+import Path from 'assets/path.svg';
+import { REPORT_TYPES } from 'lib/constants';
+
+const defaultParameters = {
+  type: REPORT_TYPES.journey,
+  parameters: {},
+};
+
+export default function JourneyReport({ reportId }: { reportId?: string }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Path />} />
+      <ReportMenu>
+        <JourneyParameters />
+      </ReportMenu>
+      <ReportBody>
+        <JourneyView />
+      </ReportBody>
+    </Report>
+  );
+}

src/app/(main)/reports/journey/JourneyReportPage.tsx

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

src/app/(main)/reports/journey/JourneyView.module.css

@@ -0,0 +1,14 @@
+.title {
+  font-size: 24px;
+  line-height: 36px;
+  font-weight: 700;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 20px;
+  border-bottom: 1px solid var(--base300);
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+}

src/app/(main)/reports/journey/JourneyView.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ReportContext } from '../[reportId]/Report';
+
+export default function JourneyView() {
+  const { report } = useContext(ReportContext);
+  const { data } = report || {};
+
+  if (!data) {
+    return null;
+  }
+
+  return <div>{JSON.stringify(data)}</div>;
+}

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

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