From fb80806819ed6c53a8c3462dbf83d60d44018a53 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Tue, 12 Aug 2025 21:24:17 +0200
Subject: [PATCH] feat: enhance DashboardPage with NumberFlow for dynamic
 statistics display and formatSizeObject for improved size formatting

---
 src/pages/DashboardPage.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index bba2396..5ecc5ea 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -4,8 +4,9 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
 import { Volume2, Play, Clock, HardDrive, Music, Trophy, Loader2, RefreshCw } from 'lucide-react'
-import { formatDuration, formatFileSize } from '@/lib/format'
+import { formatDuration } from '@/lib/format'
 import NumberFlow from '@number-flow/react'
+import { formatSizeObject } from '@/utils/format-size'
 
 interface SoundboardStatistics {
   sound_count: number
@@ -271,7 +272,7 @@ export function DashboardPage() {
                   <Volume2 className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className="text-2xl font-bold">{soundboardStatistics.sound_count}</div>
+                  <div className="text-2xl font-bold"><NumberFlow value={soundboardStatistics.sound_count} /></div>
                   <p className="text-xs text-muted-foreground">
                     Soundboard audio files
                   </p>
@@ -310,7 +311,16 @@ export function DashboardPage() {
                   <HardDrive className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className="text-2xl font-bold">{formatFileSize(soundboardStatistics.total_size)}</div>
+                  <div className="text-2xl font-bold">
+                    {(() => {
+                      const sizeObj = formatSizeObject(soundboardStatistics.total_size, true)
+                      return (
+                        <>
+                          <NumberFlow value={sizeObj.value} /> {sizeObj.unit}
+                        </>
+                      )
+                    })()}
+                  </div>
                   <p className="text-xs text-muted-foreground">
                     Original + normalized files
                   </p>
@@ -329,7 +339,7 @@ export function DashboardPage() {
                   <Music className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className="text-2xl font-bold">{trackStatistics.track_count}</div>
+                  <div className="text-2xl font-bold"><NumberFlow value={trackStatistics.track_count} /></div>
                   <p className="text-xs text-muted-foreground">
                     Extracted audio tracks
                   </p>
@@ -342,7 +352,7 @@ export function DashboardPage() {
                   <Play className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className="text-2xl font-bold">{trackStatistics.total_play_count}</div>
+                  <div className="text-2xl font-bold"><NumberFlow value={trackStatistics.total_play_count} /></div>
                   <p className="text-xs text-muted-foreground">
                     All-time play count
                   </p>
@@ -368,7 +378,16 @@ export function DashboardPage() {
                   <HardDrive className="h-4 w-4 text-muted-foreground" />
                 </CardHeader>
                 <CardContent>
-                  <div className="text-2xl font-bold">{formatFileSize(trackStatistics.total_size)}</div>
+                  <div className="text-2xl font-bold">
+                    {(() => {
+                      const sizeObj = formatSizeObject(trackStatistics.total_size, true)
+                      return (
+                        <>
+                          <NumberFlow value={sizeObj.value} /> {sizeObj.unit}
+                        </>
+                      )
+                    })()}
+                  </div>
                   <p className="text-xs text-muted-foreground">
                     Original + normalized files
                   </p>