Added metrics bar and date range to sessions.

src/app/(main)/reports/ReportsTable.tsx

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
+import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
 import { useMessages, useLogin, useTeamUrl } from 'components/hooks';
 import { REPORT_TYPES } from 'lib/constants';
@@ -7,11 +7,10 @@ import ReportDeleteButton from './ReportDeleteButton';
 export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
-  const breakpoint = useBreakpoint();
   const { renderTeamUrl } = useTeamUrl();
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+    <GridTable data={data}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="description" label={formatMessage(labels.description)} />
       <GridColumn name="type" label={formatMessage(labels.type)}>

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

@@ -4,6 +4,7 @@ import Magnet from 'assets/magnet.svg';
 import Path from 'assets/path.svg';
 import Tag from 'assets/tag.svg';
 import Target from 'assets/target.svg';
+import Money from 'assets/money.svg';
 import { useMessages, useTeamUrl } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import Link from 'next/link';
@@ -51,12 +52,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/journey'),
       icon: <Path />,
     },
-    // {
-    //   title: formatMessage(labels.revenue),
-    //   description: formatMessage(labels.revenueDescription),
-    //   url: renderTeamUrl('/reports/revenue'),
-    //   icon: <Path />,
-    // },
+    {
+      title: formatMessage(labels.revenue),
+      description: formatMessage(labels.revenueDescription),
+      url: renderTeamUrl('/reports/revenue'),
+      icon: <Money />,
+    },
   ];
 
   return (

src/app/(main)/reports/revenue/RevenueReport.tsx

@@ -4,7 +4,7 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import Target from 'assets/target.svg';
+import Money from 'assets/money.svg';
 import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
@@ -15,12 +15,12 @@ const defaultParameters = {
 export default function RevenueReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Target />} />
+      <ReportHeader icon={<Money />} />
       <ReportMenu>
         <RevenueParameters />
       </ReportMenu>
       <ReportBody>
-        <RevenueChart />
+        <RevenueChart unit="day" />
       </ReportBody>
     </Report>
   );