fix: adjust gap spacing in SoundboardPage layout for improved responsiveness

src/App.tsx

@@ -1,20 +1,18 @@
 import { AppLayout } from '@/components/AppLayout'
-import { ProtectedRoute } from '@/components/ProtectedRoute'
-import { Button } from '@/components/ui/button'
 import { AuthProvider } from '@/components/AuthProvider'
-import { SocketProvider } from '@/contexts/SocketContext'
+import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { MusicPlayerProvider } from '@/contexts/MusicPlayerContext'
+import { SocketProvider } from '@/contexts/SocketContext'
 import { AccountPage } from '@/pages/AccountPage'
-import { ActivityPage } from '@/pages/ActivityPage'
-import { AdminUsersPage } from '@/pages/AdminUsersPage'
 import { AdminSoundsPage } from '@/pages/AdminSoundsPage'
+import { AdminUsersPage } from '@/pages/AdminUsersPage'
 import { DashboardPage } from '@/pages/DashboardPage'
 import { LoginPage } from '@/pages/LoginPage'
 import { RegisterPage } from '@/pages/RegisterPage'
 import { SoundboardPage } from '@/pages/SoundboardPage'
 import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router'
-import { ThemeProvider } from './components/ThemeProvider'
 import { Toaster } from 'sonner'
