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>