Updated session and events queries. Added sessions page.

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

@@ -0,0 +1,25 @@
+import { useSessions } from 'components/hooks';
+import SessionsTable from './SessionsTable';
+import DataTable from 'components/common/DataTable';
+import { ReactNode } from 'react';
+
+export default function SessionsDataTable({
+  websiteId,
+  children,
+}: {
+  websiteId?: string;
+  teamId?: string;
+  children?: ReactNode;
+}) {
+  const queryResult = useSessions(websiteId);
+
+  if (queryResult?.result?.data?.length === 0) {
+    return children;
+  }
+
+  return (
+    <DataTable queryResult={queryResult} allowSearch={false}>
+      {({ data }) => <SessionsTable data={data} showDomain={!websiteId} />}
+    </DataTable>
+  );
+}

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

@@ -0,0 +1,14 @@
+'use client';
+import WebsiteHeader from '../WebsiteHeader';
+import SessionsDataTable from './SessionsDataTable';
+
+export function SessionsPage({ websiteId }) {
+  return (
+    <>
+      <WebsiteHeader websiteId={websiteId} />
+      <SessionsDataTable websiteId={websiteId} />
+    </>
+  );
+}
+
+export default SessionsPage;

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

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

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

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