feat: enhance ActivityPage with tab navigation for recent activity, user stats, and popular sounds
This commit is contained in:
JSC
@@ -1,78 +1,274 @@
|
|||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Play, Clock, User, TrendingUp } from 'lucide-react';
|
||||||
|
import { apiService } from '@/services/api';
|
||||||
|
|
||||||
|
interface PlayRecord {
|
||||||
|
id: number;
|
||||||
|
played_at: string;
|
||||||
|
user: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
} | null;
|
||||||
|
sound: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
filename: string;
|
||||||
|
type: string;
|
||||||
|
} | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserStats {
|
||||||
|
total_plays: number;
|
||||||
|
unique_sounds: number;
|
||||||
|
favorite_sound: {
|
||||||
|
sound: any;
|
||||||
|
play_count: number;
|
||||||
|
} | null;
|
||||||
|
first_play: string | null;
|
||||||
|
last_play: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PopularSound {
|
||||||
|
sound: any;
|
||||||
|
play_count: number;
|
||||||
|
last_played: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
export function ActivityPage() {
|
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 (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
{/* Tab Navigation */}
|
||||||
<Card>
|
<div className="flex space-x-4 border-b">
|
||||||
<CardHeader>
|
<button
|
||||||
<CardTitle>Recent Actions</CardTitle>
|
onClick={() => setActiveTab('recent')}
|
||||||
<CardDescription>Your recent activity</CardDescription>
|
className={`pb-2 px-1 ${
|
||||||
</CardHeader>
|
activeTab === 'recent'
|
||||||
<CardContent>
|
? 'border-b-2 border-blue-500 text-blue-600'
|
||||||
<div className="space-y-3">
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
<div className="flex items-center justify-between text-sm">
|
}`}
|
||||||
<span>Logged in via Google</span>
|
>
|
||||||
<span className="text-muted-foreground">2 minutes ago</span>
|
Recent Activity
|
||||||
</div>
|
</button>
|
||||||
<div className="flex items-center justify-between text-sm">
|
<button
|
||||||
<span>Updated profile</span>
|
onClick={() => setActiveTab('mystats')}
|
||||||
<span className="text-muted-foreground">1 hour ago</span>
|
className={`pb-2 px-1 ${
|
||||||
</div>
|
activeTab === 'mystats'
|
||||||
<div className="flex items-center justify-between text-sm">
|
? 'border-b-2 border-blue-500 text-blue-600'
|
||||||
<span>Changed settings</span>
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
<span className="text-muted-foreground">2 hours ago</span>
|
}`}
|
||||||
</div>
|
>
|
||||||
</div>
|
My Statistics
|
||||||
</CardContent>
|
</button>
|
||||||
</Card>
|
<button
|
||||||
|
onClick={() => setActiveTab('popular')}
|
||||||
<Card>
|
className={`pb-2 px-1 ${
|
||||||
<CardHeader>
|
activeTab === 'popular'
|
||||||
<CardTitle>System Events</CardTitle>
|
? 'border-b-2 border-blue-500 text-blue-600'
|
||||||
<CardDescription>System-wide activity</CardDescription>
|
: 'text-gray-600 hover:text-gray-900'
|
||||||
</CardHeader>
|
}`}
|
||||||
<CardContent>
|
>
|
||||||
<div className="space-y-3">
|
Popular Sounds
|
||||||
<div className="flex items-center justify-between text-sm">
|
</button>
|
||||||
<span>New user registered</span>
|
|
||||||
<span className="text-muted-foreground">15 minutes ago</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span>Database backup completed</span>
|
|
||||||
<span className="text-muted-foreground">1 hour ago</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span>System update applied</span>
|
|
||||||
<span className="text-muted-foreground">3 hours ago</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Statistics</CardTitle>
|
|
||||||
<CardDescription>Activity overview</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span>Total Sessions</span>
|
|
||||||
<span className="font-medium">42</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span>This Week</span>
|
|
||||||
<span className="font-medium">12</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span>Average Duration</span>
|
|
||||||
<span className="font-medium">1.5h</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user