From 0e5e59ad793739eb1b1591968bfc245f7f39c461 Mon Sep 17 00:00:00 2001
From: Yash <yashsaini18166@gmail.com>
Date: Sun, 7 Dec 2025 17:28:00 +0530
Subject: [PATCH] Add UniqueSessions component to display unique session count

---
 .../websites/[websiteId]/WebsiteControls.tsx  |  4 ++-
 src/components/metrics/UniqueSessions.tsx     | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/components/metrics/UniqueSessions.tsx

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx b/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
index 6223dbc0..084ac114 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
@@ -4,6 +4,7 @@ import { FilterBar } from '@/components/input/FilterBar';
 import { MonthFilter } from '@/components/input/MonthFilter';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton';
+import UniqueSessions from '@/components/metrics/UniqueSessions';
 
 export function WebsiteControls({
   websiteId,
@@ -23,8 +24,9 @@ export function WebsiteControls({
   return (
     <Column gap>
       <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap>
-        <Row alignItems="center" justifyContent="flex-start">
+        <Row alignItems="center" justifyContent="flex-start" gap="4">
           {allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
+          <UniqueSessions websiteId={websiteId} />
         </Row>
         <Row alignItems="center" justifyContent={{ xs: 'flex-start', md: 'flex-end' }}>
           {allowDateFilter && (
diff --git a/src/components/metrics/UniqueSessions.tsx b/src/components/metrics/UniqueSessions.tsx
new file mode 100644
index 00000000..536ba5c4
--- /dev/null
+++ b/src/components/metrics/UniqueSessions.tsx
@@ -0,0 +1,30 @@
+import { Container, Text } from '@umami/react-zen';
+import { useMemo } from 'react';
+import { useWebsiteEventsQuery } from '@/components/hooks';
+
+const UniqueSessions = ({ websiteId }) => {
+  const query = useWebsiteEventsQuery(websiteId, { view: 'all' });
+
+  const uniqueSessionCount = useMemo(() => {
+    if (!query?.data?.data) return 0;
+
+    const uniqueSessions = new Set(query.data.data.map((event: any) => event.sessionId));
+
+    return uniqueSessions.size;
+  }, [query?.data?.data]);
+
+  return (
+    <Container className="flex items-center gap-8">
+      <Text size="5" color="gray">
+        {' '}
+        Unique Sessions:{' '}
+      </Text>
+      <Text size="5" className="text-white" weight="bold">
+        {' '}
+        {uniqueSessionCount}{' '}
+      </Text>
+    </Container>
+  );
+};
+
+export default UniqueSessions;