feat: implement DashboardPage with statistics and top content display
This commit is contained in:
JSC
96
src/hooks/use-dashboard-stats.ts
Normal file
96
src/hooks/use-dashboard-stats.ts
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
import { useState, useEffect } 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)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = 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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData()
|
||||||
|
}, [period, limit])
|
||||||
|
|
||||||
|
return { stats, topSounds, topTracks, topUsers, loading, error }
|
||||||
|
}
|
||||||
@@ -1,11 +1,247 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
import { useAuth } from '@/hooks/use-auth'
|
import { useAuth } from '@/hooks/use-auth'
|
||||||
|
import { useDashboardStats, type TimePeriod } from '@/hooks/use-dashboard-stats'
|
||||||
|
import { formatSize } from '@/lib/format-size'
|
||||||
|
|
||||||
|
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' },
|
||||||
|
]
|
||||||
|
|
||||||
export function DashboardPage() {
|
export function DashboardPage() {
|
||||||
const { user } = useAuth()
|
const { user } = useAuth()
|
||||||
|
const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>('today')
|
||||||
|
const [selectedLimit, setSelectedLimit] = useState<number>(5)
|
||||||
|
const { stats, topSounds, topTracks, topUsers, loading, error } = useDashboardStats(selectedPeriod, selectedLimit)
|
||||||
|
|
||||||
if (!user) return null
|
if (!user) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div></div>
|
<div className="space-y-6">
|
||||||
|
{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-card border rounded-lg p-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold text-primary mb-2">
|
||||||
|
{stats.soundboard_sounds}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Sounds
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-card border rounded-lg p-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold text-primary mb-2">
|
||||||
|
{stats.tracks}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Tracks
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-card border rounded-lg p-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold text-primary mb-2">
|
||||||
|
{stats.playlists}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Playlists
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-card border rounded-lg p-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl font-bold text-primary mb-2">
|
||||||
|
{formatSize(stats.total_size, true)}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
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">
|
||||||
|
<h2 className="text-xl font-semibold mb-6">Played Sounds</h2>
|
||||||
|
|
||||||
|
{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-muted/50 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center text-sm font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">{sound.name}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{sound.filename}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-semibold">{sound.play_count}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{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">
|
||||||
|
<h2 className="text-xl font-semibold mb-6">Played Tracks</h2>
|
||||||
|
|
||||||
|
{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-muted/50 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center text-sm font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">{track.name}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{track.filename}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-semibold">{track.play_count}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{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">
|
||||||
|
<h2 className="text-xl font-semibold mb-6">Users</h2>
|
||||||
|
|
||||||
|
{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-muted/50 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center text-sm font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
{user.picture && (
|
||||||
|
<img
|
||||||
|
src={user.picture}
|
||||||
|
alt={user.name}
|
||||||
|
className="w-8 h-8 rounded-full"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">{user.name}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{user.email}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-semibold">{user.play_count}</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user