feat: enhance ActivityPage with tab navigation for recent activity, user stats, and popular sounds

src/pages/ActivityPage.tsx

@@ -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">
+      {/* 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>Recent Actions</CardTitle>
-            <CardDescription>Your recent activity</CardDescription>
+            <CardTitle className="flex items-center gap-2">
+              <Clock className="w-5 h-5" />
+              Recent Activity
+            </CardTitle>
           </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 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="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 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>
-            <CardTitle>System Events</CardTitle>
-            <CardDescription>System-wide activity</CardDescription>
+            <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="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>
+              <div className="text-2xl font-bold">{myStats.unique_sounds}</div>
             </CardContent>
           </Card>
 
+          {myStats.favorite_sound && (
             <Card>
-          <CardHeader>
-            <CardTitle>Statistics</CardTitle>
-            <CardDescription>Activity overview</CardDescription>
+              <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="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 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>
+  );
 }