From 528a8d397cd08b20696d9377faba61422fe9d0cd Mon Sep 17 00:00:00 2001
From: vicke4 <ganapathy.v2@gmail.com>
Date: Tue, 1 Jul 2025 14:22:10 +0530
Subject: [PATCH] feat: add properties & activity to event filtering

---
 .../(main)/websites/[websiteId]/events/EventProperties.tsx | 5 +++--
 .../(main)/websites/[websiteId]/events/EventsDataTable.tsx | 7 ++++++-
 src/app/(main)/websites/[websiteId]/events/EventsPage.tsx  | 4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx b/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
index e3e442ad3..4ae290358 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
@@ -8,13 +8,14 @@ import { useState } from 'react';
 import { CHART_COLORS } from '@/lib/constants';
 import styles from './EventProperties.module.css';
 
-export function EventProperties({ websiteId }: { websiteId: string }) {
+export function EventProperties({ websiteId, label }: { websiteId: string; label: string }) {
   const [propertyName, setPropertyName] = useState('');
   const [eventName, setEventName] = useState('');
   const [propertyView, setPropertyView] = useState('table');
 
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useEventDataProperties(websiteId);
+  const { data: eventData = [], isLoading, isFetched, error } = useEventDataProperties(websiteId);
+  const data = label ? eventData.filter(({ eventName }) => eventName === label) : eventData;
   const { data: values } = useEventDataValues(websiteId, eventName, propertyName);
 
   const propertySum = useMemo(() => {
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
index ce9048d31..1a1732cc6 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
@@ -5,8 +5,10 @@ import { ReactNode } from 'react';
 
 export default function EventsDataTable({
   websiteId,
+  label,
 }: {
   websiteId?: string;
+  label?: string;
   teamId?: string;
   children?: ReactNode;
 }) {
@@ -14,7 +16,10 @@ export default function EventsDataTable({
 
   return (
     <DataTable queryResult={queryResult} allowSearch={true} autoFocus={false}>
-      {({ data }) => <EventsTable data={data} />}
+      {({ data: eventData = [] }) => {
+        const data = label ? eventData.filter(({ eventName }) => eventName === label) : eventData;
+        return <EventsTable data={data} />;
+      }}
     </DataTable>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
index 285a230e8..21a2ff0ca 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
@@ -42,8 +42,8 @@ export default function EventsPage({ websiteId }) {
           <Item key="activity">{formatMessage(labels.activity)}</Item>
           <Item key="properties">{formatMessage(labels.properties)}</Item>
         </Tabs>
-        {tab === 'activity' && <EventsDataTable websiteId={websiteId} />}
-        {tab === 'properties' && <EventProperties websiteId={websiteId} />}
+        {tab === 'activity' && <EventsDataTable websiteId={websiteId} label={label} />}
+        {tab === 'properties' && <EventProperties websiteId={websiteId} label={label} />}
       </div>
     </>
   );