建立檔案
This commit is contained in:
857
components/admin/scoring-management.tsx
Normal file
857
components/admin/scoring-management.tsx
Normal file
@@ -0,0 +1,857 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useCompetition } from "@/contexts/competition-context"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { ScoringLinkDialog } from "./scoring-link-dialog"
|
||||
import { JudgeListDialog } from "./judge-list-dialog"
|
||||
import {
|
||||
Trophy, Plus, Edit, CheckCircle, AlertTriangle, ClipboardList, User, Users, Search, Loader2, BarChart3, ChevronLeft, ChevronRight, Link
|
||||
} from "lucide-react"
|
||||
|
||||
interface ScoringRecord {
|
||||
id: string
|
||||
judgeId: string
|
||||
judgeName: string
|
||||
participantId: string
|
||||
participantName: string
|
||||
participantType: "individual" | "team"
|
||||
scores: Record<string, number>
|
||||
totalScore: number
|
||||
comments: string
|
||||
submittedAt: string
|
||||
status: "completed" | "pending" | "draft"
|
||||
}
|
||||
|
||||
const mockIndividualApps: any[] = []
|
||||
|
||||
const initialTeams: any[] = []
|
||||
|
||||
export function ScoringManagement() {
|
||||
const { competitions, judges, judgeScores, submitJudgeScore } = useCompetition()
|
||||
|
||||
const [selectedCompetition, setSelectedCompetition] = useState<any>(null)
|
||||
const [scoringRecords, setScoringRecords] = useState<ScoringRecord[]>([])
|
||||
const [showManualScoring, setShowManualScoring] = useState(false)
|
||||
const [showEditScoring, setShowEditScoring] = useState(false)
|
||||
const [selectedRecord, setSelectedRecord] = useState<ScoringRecord | null>(null)
|
||||
const [manualScoring, setManualScoring] = useState({
|
||||
judgeId: "", participantId: "", scores: {} as Record<string, number>, comments: ""
|
||||
})
|
||||
const [statusFilter, setStatusFilter] = useState<"all" | "completed" | "pending">("all")
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [success, setSuccess] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
const [showScoringLink, setShowScoringLink] = useState(false)
|
||||
const [showJudgeList, setShowJudgeList] = useState(false)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCompetition) {
|
||||
loadScoringData()
|
||||
}
|
||||
}, [selectedCompetition])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const loadScoringData = () => {
|
||||
if (!selectedCompetition) return
|
||||
|
||||
const participants = [
|
||||
...(selectedCompetition.participatingApps || []).map((appId: string) => {
|
||||
const app = mockIndividualApps.find(a => a.id === appId)
|
||||
return { id: appId, name: app?.name || `應用 ${appId}`, type: "individual" as const }
|
||||
}),
|
||||
...(selectedCompetition.participatingTeams || []).map((teamId: string) => {
|
||||
const team = initialTeams.find(t => t.id === teamId)
|
||||
return { id: teamId, name: team?.name || `團隊 ${teamId}`, type: "team" as const }
|
||||
})
|
||||
]
|
||||
|
||||
const records: ScoringRecord[] = []
|
||||
participants.forEach(participant => {
|
||||
selectedCompetition.judges.forEach((judgeId: string) => {
|
||||
const judge = judges.find(j => j.id === judgeId)
|
||||
if (!judge) return
|
||||
|
||||
const existingScore = judgeScores.find(score =>
|
||||
score.judgeId === judgeId && score.appId === participant.id
|
||||
)
|
||||
|
||||
if (existingScore) {
|
||||
records.push({
|
||||
id: `${judgeId}-${participant.id}`,
|
||||
judgeId, judgeName: judge.name,
|
||||
participantId: participant.id, participantName: participant.name,
|
||||
participantType: participant.type, scores: existingScore.scores,
|
||||
totalScore: calculateTotalScore(existingScore.scores, selectedCompetition.rules || []),
|
||||
comments: existingScore.comments,
|
||||
submittedAt: existingScore.submittedAt || new Date().toISOString(),
|
||||
status: "completed" as const,
|
||||
})
|
||||
} else {
|
||||
// 初始化評分項目
|
||||
const initialScores: Record<string, number> = {}
|
||||
if (selectedCompetition.rules && selectedCompetition.rules.length > 0) {
|
||||
selectedCompetition.rules.forEach((rule: any) => {
|
||||
initialScores[rule.name] = 0
|
||||
})
|
||||
} else {
|
||||
// 預設評分項目
|
||||
initialScores.innovation = 0
|
||||
initialScores.technical = 0
|
||||
initialScores.usability = 0
|
||||
initialScores.presentation = 0
|
||||
initialScores.impact = 0
|
||||
}
|
||||
|
||||
records.push({
|
||||
id: `${judgeId}-${participant.id}`,
|
||||
judgeId, judgeName: judge.name,
|
||||
participantId: participant.id, participantName: participant.name,
|
||||
participantType: participant.type, scores: initialScores,
|
||||
totalScore: 0, comments: "", submittedAt: "",
|
||||
status: "pending" as const,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
setScoringRecords(records)
|
||||
}
|
||||
|
||||
const calculateTotalScore = (scores: Record<string, number>, rules: any[]): number => {
|
||||
if (rules.length === 0) {
|
||||
const values = Object.values(scores)
|
||||
return values.length > 0 ? Math.round(values.reduce((a, b) => a + b, 0) / values.length) : 0
|
||||
}
|
||||
|
||||
let totalScore = 0
|
||||
let totalWeight = 0
|
||||
|
||||
rules.forEach((rule: any) => {
|
||||
const score = scores[rule.name] || 0
|
||||
const weight = rule.weight || 1
|
||||
totalScore += score * weight
|
||||
totalWeight += weight
|
||||
})
|
||||
|
||||
return totalWeight > 0 ? Math.round(totalScore / totalWeight) : 0
|
||||
}
|
||||
|
||||
const getFilteredRecords = () => {
|
||||
let filtered = [...scoringRecords]
|
||||
if (statusFilter !== "all") {
|
||||
filtered = filtered.filter(record => record.status === statusFilter)
|
||||
}
|
||||
if (searchQuery.trim()) {
|
||||
const query = searchQuery.toLowerCase().trim()
|
||||
filtered = filtered.filter(record =>
|
||||
record.judgeName.toLowerCase().includes(query) ||
|
||||
record.participantName.toLowerCase().includes(query)
|
||||
)
|
||||
}
|
||||
return filtered
|
||||
}
|
||||
|
||||
const handleManualScoring = () => {
|
||||
// 根據競賽規則初始化評分項目
|
||||
const initialScores: Record<string, number> = {}
|
||||
if (selectedCompetition?.rules && selectedCompetition.rules.length > 0) {
|
||||
selectedCompetition.rules.forEach((rule: any) => {
|
||||
initialScores[rule.name] = 0
|
||||
})
|
||||
} else {
|
||||
// 預設評分項目
|
||||
initialScores.innovation = 0
|
||||
initialScores.technical = 0
|
||||
initialScores.usability = 0
|
||||
initialScores.presentation = 0
|
||||
initialScores.impact = 0
|
||||
}
|
||||
|
||||
setManualScoring({
|
||||
judgeId: "",
|
||||
participantId: "",
|
||||
scores: initialScores,
|
||||
comments: ""
|
||||
})
|
||||
setShowManualScoring(true)
|
||||
}
|
||||
|
||||
const handleEditScoring = (record: ScoringRecord) => {
|
||||
setSelectedRecord(record)
|
||||
setManualScoring({
|
||||
judgeId: record.judgeId,
|
||||
participantId: record.participantId,
|
||||
scores: { ...record.scores },
|
||||
comments: record.comments,
|
||||
})
|
||||
setShowEditScoring(true)
|
||||
}
|
||||
|
||||
const handleSubmitScore = async () => {
|
||||
setError("")
|
||||
if (!manualScoring.judgeId || !manualScoring.participantId) {
|
||||
setError("請選擇評審和參賽項目")
|
||||
return
|
||||
}
|
||||
|
||||
// 檢查所有評分項目是否都已評分
|
||||
const scoringRules = selectedCompetition?.rules || []
|
||||
const defaultRules = [
|
||||
{ name: "創新性" }, { name: "技術性" }, { name: "實用性" },
|
||||
{ name: "展示效果" }, { name: "影響力" }
|
||||
]
|
||||
const rules = scoringRules.length > 0 ? scoringRules : defaultRules
|
||||
|
||||
const hasAllScores = rules.every((rule: any) =>
|
||||
manualScoring.scores[rule.name] && manualScoring.scores[rule.name] > 0
|
||||
)
|
||||
|
||||
if (!hasAllScores) {
|
||||
setError("請為所有評分項目打分")
|
||||
return
|
||||
}
|
||||
|
||||
if (!manualScoring.comments.trim()) {
|
||||
setError("請填寫評審意見")
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
try {
|
||||
await submitJudgeScore({
|
||||
judgeId: manualScoring.judgeId,
|
||||
appId: manualScoring.participantId,
|
||||
scores: manualScoring.scores,
|
||||
comments: manualScoring.comments.trim(),
|
||||
})
|
||||
setSuccess(showEditScoring ? "評分更新成功！" : "評分提交成功！")
|
||||
loadScoringData()
|
||||
setShowManualScoring(false)
|
||||
setShowEditScoring(false)
|
||||
setSelectedRecord(null)
|
||||
} catch (err) {
|
||||
setError("評分提交失敗，請重試")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "completed": return <Badge className="bg-green-100 text-green-800">已完成</Badge>
|
||||
case "pending": return <Badge className="bg-orange-100 text-orange-800">待評分</Badge>
|
||||
default: return <Badge variant="outline">{status}</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
const getScoringProgress = () => {
|
||||
const total = scoringRecords.length
|
||||
const completed = scoringRecords.filter(r => r.status === "completed").length
|
||||
const pending = scoringRecords.filter(r => r.status === "pending").length
|
||||
const percentage = total > 0 ? Math.round((completed / total) * 100) : 0
|
||||
return { total, completed, pending, percentage }
|
||||
}
|
||||
|
||||
const progress = getScoringProgress()
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{success && (
|
||||
<Alert className="border-green-200 bg-green-50">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<AlertDescription className="text-green-800">{success}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Trophy className="w-5 h-5" />
|
||||
<span>選擇競賽</span>
|
||||
</CardTitle>
|
||||
<CardDescription>選擇要管理的競賽評分</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select value={selectedCompetition?.id || ""} onValueChange={(value) => {
|
||||
const competition = competitions.find(c => c.id === value)
|
||||
setSelectedCompetition(competition)
|
||||
}}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="選擇競賽" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{competitions.map((competition) => (
|
||||
<SelectItem key={competition.id} value={competition.id}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{competition.name}</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{competition.year}年{competition.month}月 • {competition.type === "individual" ? "個人賽" : competition.type === "team" ? "團體賽" : "混合賽"}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{selectedCompetition && (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<BarChart3 className="w-5 h-5" />
|
||||
<span>{selectedCompetition.name} - 評分概覽</span>
|
||||
<Badge variant="outline">
|
||||
{selectedCompetition.type === "individual" ? "個人賽" : selectedCompetition.type === "team" ? "團體賽" : "混合賽"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription>查看當前競賽的評分進度和詳情</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-blue-600">{progress.completed}</p>
|
||||
<p className="text-sm text-gray-600">已完成評分</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-orange-600">{progress.pending}</p>
|
||||
<p className="text-sm text-gray-600">待評分</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-green-600">{progress.percentage}%</p>
|
||||
<p className="text-sm text-gray-600">完成度</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-purple-600">{progress.total}</p>
|
||||
<p className="text-sm text-gray-600">總評分項目</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>評分進度</span>
|
||||
<span>{progress.completed} / {progress.total}</span>
|
||||
</div>
|
||||
<Progress value={progress.percentage} className="h-2" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-center">
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<ClipboardList className="w-5 h-5" />
|
||||
<span>評分管理</span>
|
||||
</CardTitle>
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
onClick={() => setShowScoringLink(true)}
|
||||
variant="outline"
|
||||
className="border-blue-200 text-blue-600 hover:bg-blue-50"
|
||||
>
|
||||
<Link className="w-4 h-4 mr-2" />
|
||||
評審連結
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setShowJudgeList(true)}
|
||||
variant="outline"
|
||||
>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
評審清單
|
||||
</Button>
|
||||
<Button onClick={handleManualScoring} variant="outline">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
手動輸入評分
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="flex flex-wrap gap-4 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm font-medium">狀態：</span>
|
||||
<Select value={statusFilter} onValueChange={(value: any) => setStatusFilter(value)}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部</SelectItem>
|
||||
<SelectItem value="completed">已完成</SelectItem>
|
||||
<SelectItem value="pending">待評分</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜尋評審或參賽者..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{(() => {
|
||||
// 按評審分組
|
||||
const groupedByJudge = getFilteredRecords().reduce((groups, record) => {
|
||||
const judgeName = record.judgeName
|
||||
if (!groups[judgeName]) {
|
||||
groups[judgeName] = []
|
||||
}
|
||||
groups[judgeName].push(record)
|
||||
return groups
|
||||
}, {} as Record<string, ScoringRecord[]>)
|
||||
|
||||
|
||||
|
||||
return Object.entries(groupedByJudge).map(([judgeName, records]) => {
|
||||
const completedCount = records.filter(r => r.status === "completed").length
|
||||
const totalCount = records.length
|
||||
const progressPercentage = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0
|
||||
|
||||
return (
|
||||
<Card key={judgeName} className="border-l-4 border-l-blue-500">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="text-sm font-semibold">
|
||||
{judgeName.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">{judgeName}</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
評分進度：{completedCount} / {totalCount} 項
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold text-blue-600">{progressPercentage}%</div>
|
||||
<div className="text-xs text-gray-500">完成度</div>
|
||||
</div>
|
||||
<div className="w-16 h-16 relative">
|
||||
<svg className="w-16 h-16 transform -rotate-90" viewBox="0 0 36 36">
|
||||
<path
|
||||
className="text-gray-200"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
/>
|
||||
<path
|
||||
className="text-blue-600"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray={`${progressPercentage}, 100`}
|
||||
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xs font-semibold">{progressPercentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="relative px-6">
|
||||
{/* 左滑動箭頭 */}
|
||||
{records.length > 4 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById(`scroll-${judgeName}`)
|
||||
if (container) {
|
||||
container.scrollLeft -= 280 // 滑動一個卡片的寬度
|
||||
}
|
||||
}}
|
||||
className="absolute -left-6 top-1/2 transform -translate-y-1/2 z-10 bg-white border border-gray-300 rounded-full p-3 shadow-lg hover:shadow-xl transition-all duration-200 hover:bg-gray-50"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 右滑動箭頭 */}
|
||||
{records.length > 4 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const container = document.getElementById(`scroll-${judgeName}`)
|
||||
if (container) {
|
||||
container.scrollLeft += 280 // 滑動一個卡片的寬度
|
||||
}
|
||||
}}
|
||||
className="absolute -right-6 top-1/2 transform -translate-y-1/2 z-10 bg-white border border-gray-300 rounded-full p-3 shadow-lg hover:shadow-xl transition-all duration-200 hover:bg-gray-50"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div
|
||||
id={`scroll-${judgeName}`}
|
||||
className="flex space-x-4 overflow-x-auto scrollbar-hide pb-2 scroll-smooth"
|
||||
style={{
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
maxWidth: 'calc(4 * 256px + 3 * 16px)' // 4個卡片 + 3個間距
|
||||
}}
|
||||
>
|
||||
{records.map((record) => (
|
||||
<div
|
||||
key={record.id}
|
||||
className="flex-shrink-0 w-64 bg-white border rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-200"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{/* 項目標題和類型 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
{record.participantType === "individual" ? (
|
||||
<User className="w-4 h-4 text-blue-600" />
|
||||
) : (
|
||||
<Users className="w-4 h-4 text-green-600" />
|
||||
)}
|
||||
<span className="font-medium text-sm truncate">{record.participantName}</span>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{record.participantType === "individual" ? "個人" : "團隊"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 評分狀態 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center space-x-1">
|
||||
<span className="font-bold text-lg">{record.totalScore}</span>
|
||||
<span className="text-gray-500 text-sm">/ 10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end space-y-1">
|
||||
{getStatusBadge(record.status)}
|
||||
{record.submittedAt && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{new Date(record.submittedAt).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按鈕 */}
|
||||
<div className="flex justify-center pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEditScoring(record)}
|
||||
className="w-full"
|
||||
>
|
||||
{record.status === "completed" ? (
|
||||
<>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
編輯評分
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
開始評分
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})
|
||||
})()}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Dialog open={showManualScoring || showEditScoring} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setShowManualScoring(false)
|
||||
setShowEditScoring(false)
|
||||
setSelectedRecord(null)
|
||||
setManualScoring({
|
||||
judgeId: "",
|
||||
participantId: "",
|
||||
scores: {} as Record<string, number>,
|
||||
comments: ""
|
||||
})
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<Edit className="w-5 h-5" />
|
||||
<span>{showEditScoring ? "編輯評分" : "手動輸入評分"}</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{showEditScoring ? "修改現有評分記錄" : "為參賽者手動輸入評分"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>選擇評審 *</Label>
|
||||
<Select
|
||||
value={manualScoring.judgeId}
|
||||
onValueChange={(value) => setManualScoring({ ...manualScoring, judgeId: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇評審" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{judges.map((judge) => (
|
||||
<SelectItem key={judge.id} value={judge.id}>
|
||||
{judge.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>選擇參賽者 *</Label>
|
||||
<Select
|
||||
value={manualScoring.participantId}
|
||||
onValueChange={(value) => setManualScoring({ ...manualScoring, participantId: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇參賽者" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{[
|
||||
...(selectedCompetition?.participatingApps || []).map((appId: string) => {
|
||||
const app = mockIndividualApps.find(a => a.id === appId)
|
||||
return { id: appId, name: app?.name || `應用 ${appId}`, type: "individual" }
|
||||
}),
|
||||
...(selectedCompetition?.participatingTeams || []).map((teamId: string) => {
|
||||
const team = initialTeams.find(t => t.id === teamId)
|
||||
return { id: teamId, name: team?.name || `團隊 ${teamId}`, type: "team" }
|
||||
})
|
||||
].map((participant) => (
|
||||
<SelectItem key={participant.id} value={participant.id}>
|
||||
<div className="flex items-center space-x-2">
|
||||
{participant.type === "individual" ? (
|
||||
<User className="w-4 h-4 text-blue-600" />
|
||||
) : (
|
||||
<Users className="w-4 h-4 text-green-600" />
|
||||
)}
|
||||
<span>{participant.name}</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{participant.type === "individual" ? "個人" : "團隊"}
|
||||
</Badge>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 動態評分項目 */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">評分項目</h3>
|
||||
{(() => {
|
||||
const scoringRules = selectedCompetition?.rules || []
|
||||
const defaultRules = [
|
||||
{ name: "創新性", description: "創新程度和獨特性", weight: 25 },
|
||||
{ name: "技術性", description: "技術實現的複雜度和品質", weight: 30 },
|
||||
{ name: "實用性", description: "實際應用價值和用戶體驗", weight: 20 },
|
||||
{ name: "展示效果", description: "展示的清晰度和吸引力", weight: 15 },
|
||||
{ name: "影響力", description: "對行業或社會的潛在影響", weight: 10 }
|
||||
]
|
||||
|
||||
const rules = scoringRules.length > 0 ? scoringRules : defaultRules
|
||||
|
||||
return rules.map((rule: any, index: number) => (
|
||||
<div key={index} className="space-y-4 p-6 border rounded-lg bg-white shadow-sm">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<Label className="text-lg font-semibold text-gray-900">{rule.name}</Label>
|
||||
<p className="text-sm text-gray-600 mt-2 leading-relaxed">{rule.description}</p>
|
||||
{rule.weight && (
|
||||
<p className="text-xs text-purple-600 mt-2 font-medium">權重：{rule.weight}%</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right ml-4">
|
||||
<span className="text-2xl font-bold text-blue-600">
|
||||
{manualScoring.scores[rule.name] || 0} / 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 評分按鈕 */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{Array.from({ length: 10 }, (_, i) => i + 1).map((score) => (
|
||||
<button
|
||||
key={score}
|
||||
type="button"
|
||||
onClick={() => setManualScoring({
|
||||
...manualScoring,
|
||||
scores: { ...manualScoring.scores, [rule.name]: score }
|
||||
})}
|
||||
className={`w-12 h-12 rounded-lg border-2 font-semibold text-lg transition-all duration-200 ${
|
||||
(manualScoring.scores[rule.name] || 0) === score
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-lg scale-105'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50 hover:scale-105'
|
||||
}`}
|
||||
>
|
||||
{score}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* 總分顯示 */}
|
||||
<div className="p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg border-2 border-blue-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<span className="text-xl font-bold text-gray-900">總分</span>
|
||||
<p className="text-sm text-gray-600 mt-1">根據權重計算的綜合評分</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-4xl font-bold text-blue-600">
|
||||
{calculateTotalScore(manualScoring.scores, selectedCompetition?.rules || [])}
|
||||
</span>
|
||||
<span className="text-xl text-gray-500 font-medium">/ 10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Label className="text-lg font-semibold">評審意見 *</Label>
|
||||
<Textarea
|
||||
placeholder="請詳細填寫評審意見、優點分析、改進建議等..."
|
||||
value={manualScoring.comments}
|
||||
onChange={(e) => setManualScoring({ ...manualScoring, comments: e.target.value })}
|
||||
rows={6}
|
||||
className="min-h-[120px] resize-none"
|
||||
/>
|
||||
<p className="text-xs text-gray-500">請提供具體的評審意見，包括項目的優點、不足之處和改進建議</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-4 pt-6 border-t border-gray-200">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
setShowManualScoring(false)
|
||||
setShowEditScoring(false)
|
||||
setSelectedRecord(null)
|
||||
}}
|
||||
className="px-8"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmitScore}
|
||||
disabled={isLoading}
|
||||
size="lg"
|
||||
className="px-8 bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 mr-2 animate-spin" />
|
||||
提交中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle className="w-5 h-5 mr-2" />
|
||||
{showEditScoring ? "更新評分" : "提交評分"}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 評分連結對話框 */}
|
||||
<ScoringLinkDialog
|
||||
open={showScoringLink}
|
||||
onOpenChange={setShowScoringLink}
|
||||
currentCompetition={selectedCompetition}
|
||||
/>
|
||||
|
||||
{/* 評審清單對話框 */}
|
||||
<JudgeListDialog
|
||||
open={showJudgeList}
|
||||
onOpenChange={setShowJudgeList}
|
||||
judges={selectedCompetition ?
|
||||
judges
|
||||
.filter(judge => selectedCompetition.judges.includes(judge.id))
|
||||
.map(judge => ({
|
||||
id: judge.id,
|
||||
name: judge.name,
|
||||
specialty: "評審專家"
|
||||
})) : []
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user