refactor: remove unused pages and components, streamline Admin and Dashboard functionality
This commit is contained in:
JSC
28
src/App.tsx
28
src/App.tsx
@@ -5,7 +5,6 @@ import { AuthProvider } from '@/components/AuthProvider'
|
||||
import { SocketProvider } from '@/contexts/SocketContext'
|
||||
import { MusicPlayerProvider } from '@/contexts/MusicPlayerContext'
|
||||
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'
|
||||
@@ -42,19 +41,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 +67,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={
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
useSidebar,
|
||||
} from '@/components/ui/sidebar'
|
||||
import { useAuth } from '@/hooks/use-auth'
|
||||
import { Activity, Home, Users, Volume2, Settings } from 'lucide-react'
|
||||
import { Home, Users, Volume2, Settings } from 'lucide-react'
|
||||
import { Link, useLocation } from 'react-router'
|
||||
import { NavUser } from './NavUser'
|
||||
import { NavPlan } from './NavPlan'
|
||||
@@ -25,19 +25,9 @@ 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',
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,89 +41,16 @@ 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">
|
||||
@@ -246,162 +73,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>
|
||||
);
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useAuth } from '@/hooks/use-auth'
|
||||
|
||||
export function AdminUsersPage() {
|
||||
const { user } = useAuth()
|
||||
|
||||
// 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'
|
||||
}
|
||||
]
|
||||
|
||||
if (user?.role !== 'admin') {
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Users</CardTitle>
|
||||
<CardDescription>All registered users in the system</CardDescription>
|
||||
</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>
|
||||
|
||||
<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">{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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant={userData.is_active ? "outline" : "default"}
|
||||
size="sm"
|
||||
>
|
||||
{userData.is_active ? 'Disable' : 'Enable'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,4 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useAuth } from '@/hooks/use-auth'
|
||||
import { Link } from 'react-router'
|
||||
|
||||
export function DashboardPage() {
|
||||
const { user } = useAuth()
|
||||
@@ -9,113 +6,6 @@ export function DashboardPage() {
|
||||
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"
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
</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>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
<div>Dashboard</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user