Sessions page.

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

@@ -45,11 +45,11 @@ export function WebsiteHeader({
       icon: <Icons.Reports />,
       path: '/reports',
     },
-    // {
-    //   label: formatMessage(labels.sessions),
-    //   icon: <Icons.User />,
-    //   path: '/sessions',
-    // },
+    {
+      label: formatMessage(labels.sessions),
+      icon: <Icons.User />,
+      path: '/sessions',
+    },
     {
       label: formatMessage(labels.events),
       icon: <Icons.Nodes />,
@@ -69,7 +69,7 @@ export function WebsiteHeader({
           <div className={styles.links}>
             {links.map(({ label, icon, path }) => {
               const selected = path
-                ? pathname.endsWith(path)
+                ? pathname.includes(path)
                 : pathname.match(/^\/websites\/[\w-]+$/);
 
               return (

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

@@ -1,6 +1,8 @@
+import Link from 'next/link';
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
 import { useFormat, useMessages } from 'components/hooks';
 import { formatDistanceToNow } from 'date-fns';
+import Profile from 'components/common/Profile';
 
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
@@ -9,7 +11,16 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
-      <GridColumn name="id" label="ID" />
+      <GridColumn name="pic" label="" width="90px">
+        {row => <Profile seed={row.id} size={64} />}
+      </GridColumn>
+      <GridColumn name="id" label="ID">
+        {row => (
+          <Link href={`sessions/${row.id}`}>
+            {row.id} ({row.firstAt !== row.lastAt ? 'YES' : 'NO'})
+          </Link>
+        )}
+      </GridColumn>
       <GridColumn name="country" label={formatMessage(labels.country)}>
         {row => formatValue(row.country, 'country')}
       </GridColumn>

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

@@ -0,0 +1,3 @@
+.page {
+  display: grid;
+}

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

@@ -0,0 +1,27 @@
+'use client';
+import WebsiteHeader from '../../WebsiteHeader';
+import SessionInfo from './SessionInfo';
+import { useSession } from 'components/hooks';
+import { Loading } from 'react-basics';
+import styles from './SessionDetailsPage.module.css';
+
+export default function SessionDetailsPage({
+  websiteId,
+  sessionId,
+}: {
+  websiteId: string;
+  sessionId: string;
+}) {
+  const { data, isLoading } = useSession(websiteId, sessionId);
+
+  if (isLoading) {
+    return <Loading position="page" />;
+  }
+
+  return (
+    <div className={styles.page}>
+      <WebsiteHeader websiteId={websiteId} />
+      <SessionInfo data={data} />
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import Profile from 'components/common/Profile';
+
+export default function SessionInfo({ data }) {
+  return (
+    <h1>
+      <Profile seed={data?.id} />
+      <dl>
+        <dt>ID</dt>
+        <dd>{data?.id}</dd>
+        <dt>Country</dt>
+        <dd>{data?.country}</dd>
+        <dt>City</dt>
+        <dd>{data?.city}</dd>
+      </dl>
+    </h1>
+  );
+}

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

@@ -0,0 +1,10 @@
+import SessionDetailsPage from './SessionDetailsPage';
+import { Metadata } from 'next';
+
+export default function WebsitePage({ params: { websiteId, sessionId } }) {
+  return <SessionDetailsPage websiteId={websiteId} sessionId={sessionId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Websites',
+};