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,9 +51,9 @@ 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 {
       setLoading(true)
       setError(null)
@@ -87,10 +87,15 @@ export function useDashboardStats(period: TimePeriod = 'all', limit: number = 5)
     } 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>