quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance DashboardPage with NumberFlow for dynamic statistics display and formatSizeObject for improved size formatting

Browse Source
This commit is contained in:
JSC
2025-08-12 21:24:17 +02:00
parent e55c5fd4b9
commit fb80806819
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/DashboardPage.tsx
View File

@@ -4,8 +4,9 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Volume2, Play, Clock, HardDrive, Music, Trophy, Loader2, RefreshCw } from 'lucide-react' 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 NumberFlow from '@number-flow/react'
import { formatSizeObject } from '@/utils/format-size'
interface SoundboardStatistics { interface SoundboardStatistics {
sound_count: number sound_count: number
@@ -271,7 +272,7 @@ export function DashboardPage() {
<Volume2 className="h-4 w-4 text-muted-foreground" /> <Volume2 className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <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"> <p className="text-xs text-muted-foreground">
Soundboard audio files Soundboard audio files
</p> </p>
@@ -310,7 +311,16 @@ export function DashboardPage() {
<HardDrive className="h-4 w-4 text-muted-foreground" /> <HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <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"> <p className="text-xs text-muted-foreground">
Original + normalized files Original + normalized files
</p> </p>
@@ -329,7 +339,7 @@ export function DashboardPage() {
<Music className="h-4 w-4 text-muted-foreground" /> <Music className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <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"> <p className="text-xs text-muted-foreground">
Extracted audio tracks Extracted audio tracks
</p> </p>
@@ -342,7 +352,7 @@ export function DashboardPage() {
<Play className="h-4 w-4 text-muted-foreground" /> <Play className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <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"> <p className="text-xs text-muted-foreground">
All-time play count All-time play count
</p> </p>
@@ -368,7 +378,16 @@ export function DashboardPage() {
<HardDrive className="h-4 w-4 text-muted-foreground" /> <HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <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"> <p className="text-xs text-muted-foreground">
Original + normalized files Original + normalized files
</p> </p>