feat: Unique Visitors Count on Events Page

[Yashh56]

This pull request introduces a new UniqueVisitors component to display the count of unique website sessions, integrates it into the website controls UI and fixes #3830. The main changes are the creation of the new component and its addition to the controls row.

Screenshots

---

[vercel]

@Yashh56 is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Overview

Greptile Summary

Added a UniqueVisitors component to display the unique visitor count on the Events page. The component fetches data using useWebsiteStatsQuery and displays the visitors metric with proper loading states, error handling, and internationalization support. The component follows established patterns in the codebase by using the Row component with prop-based styling and the useMessages hook for localization.

• Created new UniqueVisitors.tsx component with loading, error, and success states
• Integrated component into WebsiteControls.tsx controls row
• Used prop-based styling (gap, color) consistent with codebase patterns
• Implemented proper internationalization with formatMessage(labels.visitors)

Confidence Score: 5/5

• This PR is safe to merge with no issues found
• The implementation properly addresses all previous review feedback - uses Row component with prop-based styling, implements internationalization with useMessages hook, correctly displays visitors metric matching the component name, includes proper loading and error states, and follows established codebase patterns
• No files require special attention

Important Files Changed

Filename	Overview
src/components/metrics/UniqueVisitors.tsx	New component to display unique visitor count with loading states, error handling, and proper internationalization
src/app/(main)/websites/[websiteId]/WebsiteControls.tsx	Integrated UniqueVisitors component into controls row with proper gap spacing

Sequence Diagram

sequenceDiagram
    participant User
    participant WebsiteControls
    participant UniqueVisitors
    participant useWebsiteStatsQuery
    participant API
    
    User->>WebsiteControls: Views Events page
    WebsiteControls->>UniqueVisitors: Render with websiteId
    UniqueVisitors->>useWebsiteStatsQuery: Request stats data
    useWebsiteStatsQuery->>API: GET /websites/{websiteId}/stats
    
    alt Loading state
        UniqueVisitors->>User: Display Loading dots
    end
    
    alt Success
        API-->>useWebsiteStatsQuery: Return WebsiteStatsData
        useWebsiteStatsQuery-->>UniqueVisitors: data.visitors
        UniqueVisitors->>User: Display visitor count with label
    end
    
    alt Error
        API-->>useWebsiteStatsQuery: Error response
        useWebsiteStatsQuery-->>UniqueVisitors: error
        UniqueVisitors->>User: Display "Error loading data" in red
    end

Loading

[greptile-apps]

Additional Comments (6)

1. src/components/metrics/UniqueSessions.tsx, line 6 (link)

   logic: this query only fetches paginated events (default 20 per page), so uniqueSessionCount will only count sessions from the first 20 events, not all events in the selected time range. use useWebsiteStatsQuery instead which returns a visitors field with the correct unique session count.

2. src/components/metrics/UniqueSessions.tsx, line 5 (link)

   syntax: missing TypeScript type for props

3. src/components/metrics/UniqueSessions.tsx, line 11 (link)

   style: using any type defeats the purpose of TypeScript type safety

4. src/components/metrics/UniqueSessions.tsx, line 16-27 (link)

   logic: no loading or error states displayed to user. when data is loading or if query fails, the component shows "Unique Sessions: 0" which is misleading

5. src/components/metrics/UniqueSessions.tsx, line 19-20 (link)

   style: unnecessary whitespace inside Text component

6. src/components/metrics/UniqueSessions.tsx, line 22-25 (link)

   style: unnecessary whitespace inside Text component

_{2 files reviewed, 6 comments}

_{Edit Code Review Agent Settings | Greptile}

[Yashh56]

@greptileai

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[Yashh56]

@greptileai

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[Yashh56]

@greptileai

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[Yashh56]

Hey @franciscao633, Can You Review this PR?