Merge dev.

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

@@ -1,5 +1,6 @@
 'use client';
 import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
+import { EventsTable } from '@/components/metrics/EventsTable';
 import { useState } from 'react';
 import { WebsiteHeader } from '../WebsiteHeader';
 import { EventsDataTable } from './EventsDataTable';
@@ -12,9 +13,14 @@ import { useMessages } from '@/components/hooks';
 import { EventProperties } from './EventProperties';
 
 export function EventsPage({ websiteId }) {
+  const [label, setLabel] = useState(null);
   const [tab, setTab] = useState('activity');
   const { formatMessage, labels } = useMessages();
 
+  const handleLabelClick = (value: string) => {
+    setLabel(value !== label ? value : '');
+  };
+
   return (
     <Column gap="3">
       <WebsiteHeader websiteId={websiteId} />
@@ -34,6 +40,17 @@ export function EventsPage({ websiteId }) {
           />
         </Panel>
       </GridRow>
+      <EventsMetricsBar websiteId={websiteId} />
+      <GridRow columns="two-one">
+        <EventsChart websiteId={websiteId} focusLabel={label} />
+        <EventsTable
+          websiteId={websiteId}
+          type="event"
+          title={formatMessage(labels.events)}
+          metric={formatMessage(labels.actions)}
+          onLabelClick={handleLabelClick}
+        />
+      </GridRow>
       <Panel marginY="6">
         <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
           <TabList>

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

@@ -14,7 +14,7 @@ import { RealtimeCountries } from './RealtimeCountries';
 import { WebsiteHeader } from '../WebsiteHeader';
 import { percentFilter } from '@/lib/filters';
 
-export function WebsiteRealtimePage({ websiteId }) {
+export function WebsiteRealtimePage({ websiteId }: { websiteId: string }) {
   const { data, isLoading, error } = useRealtimeQuery(websiteId);
 
   if (isLoading || error) {

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

@@ -35,15 +35,15 @@ export function SessionInfo({ data }) {
         </Row>
       </Box>
 
-      <Box>
+      <Row>
         <Label>{formatMessage(labels.region)}</Label>
         <Row gap="3">
           <Icon>
             <Icons.Location />
           </Icon>
-          <Text>{getRegionName(data?.subdivision1)}</Text>
+          {getRegionName(data?.region)}
         </Row>
-      </Box>
+      </Row>
 
       <Box>
         <Label>{formatMessage(labels.city)}</Label>