新增歷史履歷

app/history/page.tsx

@@ -1,95 +1,115 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Sidebar } from "@/components/sidebar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { FileText, Calendar, Search, Eye, Download, Trash2 } from "lucide-react"
+import { FileText, Calendar, Search, Eye, Download, Trash2, Loader2 } from "lucide-react"
 import Link from "next/link"
 
-// 模擬歷史記錄數據
-const mockHistory = [
-  {
-    id: "1",
-    title: "產品介紹簡報",
-    type: "PPT",
-    score: 82,
-    grade: "B+",
-    date: "2024-01-15",
-    status: "completed",
-  },
-  {
-    id: "2",
-    title: "市場分析報告",
-    type: "Website",
-    score: 76,
-    grade: "B",
-    date: "2024-01-12",
-    status: "completed",
-  },
-  {
-    id: "3",
-    title: "產品演示影片",
-    type: "Video",
-    score: 88,
-    grade: "A-",
-    date: "2024-01-10",
-    status: "completed",
-  },
-  {
-    id: "4",
-    title: "技術架構說明",
-    type: "PPT",
-    score: 0,
-    grade: "-",
-    date: "2024-01-08",
-    status: "processing",
-  },
-  {
-    id: "5",
-    title: "用戶體驗設計",
-    type: "Website",
-    score: 91,
-    grade: "A",
-    date: "2024-01-05",
-    status: "completed",
-  },
-]
+// 歷史記錄數據類型
+interface HistoryItem {
+  id: string;
+  title: string;
+  type: string;
+  score: number;
+  grade: string;
+  date: string;
+  status: 'completed' | 'processing';
+  evaluation_id?: number;
+  description?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+// 統計數據類型
+interface StatsData {
+  totalProjects: number;
+  completedProjects: number;
+  processingProjects: number;
+  averageScore: number;
+}
 
 export default function HistoryPage() {
   const [searchTerm, setSearchTerm] = useState("")
   const [filterType, setFilterType] = useState("all")
   const [filterStatus, setFilterStatus] = useState("all")
-
-  const filteredHistory = mockHistory.filter((item) => {
-    const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase())
-    const matchesType = filterType === "all" || item.type === filterType
-    const matchesStatus = filterStatus === "all" || item.status === filterStatus
-    return matchesSearch && matchesType && matchesStatus
+  const [historyData, setHistoryData] = useState<HistoryItem[]>([])
+  const [statsData, setStatsData] = useState<StatsData>({
+    totalProjects: 0,
+    completedProjects: 0,
+    processingProjects: 0,
+    averageScore: 0
   })
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // 載入歷史記錄數據
+  useEffect(() => {
+    const loadHistoryData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // 並行獲取歷史記錄和統計數據
+        const [historyResponse, statsResponse] = await Promise.all([
+          fetch('/api/history'),
+          fetch('/api/history/stats')
+        ]);
+
+        if (!historyResponse.ok || !statsResponse.ok) {
+          throw new Error('獲取數據失敗');
+        }
+
+        const historyResult = await historyResponse.json();
+        const statsResult = await statsResponse.json();
+
+        if (historyResult.success && statsResult.success) {
+          setHistoryData(historyResult.data);
+          setStatsData(statsResult.data);
+        } else {
+          throw new Error(historyResult.error || statsResult.error || '數據載入失敗');
+        }
+      } catch (err) {
+        console.error('載入歷史記錄失敗:', err);
+        setError(err instanceof Error ? err.message : '載入數據時發生錯誤');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadHistoryData();
+  }, []);
+
+  const filteredHistory = historyData.filter((item) => {
+    const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesType = filterType === "all" || item.type === filterType;
+    const matchesStatus = filterStatus === "all" || item.status === filterStatus;
+    return matchesSearch && matchesType && matchesStatus;
+  });
 
   const getGradeColor = (grade: string) => {
-    if (grade.startsWith("A")) return "bg-green-100 text-green-800"
-    if (grade.startsWith("B")) return "bg-blue-100 text-blue-800"
-    if (grade.startsWith("C")) return "bg-yellow-100 text-yellow-800"
-    return "bg-gray-100 text-gray-800"
-  }
+    if (grade.startsWith("A")) return "bg-green-100 text-green-800";
+    if (grade.startsWith("B")) return "bg-blue-100 text-blue-800";
+    if (grade.startsWith("C")) return "bg-yellow-100 text-yellow-800";
+    return "bg-gray-100 text-gray-800";
+  };
 
   const getTypeIcon = (type: string) => {
     switch (type) {
       case "PPT":
-        return <FileText className="h-4 w-4" />
+        return <FileText className="h-4 w-4" />;
       case "Video":
-        return <FileText className="h-4 w-4" />
+        return <FileText className="h-4 w-4" />;
       case "Website":
-        return <FileText className="h-4 w-4" />
+        return <FileText className="h-4 w-4" />;
       default:
-        return <FileText className="h-4 w-4" />
+        return <FileText className="h-4 w-4" />;
     }
-  }
+  };
 
   return (
     <div className="min-h-screen bg-background">
@@ -147,14 +167,14 @@ export default function HistoryPage() {
           <div className="grid md:grid-cols-4 gap-4 mb-6">
             <Card>
               <CardContent className="pt-6 text-center">
-                <div className="text-2xl font-bold text-primary mb-1">{mockHistory.length}</div>
+                <div className="text-2xl font-bold text-primary mb-1">{statsData.totalProjects}</div>
                 <div className="text-sm text-muted-foreground">總評審數</div>
               </CardContent>
             </Card>
             <Card>
               <CardContent className="pt-6 text-center">
                 <div className="text-2xl font-bold text-green-600 mb-1">
-                  {mockHistory.filter((item) => item.status === "completed").length}
+                  {statsData.completedProjects}
                 </div>
                 <div className="text-sm text-muted-foreground">已完成</div>
               </CardContent>
@@ -162,10 +182,7 @@ export default function HistoryPage() {
             <Card>
               <CardContent className="pt-6 text-center">
                 <div className="text-2xl font-bold text-blue-600 mb-1">
-                  {Math.round(
-                    mockHistory.filter((item) => item.score > 0).reduce((sum, item) => sum + item.score, 0) /
-                      mockHistory.filter((item) => item.score > 0).length,
-                  )}
+                  {statsData.averageScore}
                 </div>
                 <div className="text-sm text-muted-foreground">平均分數</div>
               </CardContent>
@@ -173,88 +190,115 @@ export default function HistoryPage() {
             <Card>
               <CardContent className="pt-6 text-center">
                 <div className="text-2xl font-bold text-yellow-600 mb-1">
-                  {mockHistory.filter((item) => item.status === "processing").length}
+                  {statsData.processingProjects}
                 </div>
                 <div className="text-sm text-muted-foreground">處理中</div>
               </CardContent>
             </Card>
           </div>
 
-          {/* History List */}
-          <div className="space-y-4">
-            {filteredHistory.map((item) => (
-              <Card key={item.id} className="hover:shadow-md transition-shadow">
-                <CardContent className="pt-6">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-4 flex-1">
-                      <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center">
-                        {getTypeIcon(item.type)}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <h3 className="font-medium truncate">{item.title}</h3>
-                        <div className="flex items-center gap-4 mt-1">
-                          <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                            <Calendar className="h-3 w-3" />
-                            {item.date}
-                          </div>
-                          <Badge variant="outline">{item.type}</Badge>
-                          <Badge variant={item.status === "completed" ? "default" : "secondary"}>
-                            {item.status === "completed" ? "已完成" : "處理中"}
-                          </Badge>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-4">
-                      {item.status === "completed" && (
-                        <div className="text-center">
-                          <div className="text-2xl font-bold text-primary">{item.score}</div>
-                          <Badge className={getGradeColor(item.grade)}>{item.grade}</Badge>
-                        </div>
-                      )}
-
-                      <div className="flex gap-2">
-                        {item.status === "completed" ? (
-                          <>
-                            <Button asChild variant="outline" size="sm">
-                              <Link href={`/results?id=${item.id}`}>
-                                <Eye className="h-4 w-4" />
-                              </Link>
-                            </Button>
-                            <Button variant="outline" size="sm">
-                              <Download className="h-4 w-4" />
-                            </Button>
-                          </>
-                        ) : (
-                          <Button variant="outline" size="sm" disabled>
-                            處理中...
-                          </Button>
-                        )}
-                        <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-
-          {filteredHistory.length === 0 && (
+          {/* Loading State */}
+          {loading && (
             <Card>
               <CardContent className="pt-6 text-center py-12">
-                <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                <h3 className="font-medium mb-2">沒有找到相關記錄</h3>
-                <p className="text-muted-foreground mb-4">嘗試調整搜尋條件或篩選器</p>
-                <Button asChild>
-                  <Link href="/upload">開始新的評審</Link>
+                <Loader2 className="h-8 w-8 animate-spin text-primary mx-auto mb-4" />
+                <h3 className="font-medium mb-2">載入歷史記錄中...</h3>
+                <p className="text-muted-foreground">請稍候片刻</p>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Error State */}
+          {error && (
+            <Card>
+              <CardContent className="pt-6 text-center py-12">
+                <FileText className="h-12 w-12 text-destructive mx-auto mb-4" />
+                <h3 className="font-medium mb-2 text-destructive">載入失敗</h3>
+                <p className="text-muted-foreground mb-4">{error}</p>
+                <Button onClick={() => window.location.reload()}>
+                  重新載入
                 </Button>
               </CardContent>
             </Card>
           )}
+
+          {/* History List */}
+          {!loading && !error && (
+            <div className="space-y-4">
+              {filteredHistory.map((item) => (
+                <Card key={item.id} className="hover:shadow-md transition-shadow">
+                  <CardContent className="pt-6">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-4 flex-1">
+                        <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center">
+                          {getTypeIcon(item.type)}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <h3 className="font-medium truncate">{item.title}</h3>
+                          <div className="flex items-center gap-4 mt-1">
+                            <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                              <Calendar className="h-3 w-3" />
+                              {item.date}
+                            </div>
+                            <Badge variant="outline">{item.type}</Badge>
+                            <Badge variant={item.status === "completed" ? "default" : "secondary"}>
+                              {item.status === "completed" ? "已完成" : "處理中"}
+                            </Badge>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-4">
+                        {item.status === "completed" && (
+                          <div className="text-center">
+                            <div className="text-2xl font-bold text-primary">{item.score}</div>
+                            <Badge className={getGradeColor(item.grade)}>{item.grade}</Badge>
+                          </div>
+                        )}
+
+                        <div className="flex gap-2">
+                          {item.status === "completed" ? (
+                            <>
+                              <Button asChild variant="outline" size="sm">
+                                <Link href={`/results?id=${item.id}`}>
+                                  <Eye className="h-4 w-4" />
+                                </Link>
+                              </Button>
+                              <Button variant="outline" size="sm">
+                                <Download className="h-4 w-4" />
+                              </Button>
+                            </>
+                          ) : (
+                            <Button variant="outline" size="sm" disabled>
+                              處理中...
+                            </Button>
+                          )}
+                          <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+
+              {filteredHistory.length === 0 && (
+                <Card>
+                  <CardContent className="pt-6 text-center py-12">
+                    <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                    <h3 className="font-medium mb-2">沒有找到相關記錄</h3>
+                    <p className="text-muted-foreground mb-4">嘗試調整搜尋條件或篩選器</p>
+                    <Button asChild>
+                      <Link href="/upload">開始新的評審</Link>
+                    </Button>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          )}
         </div>
       </main>
     </div>
   )
-}
+}