feat: add TopUsersSection component to DashboardPage for displaying top users

src/components/dashboard/TopUsersSection.tsx

@@ -0,0 +1,162 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import NumberFlow from '@number-flow/react'
+import { Loader2, Trophy, User } from 'lucide-react'
+
+interface TopUser {
+  id: number
+  name: string
+  count: number
+}
+
+interface TopUsersSectionProps {
+  topUsers: TopUser[]
+  loading: boolean
+  metricType: string
+  period: string
+  limit: number
+  onMetricTypeChange: (value: string) => void
+  onPeriodChange: (value: string) => void
+  onLimitChange: (value: number) => void
+}
+
+const metricTypeLabels = {
+  sounds_played: 'Sounds Played',
+  credits_used: 'Credits Used',
+  tracks_added: 'Tracks Added',
+  tts_added: 'TTS Added',
+  playlists_created: 'Playlists Created',
+}
+
+const metricTypeUnits = {
+  sounds_played: 'plays',
+  credits_used: 'credits',
+  tracks_added: 'tracks',
+  tts_added: 'TTS',
+  playlists_created: 'playlists',
+}
+
+export function TopUsersSection({
+  topUsers,
+  loading,
+  metricType,
+  period,
+  limit,
+  onMetricTypeChange,
+  onPeriodChange,
+  onLimitChange,
+}: TopUsersSectionProps) {
+  return (
+    <div className="mt-8">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Trophy className="h-5 w-5" />
+              <CardTitle>Top Users</CardTitle>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">Metric:</span>
+                <Select value={metricType} onValueChange={onMetricTypeChange}>
+                  <SelectTrigger className="w-40">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="credits_used">Credits Used</SelectItem>
+                    <SelectItem value="playlists_created">Playlists Created</SelectItem>
+                    <SelectItem value="sounds_played">Sounds Played</SelectItem>
+                    <SelectItem value="tracks_added">Tracks Added</SelectItem>
+                    <SelectItem value="tts_added">TTS Added</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">Period:</span>
+                <Select value={period} onValueChange={onPeriodChange}>
+                  <SelectTrigger className="w-32">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="today">Today</SelectItem>
+                    <SelectItem value="1_day">1 Day</SelectItem>
+                    <SelectItem value="1_week">1 Week</SelectItem>
+                    <SelectItem value="1_month">1 Month</SelectItem>
+                    <SelectItem value="1_year">1 Year</SelectItem>
+                    <SelectItem value="all_time">All Time</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">Count:</span>
+                <Select
+                  value={limit.toString()}
+                  onValueChange={value => onLimitChange(parseInt(value))}
+                >
+                  <SelectTrigger className="w-20">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="5">5</SelectItem>
+                    <SelectItem value="10">10</SelectItem>
+                    <SelectItem value="25">25</SelectItem>
+                    <SelectItem value="50">50</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin mr-2" />
+              Loading top users...
+            </div>
+          ) : topUsers.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              <User className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <p>No users found for the selected criteria</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {topUsers.map((user, index) => (
+                <div
+                  key={user.id}
+                  className="flex items-center gap-4 p-3 bg-muted/30 rounded-lg"
+                >
+                  <div className="flex items-center justify-center w-8 h-8 bg-primary text-primary-foreground rounded-full font-bold text-sm">
+                    {index + 1}
+                  </div>
+                  <User className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">{user.name}</div>
+                    <div className="text-xs text-muted-foreground mt-1">
+                      <span className="px-1.5 py-0.5 bg-secondary rounded text-xs">
+                        {metricTypeLabels[metricType as keyof typeof metricTypeLabels]}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-2xl font-bold text-primary">
+                      <NumberFlow value={user.count} />
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {metricTypeUnits[metricType as keyof typeof metricTypeUnits]}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/pages/DashboardPage.tsx

@@ -3,6 +3,7 @@ import { DashboardHeader } from '@/components/dashboard/DashboardHeader'
 import { ErrorState, LoadingSkeleton } from '@/components/dashboard/DashboardLoadingStates'
 import { StatisticsGrid } from '@/components/dashboard/StatisticsGrid'
 import { TopSoundsSection } from '@/components/dashboard/TopSoundsSection'
+import { TopUsersSection } from '@/components/dashboard/TopUsersSection'
 import { useCallback, useEffect, useState } from 'react'
 
 interface SoundboardStatistics {
@@ -35,6 +36,12 @@ interface TopSound {
   created_at: string | null
 }
 
+interface TopUser {
+  id: number
+  name: string
+  count: number
+}
+
 export function DashboardPage() {
   const [soundboardStatistics, setSoundboardStatistics] =
     useState<SoundboardStatistics | null>(null)
@@ -53,6 +60,13 @@ export function DashboardPage() {
   const [limit, setLimit] = useState(5)
   const [refreshing, setRefreshing] = useState(false)
 
+  // Top users state
+  const [topUsers, setTopUsers] = useState<TopUser[]>([])
+  const [topUsersLoading, setTopUsersLoading] = useState(false)
+  const [metricType, setMetricType] = useState('sounds_played')
+  const [userPeriod, setUserPeriod] = useState('all_time')
+  const [userLimit, setUserLimit] = useState(5)
+
   const fetchStatistics = useCallback(async () => {
     try {
       setError(null) // Clear previous errors
@@ -156,18 +170,70 @@ export function DashboardPage() {
     [soundType, period, limit],
   )
 
+  const fetchTopUsers = useCallback(
+    async (showLoading = false) => {
+      try {
+        if (showLoading) {
+          setTopUsersLoading(true)
+        }
+
+        const response = await fetch(
+          `/api/v1/dashboard/top-users?metric_type=${metricType}&period=${userPeriod}&limit=${userLimit}`,
+          { credentials: 'include' },
+        )
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch top users')
+        }
+
+        const data = await response.json()
+
+        // Graceful update: merge new data while preserving animations
+        setTopUsers(prevTopUsers => {
+          // Create a map of existing users for efficient lookup
+          const existingUsersMap = new Map(
+            prevTopUsers.map(user => [user.id, user]),
+          )
+
+          // Update existing users and add new ones
+          return data.map((newUser: TopUser) => {
+            const existingUser = existingUsersMap.get(newUser.id)
+            if (existingUser) {
+              // Preserve object reference if data hasn't changed to avoid re-renders
+              if (
+                existingUser.name === newUser.name &&
+                existingUser.count === newUser.count
+              ) {
+                return existingUser
+              }
+            }
+            return newUser
+          })
+        })
+      } catch (err) {
+        console.error('Failed to fetch top users:', err)
+      } finally {
+        if (showLoading) {
+          setTopUsersLoading(false)
+        }
+      }
+    },
+    [metricType, userPeriod, userLimit],
+  )
+
   const refreshAll = useCallback(async () => {
     setRefreshing(true)
     try {
       // Fetch statistics and top sounds sequentially to avoid Promise.all issues
       await fetchStatistics()
       await fetchTopSounds()
+      await fetchTopUsers()
     } catch (err) {
       console.error('Error during refresh:', err)
     } finally {
       setRefreshing(false)
     }
-  }, [fetchStatistics, fetchTopSounds])
+  }, [fetchStatistics, fetchTopSounds, fetchTopUsers])
 
   const retryFromError = useCallback(async () => {
     setLoading(true)
@@ -208,6 +274,10 @@ export function DashboardPage() {
     fetchTopSounds(true) // Show loading on initial load and filter changes
   }, [fetchTopSounds])
 
+  useEffect(() => {
+    fetchTopUsers(true) // Show loading on initial load and filter changes
+  }, [fetchTopUsers])
+
   if (loading) {
     return <LoadingSkeleton />
   }
@@ -244,6 +314,17 @@ export function DashboardPage() {
             onPeriodChange={setPeriod}
             onLimitChange={setLimit}
           />
+
+          <TopUsersSection
+            topUsers={topUsers}
+            loading={topUsersLoading}
+            metricType={metricType}
+            period={userPeriod}
+            limit={userLimit}
+            onMetricTypeChange={setMetricType}
+            onPeriodChange={setUserPeriod}
+            onLimitChange={setUserLimit}
+          />
         </div>
       </div>
     </AppLayout>