+import { ThemeProvider } from './components/ThemeProvider'
 
 function App() {
   return (
@@ -42,19 +40,6 @@ function App() {
                     </ProtectedRoute>
                   }
                 />
-            <Route
-              path="/activity"
-              element={
-                <ProtectedRoute>
-                  <AppLayout
-                    title="Activity"
-                    description="View recent activity and logs"
-                  >
-                    <ActivityPage />
-                  </AppLayout>
-                </ProtectedRoute>
-              }
-            />
                 <Route
                   path="/account"
                   element={
@@ -81,20 +66,6 @@ function App() {
                     </ProtectedRoute>
                   }
                 />
-            <Route
-              path="/admin/users"
-              element={
-                <ProtectedRoute requireAdmin>
-                  <AppLayout
-                    title="User Management"
-                    description="Manage users and their permissions"
-                    headerActions={<Button>Add User</Button>}
-                  >
-                    <AdminUsersPage />
-                  </AppLayout>
-                </ProtectedRoute>
-              }
-            />
                 <Route
                   path="/admin/sounds"
                   element={
@@ -108,9 +79,28 @@ function App() {
                     </ProtectedRoute>
                   }
                 />
+                <Route
+                  path="/admin/users"
+                  element={
+                    <ProtectedRoute requireAdmin>
+                      <AppLayout
+                        title="User Management"
+                        description="Manage users, plans, and permissions"
+                      >
+                        <AdminUsersPage />
+                      </AppLayout>
+                    </ProtectedRoute>
+                  }
+                />
 
-            <Route path="/" element={<Navigate to="/dashboard" replace />} />
-            <Route path="*" element={<Navigate to="/dashboard" replace />} />
+                <Route
+                  path="/"
+                  element={<Navigate to="/dashboard" replace />}
+                />
+                <Route
+                  path="*"
+                  element={<Navigate to="/dashboard" replace />}
+                />
               </Routes>
             </Router>
           </MusicPlayerProvider>

src/components/AppLayout.tsx

@@ -2,7 +2,6 @@ import { PageHeader } from '@/components/PageHeader'
 import { AppSidebar } from '@/components/sidebar/AppSidebar'
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
 import { MusicPlayer } from '@/components/MusicPlayer'
-import { useMusicPlayer } from '@/contexts/MusicPlayerContext'
 import { type ReactNode } from 'react'
 
 interface AppLayoutProps {

src/components/MusicPlayer.tsx

@@ -2,6 +2,12 @@ import { useRef } from 'react'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { useMusicPlayer } from '@/contexts/MusicPlayerContext'
 import { 
   Play, 
@@ -17,8 +23,13 @@ import {
   List,
   Maximize2,
   Minimize2,
-  Minus
+  Minus,
+  ArrowRightToLine,
+  ExternalLink,
+  Download,
+  Globe
 } from 'lucide-react'
+import { formatDuration } from '@/lib/format-duration'
 
 export function MusicPlayer() {
   const {
@@ -55,10 +66,21 @@ export function MusicPlayer() {
     return null
   }
 
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = Math.floor(seconds % 60)
-    return `${mins}:${secs.toString().padStart(2, '0')}`
+  const openServiceUrlWithTimestamp = (serviceUrl: string) => {
+    let urlWithTimestamp = serviceUrl
+    const currentTimeInSeconds = Math.floor(currentTime / 1000)
+    const separator = serviceUrl.includes('?') ? '&' : '?'
+    
+    // Add timestamp parameter based on service type
+    if (serviceUrl.includes('youtube.com') || serviceUrl.includes('youtu.be')) {
+      // YouTube timestamp format: &t=123s or ?t=123s
+      urlWithTimestamp = `${serviceUrl}${separator}t=${currentTimeInSeconds}s`
+    } else {
+      // For other services, try common timestamp parameter
+      urlWithTimestamp = serviceUrl
+    }
+    
+    window.open(urlWithTimestamp, '_blank')
   }
 
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -84,13 +106,15 @@ export function MusicPlayer() {
         return <Repeat1 className="h-4 w-4" />
       case 'random':
         return <Shuffle className="h-4 w-4" />
+      case 'single':
+        return <ArrowRightToLine className="h-4 w-4" />
       default:
         return <Play className="h-4 w-4" />
     }
   }
 
   const handlePlayModeToggle = () => {
-    const modes = ['continuous', 'loop-playlist', 'loop-one', 'random'] as const
+    const modes = ['continuous', 'loop-playlist', 'loop-one', 'random', 'single'] as const
     const currentIndex = modes.indexOf(playMode)
     const nextIndex = (currentIndex + 1) % modes.length
     setPlayMode(modes[nextIndex])
@@ -125,11 +149,11 @@ export function MusicPlayer() {
       <Card className="fixed bottom-4 right-4 w-80 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border shadow-lg z-50">
         {/* Thumbnail */}
         {currentTrack?.thumbnail && (
-          <div className="relative h-32 w-full overflow-hidden rounded-t-lg">
+          <div className="relative w-full overflow-hidden rounded-t-lg bg-muted/50 flex items-center justify-center">
             <img 
               src={currentTrack.thumbnail} 
               alt={currentTrack.title}
-              className="h-full w-full object-cover"
+              className="max-w-full max-h-45 object-contain"
             />
             <div className="absolute top-2 right-2 flex space-x-1">
               <Button
@@ -156,9 +180,39 @@ export function MusicPlayer() {
         <div className="p-4 space-y-3">
           {/* Track info */}
           <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              {(currentTrack?.file_url || currentTrack?.service_url) && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0 shrink-0"
+                      title="Open track links"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {currentTrack?.file_url && (
+                      <DropdownMenuItem onClick={() => window.open(currentTrack.file_url, '_blank')}>
+                        <Download className="h-3 w-3" />
+                        Open File
+                      </DropdownMenuItem>
+                    )}
+                    {currentTrack?.service_url && (
+                      <DropdownMenuItem onClick={() => openServiceUrlWithTimestamp(currentTrack.service_url!)}>
+                        <Globe className="h-3 w-3" />
+                        Open Service
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
               <h3 className="font-medium text-sm leading-tight line-clamp-1">
                 {currentTrack?.title || 'No track selected'}
               </h3>
+            </div>
             {currentTrack?.artist && (
               <p className="text-xs text-muted-foreground line-clamp-1">
                 {currentTrack.artist}
@@ -179,8 +233,8 @@ export function MusicPlayer() {
               />
             </div>
             <div className="flex justify-between text-xs text-muted-foreground">
-              <span>{formatTime(currentTime)}</span>
-              <span>{formatTime(duration)}</span>
+              <span>{formatDuration(currentTime)}</span>
+              <span>{formatDuration(duration)}</span>
             </div>
           </div>
 
@@ -238,8 +292,8 @@ export function MusicPlayer() {
               <input
                 type="range"
                 min="0"
-                max="1"
-                step="0.01"
+                max="100"
+                step="1"
                 value={isMuted ? 0 : volume}
                 onChange={handleVolumeChange}
                 className="w-16 h-1 bg-muted rounded-lg appearance-none cursor-pointer slider"
@@ -270,7 +324,7 @@ export function MusicPlayer() {
                       )}
                     </div>
                     <span className="text-xs text-muted-foreground">
-                      {formatTime(track.duration)}
+                      {formatDuration(track.duration)}
                     </span>
                   </div>
                 ))}
@@ -298,18 +352,48 @@ export function MusicPlayer() {
         <div className="flex-1 flex flex-col items-center justify-center p-8">
           {/* Large thumbnail */}
           {currentTrack?.thumbnail && (
-            <div className="w-80 h-80 rounded-lg overflow-hidden mb-6 shadow-lg">
+            <div className="max-w-full rounded-lg overflow-hidden mb-6 shadow-lg bg-muted/50 flex items-center justify-center">
               <img 
                 src={currentTrack.thumbnail} 
                 alt={currentTrack.title}
-                className="h-full w-full object-cover"
+                className="max-w-full max-h-full object-contain"
               />
             </div>
           )}
 
           {/* Track info */}
           <div className="text-center mb-6">
-            <h1 className="text-2xl font-bold mb-2">{currentTrack?.title || 'No track selected'}</h1>
+            <div className="flex items-center justify-center gap-3 mb-2">
+              {(currentTrack?.file_url || currentTrack?.service_url) && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 shrink-0"
+                      title="Open track links"
+                    >
+                      <ExternalLink className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {currentTrack?.file_url && (
+                      <DropdownMenuItem onClick={() => window.open(currentTrack.file_url, '_blank')}>
+                        <Download className="h-4 w-4" />
+                        Open File
+                      </DropdownMenuItem>
+                    )}
+                    {currentTrack?.service_url && (
+                      <DropdownMenuItem onClick={() => openServiceUrlWithTimestamp(currentTrack.service_url!)}>
+                        <Globe className="h-4 w-4" />
+                        Open Service
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+              <h1 className="text-2xl font-bold">{currentTrack?.title || 'No track selected'}</h1>
+            </div>
             {currentTrack?.artist && (
               <p className="text-lg text-muted-foreground">{currentTrack.artist}</p>
             )}
@@ -328,8 +412,8 @@ export function MusicPlayer() {
               />
             </div>
             <div className="flex justify-between text-sm text-muted-foreground">
-              <span>{formatTime(currentTime)}</span>
-              <span>{formatTime(duration)}</span>
+              <span>{formatDuration(currentTime)}</span>
+              <span>{formatDuration(duration)}</span>
             </div>
           </div>
 
@@ -375,8 +459,8 @@ export function MusicPlayer() {
               <input
                 type="range"
                 min="0"
-                max="1"
-                step="0.01"
+                max="100"
+                step="1"
                 value={isMuted ? 0 : volume}
                 onChange={handleVolumeChange}
                 className="w-24 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
@@ -408,7 +492,7 @@ export function MusicPlayer() {
                   )}
                 </div>
                 <span className="text-sm text-muted-foreground">
-                  {formatTime(track.duration)}
+                  {formatDuration(track.duration)}
                 </span>
               </div>
             ))}

src/components/sidebar/AppSidebar.tsx

@@ -9,10 +9,10 @@ import {
   useSidebar,
 } from '@/components/ui/sidebar'
 import { useAuth } from '@/hooks/use-auth'
-import { Activity, Home, Users, Volume2, Settings } from 'lucide-react'
+import { Home, Settings, Volume2, Users } from 'lucide-react'
 import { Link, useLocation } from 'react-router'
-import { NavUser } from './NavUser'
 import { NavPlan } from './NavPlan'
+import { NavUser } from './NavUser'
 
 const navigationItems = [
   {
@@ -25,24 +25,19 @@ const navigationItems = [
     href: '/soundboard',
     icon: Volume2,
   },
-  {
-    title: 'Activity',
-    href: '/activity',
-    icon: Activity,
-  },
 ]
 
 const adminNavigationItems = [
-  {
-    title: 'Users',
-    href: '/admin/users',
-    icon: Users,
-  },
   {
     title: 'Sounds',
     href: '/admin/sounds',
     icon: Settings,
   },
+  {
+    title: 'Users',
+    href: '/admin/users',
+    icon: Users,
+  },
 ]
 
 export function AppSidebar() {

src/components/sidebar/NavPlan.tsx

@@ -1,6 +1,5 @@
 import type { User } from "@/services/auth"
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"
-import { useSocket } from "@/contexts/SocketContext"
 import NumberFlow from '@number-flow/react'
 import { useEffect, useState } from "react"
 
@@ -10,7 +9,6 @@ interface NavPlanProps {
 
 export function NavPlan({ user }: NavPlanProps) {
   const [credits, setCredits] = useState(0)
-  const { socket, isConnected } = useSocket()
   
   useEffect(() => {
     setCredits(user.credits)
@@ -18,19 +16,19 @@ export function NavPlan({ user }: NavPlanProps) {
 
   // Listen for real-time credits updates
   useEffect(() => {
-    if (!socket || !isConnected) return
-
-    const handleCreditsChanged = (data: { credits: number }) => {
-      setCredits(data.credits)
+    const handleCreditsChanged = (/*data: { credits: number }*/ event: CustomEvent) => {
+      const { credits } = event.detail
+      setCredits(credits)
     }
 
-    socket.on("credits_changed", handleCreditsChanged)
+    // Listen for the custom event
+    window.addEventListener('credits_changed', handleCreditsChanged as EventListener);
 
-    // Cleanup listener on unmount
+    // Cleanup
     return () => {
-      socket.off("credits_changed", handleCreditsChanged)
-    }
-  }, [socket, isConnected])
+      window.removeEventListener('credits_changed', handleCreditsChanged as EventListener);
+    };
+  }, [])
 
   return (
     <SidebarMenu>

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/sheet.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"

src/contexts/MusicPlayerContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useRef, useEffect, type ReactNode } from 'react'
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
 import { useSocket } from './SocketContext'
 import { apiService } from '@/services/api'
 
@@ -8,10 +8,11 @@ export interface Track {
   artist?: string
   duration: number
   thumbnail?: string
-  url: string
+  file_url: string
+  service_url?: string
 }
 
-export type PlayMode = 'continuous' | 'loop-playlist' | 'loop-one' | 'random'
+export type PlayMode = 'continuous' | 'loop-playlist' | 'loop-one' | 'random' | 'single'
 
 interface MusicPlayerContextType {
   // Playback state

src/contexts/SocketContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { io, Socket } from "socket.io-client";
 import { useAuth } from "@/hooks/use-auth";
+import { toast } from "sonner";
 
 interface SocketContextType {
   socket: Socket | null;
@@ -36,6 +37,7 @@ export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
   useEffect(() => {
     // Create socket connection
     const newSocket = io("http://localhost:5000", {
+      path: "/api/socket.io/", // Use /api prefix for Socket.IO
       withCredentials: true, // Include cookies for authentication
       autoConnect: false, // Don't connect automatically
       transports: ["polling"], // Use polling only to avoid WebSocket issues
@@ -66,6 +68,24 @@ export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
       setIsConnected(false);
     });
 
+    // Global events
+    newSocket.on("error", (data) => {
+      toast.error(data.message || "An error occurred");
+    });
+
+    newSocket.on("credits_required", (data) => {
+      toast.error(`Insufficient credits. Need ${data.credits_needed} credits.`);
+    });
+
+    // Page or component events
+    newSocket.on("credits_changed", (data) => {
+      window.dispatchEvent(new CustomEvent('credits_changed', { detail: data }));
+    });
+
+    newSocket.on("sound_play_count_changed", (data) => {
+      window.dispatchEvent(new CustomEvent('sound_play_count_changed', { detail: data }));
+    });
+
     setSocket(newSocket);
 
     // Clean up on unmount

src/hooks/use-dashboard-stats.ts

@@ -0,0 +1,101 @@
+import { useState, useEffect, useCallback } from 'react'
+import { apiService } from '@/services/api'
+
+interface DashboardStats {
+  soundboard_sounds: number
+  tracks: number
+  playlists: number
+  total_size: number
+  original_size: number
+  normalized_size: number
+}
+
+interface TopSound {
+  id: number
+  name: string
+  filename: string
+  thumbnail: string | null
+  type: string
+  play_count: number
+}
+
+interface TopSoundsResponse {
+  period: string
+  sounds: TopSound[]
+}
+
+interface TopTracksResponse {
+  period: string
+  tracks: TopSound[]
+}
+
+interface TopUser {
+  id: number
+  name: string
+  email: string
+  picture: string | null
+  play_count: number
+}
+
+interface TopUsersResponse {
+  period: string
+  users: TopUser[]
+}
+
+export type TimePeriod = 'today' | 'week' | 'month' | 'year' | 'all'
+
+export function useDashboardStats(period: TimePeriod = 'all', limit: number = 5) {
+  const [stats, setStats] = useState<DashboardStats | null>(null)
+  const [topSounds, setTopSounds] = useState<TopSoundsResponse | null>(null)
+  const [topTracks, setTopTracks] = useState<TopTracksResponse | null>(null)
+  const [topUsers, setTopUsers] = useState<TopUsersResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [refreshKey, setRefreshKey] = useState(0)
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      
+      // Fetch basic stats, top sounds, top tracks, and top users in parallel
+      const [statsResponse, topSoundsResponse, topTracksResponse, topUsersResponse] = await Promise.all([
+        apiService.get('/api/dashboard/stats'),
+        apiService.get(`/api/dashboard/top-sounds?period=${period}&limit=${limit}`),
+        apiService.get(`/api/dashboard/top-tracks?period=${period}&limit=${limit}`),
+        apiService.get(`/api/dashboard/top-users?period=${period}&limit=${limit}`)
+      ])
+      
+      if (statsResponse.ok && topSoundsResponse.ok && topTracksResponse.ok && topUsersResponse.ok) {
+        const [statsData, topSoundsData, topTracksData, topUsersData] = await Promise.all([
+          statsResponse.json(),
+          topSoundsResponse.json(),
+          topTracksResponse.json(),
+          topUsersResponse.json()
+        ])
+        
+        setStats(statsData)
+        setTopSounds(topSoundsData)
+        setTopTracks(topTracksData)
+        setTopUsers(topUsersData)
+      } else {
+        setError('Failed to fetch dashboard data')
+      }
+    } catch (err) {
+      setError('An error occurred while fetching dashboard data')
+      console.error('Dashboard fetch error:', err)
+    } finally {
+      setLoading(false)
+    }
+  }, [period, limit])
+
+  const refresh = () => {
+    setRefreshKey(prev => prev + 1)
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData, refreshKey])
+
+  return { stats, topSounds, topTracks, topUsers, loading, error, refresh }
+}

src/index.css

@@ -1,5 +1,5 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -121,26 +121,26 @@
 
 @layer components {
   /* Custom slider styles for volume control */
-  input[type="range"] {
+  input[type='range'] {
     -webkit-appearance: none;
     background: transparent;
   }
 
-  input[type="range"]::-webkit-slider-track {
+  input[type='range']::-webkit-slider-track {
     @apply h-1 bg-muted rounded-lg;
   }
 
-  input[type="range"]::-webkit-slider-thumb {
+  input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     @apply h-4 w-4 bg-primary rounded-full cursor-pointer;
     margin-top: -6px;
   }
 
-  input[type="range"]::-moz-range-track {
+  input[type='range']::-moz-range-track {
     @apply h-1 bg-muted rounded-lg border-0;
   }
 
-  input[type="range"]::-moz-range-thumb {
+  input[type='range']::-moz-range-thumb {
     @apply h-4 w-4 bg-primary rounded-full cursor-pointer border-0;
   }
 

src/lib/format-duration.ts

@@ -0,0 +1,18 @@
+export function formatDuration(ms: number): string {
+  if (isNaN(ms) || ms < 0) return '0:00'
+
+  // Convert milliseconds to seconds
+  const totalSeconds = Math.floor(ms / 1000)
+
+  // Calculate hours, minutes, and remaining seconds
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+
+  // Format based on duration
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+  } else {
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  }
+}

src/lib/format-size.ts

@@ -0,0 +1,65 @@
+/**
+ * Units for file sizes
+ */
+const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB']
+
+/**
+ * Interface for file size
+ */
+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 { value: 0, unit: 'B' }
+  }
+
+  // If the size is 0, return early
+  if (bytes === 0) {
+    return { value: 0, unit: 'B' }
+  }
+
+  // Otherwise, determine the appropriate unit based on the size
+  const unit = binary ? 1024 : 1000
+  const unitIndex = Math.floor(Math.log(bytes) / Math.log(unit))
+  const unitSize = Math.pow(unit, unitIndex)
+  const value = bytes / unitSize
+
+  // Make sure we don't exceed our units array
+  const safeUnitIndex = Math.min(unitIndex, FILE_SIZE_UNITS.length - 1)
+
+  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/ActivityPage.tsx

@@ -1,274 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Play, Clock, User, TrendingUp } from 'lucide-react';
-import { apiService } from '@/services/api';
-
-interface PlayRecord {
-  id: number;
-  played_at: string;
-  user: {
-    id: number;
-    name: string;
-    email: string;
-  } | null;
-  sound: {
-    id: number;
-    name: string;
-    filename: string;
-    type: string;
-  } | null;
-}
-
-interface UserStats {
-  total_plays: number;
-  unique_sounds: number;
-  favorite_sound: {
-    sound: any;
-    play_count: number;
-  } | null;
-  first_play: string | null;
-  last_play: string | null;
-}
-
-interface PopularSound {
-  sound: any;
-  play_count: number;
-  last_played: string | null;
-}
-
-export function ActivityPage() {
-  const [recentPlays, setRecentPlays] = useState<PlayRecord[]>([]);
-  const [myStats, setMyStats] = useState<UserStats | null>(null);
-  const [popularSounds, setPopularSounds] = useState<PopularSound[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState<'recent' | 'mystats' | 'popular'>('recent');
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-      await Promise.all([
-        fetchRecentPlays(),
-        fetchMyStats(),
-        fetchPopularSounds(),
-      ]);
-    } catch (err) {
-      console.error('Error fetching activity data:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchRecentPlays = async () => {
-    try {
-      const response = await apiService.get('/api/soundboard/history?per_page=20');
-      const data = await response.json();
-      setRecentPlays(data.plays || []);
-    } catch (err) {
-      console.error('Error fetching recent plays:', err);
-    }
-  };
-
-  const fetchMyStats = async () => {
-    try {
-      const response = await apiService.get('/api/soundboard/my-stats');
-      const data = await response.json();
-      setMyStats(data);
-    } catch (err) {
-      console.error('Error fetching my stats:', err);
-    }
-  };
-
-  const fetchPopularSounds = async () => {
-    try {
-      const response = await apiService.get('/api/soundboard/popular?limit=10');
-      const data = await response.json();
-      setPopularSounds(data.popular_sounds || []);
-    } catch (err) {
-      console.error('Error fetching popular sounds:', err);
-    }
-  };
-
-  const formatRelativeTime = (dateString: string) => {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
-
-    if (minutes < 1) return 'Just now';
-    if (minutes < 60) return `${minutes}m ago`;
-    if (hours < 24) return `${hours}h ago`;
-    return `${days}d ago`;
-  };
-
-  if (loading) {
-    return (
-      <div className="flex justify-center items-center h-64">
-        <div className="text-lg">Loading activity...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Tab Navigation */}
-      <div className="flex space-x-4 border-b">
-        <button
-          onClick={() => setActiveTab('recent')}
-          className={`pb-2 px-1 ${
-            activeTab === 'recent'
-              ? 'border-b-2 border-blue-500 text-blue-600'
-              : 'text-gray-600 hover:text-gray-900'
-          }`}
-        >
-          Recent Activity
-        </button>
-        <button
-          onClick={() => setActiveTab('mystats')}
-          className={`pb-2 px-1 ${
-            activeTab === 'mystats'
-              ? 'border-b-2 border-blue-500 text-blue-600'
-              : 'text-gray-600 hover:text-gray-900'
-          }`}
-        >
-          My Statistics
-        </button>
-        <button
-          onClick={() => setActiveTab('popular')}
-          className={`pb-2 px-1 ${
-            activeTab === 'popular'
-              ? 'border-b-2 border-blue-500 text-blue-600'
-              : 'text-gray-600 hover:text-gray-900'
-          }`}
-        >
-          Popular Sounds
-        </button>
-      </div>
-
-      {/* Recent Activity Tab */}
-      {activeTab === 'recent' && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Clock className="w-5 h-5" />
-              Recent Activity
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {recentPlays.map((play) => (
-                <div key={play.id} className="flex items-center justify-between border-b pb-3">
-                  <div className="flex items-center gap-3">
-                    <Play className="w-4 h-4 text-blue-500" />
-                    <div>
-                      <div className="font-medium">
-                        {play.sound?.name || 'Unknown Sound'}
-                      </div>
-                      <div className="text-sm text-muted-foreground">
-                        by {play.user?.name || 'Unknown User'}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="text-sm text-muted-foreground">
-                    {formatRelativeTime(play.played_at)}
-                  </div>
-                </div>
-              ))}
-              {recentPlays.length === 0 && (
-                <div className="text-center text-muted-foreground py-8">
-                  No recent activity found.
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* My Statistics Tab */}
-      {activeTab === 'mystats' && myStats && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Plays</CardTitle>
-              <Play className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{myStats.total_plays}</div>
-            </CardContent>
-          </Card>
-          
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Unique Sounds</CardTitle>
-              <User className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{myStats.unique_sounds}</div>
-            </CardContent>
-          </Card>
-
-          {myStats.favorite_sound && (
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Favorite Sound</CardTitle>
-                <TrendingUp className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-sm font-medium">{myStats.favorite_sound.sound.name}</div>
-                <div className="text-xs text-muted-foreground">
-                  {myStats.favorite_sound.play_count} plays
-                </div>
-              </CardContent>
-            </Card>
-          )}
-        </div>
-      )}
-
-      {/* Popular Sounds Tab */}
-      {activeTab === 'popular' && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <TrendingUp className="w-5 h-5" />
-              Popular Sounds
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {popularSounds.map((item, index) => (
-                <div key={item.sound.id} className="flex items-center justify-between border-b pb-3">
-                  <div className="flex items-center gap-3">
-                    <div className="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-bold">
-                      {index + 1}
-                    </div>
-                    <div>
-                      <div className="font-medium">{item.sound.name}</div>
-                      <div className="text-sm text-muted-foreground">
-                        {item.play_count} plays
-                      </div>
-                    </div>
-                  </div>
-                  {item.last_played && (
-                    <div className="text-sm text-muted-foreground">
-                      Last: {formatRelativeTime(item.last_played)}
-                    </div>
-                  )}
-                </div>
-              ))}
-              {popularSounds.length === 0 && (
-                <div className="text-center text-muted-foreground py-8">
-                  No popular sounds found.
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}

src/pages/AdminSoundsPage.tsx

@@ -1,129 +1,30 @@
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { 
   RefreshCw, 
-  Volume2, 
-  Trash2, 
-  CheckCircle, 
-  XCircle, 
-  AlertCircle,
   Database,
   Zap
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { apiService } from '@/services/api';
 
-interface Sound {
-  id: number;
-  name: string;
-  filename: string;
-  type: string;
-  duration: number;
-  size: number;
-  play_count: number;
-  is_normalized: boolean;
-  normalized_filename?: string;
-  original_exists: boolean;
-  normalized_exists: boolean;
-  created_at: string;
-}
-
-interface ScanStats {
-  total_sounds: number;
-  soundboard_sounds: number;
-  music_sounds: number;
-  total_size_bytes: number;
-  total_duration: number;
-  total_plays: number;
-}
-
-interface NormalizationStats {
-  total_sounds: number;
-  normalized_count: number;
-  normalization_percentage: number;
-  total_original_size: number;
-  total_normalized_size: number;
-  size_difference: number;
-}
-
 export function AdminSoundsPage() {
-  const [sounds, setSounds] = useState<Sound[]>([]);
-  const [scanStats, setScanStats] = useState<ScanStats | null>(null);
-  const [normalizationStats, setNormalizationStats] = useState<NormalizationStats | null>(null);
-  const [loading, setLoading] = useState(false);
   const [scanning, setScanning] = useState(false);
   const [normalizing, setNormalizing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [page, setPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-
-  useEffect(() => {
-    fetchData();
-  }, [page]);
-
-  const fetchData = async () => {
-    await Promise.all([
-      fetchSounds(),
-      fetchScanStats(),
-      fetchNormalizationStats()
-    ]);
-  };
-
-  const fetchSounds = async () => {
-    try {
-      setLoading(true);
-      const response = await apiService.get(`/api/admin/sounds/list?page=${page}&per_page=20`);
-      const data = await response.json();
-      setSounds(data.sounds || []);
-      setTotalPages(data.pagination?.pages || 1);
-    } catch (err) {
-      setError('Failed to load sounds');
-      toast.error('Failed to load sounds');
-      console.error('Error fetching sounds:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchScanStats = async () => {
-    try {
-      const response = await apiService.get('/api/admin/sounds/scan/status');
-      const data = await response.json();
-      setScanStats(data);
-    } catch (err) {
-      console.error('Error fetching scan stats:', err);
-    }
-  };
-
-  const fetchNormalizationStats = async () => {
-    try {
-      const response = await apiService.get('/api/admin/sounds/normalize/status');
-      const data = await response.json();
-      setNormalizationStats(data);
-    } catch (err) {
-      console.error('Error fetching normalization stats:', err);
-    }
-  };
 
   const handleScanSounds = async () => {
     try {
       setScanning(true);
-      setError(null);
       const response = await apiService.post('/api/admin/sounds/scan');
       const data = await response.json();
       
       if (response.ok) {
         toast.success(`Scan completed: ${data.files_added} new sounds added, ${data.files_skipped} skipped`);
-        await fetchData();
       } else {
-        setError(data.error || 'Scan failed');
         toast.error(data.error || 'Scan failed');
       }
-    } catch (err) {
-      setError('Failed to scan sounds');
+    } catch {
       toast.error('Failed to scan sounds');
-      console.error('Error scanning sounds:', err);
     } finally {
       setScanning(false);
     }
@@ -132,7 +33,6 @@ export function AdminSoundsPage() {
   const handleNormalizeAll = async () => {
     try {
       setNormalizing(true);
-      setError(null);
       const response = await apiService.post('/api/admin/sounds/normalize', {
         overwrite: false,
         two_pass: true
@@ -141,93 +41,19 @@ export function AdminSoundsPage() {
       
       if (response.ok) {
         toast.success(`Normalization completed: ${data.successful} successful, ${data.failed} failed, ${data.skipped} skipped`);
-        await fetchData();
       } else {
-        setError(data.error || 'Normalization failed');
         toast.error(data.error || 'Normalization failed');
       }
-    } catch (err) {
-      setError('Failed to normalize sounds');
+    } catch {
       toast.error('Failed to normalize sounds');
-      console.error('Error normalizing sounds:', err);
     } finally {
       setNormalizing(false);
     }
   };
 
-  const handleNormalizeSound = async (soundId: number) => {
-    try {
-      const response = await apiService.post(`/api/admin/sounds/${soundId}/normalize`, {
-        overwrite: false,
-        two_pass: true
-      });
-      const data = await response.json();
-      
-      if (response.ok) {
-        toast.success('Sound normalized successfully');
-        await fetchData();
-      } else {
-        toast.error(`Normalization failed: ${data.error}`);
-      }
-    } catch (err) {
-      toast.error('Failed to normalize sound');
-      console.error('Error normalizing sound:', err);
-    }
-  };
-
-  const handleDeleteSound = async (soundId: number, soundName: string) => {
-    const confirmDelete = () => {
-      toast.promise(
-        (async () => {
-          const response = await apiService.delete(`/api/admin/sounds/${soundId}`);
-          const data = await response.json();
-          
-          if (response.ok) {
-            await fetchData();
-            return `Sound "${soundName}" deleted successfully`;
-          } else {
-            throw new Error(data.error || 'Delete failed');
-          }
-        })(),
-        {
-          loading: `Deleting "${soundName}"...`,
-          success: (message) => message,
-          error: (err) => `Failed to delete sound: ${err.message}`,
-        }
-      );
-    };
-
-    toast(`Are you sure you want to delete "${soundName}"?`, {
-      action: {
-        label: 'Delete',
-        onClick: confirmDelete,
-      },
-      cancel: {
-        label: 'Cancel',
-        onClick: () => {},
-      },
-    });
-  };
-
-  const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-  };
-
-  const formatDuration = (ms: number) => {
-    const seconds = Math.floor(ms / 1000);
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  };
-
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Sound Management</h1>
+      <div className="flex items-center">
         <div className="flex gap-2">
           <Button 
             onClick={handleScanSounds} 
@@ -246,162 +72,6 @@ export function AdminSoundsPage() {
           </Button>
         </div>
       </div>
-
-      {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
-          {error}
-        </div>
-      )}
-
-      {/* Statistics Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {scanStats && (
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Sounds</CardTitle>
-              <Volume2 className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{scanStats.total_sounds}</div>
-              <p className="text-xs text-muted-foreground">
-                {scanStats.soundboard_sounds} soundboard, {scanStats.music_sounds} music
-              </p>
-            </CardContent>
-          </Card>
-        )}
-
-        {normalizationStats && (
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Normalized</CardTitle>
-              <Zap className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{normalizationStats.normalized_count}</div>
-              <p className="text-xs text-muted-foreground">
-                {normalizationStats.normalization_percentage.toFixed(1)}% of total sounds
-              </p>
-            </CardContent>
-          </Card>
-        )}
-
-        {scanStats && (
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Size</CardTitle>
-              <Database className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{formatFileSize(scanStats.total_size_bytes)}</div>
-              <p className="text-xs text-muted-foreground">
-                {scanStats.total_plays} total plays
-              </p>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-
-      {/* Sounds List */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Sounds ({sounds.length})</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {loading ? (
-            <div className="flex justify-center py-8">
-              <RefreshCw className="w-6 h-6 animate-spin" />
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {sounds.map((sound) => (
-                <div
-                  key={sound.id}
-                  className="flex items-center justify-between p-3 border rounded-lg"
-                >
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-medium">{sound.name}</h3>
-                      <div className="flex gap-1">
-                        {sound.original_exists ? (
-                          <div title="Original file exists">
-                            <CheckCircle className="w-4 h-4 text-green-500" />
-                          </div>
-                        ) : (
-                          <div title="Original file missing">
-                            <XCircle className="w-4 h-4 text-red-500" />
-                          </div>
-                        )}
-                        {sound.is_normalized ? (
-                          sound.normalized_exists ? (
-                            <div title="Normalized file exists">
-                              <CheckCircle className="w-4 h-4 text-blue-500" />
-                            </div>
-                          ) : (
-                            <div title="Normalized in DB but file missing">
-                              <AlertCircle className="w-4 h-4 text-yellow-500" />
-                            </div>
-                          )
-                        ) : (
-                          <div title="Not normalized">
-                            <XCircle className="w-4 h-4 text-gray-400" />
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <div className="text-sm text-muted-foreground">
-                      {sound.filename} • {formatFileSize(sound.size)} • {formatDuration(sound.duration)} • {sound.play_count} plays
-                    </div>
-                  </div>
-                  <div className="flex gap-2">
-                    {!sound.is_normalized && (
-                      <Button
-                        onClick={() => handleNormalizeSound(sound.id)}
-                        size="sm"
-                        variant="outline"
-                      >
-                        <Zap className="w-4 h-4" />
-                      </Button>
-                    )}
-                    <Button
-                      onClick={() => handleDeleteSound(sound.id, sound.name)}
-                      size="sm"
-                      variant="outline"
-                      className="text-red-500 hover:text-red-700"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Pagination */}
-          {totalPages > 1 && (
-            <div className="flex justify-center gap-2 mt-4">
-              <Button
-                onClick={() => setPage(p => Math.max(1, p - 1))}
-                disabled={page === 1}
-                variant="outline"
-                size="sm"
-              >
-                Previous
-              </Button>
-              <span className="py-2 px-3 text-sm">
-                Page {page} of {totalPages}
-              </span>
-              <Button
-                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-                disabled={page === totalPages}
-                variant="outline"
-                size="sm"
-              >
-                Next
-              </Button>
-            </div>
-          )}
-        </CardContent>
-      </Card>
     </div>
   );
 }

src/pages/AdminUsersPage.tsx

@@ -1,153 +1,415 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { useAuth } from '@/hooks/use-auth'
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetClose } from '@/components/ui/sheet';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { 
+  RefreshCw, 
+  Edit, 
+  UserX, 
+  UserCheck,
+  Users
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { apiService } from '@/services/api';
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  is_active: boolean;
+  credits: number;
+  created_at: string;
+  providers: string[];
+  plan: {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    credits: number;
+    max_credits: number;
+  };
+}
+
+interface Plan {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  credits: number;
+  max_credits: number;
+}
 
 export function AdminUsersPage() {
-  const { user } = useAuth()
+  const [users, setUsers] = useState<User[]>([]);
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [editForm, setEditForm] = useState({
+    name: '',
+    credits: 0,
+    plan_id: 0,
+    is_active: true
+  });
 
-  // Mock user data - in real app this would come from API
-  const users = [
-    {
-      id: '1',
-      name: 'John Doe',
-      email: 'john@example.com',
-      role: 'admin',
-      is_active: true,
-      providers: ['password', 'google'],
-      created_at: '2024-01-15T10:30:00Z'
-    },
-    {
-      id: '2', 
-      name: 'Jane Smith',
-      email: 'jane@example.com',
-      role: 'user',
-      is_active: true,
-      providers: ['github'],
-      created_at: '2024-01-20T14:15:00Z'
-    },
-    {
-      id: '3',
-      name: 'Bob Wilson',
-      email: 'bob@example.com', 
-      role: 'user',
-      is_active: false,
-      providers: ['password'],
-      created_at: '2024-01-25T09:45:00Z'
+  useEffect(() => {
+    fetchUsers();
+    fetchPlans();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await apiService.get('/api/admin/users');
+      const data = await response.json();
+      
+      if (response.ok) {
+        setUsers(data.users);
+      } else {
+        toast.error(data.error || 'Failed to fetch users');
       }
-  ]
+    } catch {
+      toast.error('Failed to fetch users');
+    } finally {
+      setLoading(false);
+    }
+  };
 
-  if (user?.role !== 'admin') {
+  const fetchPlans = async () => {
+    try {
+      const response = await apiService.get('/api/referential/plans');
+      const data = await response.json();
+      
+      if (response.ok) {
+        setPlans(data.plans);
+      } else {
+        toast.error(data.error || 'Failed to fetch plans');
+      }
+    } catch {
+      toast.error('Failed to fetch plans');
+    }
+  };
+
+  const handleEditUser = (user: User) => {
+    setEditingUser(user);
+    setEditForm({
+      name: user.name,
+      credits: user.credits,
+      plan_id: user.plan.id,
+      is_active: user.is_active
+    });
+  };
+
+  const handleUpdateUser = async () => {
+    if (!editingUser) return;
+
+    try {
+      const response = await apiService.patch(`/api/admin/users/${editingUser.id}`, editForm);
+      const data = await response.json();
+      
+      if (response.ok) {
+        toast.success('User updated successfully');
+        setEditingUser(null);
+        fetchUsers(); // Refresh users list
+        // Note: The sheet will close automatically when Save Changes button is wrapped with SheetClose
+      } else {
+        toast.error(data.error || 'Failed to update user');
+      }
+    } catch {
+      toast.error('Failed to update user');
+    }
+  };
+
+  const handleToggleUserStatus = async (user: User) => {
+    try {
+      const endpoint = user.is_active ? 'deactivate' : 'activate';
+      const response = await apiService.post(`/api/admin/users/${user.id}/${endpoint}`);
+      const data = await response.json();
+      
+      if (response.ok) {
+        const action = user.is_active ? 'deactivated' : 'activated';
+        toast.success(`User ${action} successfully`);
+        fetchUsers(); // Refresh users list
+      } else {
+        toast.error(data.error || `Failed to ${endpoint} user`);
+      }
+    } catch {
+      toast.error('Failed to update user status');
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  };
+
+  const getStatusBadge = (user: User) => {
+    return user.is_active ? (
+      <Badge variant="default" className="bg-green-600">Active</Badge>
+    ) : (
+      <Badge variant="destructive">Inactive</Badge>
+    );
+  };
+
+  const getRoleBadge = (role: string) => {
+    return role === 'admin' ? (
+      <Badge variant="default">Admin</Badge>
+    ) : (
+      <Badge variant="secondary">User</Badge>
+    );
+  };
+
+  const filteredUsers = users.filter(user =>
+    user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    user.email.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  if (loading) {
     return (
-      <div className="flex items-center justify-center h-96">
-        <Card>
-          <CardHeader>
-            <CardTitle>Access Denied</CardTitle>
-            <CardDescription>You don't have permission to access this page.</CardDescription>
-          </CardHeader>
-        </Card>
+      <div className="flex items-center justify-center h-64">
+        <RefreshCw className="w-6 h-6 animate-spin" />
       </div>
-    )
+    );
   }
 
   return (
     <div className="space-y-6">
-      <Card>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <Users className="w-5 h-5" />
+          <h1 className="text-2xl font-bold">Users Management</h1>
+        </div>
+        <Button onClick={fetchUsers} variant="outline">
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className="flex-1">
+          <input
+            type="text"
+            placeholder="Search users by name or email..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-background"
+          />
+        </div>
+        <div className="text-sm text-muted-foreground">
+          {filteredUsers.length} of {users.length} users
+        </div>
+      </div>
+
+      <div className="grid gap-4">
+        {filteredUsers.map((user) => (
+          <Card key={user.id}>
             <CardHeader>
-          <CardTitle>Users</CardTitle>
-          <CardDescription>All registered users in the system</CardDescription>
+              <div className="flex items-start justify-between">
+                <div>
+                  <CardTitle className="text-lg">{user.name}</CardTitle>
+                  <CardDescription>{user.email}</CardDescription>
+                </div>
+                <div className="flex items-center space-x-2">
+                  {getStatusBadge(user)}
+                  {getRoleBadge(user.role)}
+                </div>
+              </div>
             </CardHeader>
             <CardContent>
-          <div className="space-y-4">
-            {users.map((userData) => (
-              <div 
-                key={userData.id}
-                className="flex items-center justify-between p-4 border rounded-lg"
-              >
-                <div className="flex items-center space-x-4">
-                  <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
-                    <span className="text-sm font-medium">
-                      {userData.name.split(' ').map(n => n[0]).join('')}
-                    </span>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">User ID</p>
+                  <p className="font-medium text-xs">{user.id}</p>
                 </div>
-                  
-                  <div className="space-y-1">
-                    <div className="flex items-center space-x-2">
-                      <span className="font-medium">{userData.name}</span>
-                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
-                        userData.role === 'admin' 
-                          ? 'bg-purple-100 text-purple-800' 
-                          : 'bg-green-100 text-green-800'
-                      }`}>
-                        {userData.role}
-                      </span>
-                      {!userData.is_active && (
-                        <span className="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-medium">
-                          Disabled
-                        </span>
-                      )}
+                <div>
+                  <p className="text-sm text-muted-foreground">Credits</p>
+                  <p className="font-medium">{user.credits}</p>
                 </div>
-                    <p className="text-sm text-muted-foreground">{userData.email}</p>
-                    <div className="flex gap-1">
-                      {userData.providers.map((provider) => (
-                        <span 
-                          key={provider}
-                          className="px-1.5 py-0.5 bg-secondary rounded text-xs"
-                        >
-                          {provider}
-                        </span>
-                      ))}
+                <div>
+                  <p className="text-sm text-muted-foreground">Plan</p>
+                  <p className="font-medium">{user.plan.name}</p>
                 </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Joined</p>
+                  <p className="font-medium">{formatDate(user.created_at)}</p>
                 </div>
               </div>
               
               <div className="flex items-center space-x-2">
-                  <Button variant="outline" size="sm">
+                <Sheet>
+                  <SheetTrigger asChild>
+                    <Button 
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => handleEditUser(user)}
+                    >
+                      <Edit className="w-4 h-4 mr-2" />
                       Edit
                     </Button>
-                  <Button 
-                    variant={userData.is_active ? "outline" : "default"} 
-                    size="sm"
+                  </SheetTrigger>
+                  <SheetContent className="w-[400px] sm:w-[540px]">
+                    <div className="p-6 h-full">
+                      <SheetHeader>
+                        <SheetTitle>Edit User: {editingUser?.name}</SheetTitle>
+                      </SheetHeader>
+                      
+                      {/* User Information Section */}
+                      <div className="mt-6 space-y-4">
+                        <div className="bg-muted/50 p-4 rounded-lg space-y-3">
+                          <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">User Information</h3>
+                          
+                          <div className="grid grid-cols-2 gap-4">
+                            <div>
+                              <p className="text-sm text-muted-foreground">User ID</p>
+                              <p className="font-mono text-sm">{editingUser?.id}</p>
+                            </div>
+                            <div>
+                              <p className="text-sm text-muted-foreground">Email</p>
+                              <p className="text-sm">{editingUser?.email}</p>
+                            </div>
+                            <div>
+                              <p className="text-sm text-muted-foreground">Role</p>
+                              <div className="flex items-center">
+                                {editingUser?.role === 'admin' ? (
+                                  <Badge variant="default">Admin</Badge>
+                                ) : (
+                                  <Badge variant="secondary">User</Badge>
+                                )}
+                              </div>
+                            </div>
+                            <div>
+                              <p className="text-sm text-muted-foreground">Joined</p>
+                              <p className="text-sm">{editingUser ? formatDate(editingUser.created_at) : ''}</p>
+                            </div>
+                          </div>
+                          
+                          <div>
+                            <p className="text-sm text-muted-foreground mb-2">Authentication Providers</p>
+                            <div className="flex flex-wrap gap-2">
+                              {editingUser?.providers?.map((provider: string) => (
+                                <Badge key={provider} variant="outline" className="text-xs">
+                                  {provider === 'password' ? 'Password' : 
+                                   provider === 'api_token' ? 'API Token' : 
+                                   provider === 'google' ? 'Google' : 
+                                   provider === 'github' ? 'GitHub' : 
+                                   provider.charAt(0).toUpperCase() + provider.slice(1)}
+                                </Badge>
+                              )) || (
+                                <span className="text-sm text-muted-foreground">No providers</span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Edit Form Section */}
+                      <div className="mt-6 space-y-6">
+                        <div>
+                          <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-4">Edit Details</h3>
+                          
+                          <div className="space-y-4">
+                            <div className="space-y-2">
+                              <Label htmlFor="name">Name</Label>
+                              <Input
+                                id="name"
+                                value={editForm.name}
+                                onChange={(e) => setEditForm({...editForm, name: e.target.value})}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor="credits">Credits</Label>
+                              <Input
+                                id="credits"
+                                type="number"
+                                value={editForm.credits}
+                                onChange={(e) => setEditForm({...editForm, credits: parseInt(e.target.value) || 0})}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor="plan">Plan</Label>
+                              <select
+                                id="plan"
+                                value={editForm.plan_id}
+                                onChange={(e) => setEditForm({...editForm, plan_id: parseInt(e.target.value)})}
+                                className="w-full p-2 border rounded-md bg-background"
                               >
-                    {userData.is_active ? 'Disable' : 'Enable'}
+                                {plans.map((plan) => (
+                                  <option key={plan.id} value={plan.id}>
+                                    {plan.name} ({plan.credits} credits / {plan.max_credits} max)
+                                  </option>
+                                ))}
+                              </select>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                              <input
+                                type="checkbox"
+                                id="is_active"
+                                checked={editForm.is_active}
+                                onChange={(e) => setEditForm({...editForm, is_active: e.target.checked})}
+                                className="w-4 h-4"
+                              />
+                              <Label htmlFor="is_active">Active</Label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Actions */}
+                      <div className="flex justify-end space-x-2 pt-6 mt-auto">
+                        <SheetClose asChild>
+                          <Button variant="outline" onClick={() => setEditingUser(null)}>
+                            Cancel
+                          </Button>
+                        </SheetClose>
+                        <SheetClose asChild>
+                          <Button onClick={handleUpdateUser}>
+                            Save Changes
+                          </Button>
+                        </SheetClose>
+                      </div>
+                    </div>
+                  </SheetContent>
+                </Sheet>
+
+                <Button 
+                  variant={user.is_active ? "destructive" : "default"}
+                  size="sm"
+                  onClick={() => handleToggleUserStatus(user)}
+                >
+                  {user.is_active ? (
+                    <>
+                      <UserX className="w-4 h-4 mr-2" />
+                      Deactivate
+                    </>
+                  ) : (
+                    <>
+                      <UserCheck className="w-4 h-4 mr-2" />
+                      Activate
+                    </>
+                  )}
                 </Button>
               </div>
-              </div>
+            </CardContent>
+          </Card>
         ))}
       </div>
-        </CardContent>
-      </Card>
 
-      <div className="grid gap-6 md:grid-cols-3">
-        <Card>
-          <CardHeader>
-            <CardTitle>Total Users</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{users.length}</div>
-            <p className="text-xs text-muted-foreground">Registered users</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Active Users</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{users.filter(u => u.is_active).length}</div>
-            <p className="text-xs text-muted-foreground">Currently active</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Admins</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{users.filter(u => u.role === 'admin').length}</div>
-            <p className="text-xs text-muted-foreground">Administrator accounts</p>
-          </CardContent>
-        </Card>
+      {filteredUsers.length === 0 && (
+        <div className="text-center py-8">
+          <Users className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+          <p className="text-muted-foreground">
+            {searchTerm
+              ? 'No users found matching your search.'
+              : 'No users found'}
+          </p>
         </div>
+      )}
     </div>
-  )
+  );
 }

src/pages/DashboardPage.tsx

@@ -1,120 +1,409 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
+import { useState, useEffect } from 'react'
 import { useAuth } from '@/hooks/use-auth'
-import { Link } from 'react-router'
+import { useDashboardStats, type TimePeriod } from '@/hooks/use-dashboard-stats'
+import { formatSizeObject } from '@/lib/format-size'
+import NumberFlow from '@number-flow/react'
+import { Volume2, Music, List, HardDrive, Users } from 'lucide-react'
+import { useTheme } from '@/hooks/use-theme'
+
+const PERIOD_OPTIONS = [
+  { value: 'today' as TimePeriod, label: 'Today' },
+  { value: 'week' as TimePeriod, label: 'This Week' },
+  { value: 'month' as TimePeriod, label: 'This Month' },
+  { value: 'year' as TimePeriod, label: 'This Year' },
+  { value: 'all' as TimePeriod, label: 'All Time' },
+]
+
+const LIMIT_OPTIONS = [
+  { value: 5, label: 'Top 5' },
+  { value: 10, label: 'Top 10' },
+  { value: 20, label: 'Top 20' },
+  { value: 50, label: 'Top 50' },
+]
+
+// Theme-aware color schemes
+const lightModeColors = {
+  sounds: {
+    gradient: 'from-blue-300/10 to-blue-600/20',
+    border: 'border-blue-200/50',
+    iconBg: 'from-blue-500 to-blue-600',
+    textGradient: 'from-blue-600 to-blue-700',
+    text: 'text-blue-600',
+    textMuted: 'text-blue-600/70',
+    itemBg: 'from-blue-50/50 to-indigo-50/50',
+    itemBorder: 'border-blue-100/50',
+    itemHover: 'hover:from-blue-50 hover:to-indigo-50',
+  },
+  tracks: {
+    gradient: 'from-green-500/10 to-green-600/20',
+    border: 'border-green-200/50',
+    iconBg: 'from-green-500 to-green-600',
+    textGradient: 'from-green-600 to-green-700',
+    text: 'text-green-600',
+    textMuted: 'text-green-500/70',
+    itemBg: 'from-green-50/50 to-emerald-50/50',
+    itemBorder: 'border-green-100/50',
+    itemHover: 'hover:from-green-50 hover:to-emerald-50',
+  },
+  playlists: {
+    gradient: 'from-purple-500/10 to-purple-600/20',
+    border: 'border-purple-200/50',
+    iconBg: 'from-purple-500 to-purple-600',
+    textGradient: 'from-purple-600 to-purple-700',
+    text: 'text-purple-600',
+    textMuted: 'text-purple-600/70',
+    itemBg: 'from-purple-50/50 to-pink-50/50',
+    itemBorder: 'border-purple-100/50',
+    itemHover: 'hover:from-purple-50 hover:to-pink-50',
+  },
+  storage: {
+    gradient: 'from-orange-500/10 to-orange-600/20',
+    border: 'border-orange-200/50',
+    iconBg: 'from-orange-500 to-orange-600',
+    textGradient: 'from-orange-600 to-orange-700',
+    text: 'text-orange-600',
+    textMuted: 'text-orange-600/70',
+    itemBg: 'from-orange-50/50 to-red-50/50',
+    itemBorder: 'border-orange-100/50',
+    itemHover: 'hover:from-orange-50 hover:to-red-50',
+  },
+}
+
+const darkModeColors = {
+  sounds: {
+    gradient: 'from-blue-800/20 to-blue-900/30',
+    border: 'border-blue-700/50',
+    iconBg: 'from-blue-600 to-blue-700',
+    textGradient: 'from-blue-400 to-blue-300',
+    text: 'text-blue-400',
+    textMuted: 'text-blue-400/70',
+    itemBg: 'from-blue-900/20 to-indigo-900/20',
+    itemBorder: 'border-blue-700/30',
+    itemHover: 'hover:from-blue-900/30 hover:to-indigo-900/30',
+  },
+  tracks: {
+    gradient: 'from-green-800/20 to-green-900/30',
+    border: 'border-green-700/50',
+    iconBg: 'from-green-600 to-green-700',
+    textGradient: 'from-green-400 to-green-300',
+    text: 'text-green-400',
+    textMuted: 'text-green-400/70',
+    itemBg: 'from-green-900/20 to-emerald-900/20',
+    itemBorder: 'border-green-700/30',
+    itemHover: 'hover:from-green-900/30 hover:to-emerald-900/30',
+  },
+  playlists: {
+    gradient: 'from-purple-800/20 to-purple-900/30',
+    border: 'border-purple-700/50',
+    iconBg: 'from-purple-600 to-purple-700',
+    textGradient: 'from-purple-400 to-purple-300',
+    text: 'text-purple-400',
+    textMuted: 'text-purple-400/70',
+    itemBg: 'from-purple-900/20 to-pink-900/20',
+    itemBorder: 'border-purple-700/30',
+    itemHover: 'hover:from-purple-900/30 hover:to-pink-900/30',
+  },
+  storage: {
+    gradient: 'from-orange-800/20 to-orange-900/30',
+    border: 'border-orange-700/50',
+    iconBg: 'from-orange-600 to-orange-700',
+    textGradient: 'from-orange-400 to-orange-300',
+    text: 'text-orange-400',
+    textMuted: 'text-orange-400/70',
+    itemBg: 'from-orange-900/20 to-red-900/20',
+    itemBorder: 'border-orange-700/30',
+    itemHover: 'hover:from-orange-900/30 hover:to-red-900/30',
+  },
+}
 
 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, refresh } = useDashboardStats(selectedPeriod, selectedLimit)
+  const { theme } = useTheme()
+
+  // Theme-aware color selection
+  const colors = theme === 'dark' ? darkModeColors : lightModeColors
+
+  // 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">
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {/* User Profile Card */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Profile Information</CardTitle>
-            <CardDescription>Your account details</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="flex items-center space-x-2">
-              {user.picture && (
-                <img
-                  src={user.picture}
-                  alt="Profile"
-                  className="w-8 h-8 rounded-full"
-                />
+      {!stats && loading && (
+        <div className="text-center py-8">
+          <div className="text-muted-foreground">Loading statistics...</div>
+        </div>
       )}
-              <div>
-                <p className="font-medium">{user.name}</p>
-                <p className="text-sm text-muted-foreground">{user.email}</p>
-              </div>
-            </div>
-            <div className="pt-2">
-              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                user.role === 'admin' 
-                  ? 'bg-purple-100 text-purple-800' 
-                  : 'bg-green-100 text-green-800'
-              }`}>
-                {user.role}
-              </span>
-              {user.is_active && (
-                <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                  Active
-                </span>
-              )}
-            </div>
-          </CardContent>
-        </Card>
 
-        {/* Authentication Methods Card */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Authentication Methods</CardTitle>
-            <CardDescription>How you can sign in</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              {user.providers.map((provider) => (
-                <div key={provider} className="flex items-center justify-between">
-                  <span className="text-sm font-medium capitalize">{provider}</span>
-                  <span className="text-xs text-green-600">Connected</span>
+      {error && (
+        <div className="text-center py-8">
+          <div className="text-red-500">Error: {error}</div>
+        </div>
+      )}
+
+      {stats && (
+        <>
+          {/* Statistics Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className={`bg-gradient-to-br ${colors.sounds.gradient} border ${colors.sounds.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <Volume2 className={`h-8 w-8 ${colors.sounds.text}`} />
+              </div>
+              <div className="text-center">
+                <div className={`text-3xl font-bold ${colors.sounds.text} mb-2`}>
+                  <NumberFlow value={stats.soundboard_sounds} />
+                </div>
+                <div className={`text-sm ${colors.sounds.textMuted} font-medium`}>
+                  Sounds
+                </div>
+              </div>
+            </div>
+
+            <div className={`bg-gradient-to-br ${colors.tracks.gradient} border ${colors.tracks.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <Music className={`h-8 w-8 ${colors.tracks.text}`} />
+              </div>
+              <div className="text-center">
+                <div className={`text-3xl font-bold ${colors.tracks.text} mb-2`}>
+                  <NumberFlow value={stats.tracks} />
+                </div>
+                <div className={`text-sm ${colors.tracks.textMuted} font-medium`}>
+                  Tracks
+                </div>
+              </div>
+            </div>
+
+            <div className={`bg-gradient-to-br ${colors.playlists.gradient} border ${colors.playlists.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <List className={`h-8 w-8 ${colors.playlists.text}`} />
+              </div>
+              <div className="text-center">
+                <div className={`text-3xl font-bold ${colors.playlists.text} mb-2`}>
+                  <NumberFlow value={stats.playlists} />
+                </div>
+                <div className={`text-sm ${colors.playlists.textMuted} font-medium`}>
+                  Playlists
+                </div>
+              </div>
+            </div>
+
+            <div className={`bg-gradient-to-br ${colors.storage.gradient} border ${colors.storage.border} rounded-lg p-6 relative overflow-hidden`}>
+              <div className={`absolute top-2 right-2 opacity-20`}>
+                <HardDrive className={`h-8 w-8 ${colors.storage.text}`} />
+              </div>
+              <div className="text-center">
+                <div className={`text-3xl font-bold ${colors.storage.text} mb-2`}>
+                  {(() => {
+                    const sizeObj = formatSizeObject(stats.total_size, true)
+                    return (
+                      <>
+                        <NumberFlow value={sizeObj.value} /> {sizeObj.unit}
+                      </>
+                    )
+                  })()}
+                </div>
+                <div className={`text-sm ${colors.storage.textMuted} font-medium`}>
+                  Total Size
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Period and Limit Selectors */}
+          <div className="flex justify-end gap-4">
+            <select
+              value={selectedLimit}
+              onChange={(e) => setSelectedLimit(parseInt(e.target.value))}
+              className="px-3 py-2 border rounded-md bg-background text-foreground"
+            >
+              {LIMIT_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+            <select
+              value={selectedPeriod}
+              onChange={(e) => setSelectedPeriod(e.target.value as TimePeriod)}
+              className="px-3 py-2 border rounded-md bg-background text-foreground"
+            >
+              {PERIOD_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Top Content Grid */}
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+            {/* Top Sounds Section */}
+            <div className="bg-card border rounded-lg p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className={`w-10 h-10 bg-gradient-to-br ${colors.sounds.iconBg} rounded-lg flex items-center justify-center`}>
+                  <Volume2 className="h-5 w-5 text-white" />
+                </div>
+                <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.sounds.textGradient} bg-clip-text text-transparent`}>
+                  Sounds
+                </h2>
+              </div>
+
+              {topSounds && topSounds.sounds.length > 0 ? (
+                <div className="space-y-3">
+                  {topSounds.sounds.map((sound, index) => (
+                    <div
+                      key={sound.id}
+                      className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.sounds.itemBg} border ${colors.sounds.itemBorder} rounded-lg ${colors.sounds.itemHover} transition-colors`}
+                    >
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
+                          index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
+                          index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
+                          index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
+                          'bg-gradient-to-br from-blue-400 to-blue-500'
+                        }`}>
+                          {index + 1}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium truncate">{sound.name}</div>
+                          <div className="text-sm text-muted-foreground truncate">
+                            {sound.filename}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className={`font-semibold ${colors.sounds.text}`}><NumberFlow value={sound.play_count} /></div>
+                        <div className={`text-sm ${colors.sounds.textMuted}`}>
+                          {sound.play_count === 1 ? 'play' : 'plays'}
+                        </div>
+                      </div>
                     </div>
                   ))}
                 </div>
-          </CardContent>
-        </Card>
-
-        {/* Quick Actions Card */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Quick Actions</CardTitle>
-            <CardDescription>Common tasks and shortcuts</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <Link to="/settings">
-              <Button variant="outline" className="w-full justify-start">
-                Update Settings
-              </Button>
-            </Link>
-            <Link to="/activity">
-              <Button variant="outline" className="w-full justify-start">
-                View Activity
-              </Button>
-            </Link>
-            {user.role === 'admin' && (
-              <Link to="/admin/users">
-                <Button variant="outline" className="w-full justify-start">
-                  Manage Users
-                </Button>
-              </Link>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  No sounds played {selectedPeriod === 'all' ? 'yet' : `in the selected period`}
+                </div>
               )}
-          </CardContent>
-        </Card>
             </div>
 
-      {/* Admin Section */}
-      {user.role === 'admin' && (
-        <Card>
-          <CardHeader>
-            <CardTitle>Admin Panel</CardTitle>
-            <CardDescription>Administrative functions and system overview</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground mb-4">
-              You have administrator privileges. You can manage users and system settings.
-            </p>
-            <div className="flex gap-2">
-              <Link to="/admin/users">
-                <Button size="sm">Manage Users</Button>
-              </Link>
-              <Link to="/settings">
-                <Button size="sm" variant="outline">System Settings</Button>
-              </Link>
+            {/* Top Tracks Section */}
+            <div className="bg-card border rounded-lg p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className={`w-10 h-10 bg-gradient-to-br ${colors.tracks.iconBg} rounded-lg flex items-center justify-center`}>
+                  <Music className="h-5 w-5 text-white" />
                 </div>
-          </CardContent>
-        </Card>
+                <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.tracks.textGradient} bg-clip-text text-transparent`}>
+                  Tracks
+                </h2>
+              </div>
+
+              {topTracks && topTracks.tracks.length > 0 ? (
+                <div className="space-y-3">
+                  {topTracks.tracks.map((track, index) => (
+                    <div
+                      key={track.id}
+                      className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.tracks.itemBg} border ${colors.tracks.itemBorder} rounded-lg ${colors.tracks.itemHover} transition-colors`}
+                    >
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
+                          index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
+                          index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
+                          index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
+                          'bg-gradient-to-br from-green-400 to-green-500'
+                        }`}>
+                          {index + 1}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="font-medium truncate">{track.name}</div>
+                          <div className="text-sm text-muted-foreground truncate">
+                            {track.filename}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className={`font-semibold ${colors.tracks.text}`}><NumberFlow value={track.play_count} /></div>
+                        <div className={`text-sm ${colors.tracks.textMuted}`}>
+                          {track.play_count === 1 ? 'play' : 'plays'}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  No tracks played {selectedPeriod === 'all' ? 'yet' : `in the selected period`}
+                </div>
+              )}
+            </div>
+
+            {/* Top Users Section */}
+            <div className="bg-card border rounded-lg p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className={`w-10 h-10 bg-gradient-to-br ${colors.playlists.iconBg} rounded-lg flex items-center justify-center`}>
+                  <Users className="h-5 w-5 text-white" />
+                </div>
+                <h2 className={`text-xl font-semibold bg-gradient-to-r ${colors.playlists.textGradient} bg-clip-text text-transparent`}>
+                  Users
+                </h2>
+              </div>
+
+              {topUsers && topUsers.users.length > 0 ? (
+                <div className="space-y-3">
+                  {topUsers.users.map((user, index) => (
+                    <div
+                      key={user.id}
+                      className={`flex items-center justify-between p-3 bg-gradient-to-r ${colors.playlists.itemBg} border ${colors.playlists.itemBorder} rounded-lg ${colors.playlists.itemHover} transition-colors`}
+                    >
+                      <div className="flex items-center space-x-3 min-w-0 flex-1">
+                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white shrink-0 ${
+                          index === 0 ? 'bg-gradient-to-br from-yellow-400 to-yellow-500' :
+                          index === 1 ? 'bg-gradient-to-br from-gray-400 to-gray-500' :
+                          index === 2 ? 'bg-gradient-to-br from-orange-400 to-orange-500' :
+                          'bg-gradient-to-br from-purple-400 to-purple-500'
+                        }`}>
+                          {index + 1}
+                        </div>
+                        <div className="flex items-center space-x-2 min-w-0 flex-1">
+                          {user.picture && (
+                            <img
+                              src={user.picture}
+                              alt={user.name}
+                              className="w-8 h-8 rounded-full border-2 border-white shadow-sm shrink-0"
+                            />
+                          )}
+                          <div className="min-w-0 flex-1">
+                            <div className="font-medium truncate">{user.name}</div>
+                            <div className="text-sm text-muted-foreground truncate">
+                              {user.email}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className={`font-semibold ${colors.playlists.text}`}><NumberFlow value={user.play_count} /></div>
+                        <div className={`text-sm ${colors.playlists.textMuted}`}>
+                          {user.play_count === 1 ? 'play' : 'plays'}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  No users played sounds {selectedPeriod === 'all' ? 'yet' : `in the selected period`}
+                </div>
+              )}
+            </div>
+          </div>
+        </>
       )}
     </div>
   )

src/pages/SoundboardPage.tsx

@@ -1,158 +1,220 @@
-import React, { useState, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Play, Square, Volume2, Plus } from 'lucide-react';
-import { toast } from 'sonner';
-import { apiService } from '@/services/api';
-import { AddUrlDialog } from '@/components/AddUrlDialog';
-import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts';
+import { AddUrlDialog } from '@/components/AddUrlDialog'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+// import { useSocket } from '@/contexts/SocketContext'
+import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts'
+import { useTheme } from '@/hooks/use-theme'
+import { formatDuration } from '@/lib/format-duration'
+import { formatSize } from '@/lib/format-size'
+import { cn } from '@/lib/utils'
+import { apiService } from '@/services/api'
+import NumberFlow from '@number-flow/react'
+import { Clock, Play, Plus, Square, Weight } from 'lucide-react'
+import React, { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+const lightModeColors = [
+  'bg-red-600/30 hover:bg-red-600/40 text-red-900 border-red-600/20',
+  'bg-blue-700/30 hover:bg-blue-700/40 text-blue-900 border-blue-700/20',
+  'bg-yellow-400/30 hover:bg-yellow-400/40 text-yellow-800 border-yellow-400/20',
+  'bg-purple-700/30 hover:bg-purple-700/40 text-purple-900 border-purple-700/20',
+  'bg-green-600/30 hover:bg-green-600/40 text-green-900 border-green-600/20',
+  'bg-pink-500/30 hover:bg-pink-500/40 text-pink-900 border-pink-500/20',
+  'bg-cyan-500/30 hover:bg-cyan-500/40 text-cyan-900 border-cyan-500/20',
+  'bg-amber-500/30 hover:bg-amber-500/40 text-amber-900 border-amber-500/20',
+  'bg-indigo-800/30 hover:bg-indigo-800/40 text-indigo-900 border-indigo-800/20',
+  'bg-lime-500/30 hover:bg-lime-500/40 text-lime-900 border-lime-500/20',
+  'bg-fuchsia-600/30 hover:bg-fuchsia-600/40 text-fuchsia-900 border-fuchsia-600/20',
+  'bg-orange-600/30 hover:bg-orange-600/40 text-orange-900 border-orange-600/20',
+]
+
+const darkModeColors = [
+  'bg-red-700/40 hover:bg-red-700/50 text-red-100 border border-red-500/50',
+  'bg-blue-800/40 hover:bg-blue-800/50 text-blue-100 border border-blue-600/50',
+  'bg-yellow-600/40 hover:bg-yellow-600/50 text-yellow-100 border border-yellow-400/50',
+  'bg-purple-800/40 hover:bg-purple-800/50 text-purple-100 border border-purple-600/50',
+  'bg-green-700/40 hover:bg-green-700/50 text-green-100 border border-green-500/50',
+  'bg-pink-700/40 hover:bg-pink-700/50 text-pink-100 border border-pink-500/50',
+  'bg-cyan-700/40 hover:bg-cyan-700/50 text-cyan-100 border border-cyan-500/50',
+  'bg-amber-700/40 hover:bg-amber-700/50 text-amber-100 border border-amber-500/50',
+  'bg-indigo-900/40 hover:bg-indigo-900/50 text-indigo-100 border border-indigo-700/50',
+  'bg-lime-700/40 hover:bg-lime-700/50 text-lime-100 border border-lime-500/50',
+  'bg-fuchsia-800/40 hover:bg-fuchsia-800/50 text-fuchsia-100 border border-fuchsia-600/50',
+  'bg-orange-700/40 hover:bg-orange-700/50 text-orange-100 border border-orange-500/50',
+]
 
 interface Sound {
-  id: number;
-  name: string;
-  filename: string;
-  type: string;
-  duration: number;
-  play_count: number;
-  is_normalized: boolean;
-  normalized_filename?: string;
+  id: number
+  name: string
+  filename: string
+  type: string
+  duration: number
+  size: number
+  play_count: number
+  is_normalized: boolean
+  normalized_filename?: string
 }
 
 interface SoundCardProps {
-  sound: Sound;
-  onPlay: (soundId: number) => void;
-  isPlaying: boolean;
+  sound: Sound
+  onPlay: (soundId: number) => void
+  colorClasses: string
 }
 
-const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, isPlaying }) => {
+const SoundCard: React.FC<SoundCardProps> = ({
+  sound,
+  onPlay,
+  colorClasses,
+}) => {
   const handlePlay = () => {
-    onPlay(sound.id);
-  };
-
-  const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  };
+    onPlay(sound.id)
+  }
 
   return (
-    <Card className="transition-all duration-200 hover:shadow-lg cursor-pointer group">
-      <CardHeader className="pb-3">
-        <CardTitle className="text-sm font-medium truncate" title={sound.name}>
-          {sound.name}
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="pt-0">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Volume2 size={12} />
+    <Card
+      onClick={handlePlay}
+      className={cn(
+        'py-2 transition-all duration-100 shadow-sm cursor-pointer active:scale-95',
+        colorClasses,
+      )}
+    >
+      <CardContent className="grid grid-cols-1 pl-3 pr-3 gap-1">
+        <h3 className="font-medium text-s truncate">{sound.name}</h3>
+        <div className="grid grid-cols-3 gap-1 text-xs text-muted-foreground">
+          <div className="flex">
+            <Clock className="h-3.5 w-3.5 mr-0.5" />
             <span>{formatDuration(sound.duration)}</span>
           </div>
-          <div className="text-xs text-muted-foreground">
-            {sound.play_count} plays
+          <div className="flex justify-center">
+            <Weight className="h-3.5 w-3.5 mr-0.5" />
+            <span>{formatSize(sound.size)}</span>
+          </div>
+          <div className="flex justify-end items-center">
+            <Play className="h-3.5 w-3.5 mr-0.5" />
+            <NumberFlow value={sound.play_count} />
           </div>
         </div>
-        <Button
-          onClick={handlePlay}
-          className="w-full"
-          variant={isPlaying ? "secondary" : "default"}
-          size="sm"
-        >
-          <Play size={16} className="mr-2" />
-          {isPlaying ? 'Playing...' : 'Play'}
-        </Button>
-        {sound.is_normalized && (
-          <div className="mt-2 text-xs text-green-600 text-center">
-            Normalized
-          </div>
-        )}
       </CardContent>
     </Card>
-  );
-};
+  )
+}
 
 export function SoundboardPage() {
-  const [sounds, setSounds] = useState<Sound[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [playingSound, setPlayingSound] = useState<number | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [addUrlDialogOpen, setAddUrlDialogOpen] = useState(false);
+  const [sounds, setSounds] = useState<Sound[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [addUrlDialogOpen, setAddUrlDialogOpen] = useState(false)
+  const [currentColors, setCurrentColors] = useState<string[]>(lightModeColors)
+  // const { socket, isConnected } = useSocket()
 
   // Setup keyboard shortcut for CTRL+U
-  useAddUrlShortcut(() => setAddUrlDialogOpen(true));
+  useAddUrlShortcut(() => setAddUrlDialogOpen(true))
 
   useEffect(() => {
-    fetchSounds();
+    fetchSounds()
+  }, [])
+
+  // Listen for sound_play_count_changed events from socket
+  useEffect(() => {
+    const handleSoundPlayCountChanged = (event: CustomEvent) => {
+      const { sound_id, play_count } = event.detail;
+      
+      // Update the sound in the local state
+      setSounds(prevSounds => 
+        prevSounds.map(sound => 
+          sound.id === sound_id 
+            ? { ...sound, play_count }
+            : sound
+        )
+      );
+    };
+
+    // Listen for the custom event
+    window.addEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
+    };
   }, []);
 
+  const { theme } = useTheme()
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setCurrentColors(darkModeColors)
+    } else {
+      setCurrentColors(lightModeColors)
+    }
+  }, [theme])
+
+  const getSoundColor = (soundIdx: number) => {
+    const index = soundIdx % currentColors.length
+    return currentColors[index]
+  }
+
   const fetchSounds = async () => {
     try {
-      setLoading(true);
-      const response = await apiService.get('/api/soundboard/sounds?type=SDB');
-      const data = await response.json();
-      setSounds(data.sounds || []);
-    } catch (err) {
-      setError('Failed to load sounds');
-      toast.error('Failed to load sounds');
-      console.error('Error fetching sounds:', err);
+      setLoading(true)
+      const response = await apiService.get('/api/soundboard/sounds?type=SDB')
+      const data = await response.json()
+      setSounds(data.sounds || [])
+    } catch {
+      setError('Failed to load sounds')
+      toast.error('Failed to load sounds')
     } finally {
-      setLoading(false);
+      setLoading(false)
+    }
   }
-  };
 
   const handlePlaySound = async (soundId: number) => {
     try {
-      setPlayingSound(soundId);
-      await apiService.post(`/api/soundboard/sounds/${soundId}/play`);
+      // // Try socket.io first if connected
+      // if (socket && isConnected) {
+      //   socket.emit('play_sound', { soundId })
+      //   return
+      // }
       
-      // Reset playing state after a short delay
-      setTimeout(() => {
-        setPlayingSound(null);
-      }, 1000);
-    } catch (err) {
-      setError('Failed to play sound');
-      toast.error('Failed to play sound');
-      console.error('Error playing sound:', err);
-      setPlayingSound(null);
+      // Fallback to API request
+      await apiService.post(`/api/soundboard/sounds/${soundId}/play`)
+    } catch {
+      setError('Failed to play sound')
+      toast.error('Failed to play sound')
+    }
   }
-  };
 
   const handleStopAll = async () => {
     try {
-      await apiService.post('/api/soundboard/stop-all');
-      setPlayingSound(null);
-      toast.success('All sounds stopped');
-    } catch (err) {
-      setError('Failed to stop sounds');
-      toast.error('Failed to stop sounds');
-      console.error('Error stopping sounds:', err);
+      await apiService.post('/api/soundboard/stop-all')
+      toast.success('All sounds stopped')
+    } catch {
+      setError('Failed to stop sounds')
+      toast.error('Failed to stop sounds')
+    }
   }
-  };
 
   const handleForceStopAll = async () => {
     try {
-      const response = await apiService.post('/api/soundboard/force-stop');
-      const data = await response.json();
-      setPlayingSound(null);
-      toast.success(`Force stopped ${data.stopped_count} sound instances`);
-    } catch (err) {
-      setError('Failed to force stop sounds');
-      toast.error('Failed to force stop sounds');
-      console.error('Error force stopping sounds:', err);
+      const response = await apiService.post('/api/soundboard/force-stop')
+      const data = await response.json()
+      toast.success(`Force stopped ${data.stopped_count} sound instances`)
+    } catch {
+      setError('Failed to force stop sounds')
+      toast.error('Failed to force stop sounds')
+    }
   }
-  };
 
   const filteredSounds = sounds.filter(sound =>
-    sound.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+    sound.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
 
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
         <div className="text-lg">Loading sounds...</div>
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -160,13 +222,12 @@ export function SoundboardPage() {
       <div className="flex justify-center items-center h-64">
         <div className="text-lg text-red-500">{error}</div>
       </div>
-    );
+    )
   }
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Soundboard</h1>
+      <div className="flex items-center">
         <div className="flex gap-2">
           <Button
             onClick={() => setAddUrlDialogOpen(true)}
@@ -181,7 +242,12 @@ export function SoundboardPage() {
             <Square size={16} className="mr-2" />
             Stop All
           </Button>
-          <Button onClick={handleForceStopAll} variant="outline" size="sm" className="text-red-600">
+          <Button
+            onClick={handleForceStopAll}
+            variant="outline"
+            size="sm"
+            className="text-red-600"
+          >
             <Square size={16} className="mr-2" />
             Force Stop
           </Button>
@@ -194,7 +260,7 @@ export function SoundboardPage() {
             type="text"
             placeholder="Search sounds..."
             value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
+            onChange={e => setSearchTerm(e.target.value)}
             className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
@@ -203,13 +269,13 @@ export function SoundboardPage() {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
-        {filteredSounds.map((sound) => (
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
+        {filteredSounds.map((sound, idx) => (
           <SoundCard
             key={sound.id}
             sound={sound}
             onPlay={handlePlaySound}
-            isPlaying={playingSound === sound.id}
+            colorClasses={getSoundColor(idx)}
           />
         ))}
       </div>
@@ -217,7 +283,9 @@ export function SoundboardPage() {
       {filteredSounds.length === 0 && (
         <div className="text-center py-12">
           <div className="text-lg text-muted-foreground">
-            {searchTerm ? 'No sounds found matching your search.' : 'No sounds available.'}
+            {searchTerm
+              ? 'No sounds found matching your search.'
+              : 'No sounds available.'}
           </div>
         </div>
       )}
@@ -228,5 +296,5 @@ export function SoundboardPage() {
         onOpenChange={setAddUrlDialogOpen}
       />
     </div>
-  );
+  )
 }