From 829a45b40e8f0cb5177b6d8e3342459b365f7e9d Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Mon, 22 Jul 2024 18:06:36 -0700
Subject: [PATCH] Added sessions table.

---
 package.json                                  |  6 +-
 .../(main)/reports/create/ReportTemplates.tsx |  6 ++
 .../sessions/SessionMetricsBar.tsx            |  5 ++
 .../[websiteId]/sessions/SessionsTable.tsx    | 20 +++--
 src/components/metrics/EventsChart.tsx        |  5 --
 yarn.lock                                     | 80 +++++++++----------
 6 files changed, 69 insertions(+), 53 deletions(-)
 create mode 100644 src/app/(main)/websites/[websiteId]/sessions/SessionMetricsBar.tsx

diff --git a/package.json b/package.json
index a7a3aba1..f14e552d 100644
--- a/package.json
+++ b/package.json
@@ -64,9 +64,9 @@
     ".next/cache"
   ],
   "dependencies": {
-    "@clickhouse/client": "^1.2.0",
+    "@clickhouse/client": "^1.3.0",
     "@fontsource/inter": "^4.5.15",
-    "@prisma/client": "5.16.1",
+    "@prisma/client": "5.16.2",
     "@prisma/extension-read-replicas": "^0.3.0",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.28.6",
@@ -102,7 +102,7 @@
     "next-basics": "^0.39.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
-    "prisma": "5.16.1",
+    "prisma": "5.16.2",
     "react": "^18.2.0",
     "react-basics": "^0.123.0",
     "react-beautiful-dnd": "^13.1.0",
diff --git a/src/app/(main)/reports/create/ReportTemplates.tsx b/src/app/(main)/reports/create/ReportTemplates.tsx
index e37efc03..2314f7d6 100644
--- a/src/app/(main)/reports/create/ReportTemplates.tsx
+++ b/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 (
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionMetricsBar.tsx
new file mode 100644
index 00000000..c4f21875
--- /dev/null
+++ b/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;
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index 41c0fef3..d5ca439a 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/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>
   );
 }
diff --git a/src/components/metrics/EventsChart.tsx b/src/components/metrics/EventsChart.tsx
index 842ae605..36ec8672 100644
--- a/src/components/metrics/EventsChart.tsx
+++ b/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}
diff --git a/yarn.lock b/yarn.lock
index 7944a0c6..1fe40135 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1199,17 +1199,17 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@clickhouse/client-common@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@clickhouse/client-common/-/client-common-1.2.0.tgz#8845d373a14c6076d59118a0cb58afad84687372"
-  integrity sha512-VfA/C/tVJ2eNe72CaQ7eXmai+yqFEvZjQZiNtvJoOMLP+Vtb6DzqH9nfkgsiHHMhUhhclvt2mFh6+euk1Ea5wA==
+"@clickhouse/client-common@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@clickhouse/client-common/-/client-common-1.3.0.tgz#9fe4b88eedb233770832cb1c0794f4ad9fbec75c"
+  integrity sha512-fApbhu52WSQlBU0gMZQxd2akuWbI1c9BcWjIbDDgtNZX2OggrIB7a4oI845ZGXpeZCZDI9ZqtkXzbYQYS0Yqew==
 
-"@clickhouse/client@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@clickhouse/client/-/client-1.2.0.tgz#83aa3b69635e19c94a975ee7ec9a68843915b94b"
-  integrity sha512-zMp2EhMfp1IrFKr/NjDwNiLsf7nq68nW8lGKszwFe7Iglc6Z5PY9ZA9Hd0XqAk75Q1NmFrkGCP1r3JCM1Nm1Bw==
+"@clickhouse/client@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@clickhouse/client/-/client-1.3.0.tgz#298529b970a9ba2ae5e017258aaf6cf522cb2b51"
+  integrity sha512-baBiuwVpXg/DHCe9Y1pNf+tcE2ZalCAQqZsR9OhP7+01C3UqTjHeY4eYixNlpfZCb8c8R4GygdWJFbXF0aGklw==
   dependencies:
-    "@clickhouse/client-common" "1.2.0"
+    "@clickhouse/client-common" "1.3.0"
 
 "@colors/colors@1.5.0":
   version "1.5.0"
@@ -2082,51 +2082,51 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@prisma/client@5.16.1":
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.16.1.tgz#65c5649b4701c097e7fa943c91a3140ce8bf053d"
-  integrity sha512-wM9SKQjF0qLxdnOZIVAIMKiz6Hu7vDt4FFAih85K1dk/Rr2mdahy6d3QP41K62N9O0DJJA//gUDA3Mp49xsKIg==
+"@prisma/client@5.16.2":
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.16.2.tgz#21df4c092eac29dcc4431ebed8c92579ffc9d8bd"
+  integrity sha512-+1lmkhR9gHWcTC5oghm2ZKpWljyWdzfazCVlLKUWXVmwHSf52g81aZ8qb6Km5Bs025yBi7puLp3qSLEvktoUtw==
 
