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

package.json

@@ -7,9 +7,8 @@
   "scripts": {
     "dev": "vite --port 8001",
     "build": "tsc -b && vite build",
-    "build:production": "tsc -b && vite build --mode production",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview --port 8001"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",

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>
 

vite.config.ts

@@ -26,6 +26,21 @@ export default defineConfig({
     outDir: 'dist',
     sourcemap: false, // Disable source maps in production for security
   },
+  // Preview server configuration (for testing built version)
+  preview: {
+    port: 8001,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/socket.io': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+        ws: true,
+      },
+    },
+  },
   // For reverse proxy deployment, ensure assets are served from root
   base: '/',
 })