feat: add TopUsersSection component to DashboardPage for displaying top users

src/components/dashboard/StatisticsGrid.tsx

@@ -2,7 +2,7 @@ import { StatisticCard } from '@/components/dashboard/StatisticCard'
 import { NumberFlowDuration } from '@/components/ui/number-flow-duration'
 import { NumberFlowSize } from '@/components/ui/number-flow-size'
 import NumberFlow from '@number-flow/react'
-import { Clock, HardDrive, Music, Play, Volume2 } from 'lucide-react'
+import { Clock, HardDrive, Music, Play, Volume2, MessageSquare } from 'lucide-react'
 
 interface SoundboardStatistics {
   sound_count: number
@@ -18,12 +18,20 @@ interface TrackStatistics {
   total_size: number
 }
 
+interface TTSStatistics {
+  sound_count: number
+  total_play_count: number
+  total_duration: number
+  total_size: number
+}
+
 interface StatisticsGridProps {
   soundboardStatistics: SoundboardStatistics
   trackStatistics: TrackStatistics
+  ttsStatistics: TTSStatistics
 }
 
-export function StatisticsGrid({ soundboardStatistics, trackStatistics }: StatisticsGridProps) {
+export function StatisticsGrid({ soundboardStatistics, trackStatistics, ttsStatistics }: StatisticsGridProps) {
   return (
     <div className="space-y-6">
       <div>
@@ -109,6 +117,48 @@ export function StatisticsGrid({ soundboardStatistics, trackStatistics }: Statis
           />
         </div>
       </div>
+
+      <div>
+        <h2 className="text-lg font-semibold mb-3 text-muted-foreground">
+          TTS Statistics
+        </h2>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <StatisticCard
+            title="Total TTS"
+            icon={MessageSquare}
+            value={<NumberFlow value={ttsStatistics.sound_count} />}
+            description="Text-to-speech audio files"
+          />
+          <StatisticCard
+            title="Total Plays"
+            icon={Play}
+            value={<NumberFlow value={ttsStatistics.total_play_count} />}
+            description="All-time play count"
+          />
+          <StatisticCard
+            title="Total Duration"
+            icon={Clock}
+            value={
+              <NumberFlowDuration
+                duration={ttsStatistics.total_duration}
+                variant="wordy"
+              />
+            }
+            description="Combined TTS duration"
+          />
+          <StatisticCard
+            title="Total Size"
+            icon={HardDrive}
+            value={
+              <NumberFlowSize
+                size={ttsStatistics.total_size}
+                binary={true}
+              />
+            }
+            description="Original + normalized files"
+          />
+        </div>
+      </div>
     </div>
   )
 }

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 {
@@ -19,6 +20,13 @@ interface TrackStatistics {
   total_size: number
 }
 
+interface TTSStatistics {
+  sound_count: number
+  total_play_count: number
+  total_duration: number
+  total_size: number
+}
+
 interface TopSound {
   id: number
   name: string
@@ -28,11 +36,19 @@ interface TopSound {
   created_at: string | null
 }
 
+interface TopUser {
+  id: number
+  name: string
+  count: number
+}
+
 export function DashboardPage() {
   const [soundboardStatistics, setSoundboardStatistics] =
     useState<SoundboardStatistics | null>(null)
   const [trackStatistics, setTrackStatistics] =
     useState<TrackStatistics | null>(null)
+  const [ttsStatistics, setTtsStatistics] =
+    useState<TTSStatistics | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -44,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
@@ -74,6 +97,19 @@ export function DashboardPage() {
       const trackData = await trackResponse.json()
       setTrackStatistics(trackData)
 
+      // Fetch TTS statistics separately to avoid Promise.all failures
+      const ttsResponse = await fetch('/api/v1/dashboard/tts-statistics', {
+        credentials: 'include'
+      })
+
+      if (!ttsResponse.ok) {
+        const errorText = await ttsResponse.text()
+        throw new Error(`Failed to fetch TTS statistics: ${errorText}`)
+      }
+
+      const ttsData = await ttsResponse.json()
+      setTtsStatistics(ttsData)
+
     } catch (err) {
       console.error('Dashboard statistics error:', err)
       setError(err instanceof Error ? err.message : 'An error occurred')
@@ -134,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)
@@ -174,23 +262,27 @@ export function DashboardPage() {
   useEffect(() => {
     const interval = setInterval(() => {
       // Only auto-refresh if not currently loading or in error state
-      if (!loading && !refreshing && (!error || (soundboardStatistics && trackStatistics))) {
+      if (!loading && !refreshing && (!error || (soundboardStatistics && trackStatistics && ttsStatistics))) {
         refreshAll()
       }
     }, 30000) // Increased to 30 seconds
 
     return () => clearInterval(interval)
-  }, [refreshAll, loading, refreshing, error, soundboardStatistics, trackStatistics])
+  }, [refreshAll, loading, refreshing, error, soundboardStatistics, trackStatistics, ttsStatistics])
 
   useEffect(() => {
     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 />
   }
 
-  if (error && (!soundboardStatistics || !trackStatistics)) {
+  if (error && (!soundboardStatistics || !trackStatistics || !ttsStatistics)) {
     return <ErrorState error={error} onRetry={retryFromError} />
   }
 
@@ -204,10 +296,11 @@ export function DashboardPage() {
         <DashboardHeader onRefresh={refreshAll} isRefreshing={refreshing} />
         
         <div className="space-y-6">
-          {soundboardStatistics && trackStatistics && (
+          {soundboardStatistics && trackStatistics && ttsStatistics && (
             <StatisticsGrid
               soundboardStatistics={soundboardStatistics}
               trackStatistics={trackStatistics}
+              ttsStatistics={ttsStatistics}
             />
           )}
           
@@ -221,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>