fix: adjust gap spacing in SoundboardPage layout for improved responsiveness

src/App.tsx

@@ -5,6 +5,7 @@ import { MusicPlayerProvider } from '@/contexts/MusicPlayerContext'
 import { SocketProvider } from '@/contexts/SocketContext'
 import { AccountPage } from '@/pages/AccountPage'
 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'
@@ -78,6 +79,19 @@ 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="/"

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, 
@@ -18,7 +24,10 @@ import {
   Maximize2,
   Minimize2,
   Minus,
-  ArrowRightToLine
+  ArrowRightToLine,
+  ExternalLink,
+  Download,
+  Globe
 } from 'lucide-react'
 import { formatDuration } from '@/lib/format-duration'
 
@@ -57,6 +66,23 @@ export function MusicPlayer() {
     return null
   }
 
+  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>) => {
     const newVolume = parseFloat(e.target.value)
     setVolume(newVolume)
@@ -123,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
@@ -154,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}
@@ -296,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>
             )}

src/components/sidebar/AppSidebar.tsx

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

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/contexts/MusicPlayerContext.tsx

@@ -8,7 +8,8 @@ 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' | 'single'

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/lib/format-size.ts

@@ -4,19 +4,28 @@
 const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB']
 
 /**
- * Converts a file size in bytes to a human-readable string
- * @param bytes File size in bytes
- * @returns Formatted file size string (e.g., "1.5 MB")
+ * Interface for file size
  */
-export function formatSize(bytes: number, binary: boolean = false): string {
+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 `0 B`
+    return { value: 0, unit: 'B' }
   }
 
   // If the size is 0, return early
   if (bytes === 0) {
-    return `0 B`
+    return { value: 0, unit: 'B' }
   }
 
   // Otherwise, determine the appropriate unit based on the size
@@ -28,5 +37,29 @@ export function formatSize(bytes: number, binary: boolean = false): string {
   // Make sure we don't exceed our units array
   const safeUnitIndex = Math.min(unitIndex, FILE_SIZE_UNITS.length - 1)
 
-  return `${value.toFixed(2)} ${FILE_SIZE_UNITS[safeUnitIndex]}`
+  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/AdminUsersPage.tsx

@@ -0,0 +1,415 @@
+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 [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
+  });
+
+  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);
+    }
+  };
+
+  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-64">
+        <RefreshCw className="w-6 h-6 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <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>
+              <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="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>
+                  <p className="text-sm text-muted-foreground">Credits</p>
+                  <p className="font-medium">{user.credits}</p>
+                </div>
+                <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">
+                <Sheet>
+                  <SheetTrigger asChild>
+                    <Button 
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => handleEditUser(user)}
+                    >
+                      <Edit className="w-4 h-4 mr-2" />
+                      Edit
+                    </Button>
+                  </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"
+                              >
+                                {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>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {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,11 +1,410 @@
+import { useState, useEffect } from 'react'
 import { useAuth } from '@/hooks/use-auth'
+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></div>
+    <div className="space-y-6">
+      {!stats && loading && (
+        <div className="text-center py-8">
+          <div className="text-muted-foreground">Loading statistics...</div>
+        </div>
+      )}
+
+      {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>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  No sounds played {selectedPeriod === 'all' ? 'yet' : `in the selected period`}
+                </div>
+              )}
+            </div>
+
+            {/* 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>
+                <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

@@ -269,7 +269,7 @@ 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-3">
+      <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}