刪除不必要檔案

components/admin/dashboard.tsx

@@ -3,25 +3,95 @@ import { useCompetition } from "@/contexts/competition-context"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Users, Bot, Trophy, TrendingUp, Eye, Heart, MessageSquare, Award, Activity } from "lucide-react"
+import { Users, Bot, Trophy, TrendingUp, Eye, Heart, MessageSquare, Award, Activity, Loader2 } from "lucide-react"
+import { useState, useEffect } from "react"
 
-// Dashboard data - empty for production
-const mockStats = {
-  totalUsers: 0,
-  activeUsers: 0,
-  totalApps: 0,
-  totalCompetitions: 0,
-  totalReviews: 0,
-  totalViews: 0,
-  totalLikes: 0,
+interface DashboardStats {
+  totalUsers: number
+  activeUsers: number
+  totalApps: number
+  totalCompetitions: number
+  totalReviews: number
+  totalViews: number
+  totalLikes: number
+  newAppsThisMonth: number
+  activeCompetitions: number
+  growthRate: number
 }
 
-const recentActivities: any[] = []
+interface RecentActivity {
+  id: string
+  type: string
+  message: string
+  time: string
+  icon: string
+  color: string
+}
 
-const topApps: any[] = []
+interface TopApp {
+  id: string
+  name: string
+  description: string
+  views: number
+  likes: number
+  rating: number
+  category: string
+  created_at: string
+}
 
 export function AdminDashboard() {
   const { competitions } = useCompetition()
+  const [stats, setStats] = useState<DashboardStats>({
+    totalUsers: 0,
+    activeUsers: 0,
+    totalApps: 0,
+    totalCompetitions: 0,
+    totalReviews: 0,
+    totalViews: 0,
+    totalLikes: 0,
+    newAppsThisMonth: 0,
+    activeCompetitions: 0,
+    growthRate: 0
+  })
+  const [recentActivities, setRecentActivities] = useState<RecentActivity[]>([])
+  const [topApps, setTopApps] = useState<TopApp[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    loadDashboardData()
+  }, [])
+
+  const loadDashboardData = async () => {
+    try {
+      setIsLoading(true)
+      const response = await fetch('/api/admin/dashboard')
+      const data = await response.json()
+      
+      if (data.success) {
+        setStats(data.data.stats)
+        setRecentActivities(data.data.recentActivities)
+        setTopApps(data.data.topApps)
+      }
+    } catch (error) {
+      console.error('載入儀表板數據錯誤:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const getActivityIcon = (iconName: string) => {
+    const iconMap: { [key: string]: any } = {
+      'Users': Users,
+      'Bot': Bot,
+      'Trophy': Trophy,
+      'Activity': Activity,
+      'Eye': Eye,
+      'Heart': Heart,
+      'MessageSquare': MessageSquare,
+      'Award': Award
+    }
+    return iconMap[iconName] || Activity
+  }
 
   return (
     <div className="space-y-6">
@@ -39,8 +109,17 @@ export function AdminDashboard() {
             <Users className="h-4 w-4 text-blue-600" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{mockStats.totalUsers}</div>
-            <p className="text-xs text-muted-foreground">活躍用戶 {mockStats.activeUsers} 人</p>
+            {isLoading ? (
+              <div className="flex items-center space-x-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-sm">載入中...</span>
+              </div>
+            ) : (
+              <>
+                <div className="text-2xl font-bold">{stats.totalUsers}</div>
+                <p className="text-xs text-muted-foreground">活躍用戶 {stats.activeUsers} 人</p>
+              </>
+            )}
           </CardContent>
         </Card>
 
@@ -50,8 +129,17 @@ export function AdminDashboard() {
             <Bot className="h-4 w-4 text-green-600" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{mockStats.totalApps}</div>
-            <p className="text-xs text-muted-foreground">本月新增 2 個應用</p>
+            {isLoading ? (
+              <div className="flex items-center space-x-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-sm">載入中...</span>
+              </div>
+            ) : (
+              <>
+                <div className="text-2xl font-bold">{stats.totalApps}</div>
+                <p className="text-xs text-muted-foreground">本月新增 {stats.newAppsThisMonth} 個應用</p>
+              </>
+            )}
           </CardContent>
         </Card>
 
@@ -61,8 +149,17 @@ export function AdminDashboard() {
             <Trophy className="h-4 w-4 text-purple-600" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{competitions.length}</div>
-            <p className="text-xs text-muted-foreground">1 個進行中</p>
+            {isLoading ? (
+              <div className="flex items-center space-x-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-sm">載入中...</span>
+              </div>
+            ) : (
+              <>
+                <div className="text-2xl font-bold">{stats.totalCompetitions}</div>
+                <p className="text-xs text-muted-foreground">{stats.activeCompetitions} 個進行中</p>
+              </>
+            )}
           </CardContent>
         </Card>
 
@@ -72,8 +169,19 @@ export function AdminDashboard() {
             <TrendingUp className="h-4 w-4 text-orange-600" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{mockStats.totalViews.toLocaleString()}</div>
-            <p className="text-xs text-muted-foreground">比上月增長 12%</p>
+            {isLoading ? (
+              <div className="flex items-center space-x-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-sm">載入中...</span>
+              </div>
+            ) : (
+              <>
+                <div className="text-2xl font-bold">{stats.totalViews.toLocaleString()}</div>
+                <p className="text-xs text-muted-foreground">
+                  {stats.growthRate > 0 ? `比上月增長 ${stats.growthRate}%` : '與上月持平'}
+                </p>
+              </>
+            )}
           </CardContent>
         </Card>
       </div>
@@ -89,22 +197,34 @@ export function AdminDashboard() {
             <CardDescription>系統最新動態</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="space-y-4">
-              {recentActivities.map((activity) => {
-                const IconComponent = activity.icon
-                return (
-                  <div key={activity.id} className="flex items-center space-x-3">
-                    <div className={`p-2 rounded-full bg-gray-100 ${activity.color}`}>
-                      <IconComponent className="w-4 h-4" />
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin" />
+                <span className="ml-2">載入中...</span>
+              </div>
+            ) : recentActivities.length > 0 ? (
+              <div className="space-y-4">
+                {recentActivities.map((activity) => {
+                  const IconComponent = getActivityIcon(activity.icon)
+                  return (
+                    <div key={activity.id} className="flex items-center space-x-3">
+                      <div className={`p-2 rounded-full bg-gray-100 ${activity.color}`}>
+                        <IconComponent className="w-4 h-4" />
+                      </div>
+                      <div className="flex-1">
+                        <p className="text-sm font-medium">{activity.message}</p>
+                        <p className="text-xs text-gray-500">{activity.time}</p>
+                      </div>
                     </div>
-                    <div className="flex-1">
-                      <p className="text-sm font-medium">{activity.message}</p>
-                      <p className="text-xs text-gray-500">{activity.time}</p>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500">
+                <Activity className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                <p>暫無最新活動</p>
+              </div>
+            )}
           </CardContent>
         </Card>
 
@@ -118,26 +238,42 @@ export function AdminDashboard() {
             <CardDescription>表現最佳的 AI 應用</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="space-y-4">
-              {topApps.map((app, index) => (
-                <div key={index} className="flex items-center justify-between">
-                  <div>
-                    <p className="font-medium">{app.name}</p>
-                    <div className="flex items-center space-x-4 text-sm text-gray-500">
-                      <div className="flex items-center space-x-1">
-                        <Eye className="w-3 h-3" />
-                        <span>{app.views}</span>
-                      </div>
-                      <div className="flex items-center space-x-1">
-                        <Heart className="w-3 h-3" />
-                        <span>{app.likes}</span>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin" />
+                <span className="ml-2">載入中...</span>
+              </div>
+            ) : topApps.length > 0 ? (
+              <div className="space-y-4">
+                {topApps.map((app, index) => (
+                  <div key={app.id} className="flex items-center justify-between">
+                    <div className="flex-1">
+                      <p className="font-medium">{app.name}</p>
+                      <p className="text-xs text-gray-500 mb-1">{app.description}</p>
+                      <div className="flex items-center space-x-4 text-sm text-gray-500">
+                        <div className="flex items-center space-x-1">
+                          <Eye className="w-3 h-3" />
+                          <span>{app.views}</span>
+                        </div>
+                        <div className="flex items-center space-x-1">
+                          <Heart className="w-3 h-3" />
+                          <span>{app.likes}</span>
+                        </div>
+                        <div className="text-xs text-gray-400">
+                          {app.category}
+                        </div>
                       </div>
                     </div>
+                    <Badge variant="secondary">{app.rating} ⭐</Badge>
                   </div>
-                  <Badge variant="secondary">{app.rating} ⭐</Badge>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500">
+                <Award className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                <p>暫無應用數據</p>
+              </div>
+            )}
           </CardContent>
         </Card>
       </div>