feat: enhance ActivityPage with tab navigation for recent activity, user stats, and popular sounds

src/App.tsx

@@ -5,9 +5,11 @@ import { AuthProvider } from '@/components/AuthProvider'
 import { AccountPage } from '@/pages/AccountPage'
 import { ActivityPage } from '@/pages/ActivityPage'
 import { AdminUsersPage } from '@/pages/AdminUsersPage'
+import AdminSoundsPage from '@/pages/AdminSoundsPage'
 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'
 
@@ -60,6 +62,19 @@ function App() {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/soundboard"
+              element={
+                <ProtectedRoute>
+                  <AppLayout
+                    title="Soundboard"
+                    description="Play and manage sound effects"
+                  >
+                    <SoundboardPage />
+                  </AppLayout>
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/admin/users"
               element={
@@ -74,6 +89,19 @@ function App() {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/admin/sounds"
+              element={
+                <ProtectedRoute requireAdmin>
+                  <AppLayout
+                    title="Sound Management"
+                    description="Scan and normalize sound files"
+                  >
+                    <AdminSoundsPage />
+                  </AppLayout>
+                </ProtectedRoute>
+              }
+            />
 
             <Route path="/" element={<Navigate to="/dashboard" replace />} />
             <Route path="*" element={<Navigate to="/dashboard" replace />} />

src/components/sidebar/AppSidebar.tsx

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

src/pages/ActivityPage.tsx

@@ -1,78 +1,274 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+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">
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Actions</CardTitle>
-            <CardDescription>Your recent activity</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between text-sm">
-                <span>Logged in via Google</span>
-                <span className="text-muted-foreground">2 minutes ago</span>
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <span>Updated profile</span>
-                <span className="text-muted-foreground">1 hour ago</span>
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <span>Changed settings</span>
-                <span className="text-muted-foreground">2 hours ago</span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>System Events</CardTitle>
-            <CardDescription>System-wide activity</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between text-sm">
-                <span>New user registered</span>
-                <span className="text-muted-foreground">15 minutes ago</span>
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <span>Database backup completed</span>
-                <span className="text-muted-foreground">1 hour ago</span>
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <span>System update applied</span>
-                <span className="text-muted-foreground">3 hours ago</span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Statistics</CardTitle>
-            <CardDescription>Activity overview</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between text-sm">
-                <span>Total Sessions</span>
-                <span className="font-medium">42</span>
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <span>This Week</span>
-                <span className="font-medium">12</span>
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <span>Average Duration</span>
-                <span className="font-medium">1.5h</span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+      {/* 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

@@ -0,0 +1,388 @@
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { 
+  RefreshCw, 
+  Volume2, 
+  Trash2, 
+  CheckCircle, 
+  XCircle, 
+  AlertCircle,
+  Database,
+  Zap
+} from 'lucide-react';
+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 default 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');
+      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) {
+        alert(`Scan completed: ${data.files_added} new sounds added, ${data.files_skipped} skipped`);
+        await fetchData();
+      } else {
+        setError(data.error || 'Scan failed');
+      }
+    } catch (err) {
+      setError('Failed to scan sounds');
+      console.error('Error scanning sounds:', err);
+    } finally {
+      setScanning(false);
+    }
+  };
+
+  const handleNormalizeAll = async () => {
+    try {
+      setNormalizing(true);
+      setError(null);
+      const response = await apiService.post('/api/admin/sounds/normalize', {
+        overwrite: false,
+        two_pass: true
+      });
+      const data = await response.json();
+      
+      if (response.ok) {
+        alert(`Normalization completed: ${data.successful} successful, ${data.failed} failed, ${data.skipped} skipped`);
+        await fetchData();
+      } else {
+        setError(data.error || 'Normalization failed');
+      }
+    } catch (err) {
+      setError('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) {
+        alert(`Sound normalized successfully`);
+        await fetchData();
+      } else {
+        alert(`Normalization failed: ${data.error}`);
+      }
+    } catch (err) {
+      alert('Failed to normalize sound');
+      console.error('Error normalizing sound:', err);
+    }
+  };
+
+  const handleDeleteSound = async (soundId: number, soundName: string) => {
+    if (!confirm(`Are you sure you want to delete "${soundName}"?`)) {
+      return;
+    }
+
+    try {
+      const response = await apiService.delete(`/api/admin/sounds/${soundId}`);
+      const data = await response.json();
+      
+      if (response.ok) {
+        alert('Sound deleted successfully');
+        await fetchData();
+      } else {
+        alert(`Delete failed: ${data.error}`);
+      }
+    } catch (err) {
+      alert('Failed to delete sound');
+      console.error('Error deleting sound:', err);
+    }
+  };
+
+  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 gap-2">
+          <Button 
+            onClick={handleScanSounds} 
+            disabled={scanning}
+            variant="outline"
+          >
+            {scanning ? <RefreshCw className="w-4 h-4 animate-spin mr-2" /> : <Database className="w-4 h-4 mr-2" />}
+            {scanning ? 'Scanning...' : 'Scan Sounds'}
+          </Button>
+          <Button 
+            onClick={handleNormalizeAll}
+            disabled={normalizing}
+          >
+            {normalizing ? <RefreshCw className="w-4 h-4 animate-spin mr-2" /> : <Zap className="w-4 h-4 mr-2" />}
+            {normalizing ? 'Normalizing...' : 'Normalize All'}
+          </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/SoundboardPage.tsx

@@ -0,0 +1,205 @@
+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 } from 'lucide-react';
+import { apiService } from '@/services/api';
+
+interface Sound {
+  id: number;
+  name: string;
+  filename: string;
+  type: string;
+  duration: number;
+  play_count: number;
+  is_normalized: boolean;
+  normalized_filename?: string;
+}
+
+interface SoundCardProps {
+  sound: Sound;
+  onPlay: (soundId: number) => void;
+  isPlaying: boolean;
+}
+
+const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, isPlaying }) => {
+  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')}`;
+  };
+
+  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} />
+            <span>{formatDuration(sound.duration)}</span>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {sound.play_count} plays
+          </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 default 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('');
+
+  useEffect(() => {
+    fetchSounds();
+  }, []);
+
+  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');
+      console.error('Error fetching sounds:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePlaySound = async (soundId: number) => {
+    try {
+      setPlayingSound(soundId);
+      await apiService.post(`/api/soundboard/sounds/${soundId}/play`);
+      
+      // Reset playing state after a short delay
+      setTimeout(() => {
+        setPlayingSound(null);
+      }, 1000);
+    } catch (err) {
+      setError('Failed to play sound');
+      console.error('Error playing sound:', err);
+      setPlayingSound(null);
+    }
+  };
+
+  const handleStopAll = async () => {
+    try {
+      await apiService.post('/api/soundboard/stop-all');
+      setPlayingSound(null);
+    } catch (err) {
+      setError('Failed to stop sounds');
+      console.error('Error stopping sounds:', err);
+    }
+  };
+
+  const handleForceStopAll = async () => {
+    try {
+      const response = await apiService.post('/api/soundboard/force-stop');
+      const data = await response.json();
+      setPlayingSound(null);
+      alert(`Force stopped ${data.stopped_count} sound instances`);
+    } catch (err) {
+      setError('Failed to force stop sounds');
+      console.error('Error force stopping sounds:', err);
+    }
+  };
+
+  const filteredSounds = sounds.filter(sound =>
+    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) {
+    return (
+      <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 gap-2">
+          <Button onClick={handleStopAll} variant="outline" size="sm">
+            <Square size={16} className="mr-2" />
+            Stop All
+          </Button>
+          <Button onClick={handleForceStopAll} variant="outline" size="sm" className="text-red-600">
+            <Square size={16} className="mr-2" />
+            Force Stop
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className="flex-1">
+          <input
+            type="text"
+            placeholder="Search sounds..."
+            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"
+          />
+        </div>
+        <div className="text-sm text-muted-foreground">
+          {filteredSounds.length} of {sounds.length} sounds
+        </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) => (
+          <SoundCard
+            key={sound.id}
+            sound={sound}
+            onPlay={handlePlaySound}
+            isPlaying={playingSound === sound.id}
+          />
+        ))}
+      </div>
+
+      {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.'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}