-"@prisma/debug@5.16.1":
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-5.16.1.tgz#4887a57a0973fb732a60c30dc48de97bf1eefd7e"
-  integrity sha512-JsNgZAg6BD9RInLSrg7ZYzo11N7cVvYArq3fHGSD89HSgtN0VDdjV6bib7YddbcO6snzjchTiLfjeTqBjtArVQ==
+"@prisma/debug@5.16.2":
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-5.16.2.tgz#bf774f4768a3d1634887e6964fcfe04576dc7496"
+  integrity sha512-ItzB4nR4O8eLzuJiuP3WwUJfoIvewMHqpGCad+64gvThcKEVOtaUza9AEJo2DPqAOa/AWkFyK54oM4WwHeew+A==
 
 "@prisma/engines-version@5.16.0-24.34ace0eb2704183d2c05b60b52fba5c43c13f303":
   version "5.16.0-24.34ace0eb2704183d2c05b60b52fba5c43c13f303"
   resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-5.16.0-24.34ace0eb2704183d2c05b60b52fba5c43c13f303.tgz#63ceebefb7daa1eb17f250cad75d35999a50ee1b"
   integrity sha512-HkT2WbfmFZ9WUPyuJHhkiADxazHg8Y4gByrTSVeb3OikP6tjQ7txtSUGu9OBOBH0C13dPKN2qqH12xKtHu/Hiw==
 
-"@prisma/engines@5.16.1":
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.16.1.tgz#a14e5d08d34241ed1f1bb7d11ed44eacb37b6fc6"
-  integrity sha512-KkyF3eIUtBIyp5A/rJHCtwQO18OjpGgx18PzjyGcJDY/+vNgaVyuVd+TgwBgeq6NLdd1XMwRCI+58vinHsAdfA==
+"@prisma/engines@5.16.2":
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.16.2.tgz#d624c816c25a5cbad7ca13c7842b71557b6020e0"
+  integrity sha512-qUxwMtrwoG3byd4PbX6T7EjHJ8AUhzTuwniOGkh/hIznBfcE2QQnGakyEq4VnwNuttMqvh/GgPFapHQ3lCuRHg==
   dependencies:
-    "@prisma/debug" "5.16.1"
+    "@prisma/debug" "5.16.2"
     "@prisma/engines-version" "5.16.0-24.34ace0eb2704183d2c05b60b52fba5c43c13f303"
-    "@prisma/fetch-engine" "5.16.1"
-    "@prisma/get-platform" "5.16.1"
+    "@prisma/fetch-engine" "5.16.2"
+    "@prisma/get-platform" "5.16.2"
 
 "@prisma/extension-read-replicas@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@prisma/extension-read-replicas/-/extension-read-replicas-0.3.0.tgz#2842a7c928f957c1dd58a6256104797596d43426"
   integrity sha512-F9+rSmYday6GT2qjhJtkZcBOpLO5LtpvFcMGqrBDHf+78LEdSuxfFjOxYlNuqk4B+th62yxpbhfpmB9/Mca14Q==
 
-"@prisma/fetch-engine@5.16.1":
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/@prisma/fetch-engine/-/fetch-engine-5.16.1.tgz#506a034eb23222af27ba635eb48c63df0ba7fc14"
-  integrity sha512-oOkjaPU1lhcA/Rvr4GVfd1NLJBwExgNBE36Ueq7dr71kTMwy++a3U3oLd2ZwrV9dj9xoP6LjCcky799D9nEt4w==
+"@prisma/fetch-engine@5.16.2":
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/@prisma/fetch-engine/-/fetch-engine-5.16.2.tgz#e7e06cf246340e6ae06791f9133be275c5ee50e5"
+  integrity sha512-sq51lfHKfH2jjYSjBtMjP+AznFqOJzXpqmq6B9auWrlTJrMgZ7lPyhWUW7VU7LsQU48/TJ+DZeIz8s9bMYvcHg==
   dependencies:
-    "@prisma/debug" "5.16.1"
+    "@prisma/debug" "5.16.2"
     "@prisma/engines-version" "5.16.0-24.34ace0eb2704183d2c05b60b52fba5c43c13f303"
-    "@prisma/get-platform" "5.16.1"
+    "@prisma/get-platform" "5.16.2"
 
-"@prisma/get-platform@5.16.1":
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/@prisma/get-platform/-/get-platform-5.16.1.tgz#613197c58acaafd5142d48a11f4df45a8f26a9e9"
-  integrity sha512-R4IKnWnMkR2nUAbU5gjrPehdQYUUd7RENFD2/D+xXTNhcqczp0N+WEGQ3ViyI3+6mtVcjjNIMdnUTNyu3GxIgA==
+"@prisma/get-platform@5.16.2":
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/@prisma/get-platform/-/get-platform-5.16.2.tgz#f9b397ddf807b71411fd9d0b17374bc21e91cc40"
+  integrity sha512-cXiHPgNLNyj22vLouPVNegklpRL/iX2jxTeap5GRO3DmCoVyIHmJAV1CgUMUJhHlcol9yYy7EHvsnXTDJ/PKEA==
   dependencies:
-    "@prisma/debug" "5.16.1"
+    "@prisma/debug" "5.16.2"
 
 "@react-spring/animated@~9.7.3":
   version "9.7.3"
@@ -8726,12 +8726,12 @@ pretty-format@^29.0.0, pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-prisma@5.16.1:
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/prisma/-/prisma-5.16.1.tgz#6dfd1e27e6534741326f4a231f04c16b3fbb7ba9"
-  integrity sha512-Z1Uqodk44diztImxALgJJfNl2Uisl9xDRvqybMKEBYJLNKNhDfAHf+ZIJbZyYiBhLMbKU9cYGdDVG5IIXEnL2Q==
+prisma@5.16.2:
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/prisma/-/prisma-5.16.2.tgz#f46f130550bc148e603d25e06e82263fa6ab68e8"
+  integrity sha512-rFV/xoBR2hBGGlu4LPLQd4U8WVA+tSAmYyFWGPRVfj+xg7N4kiZV4lSk38htSpF+/IuHKzlrbh4SFk8Z18cI8A==
   dependencies:
-    "@prisma/engines" "5.16.1"
+    "@prisma/engines" "5.16.2"
 
 process@^0.11.10:
   version "0.11.10"