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() {
|
||||
const [recentPlays, setRecentPlays] = useState<PlayRecord[]>([]);
|
||||
const [myStats, setMyStats] = useState<UserStats | null>(null);
|
||||
const [popularSounds, setPopularSounds] = useState<PopularSound[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<'recent' | 'mystats' | 'popular'>('recent');
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await Promise.all([
|
||||
fetchRecentPlays(),
|
||||
fetchMyStats(),
|
||||
fetchPopularSounds(),
|
||||
]);
|
||||
} catch (err) {
|
||||
console.error('Error fetching activity data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRecentPlays = async () => {
|
||||
try {
|
||||
const response = await apiService.get('/api/soundboard/history?per_page=20');
|
||||
const data = await response.json();
|
||||
setRecentPlays(data.plays || []);
|
||||
} catch (err) {
|
||||
console.error('Error fetching recent plays:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchMyStats = async () => {
|
||||
try {
|
||||
const response = await apiService.get('/api/soundboard/my-stats');
|
||||
const data = await response.json();
|
||||
setMyStats(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching my stats:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchPopularSounds = async () => {
|
||||
try {
|
||||
const response = await apiService.get('/api/soundboard/popular?limit=10');
|
||||
const data = await response.json();
|
||||
setPopularSounds(data.popular_sounds || []);
|
||||
} catch (err) {
|
||||
console.error('Error fetching popular sounds:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const formatRelativeTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(diff / 86400000);
|
||||
|
||||
if (minutes < 1) return 'Just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
return `${days}d ago`;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Loading activity...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Actions</CardTitle>
|
||||
<CardDescription>Your recent activity</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>Logged in via Google</span>
|
||||
<span className="text-muted-foreground">2 minutes ago</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>Updated profile</span>
|
||||
<span className="text-muted-foreground">1 hour ago</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>Changed settings</span>
|
||||
<span className="text-muted-foreground">2 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>System Events</CardTitle>
|
||||
<CardDescription>System-wide activity</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>New user registered</span>
|
||||
<span className="text-muted-foreground">15 minutes ago</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>Database backup completed</span>
|
||||
<span className="text-muted-foreground">1 hour ago</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>System update applied</span>
|
||||
<span className="text-muted-foreground">3 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Statistics</CardTitle>
|
||||
<CardDescription>Activity overview</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>Total Sessions</span>
|
||||
<span className="font-medium">42</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>This Week</span>
|
||||
<span className="font-medium">12</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span>Average Duration</span>
|
||||
<span className="font-medium">1.5h</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Tab Navigation */}
|
||||
<div className="flex space-x-4 border-b">
|
||||
<button
|
||||
onClick={() => setActiveTab('recent')}
|
||||
className={`pb-2 px-1 ${
|
||||
activeTab === 'recent'
|
||||
? 'border-b-2 border-blue-500 text-blue-600'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Recent Activity
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('mystats')}
|
||||
className={`pb-2 px-1 ${
|
||||
activeTab === 'mystats'
|
||||
? 'border-b-2 border-blue-500 text-blue-600'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
My Statistics
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('popular')}
|
||||
className={`pb-2 px-1 ${
|
||||
activeTab === 'popular'
|
||||
? 'border-b-2 border-blue-500 text-blue-600'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Popular Sounds
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity Tab */}
|
||||
{activeTab === 'recent' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5" />
|
||||
Recent Activity
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{recentPlays.map((play) => (
|
||||
<div key={play.id} className="flex items-center justify-between border-b pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Play className="w-4 h-4 text-blue-500" />
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{play.sound?.name || 'Unknown Sound'}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
by {play.user?.name || 'Unknown User'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{formatRelativeTime(play.played_at)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{recentPlays.length === 0 && (
|
||||
<div className="text-center text-muted-foreground py-8">
|
||||
No recent activity found.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* My Statistics Tab */}
|
||||
{activeTab === 'mystats' && myStats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Plays</CardTitle>
|
||||
<Play className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{myStats.total_plays}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Unique Sounds</CardTitle>
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{myStats.unique_sounds}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{myStats.favorite_sound && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Favorite Sound</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-sm font-medium">{myStats.favorite_sound.sound.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{myStats.favorite_sound.play_count} plays
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Popular Sounds Tab */}
|
||||
{activeTab === 'popular' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
Popular Sounds
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{popularSounds.map((item, index) => (
|
||||
<div key={item.sound.id} className="flex items-center justify-between border-b pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{item.sound.name}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{item.play_count} plays
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{item.last_played && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Last: {formatRelativeTime(item.last_played)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{popularSounds.length === 0 && (
|
||||
<div className="text-center text-muted-foreground py-8">
|
||||
No popular sounds found.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user