feat: enhance DashboardPage with auto-refresh and NumberFlow for statistics display

src/hooks/use-dashboard-stats.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { apiService } from '@/services/api'
 
 interface DashboardStats {
@@ -51,46 +51,51 @@ export function useDashboardStats(period: TimePeriod = 'all', limit: number = 5)
   const [topUsers, setTopUsers] = useState<TopUsersResponse | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [refreshKey, setRefreshKey] = useState(0)
 
-  useEffect(() => {
+  const fetchData = useCallback(async () => {
-    const fetchData = async () => {
+    try {
-      try {
+      setLoading(true)
-        setLoading(true)
+      setError(null)
-        setError(null)
       
-        // Fetch basic stats, top sounds, top tracks, and top users in parallel
+      // Fetch basic stats, top sounds, top tracks, and top users in parallel
-        const [statsResponse, topSoundsResponse, topTracksResponse, topUsersResponse] = await Promise.all([
+      const [statsResponse, topSoundsResponse, topTracksResponse, topUsersResponse] = await Promise.all([
-          apiService.get('/api/dashboard/stats'),
+        apiService.get('/api/dashboard/stats'),
-          apiService.get(`/api/dashboard/top-sounds?period=${period}&limit=${limit}`),
+        apiService.get(`/api/dashboard/top-sounds?period=${period}&limit=${limit}`),
-          apiService.get(`/api/dashboard/top-tracks?period=${period}&limit=${limit}`),
+        apiService.get(`/api/dashboard/top-tracks?period=${period}&limit=${limit}`),
-          apiService.get(`/api/dashboard/top-users?period=${period}&limit=${limit}`)
+        apiService.get(`/api/dashboard/top-users?period=${period}&limit=${limit}`)
+      ])
+      
+      if (statsResponse.ok && topSoundsResponse.ok && topTracksResponse.ok && topUsersResponse.ok) {
+        const [statsData, topSoundsData, topTracksData, topUsersData] = await Promise.all([
+          statsResponse.json(),
+          topSoundsResponse.json(),
+          topTracksResponse.json(),
+          topUsersResponse.json()
         ])
         
-        if (statsResponse.ok && topSoundsResponse.ok && topTracksResponse.ok && topUsersResponse.ok) {
+        setStats(statsData)
-          const [statsData, topSoundsData, topTracksData, topUsersData] = await Promise.all([
+        setTopSounds(topSoundsData)
-            statsResponse.json(),
+        setTopTracks(topTracksData)
-            topSoundsResponse.json(),
+        setTopUsers(topUsersData)
-            topTracksResponse.json(),
+      } else {
-            topUsersResponse.json()
+        setError('Failed to fetch dashboard data')
-          ])
-          
-          setStats(statsData)
-          setTopSounds(topSoundsData)
-          setTopTracks(topTracksData)
-          setTopUsers(topUsersData)
-        } else {
-          setError('Failed to fetch dashboard data')
-        }
-      } catch (err) {
-        setError('An error occurred while fetching dashboard data')
-        console.error('Dashboard fetch error:', err)
-      } finally {
-        setLoading(false)
       }
+    } catch (err) {
+      setError('An error occurred while fetching dashboard data')
+      console.error('Dashboard fetch error:', err)
+    } finally {
+      setLoading(false)
     }
-
-    fetchData()
   }, [period, limit])
 
-  return { stats, topSounds, topTracks, topUsers, loading, error }
+  const refresh = () => {
+    setRefreshKey(prev => prev + 1)
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData, refreshKey])
+
+  return { stats, topSounds, topTracks, topUsers, loading, error, refresh }
 }

src/lib/format-size.ts

@@ -4,19 +4,28 @@
 const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB']
 
 /**
- * Converts a file size in bytes to a human-readable string
+ * Interface for file size
- * @param bytes File size in bytes
- * @returns Formatted file size string (e.g., "1.5 MB")
  */
-export function formatSize(bytes: number, binary: boolean = false): string {
+export interface FileSize {
+  value: number
+  unit: string
+}
+
+/**
+ * Base function to parse file size in bytes to value and unit
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Object with numeric value and unit string
+ */
+function parseSize(bytes: number, binary: boolean = false): FileSize {
   // Handle invalid input
   if (bytes === null || bytes === undefined || isNaN(bytes) || bytes < 0) {
-    return `0 B`
+    return { value: 0, unit: 'B' }
   }
 
   // If the size is 0, return early
   if (bytes === 0) {
-    return `0 B`
+    return { value: 0, unit: 'B' }
   }
 
   // Otherwise, determine the appropriate unit based on the size
@@ -28,5 +37,29 @@ export function formatSize(bytes: number, binary: boolean = false): string {
   // Make sure we don't exceed our units array
   const safeUnitIndex = Math.min(unitIndex, FILE_SIZE_UNITS.length - 1)
 
-  return `${value.toFixed(2)} ${FILE_SIZE_UNITS[safeUnitIndex]}`
+  return {
+    value: Math.round(value * 100) / 100, // Round to 2 decimal places
+    unit: FILE_SIZE_UNITS[safeUnitIndex]
+  }
+}
+
+/**
+ * Converts a file size in bytes to a human-readable string
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Formatted file size string (e.g., "1.5 MB")
+ */
+export function formatSize(bytes: number, binary: boolean = false): string {
+  const { value, unit } = parseSize(bytes, binary)
+  return `${value.toFixed(2)} ${unit}`
+}
+
+/**
+ * Converts a file size in bytes to an object with value and unit
+ * @param bytes File size in bytes
+ * @param binary Whether to use binary (1024) or decimal (1000) units
+ * @returns Object with numeric value and unit string
+ */
+export function formatSizeObject(bytes: number, binary: boolean = false): FileSize {
+  return parseSize(bytes, binary)
 }

src/pages/DashboardPage.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useAuth } from '@/hooks/use-auth'
 import { useDashboardStats, type TimePeriod } from '@/hooks/use-dashboard-stats'
-import { formatSize } from '@/lib/format-size'
+import { formatSize, formatSizeObject } from '@/lib/format-size'
+import NumberFlow from '@number-flow/react'
 
 const PERIOD_OPTIONS = [
   { value: 'today' as TimePeriod, label: 'Today' },
@@ -22,13 +23,19 @@ export function DashboardPage() {
   const { user } = useAuth()
   const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>('today')
   const [selectedLimit, setSelectedLimit] = useState<number>(5)
-  const { stats, topSounds, topTracks, topUsers, loading, error } = useDashboardStats(selectedPeriod, selectedLimit)
+  const { stats, topSounds, topTracks, topUsers, loading, error, refresh } = useDashboardStats(selectedPeriod, selectedLimit)
+
+  // Auto-refresh every 10 seconds
+  useEffect(() => {
+    const interval = setInterval(refresh, 10000)
+    return () => clearInterval(interval)
+  }, [refresh])
 
   if (!user) return null
 
   return (
     <div className="space-y-6">
-      {loading && (
+      {!stats && loading && (
         <div className="text-center py-8">
           <div className="text-muted-foreground">Loading statistics...</div>
         </div>
@@ -47,7 +54,7 @@ export function DashboardPage() {
             <div className="bg-card border rounded-lg p-6">
               <div className="text-center">
                 <div className="text-3xl font-bold text-primary mb-2">
-                  {stats.soundboard_sounds}
+                  <NumberFlow value={stats.soundboard_sounds} />
                 </div>
                 <div className="text-sm text-muted-foreground">
                   Sounds
@@ -58,7 +65,7 @@ export function DashboardPage() {
             <div className="bg-card border rounded-lg p-6">
               <div className="text-center">
                 <div className="text-3xl font-bold text-primary mb-2">
-                  {stats.tracks}
+                  <NumberFlow value={stats.tracks} />
                 </div>
                 <div className="text-sm text-muted-foreground">
                   Tracks
@@ -69,7 +76,7 @@ export function DashboardPage() {
             <div className="bg-card border rounded-lg p-6">
               <div className="text-center">
                 <div className="text-3xl font-bold text-primary mb-2">
-                  {stats.playlists}
+                  <NumberFlow value={stats.playlists} />
                 </div>
                 <div className="text-sm text-muted-foreground">
                   Playlists
@@ -80,7 +87,14 @@ export function DashboardPage() {
             <div className="bg-card border rounded-lg p-6">
               <div className="text-center">
                 <div className="text-3xl font-bold text-primary mb-2">
-                  {formatSize(stats.total_size, true)}
+                  {(() => {
+                    const sizeObj = formatSizeObject(stats.total_size, true)
+                    return (
+                      <>
+                        <NumberFlow value={sizeObj.value} /> {sizeObj.unit}
+                      </>
+                    )
+                  })()}
                 </div>
                 <div className="text-sm text-muted-foreground">
                   Total Size
@@ -140,7 +154,7 @@ export function DashboardPage() {
                         </div>
                       </div>
                       <div className="text-right">
-                        <div className="font-semibold">{sound.play_count}</div>
+                        <div className="font-semibold"><NumberFlow value={sound.play_count} /></div>
                         <div className="text-sm text-muted-foreground">
                           {sound.play_count === 1 ? 'play' : 'plays'}
                         </div>
@@ -178,7 +192,7 @@ export function DashboardPage() {
                         </div>
                       </div>
                       <div className="text-right">
-                        <div className="font-semibold">{track.play_count}</div>
+                        <div className="font-semibold"><NumberFlow value={track.play_count} /></div>
                         <div className="text-sm text-muted-foreground">
                           {track.play_count === 1 ? 'play' : 'plays'}
                         </div>
@@ -225,7 +239,7 @@ export function DashboardPage() {
                         </div>
                       </div>
                       <div className="text-right">
-                        <div className="font-semibold">{user.play_count}</div>
+                        <div className="font-semibold"><NumberFlow value={user.play_count} /></div>
                         <div className="text-sm text-muted-foreground">
                           {user.play_count === 1 ? 'play' : 'plays'}
                         </div>