Bootstrap User Journey report.

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -6,6 +6,7 @@ import Lightbulb from 'assets/lightbulb.svg';
 import Magnet from 'assets/magnet.svg';
 import Tag from 'assets/tag.svg';
 import Target from 'assets/target.svg';
+import Path from 'assets/path.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages, useTeamUrl } from 'components/hooks';
 
@@ -44,6 +45,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/goals'),
       icon: <Target />,
     },
+    {
+      title: formatMessage(labels.journey),
+      description: formatMessage(labels.journeyDescription),
+      url: renderTeamUrl('/reports/journey'),
+      icon: <Path />,
+    },
   ];
 
   return (

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',
+};

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

@@ -34,6 +34,7 @@ export default function UTMView() {
             {
               data: items.map(({ value }) => value),
               backgroundColor: CHART_COLORS,
+              borderWidth: 0,
             },
           ],
         };

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -61,7 +61,7 @@ export function WebsiteSettings({
       </Tabs>
       {tab === 'details' && <WebsiteEditForm websiteId={websiteId} onSave={handleSave} />}
       {tab === 'tracking' && <TrackingCode websiteId={websiteId} />}
-      {tab === 'share' && <ShareUrl websiteId={websiteId} onSave={handleSave} />}
+      {tab === 'share' && <ShareUrl onSave={handleSave} />}
       {tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleSave} />}
     </>
   );