Added sessions table.

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

@@ -51,6 +51,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 />,
+    },
   ];
 
   return (

src/app/(main)/websites/[websiteId]/sessions/SessionMetricsBar.tsx

@@ -0,0 +1,5 @@
+export function SessionMetricsBar({ websiteId }: { websiteId: string }) {
+  return <h1>{websiteId}</h1>;
+}
+
+export default SessionMetricsBar;

src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx

@@ -1,19 +1,29 @@
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useFormat, useMessages } from 'components/hooks';
+import { formatDistanceToNow } from 'date-fns';
 
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const breakpoint = useBreakpoint();
+  const { formatValue } = useFormat();
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="id" label="ID" />
-      <GridColumn name="country" label={formatMessage(labels.country)} />
+      <GridColumn name="country" label={formatMessage(labels.country)}>
+        {row => formatValue(row.country, 'country')}
+      </GridColumn>
       <GridColumn name="city" label={formatMessage(labels.city)} />
-      <GridColumn name="browser" label={formatMessage(labels.browser)} />
+      <GridColumn name="browser" label={formatMessage(labels.browser)}>
+        {row => formatValue(row.browser, 'browser')}
+      </GridColumn>
       <GridColumn name="os" label={formatMessage(labels.os)} />
-      <GridColumn name="device" label={formatMessage(labels.device)} />
-      <GridColumn name="createdAt" label={formatMessage(labels.created)} />
+      <GridColumn name="device" label={formatMessage(labels.device)}>
+        {row => formatValue(row.device, 'device')}
+      </GridColumn>
+      <GridColumn name="createdAt" label={formatMessage(labels.created)}>
+        {row => formatDistanceToNow(new Date(row.createdAt))}
+      </GridColumn>
     </GridTable>
   );
 }

src/components/metrics/EventsChart.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { Loading } from 'react-basics';
 import { colord } from 'colord';
 import BarChart from 'components/charts/BarChart';
 import { getDateArray } from 'lib/date';
@@ -51,10 +50,6 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
     };
   }, [data, startDate, endDate, unit]);
 
-  if (isLoading) {
-    return <Loading icon="dots" />;
-  }
-
   return (
     <BarChart
       className={className}