feat: enhance player and statistic card components with improved layout and dynamic duration display

src/components/dashboard/StatisticCard.tsx

@@ -12,13 +12,13 @@ interface StatisticCardProps {
 export function StatisticCard({ title, icon: Icon, value, description }: StatisticCardProps) {
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-0">
         <CardTitle className="text-sm font-medium">{title}</CardTitle>
         <Icon className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{value}</div>
-        <p className="text-xs text-muted-foreground">{description}</p>
+        <div className="text-2xl font-bold text-center">{value}</div>
+        <p className="text-xs text-muted-foreground text-center mt-1">{description}</p>
       </CardContent>
     </Card>
   )

src/components/player/CompactPlayer.tsx

@@ -8,7 +8,6 @@ import {
 } from '@/lib/api/services/player'
 import { PLAYER_EVENTS, playerEvents } from '@/lib/events'
 import { cn } from '@/lib/utils'
-import { formatDuration } from '@/utils/format-duration'
 import {
   Maximize2,
   Music,
@@ -21,6 +20,7 @@ import {
 } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
+import { NumberFlowDuration } from '../ui/number-flow-duration'
 
 interface CompactPlayerProps {
   className?: string
@@ -189,8 +189,8 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
             className="w-full h-1"
           />
           <div className="flex justify-between text-xs text-muted-foreground mt-1">
-            <span>{formatDuration(state.position)}</span>
-            <span>{formatDuration(state.duration || 0)}</span>
+            <span><NumberFlowDuration duration={state.position} /></span>
+            <span><NumberFlowDuration duration={state.duration || 0} /></span>
           </div>
         </div>