新增測驗連結管理

app/admin/test-links/page.tsx

@@ -0,0 +1,435 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ProtectedRoute } from "@/components/protected-route"
+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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  ArrowLeft,
+  Copy,
+  CheckCircle,
+  Clock,
+  Users,
+  Link as LinkIcon,
+  Send,
+  RefreshCw,
+  Eye,
+  Trash2,
+  Plus,
+  Loader2,
+} from "lucide-react"
+import Link from "next/link"
+
+// 定義測驗連結類型
+interface TestLink {
+  id: string
+  name: string
+  type: 'logic' | 'creative' | 'combined'
+  url: string
+  createdAt: string
+  expiresAt?: string
+  isActive: boolean
+  totalSent: number
+  completedCount: number
+  pendingCount: number
+}
+
+// 定義已送出連結的狀態
+interface SentLinkStatus {
+  id: string
+  linkId: string
+  recipientName: string
+  recipientEmail: string
+  sentAt: string
+  status: 'pending' | 'completed' | 'expired'
+  completedAt?: string
+  testType: 'logic' | 'creative' | 'combined'
+  score?: number
+}
+
+export default function TestLinksPage() {
+  const [currentLinks, setCurrentLinks] = useState<TestLink[]>([])
+  const [sentLinks, setSentLinks] = useState<SentLinkStatus[]>([])
+  const [loading, setLoading] = useState(true)
+  const [newLinkName, setNewLinkName] = useState("")
+  const [newLinkType, setNewLinkType] = useState<'logic' | 'creative' | 'combined'>('combined')
+  const [showCreateForm, setShowCreateForm] = useState(false)
+
+  // 模擬數據
+  useEffect(() => {
+    const mockCurrentLinks: TestLink[] = [
+      {
+        id: '1',
+        name: '2024年度綜合能力測驗',
+        type: 'combined',
+        url: 'https://hr-assessment.com/test/combined/abc123',
+        createdAt: '2024-01-15T10:00:00Z',
+        expiresAt: '2024-12-31T23:59:59Z',
+        isActive: true,
+        totalSent: 45,
+        completedCount: 38,
+        pendingCount: 7
+      },
+      {
+        id: '2',
+        name: '創意能力專項測驗',
+        type: 'creative',
+        url: 'https://hr-assessment.com/test/creative/def456',
+        createdAt: '2024-01-20T14:30:00Z',
+        isActive: true,
+        totalSent: 23,
+        completedCount: 20,
+        pendingCount: 3
+      }
+    ]
+
+    const mockSentLinks: SentLinkStatus[] = [
+      {
+        id: '1',
+        linkId: '1',
+        recipientName: '張小明',
+        recipientEmail: 'zhang.xiaoming@company.com',
+        sentAt: '2024-01-15T10:30:00Z',
+        status: 'completed',
+        completedAt: '2024-01-16T09:15:00Z',
+        testType: 'combined',
+        score: 85
+      },
+      {
+        id: '2',
+        linkId: '1',
+        recipientName: '李美華',
+        recipientEmail: 'li.meihua@company.com',
+        sentAt: '2024-01-15T11:00:00Z',
+        status: 'completed',
+        completedAt: '2024-01-17T14:20:00Z',
+        testType: 'combined',
+        score: 92
+      },
+      {
+        id: '3',
+        linkId: '1',
+        recipientName: '王大偉',
+        recipientEmail: 'wang.dawei@company.com',
+        sentAt: '2024-01-15T11:30:00Z',
+        status: 'pending',
+        testType: 'combined'
+      },
+      {
+        id: '4',
+        linkId: '2',
+        recipientName: '陳小芳',
+        recipientEmail: 'chen.xiaofang@company.com',
+        sentAt: '2024-01-20T15:00:00Z',
+        status: 'completed',
+        completedAt: '2024-01-21T10:45:00Z',
+        testType: 'creative',
+        score: 78
+      }
+    ]
+
+    setTimeout(() => {
+      setCurrentLinks(mockCurrentLinks)
+      setSentLinks(mockSentLinks)
+      setLoading(false)
+    }, 1000)
+  }, [])
+
+  const handleCopyLink = (url: string) => {
+    navigator.clipboard.writeText(url)
+    // 這裡可以添加 toast 提示
+  }
+
+  const handleCreateLink = () => {
+    if (!newLinkName.trim()) return
+
+    const newLink: TestLink = {
+      id: Date.now().toString(),
+      name: newLinkName,
+      type: newLinkType,
+      url: `https://hr-assessment.com/test/${newLinkType}/${Math.random().toString(36).substr(2, 9)}`,
+      createdAt: new Date().toISOString(),
+      isActive: true,
+      totalSent: 0,
+      completedCount: 0,
+      pendingCount: 0
+    }
+
+    setCurrentLinks([...currentLinks, newLink])
+    setNewLinkName("")
+    setShowCreateForm(false)
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return <Badge variant="default" className="bg-green-500">已完成</Badge>
+      case 'pending':
+        return <Badge variant="secondary">進行中</Badge>
+      case 'expired':
+        return <Badge variant="destructive">已過期</Badge>
+      default:
+        return <Badge variant="outline">未知</Badge>
+    }
+  }
+
+  const getTypeName = (type: string) => {
+    switch (type) {
+      case 'logic':
+        return '邏輯思維'
+      case 'creative':
+        return '創意能力'
+      case 'combined':
+        return '綜合能力'
+      default:
+        return '未知'
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center h-64">
+            <Loader2 className="h-8 w-8 animate-spin" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b bg-card/50 backdrop-blur-sm">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center gap-3">
+            <Button variant="ghost" size="sm" asChild>
+              <Link href="/dashboard">
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                返回儀表板
+              </Link>
+            </Button>
+            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+              <LinkIcon className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-foreground">測驗連結管理</h1>
+              <p className="text-sm text-muted-foreground">
+                管理測驗連結的發送和追蹤測試完成狀態
+              </p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-6xl mx-auto space-y-6">
+          <Tabs defaultValue="current" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="current">目前測驗連結</TabsTrigger>
+              <TabsTrigger value="sent">已送出連結狀態</TabsTrigger>
+            </TabsList>
+
+            {/* 目前測驗連結 */}
+            <TabsContent value="current" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardTitle>目前測驗連結</CardTitle>
+                      <CardDescription>
+                        管理當前可用的測驗連結
+                      </CardDescription>
+                    </div>
+                    <Button onClick={() => setShowCreateForm(!showCreateForm)}>
+                      <Plus className="w-4 h-4 mr-2" />
+                      新增連結
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {/* 新增連結表單 */}
+                  {showCreateForm && (
+                    <Card className="mb-6">
+                      <CardHeader>
+                        <CardTitle className="text-lg">新增測驗連結</CardTitle>
+                      </CardHeader>
+                      <CardContent className="space-y-4">
+                        <div>
+                          <Label htmlFor="linkName">連結名稱</Label>
+                          <Input
+                            id="linkName"
+                            value={newLinkName}
+                            onChange={(e) => setNewLinkName(e.target.value)}
+                            placeholder="請輸入連結名稱"
+                          />
+                        </div>
+                        <div>
+                          <Label htmlFor="linkType">測驗類型</Label>
+                          <Select value={newLinkType} onValueChange={(value: any) => setNewLinkType(value)}>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="logic">邏輯思維測驗</SelectItem>
+                              <SelectItem value="creative">創意能力測驗</SelectItem>
+                              <SelectItem value="combined">綜合能力測驗</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="flex gap-2">
+                          <Button onClick={handleCreateLink} disabled={!newLinkName.trim()}>
+                            建立連結
+                          </Button>
+                          <Button variant="outline" onClick={() => setShowCreateForm(false)}>
+                            取消
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  )}
+
+                  {/* 連結列表 */}
+                  <div className="space-y-4">
+                    {currentLinks.map((link) => (
+                      <Card key={link.id}>
+                        <CardContent className="p-6">
+                          <div className="flex items-start justify-between">
+                            <div className="space-y-2">
+                              <div className="flex items-center gap-2">
+                                <h3 className="text-lg font-semibold">{link.name}</h3>
+                                <Badge variant={link.isActive ? "default" : "secondary"}>
+                                  {link.isActive ? "啟用中" : "已停用"}
+                                </Badge>
+                                <Badge variant="outline">{getTypeName(link.type)}</Badge>
+                              </div>
+                              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                                <span>建立時間: {new Date(link.createdAt).toLocaleString('zh-TW')}</span>
+                                {link.expiresAt && (
+                                  <span>到期時間: {new Date(link.expiresAt).toLocaleString('zh-TW')}</span>
+                                )}
+                              </div>
+                              <div className="flex items-center gap-6 text-sm">
+                                <span className="flex items-center gap-1">
+                                  <Users className="w-4 h-4" />
+                                  總發送: {link.totalSent}
+                                </span>
+                                <span className="flex items-center gap-1 text-green-600">
+                                  <CheckCircle className="w-4 h-4" />
+                                  已完成: {link.completedCount}
+                                </span>
+                                <span className="flex items-center gap-1 text-orange-600">
+                                  <Clock className="w-4 h-4" />
+                                  進行中: {link.pendingCount}
+                                </span>
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => handleCopyLink(link.url)}
+                              >
+                                <Copy className="w-4 h-4 mr-2" />
+                                複製連結
+                              </Button>
+                              <Button variant="outline" size="sm" asChild>
+                                <Link href={`/test/${link.type}`} target="_blank">
+                                  <Eye className="w-4 h-4 mr-2" />
+                                  預覽
+                                </Link>
+                              </Button>
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            {/* 已送出連結狀態 */}
+            <TabsContent value="sent" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>已送出連結狀態清單</CardTitle>
+                  <CardDescription>
+                    追蹤已送出測驗連結的完成狀態
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>收件人</TableHead>
+                        <TableHead>測驗類型</TableHead>
+                        <TableHead>發送時間</TableHead>
+                        <TableHead>狀態</TableHead>
+                        <TableHead>完成時間</TableHead>
+                        <TableHead>分數</TableHead>
+                        <TableHead>操作</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {sentLinks.map((sentLink) => (
+                        <TableRow key={sentLink.id}>
+                          <TableCell>
+                            <div>
+                              <div className="font-medium">{sentLink.recipientName}</div>
+                              <div className="text-sm text-muted-foreground">{sentLink.recipientEmail}</div>
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant="outline">{getTypeName(sentLink.testType)}</Badge>
+                          </TableCell>
+                          <TableCell>
+                            {new Date(sentLink.sentAt).toLocaleString('zh-TW')}
+                          </TableCell>
+                          <TableCell>
+                            {getStatusBadge(sentLink.status)}
+                          </TableCell>
+                          <TableCell>
+                            {sentLink.completedAt 
+                              ? new Date(sentLink.completedAt).toLocaleString('zh-TW')
+                              : '-'
+                            }
+                          </TableCell>
+                          <TableCell>
+                            {sentLink.score ? `${sentLink.score}分` : '-'}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-2">
+                              <Button variant="outline" size="sm" asChild>
+                                <Link href={`/admin/results?user=${sentLink.recipientEmail}`}>
+                                  <Eye className="w-4 h-4" />
+                                </Link>
+                              </Button>
+                              {sentLink.status === 'pending' && (
+                                <Button variant="outline" size="sm">
+                                  <Send className="w-4 h-4" />
+                                </Button>
+                              )}
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  )
+}