Merge 2ed8ff3a79 into 860e6390f1

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 UniqueVisitors from '@/components/metrics/UniqueVisitors';
 
 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 />}
+          <UniqueVisitors websiteId={websiteId} />
         </Row>
         <Row alignItems="center" justifyContent={{ xs: 'flex-start', md: 'flex-end' }}>
           {allowDateFilter && (

src/components/metrics/UniqueVisitors.tsx

@@ -0,0 +1,42 @@
+import { Loading, Row, Text } from '@umami/react-zen';
+import { useMessages, useWebsiteStatsQuery } from '@/components/hooks';
+
+interface UniqueVisitorsProps {
+  websiteId: string;
+}
+
+const UniqueVisitors = ({ websiteId }: UniqueVisitorsProps) => {
+  const { data, isLoading, error } = useWebsiteStatsQuery(websiteId);
+  const { formatMessage, labels } = useMessages();
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <Loading icon="dots" />;
+    }
+
+    if (error) {
+      return (
+        <Text size="5" color="red">
+          Error loading data
+        </Text>
+      );
+    }
+
+    return (
+      <Text size="5" weight="bold">
+        {data?.visitors ?? 0}
+      </Text>
+    );
+  };
+
+  return (
+    <Row alignItems="center" gap="3">
+      <Text size="5" color="gray">
+        {formatMessage(labels.visitors)}:
+      </Text>
+      {renderContent()}
+    </Row>
+  );
+};
+
+export default UniqueVisitors;