Added session data display.

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

@@ -0,0 +1,5 @@
+.link {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}

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

@@ -1,21 +1,27 @@
 import Link from 'next/link';
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
-import { useFormat, useMessages } from 'components/hooks';
+import { useFormat, useLocale, useMessages } from 'components/hooks';
 import Profile from 'components/common/Profile';
+import styles from './SessionsTable.module.css';
+import { formatDate } from 'lib/date';
 
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
+  const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
   const breakpoint = useBreakpoint();
   const { formatValue } = useFormat();
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
-      <GridColumn name="pic" label="" width="90px">
-        {row => <Profile key={row.id} seed={row.id} size={64} />}
-      </GridColumn>
-      <GridColumn name="id" label="ID">
-        {row => <Link href={`sessions/${row.id}`}>{row.id}</Link>}
+      <GridColumn name="id" label="ID" width="300px">
+        {row => (
+          <Link href={`sessions/${row.id}`} className={styles.link}>
+            <Profile key={row.id} seed={row.id} size={64} />
+            {row.id}
+          </Link>
+        )}
       </GridColumn>
+      <GridColumn name="visits" label={formatMessage(labels.visits)} width="100px" />
       <GridColumn name="country" label={formatMessage(labels.country)}>
         {row => formatValue(row.country, 'country')}
       </GridColumn>
@@ -28,7 +34,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
         {row => formatValue(row.device, 'device')}
       </GridColumn>
       <GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
-        {row => row.lastAt}
+        {row => formatDate(new Date(row.lastAt), 'PPPpp', locale)}
       </GridColumn>
     </GridTable>
   );

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

@@ -23,7 +23,6 @@ export function SessionActivity({
 
   return (
     <div className={styles.timeline}>
-      <h1>Activity log</h1>
       {data.map(({ eventId, createdAt, urlPath, eventName, visitId }) => {
         const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
         lastDay = createdAt;

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.module.css

@@ -0,0 +1,39 @@
+.data {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 200px;
+  position: relative;
+}
+
+.header {
+  font-weight: bold;
+}
+
+.empty {
+  color: var(--font-color300);
+  text-align: center;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.type {
+  font-size: 10px;
+  text-transform: uppercase;
+  padding: 0 6px;
+  border-radius: 4px;
+  border: 1px solid var(--base300);
+}
+
+.name {
+  color: var(--font-color200);
+  font-weight: bold;
+}
+
+.value {
+  margin: 5px 0;
+}

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

@@ -0,0 +1,34 @@
+import { Loading, TextOverflow } from 'react-basics';
+import { useMessages, useSessionData } from 'components/hooks';
+import Empty from 'components/common/Empty';
+import styles from './SessionData.module.css';
+import { DATA_TYPES } from 'lib/constants';
+
+export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
+  const { formatMessage, labels } = useMessages();
+  const { data, isLoading } = useSessionData(websiteId, sessionId);
+
+  if (isLoading) {
+    return <Loading icon="dots" size="sm" />;
+  }
+
+  return (
+    <div className={styles.data}>
+      <div className={styles.header}>{formatMessage(labels.properties)}</div>
+      {!data?.length && <Empty className={styles.empty} />}
+      {data?.map(({ dataKey, dataType, stringValue }) => {
+        return (
+          <div key={dataKey}>
+            <div className={styles.label}>
+              <div className={styles.name}>
+                <TextOverflow>{dataKey}</TextOverflow>
+              </div>
+              <div className={styles.type}>{DATA_TYPES[dataType]}</div>
+            </div>
+            <div className={styles.value}>{stringValue}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.module.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: 300px 1fr max-content;
   margin-bottom: 40px;
+  position: relative;
 }
 
 .sidebar {
@@ -12,16 +13,32 @@
   gap: 20px;
   padding-right: 20px;
   border-right: 1px solid var(--base300);
+  position: relative;
 }
 
 .content {
-  padding: 0 20px;
-}
-
-.stats {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 30px;
+  padding: 0 20px;
+  position: relative;
+}
+
+.data {
   border-left: 1px solid var(--base300);
   padding-left: 20px;
+  position: relative;
+  transition: width 200ms ease-in-out;
+}
+
+@media screen and (max-width: 992px) {
+  .page {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+
+  .sidebar,
+  .data {
+    border: 0;
+  }
 }

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

@@ -4,9 +4,10 @@ import SessionInfo from './SessionInfo';
 import { useWebsiteSession } from 'components/hooks';
 import { Loading } from 'react-basics';
 import Profile from 'components/common/Profile';
-import styles from './SessionDetailsPage.module.css';
 import { SessionActivity } from './SessionActivity';
-import SessionStats from './SessionStats';
+import { SessionStats } from './SessionStats';
+import { SessionData } from './SessionData';
+import styles from './SessionDetailsPage.module.css';
 
 export default function SessionDetailsPage({
   websiteId,
@@ -30,10 +31,11 @@ export default function SessionDetailsPage({
           <SessionInfo data={data} />
         </div>
         <div className={styles.content}>
+          <SessionStats data={data} />
           <SessionActivity websiteId={websiteId} sessionId={sessionId} />
         </div>
-        <div className={styles.stats}>
-          <SessionStats data={data} />
+        <div className={styles.data}>
+          <SessionData websiteId={websiteId} sessionId={sessionId} />
         </div>
       </div>
     </>

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

@@ -1,14 +1,15 @@
 import MetricCard from 'components/metrics/MetricCard';
 import { useMessages } from 'components/hooks';
+import MetricsBar from 'components/metrics/MetricsBar';
 
-export default function SessionStats({ data }) {
+export function SessionStats({ data }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <MetricsBar isFetched={true}>
       <MetricCard label={formatMessage(labels.visits)} value={data?.visits} />
       <MetricCard label={formatMessage(labels.views)} value={data?.views} />
       <MetricCard label={formatMessage(labels.events)} value={data?.events} />
-    </>
+    </MetricsBar>
   );
 }