Fixed realtime page.

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

@@ -1,4 +1,4 @@
-import { Grid, Heading, Column } from '@umami/react-zen';
+import { Grid, Heading, Column, Row } from '@umami/react-zen';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { SideBar } from '@/components/common/SideBar';
 import { BrowsersTable } from '@/components/metrics/BrowsersTable';
@@ -21,6 +21,7 @@ import { formatNumber } from '@/lib/format';
 import { useState } from 'react';
 import { useWebsites } from '@/store/websites';
 import { Panel } from '@/components/common/Panel';
+import { DateDisplay } from '@/components/common/DateDisplay';
 
 const views = {
   url: PagesTable,
@@ -144,10 +145,13 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
 
   return (
     <Panel>
-      <Grid columns="200px 1fr 1fr" gap="6">
+      <Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
         <SideBar items={items} selectedKey={view} />
-        <Column>
-          <Heading size="1">{formatMessage(labels.previous)}</Heading>
+        <Column border="left" paddingLeft="6">
+          <Row alignItems="center" justifyContent="space-between">
+            <Heading size="1">{formatMessage(labels.previous)}</Heading>
+            <DateDisplay startDate={startDate} endDate={endDate} />
+          </Row>
           <Component
             websiteId={websiteId}
             limit={20}
@@ -157,7 +161,10 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
           />
         </Column>
         <Column>
-          <Heading size="1"> {formatMessage(labels.current)}</Heading>
+          <Row alignItems="center" justifyContent="space-between">
+            <Heading size="1"> {formatMessage(labels.current)}</Heading>
+            <DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
+          </Row>
           <Component
             websiteId={websiteId}
             limit={20}

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

@@ -40,7 +40,7 @@ export function EventsPage({ websiteId }) {
           />
         </Panel>
       </GridRow>
-      <Panel marginY="6">
+      <Panel>
         <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
           <TabList>
             <Tab id="activity">{formatMessage(labels.activity)}</Tab>

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

@@ -1,4 +1,5 @@
-import { Key, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
+import { Row } from '@umami/react-zen';
 import thenby from 'thenby';
 import { percentFilter } from '@/lib/filters';
 import { ListTable } from '@/components/metrics/ListTable';
@@ -12,19 +13,17 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {
   const website = useContext(WebsiteContext);
   const { formatMessage, labels } = useMessages();
   const { referrers, urls } = data || {};
-  const [filter, setFilter] = useState<Key>(FILTER_REFERRERS);
+  const [filter, setFilter] = useState(FILTER_REFERRERS);
   const limit = 15;
 
   const buttons = [
     {
-      id: 1,
+      id: FILTER_REFERRERS,
       label: formatMessage(labels.referrers),
-      key: FILTER_REFERRERS,
     },
     {
-      id: 2,
+      id: FILTER_PAGES,
       label: formatMessage(labels.pages),
-      key: FILTER_PAGES,
     },
   ];
 
@@ -63,7 +62,9 @@ export function RealtimeUrls({ data }: { data: RealtimeData }) {
 
   return (
     <>
-      <FilterButtons items={buttons} onSelect={setFilter} />
+      <Row justifyContent="center">
+        <FilterButtons items={buttons} value={filter} onChange={setFilter} />
+      </Row>
       {filter === FILTER_REFERRERS && (
         <ListTable
           title={formatMessage(labels.referrers)}

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

@@ -36,7 +36,7 @@ export function WebsiteRealtimePage({ websiteId }: { websiteId: string }) {
       <Panel>
         <RealtimeChart data={data} unit="minute" />
       </Panel>
-      <GridRow layout="one-two">
+      <GridRow layout="two">
         <Panel>
           <RealtimeUrls data={data} />
         </Panel>
@@ -48,7 +48,7 @@ export function WebsiteRealtimePage({ websiteId }: { websiteId: string }) {
         <Panel>
           <RealtimeCountries data={countries} />
         </Panel>
-        <Panel padding="0">
+        <Panel padding="0" gridColumn="span 2">
           <WorldMap data={countries} />
         </Panel>
       </GridRow>

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

@@ -29,7 +29,7 @@ export function SessionsPage({ websiteId }) {
           <SessionsWeekly websiteId={websiteId} />
         </Panel>
       </GridRow>
-      <Panel marginY="6">
+      <Panel>
         <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
           <TabList>
             <Tab id="activity">{formatMessage(labels.activity)}</Tab>