Add UniqueSessions component to display unique session count

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 && (

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;