建立檔案
This commit is contained in:
476
components/admin/admin-layout.tsx
Normal file
476
components/admin/admin-layout.tsx
Normal file
@@ -0,0 +1,476 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Bot,
|
||||
Trophy,
|
||||
BarChart3,
|
||||
Settings,
|
||||
Menu,
|
||||
X,
|
||||
Bell,
|
||||
Search,
|
||||
LogOut,
|
||||
User,
|
||||
UserPlus,
|
||||
FileText,
|
||||
AlertTriangle,
|
||||
Award,
|
||||
Info,
|
||||
} from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
interface AdminLayoutProps {
|
||||
children: React.ReactNode
|
||||
currentPage: string
|
||||
onPageChange: (page: string) => void
|
||||
}
|
||||
|
||||
interface Notification {
|
||||
id: string
|
||||
type: "user_registration" | "app_submission" | "competition_update" | "system_alert" | "review_completed"
|
||||
title: string
|
||||
message: string
|
||||
timestamp: string
|
||||
read: boolean
|
||||
}
|
||||
|
||||
interface SearchResult {
|
||||
id: string
|
||||
type: "user" | "app" | "competition"
|
||||
title: string
|
||||
subtitle: string
|
||||
avatar?: string
|
||||
}
|
||||
|
||||
const menuItems = [
|
||||
{ id: "dashboard", name: "儀表板", icon: LayoutDashboard },
|
||||
{ id: "users", name: "用戶管理", icon: Users },
|
||||
{ id: "apps", name: "應用管理", icon: Bot },
|
||||
{ id: "competitions", name: "競賽管理", icon: Trophy },
|
||||
{ id: "analytics", name: "數據分析", icon: BarChart3 },
|
||||
{ id: "settings", name: "系統設定", icon: Settings },
|
||||
]
|
||||
|
||||
// Notifications data - empty for production
|
||||
const mockNotifications: Notification[] = []
|
||||
|
||||
// Search data - empty for production
|
||||
const mockSearchData: SearchResult[] = []
|
||||
|
||||
export function AdminLayout({ children, currentPage, onPageChange }: AdminLayoutProps) {
|
||||
const { user, logout } = useAuth()
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
|
||||
// Search state
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[]>([])
|
||||
const [showSearchResults, setShowSearchResults] = useState(false)
|
||||
|
||||
// Notification state
|
||||
const [notifications, setNotifications] = useState<Notification[]>(mockNotifications)
|
||||
const [showNotifications, setShowNotifications] = useState(false)
|
||||
|
||||
// Logout confirmation state
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false)
|
||||
|
||||
// Handle search
|
||||
useEffect(() => {
|
||||
if (searchQuery.trim()) {
|
||||
const filtered = mockSearchData.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
item.subtitle.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
)
|
||||
setSearchResults(filtered.slice(0, 8)) // Limit to 8 results
|
||||
setShowSearchResults(true)
|
||||
} else {
|
||||
setSearchResults([])
|
||||
setShowSearchResults(false)
|
||||
}
|
||||
}, [searchQuery])
|
||||
|
||||
// Get unread notification count
|
||||
const unreadCount = notifications.filter((n) => !n.read).length
|
||||
|
||||
// Format timestamp
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
const now = new Date()
|
||||
const time = new Date(timestamp)
|
||||
const diffInMinutes = Math.floor((now.getTime() - time.getTime()) / (1000 * 60))
|
||||
|
||||
if (diffInMinutes < 1) return "剛剛"
|
||||
if (diffInMinutes < 60) return `${diffInMinutes} 分鐘前`
|
||||
if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)} 小時前`
|
||||
return `${Math.floor(diffInMinutes / 1440)} 天前`
|
||||
}
|
||||
|
||||
// Get notification icon and color
|
||||
const getNotificationIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "user_registration":
|
||||
return <UserPlus className="w-4 h-4 text-blue-500" />
|
||||
case "app_submission":
|
||||
return <FileText className="w-4 h-4 text-green-500" />
|
||||
case "competition_update":
|
||||
return <Trophy className="w-4 h-4 text-purple-500" />
|
||||
case "system_alert":
|
||||
return <AlertTriangle className="w-4 h-4 text-orange-500" />
|
||||
case "review_completed":
|
||||
return <Award className="w-4 h-4 text-emerald-500" />
|
||||
default:
|
||||
return <Info className="w-4 h-4 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
// Get search result icon
|
||||
const getSearchIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "user":
|
||||
return <User className="w-4 h-4 text-blue-500" />
|
||||
case "app":
|
||||
return <Bot className="w-4 h-4 text-green-500" />
|
||||
case "competition":
|
||||
return <Trophy className="w-4 h-4 text-purple-500" />
|
||||
default:
|
||||
return <Info className="w-4 h-4 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
// Mark notification as read
|
||||
const markAsRead = (notificationId: string) => {
|
||||
setNotifications((prev) => prev.map((n) => (n.id === notificationId ? { ...n, read: true } : n)))
|
||||
}
|
||||
|
||||
// Mark all notifications as read
|
||||
const markAllAsRead = () => {
|
||||
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))
|
||||
}
|
||||
|
||||
// Handle logout with improved UX
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
setShowLogoutDialog(false)
|
||||
|
||||
// Check if this is a popup/new tab opened from main site
|
||||
if (window.opener && !window.opener.closed) {
|
||||
// If opened from another window, close this tab and focus parent
|
||||
window.opener.focus()
|
||||
window.close()
|
||||
} else {
|
||||
// If this is the main window or standalone, redirect to homepage
|
||||
window.location.href = "/"
|
||||
}
|
||||
}
|
||||
|
||||
// Handle search result click
|
||||
const handleSearchResultClick = (result: SearchResult) => {
|
||||
setSearchQuery("")
|
||||
setShowSearchResults(false)
|
||||
|
||||
// Navigate based on result type
|
||||
switch (result.type) {
|
||||
case "user":
|
||||
onPageChange("users")
|
||||
break
|
||||
case "app":
|
||||
onPageChange("apps")
|
||||
break
|
||||
case "competition":
|
||||
onPageChange("competitions")
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!user || user.role !== "admin") {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto">
|
||||
<AlertTriangle className="w-8 h-8 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">存取被拒</h2>
|
||||
<p className="text-gray-600 mb-4">您沒有管理員權限訪問此頁面</p>
|
||||
<div className="space-x-3">
|
||||
<Button onClick={() => (window.location.href = "/")} variant="outline">
|
||||
返回首頁
|
||||
</Button>
|
||||
{window.opener && !window.opener.closed && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
window.opener.focus()
|
||||
window.close()
|
||||
}}
|
||||
variant="default"
|
||||
>
|
||||
關閉頁面
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
{/* Sidebar */}
|
||||
<div className={`${sidebarOpen ? "w-64" : "w-16"} bg-white shadow-lg transition-all duration-300 flex flex-col`}>
|
||||
{/* Logo */}
|
||||
<div className="p-4 border-b">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<Settings className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
{sidebarOpen && (
|
||||
<div>
|
||||
<h1 className="font-bold text-gray-900">管理後台</h1>
|
||||
<p className="text-xs text-gray-500">AI 展示平台</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4">
|
||||
<ul className="space-y-2">
|
||||
{menuItems.map((item) => {
|
||||
const IconComponent = item.icon
|
||||
const isActive = currentPage === item.id
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<Button
|
||||
variant={isActive ? "default" : "ghost"}
|
||||
className={`w-full h-12 ${sidebarOpen ? "justify-start px-4" : "justify-center px-0"} ${
|
||||
isActive
|
||||
? "bg-gradient-to-r from-blue-600 to-purple-600 text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
onClick={() => onPageChange(item.id)}
|
||||
>
|
||||
<div className="flex items-center justify-center w-5 h-5">
|
||||
<IconComponent className="w-4 h-4" />
|
||||
</div>
|
||||
{sidebarOpen && <span className="ml-3 text-sm font-medium">{item.name}</span>}
|
||||
</Button>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* User Info */}
|
||||
<div className="p-4 border-t">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="w-8 h-8">
|
||||
<AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white text-sm">
|
||||
{user.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{sidebarOpen && (
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-900">{user.name}</p>
|
||||
<p className="text-xs text-gray-500">管理員</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Top Bar */}
|
||||
<header className="bg-white shadow-sm border-b px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarOpen(!sidebarOpen)}>
|
||||
{sidebarOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
|
||||
</Button>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
{menuItems.find((item) => item.id === currentPage)?.name || "管理後台"}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
placeholder="搜尋..."
|
||||
className="pl-10 w-64"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onFocus={() => searchQuery && setShowSearchResults(true)}
|
||||
onBlur={() => setTimeout(() => setShowSearchResults(false), 200)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Search Results Dropdown */}
|
||||
{showSearchResults && searchResults.length > 0 && (
|
||||
<Card className="absolute top-full mt-1 w-full z-50 shadow-lg">
|
||||
<CardContent className="p-0">
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{searchResults.map((result) => (
|
||||
<div
|
||||
key={result.id}
|
||||
className="flex items-center space-x-3 p-3 hover:bg-gray-50 cursor-pointer border-b last:border-b-0"
|
||||
onClick={() => handleSearchResultClick(result)}
|
||||
>
|
||||
{result.avatar ? (
|
||||
<Avatar className="w-8 h-8">
|
||||
<img
|
||||
src={result.avatar || "/placeholder.svg"}
|
||||
alt={result.title}
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
<AvatarFallback>{result.title[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
|
||||
{getSearchIcon(result.type)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-900">{result.title}</p>
|
||||
<p className="text-xs text-gray-500">{result.subtitle}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{result.type === "user" ? "用戶" : result.type === "app" ? "應用" : "競賽"}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* No results message */}
|
||||
{showSearchResults && searchResults.length === 0 && searchQuery.trim() && (
|
||||
<Card className="absolute top-full mt-1 w-full z-50 shadow-lg">
|
||||
<CardContent className="p-4 text-center text-gray-500 text-sm">沒有找到相關結果</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<DropdownMenu open={showNotifications} onOpenChange={setShowNotifications}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-4 h-4" />
|
||||
{unreadCount > 0 && (
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center text-xs bg-red-500">
|
||||
{unreadCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-80">
|
||||
<DropdownMenuLabel className="flex items-center justify-between">
|
||||
<span>通知</span>
|
||||
{unreadCount > 0 && (
|
||||
<Button variant="ghost" size="sm" onClick={markAllAsRead} className="text-xs">
|
||||
全部標為已讀
|
||||
</Button>
|
||||
)}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
<Bell className="w-8 h-8 mx-auto mb-2 text-gray-300" />
|
||||
<p className="text-sm">暫無通知</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((notification) => (
|
||||
<DropdownMenuItem
|
||||
key={notification.id}
|
||||
className="p-0"
|
||||
onClick={() => markAsRead(notification.id)}
|
||||
>
|
||||
<div className={`w-full p-3 ${!notification.read ? "bg-blue-50" : ""}`}>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 mt-0.5">{getNotificationIcon(notification.type)}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{notification.title}</p>
|
||||
{!notification.read && (
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-2" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-1">{notification.message}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">{formatTimestamp(notification.timestamp)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{notifications.length > 0 && <DropdownMenuSeparator />}
|
||||
<div className="p-2">
|
||||
<Button variant="ghost" size="sm" className="w-full text-xs">
|
||||
查看所有通知
|
||||
</Button>
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Logout */}
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowLogoutDialog(true)}>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 p-6 overflow-auto">{children}</main>
|
||||
</div>
|
||||
|
||||
{/* Logout Confirmation Dialog */}
|
||||
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<LogOut className="w-5 h-5 text-red-500" />
|
||||
<span>確認登出</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>您確定要登出管理後台嗎？登出後將返回首頁或關閉此頁面。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-end space-x-3 mt-6">
|
||||
<Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleLogout}>
|
||||
確認登出
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Click outside to close search results */}
|
||||
{showSearchResults && <div className="fixed inset-0 z-40" onClick={() => setShowSearchResults(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
components/admin/admin-panel.tsx
Normal file
39
components/admin/admin-panel.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { AdminLayout } from "./admin-layout"
|
||||
import { AdminDashboard } from "./dashboard"
|
||||
import { UserManagement } from "./user-management"
|
||||
import { AppManagement } from "./app-management"
|
||||
import { CompetitionManagement } from "./competition-management"
|
||||
import { AnalyticsDashboard } from "./analytics-dashboard"
|
||||
import { SystemSettings } from "./system-settings"
|
||||
|
||||
export function AdminPanel() {
|
||||
const [currentPage, setCurrentPage] = useState("dashboard")
|
||||
|
||||
const renderPage = () => {
|
||||
switch (currentPage) {
|
||||
case "dashboard":
|
||||
return <AdminDashboard />
|
||||
case "users":
|
||||
return <UserManagement />
|
||||
case "apps":
|
||||
return <AppManagement />
|
||||
case "competitions":
|
||||
return <CompetitionManagement />
|
||||
case "analytics":
|
||||
return <AnalyticsDashboard />
|
||||
case "settings":
|
||||
return <SystemSettings />
|
||||
default:
|
||||
return <AdminDashboard />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout currentPage={currentPage} onPageChange={setCurrentPage}>
|
||||
{renderPage()}
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
663
components/admin/analytics-dashboard.tsx
Normal file
663
components/admin/analytics-dashboard.tsx
Normal file
@@ -0,0 +1,663 @@
|
||||
"use client"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
Line,
|
||||
ComposedChart,
|
||||
} from "recharts"
|
||||
import { Users, Eye, Star, TrendingUp, Clock, Activity, Calendar, AlertTriangle } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
|
||||
export function AnalyticsDashboard() {
|
||||
const [showHistoryModal, setShowHistoryModal] = useState(false)
|
||||
const [selectedDateRange, setSelectedDateRange] = useState("近7天")
|
||||
|
||||
// 24小時使用數據 - 優化版本
|
||||
const hourlyData = [
|
||||
{ hour: "00", users: 39, period: "深夜", intensity: "low", cpuUsage: 25, memoryUsage: 45 },
|
||||
{ hour: "01", users: 62, period: "深夜", intensity: "normal", cpuUsage: 22, memoryUsage: 43 },
|
||||
{ hour: "02", users: 24, period: "深夜", intensity: "low", cpuUsage: 20, memoryUsage: 41 },
|
||||
{ hour: "03", users: 40, period: "深夜", intensity: "low", cpuUsage: 18, memoryUsage: 40 },
|
||||
{ hour: "04", users: 40, period: "深夜", intensity: "low", cpuUsage: 17, memoryUsage: 39 },
|
||||
{ hour: "05", users: 55, period: "清晨", intensity: "normal", cpuUsage: 19, memoryUsage: 41 },
|
||||
{ hour: "06", users: 26, period: "清晨", intensity: "low", cpuUsage: 28, memoryUsage: 48 },
|
||||
{ hour: "07", users: 67, period: "清晨", intensity: "normal", cpuUsage: 35, memoryUsage: 52 },
|
||||
{ hour: "08", users: 26, period: "工作時間", intensity: "normal", cpuUsage: 42, memoryUsage: 58 },
|
||||
{ hour: "09", users: 89, period: "工作時間", intensity: "high", cpuUsage: 58, memoryUsage: 68 },
|
||||
{ hour: "10", users: 88, period: "工作時間", intensity: "high", cpuUsage: 65, memoryUsage: 72 },
|
||||
{ hour: "11", users: 129, period: "工作時間", intensity: "peak", cpuUsage: 72, memoryUsage: 76 },
|
||||
{ hour: "12", users: 106, period: "工作時間", intensity: "peak", cpuUsage: 62, memoryUsage: 70 },
|
||||
{ hour: "13", users: 105, period: "工作時間", intensity: "peak", cpuUsage: 68, memoryUsage: 74 },
|
||||
{ hour: "14", users: 81, period: "工作時間", intensity: "high", cpuUsage: 78, memoryUsage: 82 },
|
||||
{ hour: "15", users: 119, period: "工作時間", intensity: "peak", cpuUsage: 74, memoryUsage: 79 },
|
||||
{ hour: "16", users: 126, period: "工作時間", intensity: "peak", cpuUsage: 67, memoryUsage: 73 },
|
||||
{ hour: "17", users: 112, period: "工作時間", intensity: "peak", cpuUsage: 59, memoryUsage: 67 },
|
||||
{ hour: "18", users: 22, period: "晚間", intensity: "low", cpuUsage: 45, memoryUsage: 58 },
|
||||
{ hour: "19", users: 60, period: "晚間", intensity: "normal", cpuUsage: 38, memoryUsage: 53 },
|
||||
{ hour: "20", users: 32, period: "晚間", intensity: "low", cpuUsage: 33, memoryUsage: 50 },
|
||||
{ hour: "21", users: 22, period: "晚間", intensity: "low", cpuUsage: 29, memoryUsage: 47 },
|
||||
{ hour: "22", users: 36, period: "晚間", intensity: "low", cpuUsage: 26, memoryUsage: 46 },
|
||||
{ hour: "23", users: 66, period: "晚間", intensity: "normal", cpuUsage: 24, memoryUsage: 44 },
|
||||
]
|
||||
|
||||
// 獲取顏色基於使用強度
|
||||
const getBarColor = (intensity: string) => {
|
||||
switch (intensity) {
|
||||
case "peak":
|
||||
return "#ef4444" // 紅色 - 高峰期
|
||||
case "high":
|
||||
return "#3b82f6" // 藍色 - 高使用期
|
||||
case "normal":
|
||||
return "#6b7280" // 灰藍色 - 正常期
|
||||
case "low":
|
||||
return "#9ca3af" // 灰色 - 低峰期
|
||||
default:
|
||||
return "#6b7280"
|
||||
}
|
||||
}
|
||||
|
||||
// 近7天使用趨勢數據（動態日期）
|
||||
const getRecentDates = () => {
|
||||
const dates = []
|
||||
const today = new Date()
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const date = new Date(today)
|
||||
date.setDate(today.getDate() - i)
|
||||
dates.push({
|
||||
date: `${date.getMonth() + 1}/${date.getDate()}`,
|
||||
fullDate: date.toLocaleDateString("zh-TW"),
|
||||
dayName: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()],
|
||||
})
|
||||
}
|
||||
return dates
|
||||
}
|
||||
|
||||
const recentDates = getRecentDates()
|
||||
const dailyUsageData = [
|
||||
{ ...recentDates[0], users: 245, sessions: 189, cpuPeak: 65, avgCpu: 45, memoryPeak: 58, requests: 1240 },
|
||||
{ ...recentDates[1], users: 267, sessions: 203, cpuPeak: 68, avgCpu: 48, memoryPeak: 62, requests: 1356 },
|
||||
{ ...recentDates[2], users: 289, sessions: 221, cpuPeak: 72, avgCpu: 52, memoryPeak: 65, requests: 1478 },
|
||||
{ ...recentDates[3], users: 312, sessions: 245, cpuPeak: 75, avgCpu: 55, memoryPeak: 68, requests: 1589 },
|
||||
{ ...recentDates[4], users: 298, sessions: 234, cpuPeak: 73, avgCpu: 53, memoryPeak: 66, requests: 1523 },
|
||||
{ ...recentDates[5], users: 334, sessions: 267, cpuPeak: 78, avgCpu: 58, memoryPeak: 71, requests: 1678 },
|
||||
{ ...recentDates[6], users: 356, sessions: 289, cpuPeak: 82, avgCpu: 62, memoryPeak: 75, requests: 1789 },
|
||||
]
|
||||
|
||||
const categoryData = [
|
||||
{ name: "AI工具", value: 35, color: "#3b82f6", users: 3083, apps: 45 },
|
||||
{ name: "數據分析", value: 25, color: "#ef4444", users: 1565, apps: 32 },
|
||||
{ name: "自動化", value: 20, color: "#10b981", users: 856, apps: 25 },
|
||||
{ name: "機器學習", value: 15, color: "#f59e0b", users: 743, apps: 19 },
|
||||
{ name: "其他", value: 5, color: "#8b5cf6", users: 234, apps: 6 },
|
||||
]
|
||||
|
||||
const topApps = [
|
||||
{ name: "智能客服助手", views: 1234, rating: 4.8, category: "AI工具" },
|
||||
{ name: "數據視覺化平台", views: 987, rating: 4.6, category: "數據分析" },
|
||||
{ name: "自動化工作流", views: 856, rating: 4.7, category: "自動化" },
|
||||
{ name: "預測分析系統", views: 743, rating: 4.5, category: "機器學習" },
|
||||
{ name: "文本分析工具", views: 692, rating: 4.4, category: "AI工具" },
|
||||
]
|
||||
|
||||
// 獲取歷史數據
|
||||
const getHistoricalData = (range: string) => {
|
||||
const baseData = [
|
||||
{ date: "12/1", users: 180, cpuPeak: 55, fullDate: "2024/12/1" },
|
||||
{ date: "12/8", users: 210, cpuPeak: 62, fullDate: "2024/12/8" },
|
||||
{ date: "12/15", users: 245, cpuPeak: 68, fullDate: "2024/12/15" },
|
||||
{ date: "12/22", users: 280, cpuPeak: 74, fullDate: "2024/12/22" },
|
||||
{ date: "12/29", users: 320, cpuPeak: 78, fullDate: "2024/12/29" },
|
||||
{ date: "1/5", users: 298, cpuPeak: 73, fullDate: "2025/1/5" },
|
||||
{ date: "1/12", users: 334, cpuPeak: 79, fullDate: "2025/1/12" },
|
||||
{ date: "1/19", users: 356, cpuPeak: 82, fullDate: "2025/1/19" },
|
||||
]
|
||||
|
||||
switch (range) {
|
||||
case "近7天":
|
||||
return dailyUsageData
|
||||
case "近30天":
|
||||
return baseData.slice(-4)
|
||||
case "近3個月":
|
||||
return baseData.slice(-6)
|
||||
case "近6個月":
|
||||
return baseData
|
||||
default:
|
||||
return dailyUsageData
|
||||
}
|
||||
}
|
||||
|
||||
// 獲取歷史統計數據
|
||||
const getHistoricalStats = (range: string) => {
|
||||
const data = getHistoricalData(range)
|
||||
const users = data.map((d) => d.users)
|
||||
const cpus = data.map((d) => d.cpuPeak)
|
||||
|
||||
return {
|
||||
avgUsers: Math.round(users.reduce((a, b) => a + b, 0) / users.length),
|
||||
maxUsers: Math.max(...users),
|
||||
avgCpu: Math.round(cpus.reduce((a, b) => a + b, 0) / cpus.length),
|
||||
maxCpu: Math.max(...cpus),
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold">數據分析</h1>
|
||||
<Badge variant="outline" className="text-sm">
|
||||
<Activity className="w-4 h-4 mr-1" />
|
||||
即時更新
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 關鍵指標卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">總用戶數</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">2,847</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="text-green-600">+12.5%</span> 較上月
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">今日活躍用戶</CardTitle>
|
||||
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">356</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="text-green-600">+8.2%</span> 較昨日
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">平均評分</CardTitle>
|
||||
<Star className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">4.6</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="text-green-600">+0.3</span> 較上週
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">應用總數</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">127</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="text-green-600">+5</span> 本週新增
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 圖表區域 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* 近7天使用趨勢與系統負載 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
近7天使用趨勢與系統負載
|
||||
</CardTitle>
|
||||
<Button variant="outline" size="sm" onClick={() => setShowHistoryModal(true)}>
|
||||
<Calendar className="w-4 h-4 mr-1" />
|
||||
查看歷史
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">用戶活躍度與CPU使用率關聯分析</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<ComposedChart data={dailyUsageData}>
|
||||
<defs>
|
||||
<linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fontSize: 12 }}
|
||||
axisLine={{ stroke: "#e5e7eb" }}
|
||||
tickLine={{ stroke: "#e5e7eb" }}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="users"
|
||||
orientation="left"
|
||||
tick={{ fontSize: 12 }}
|
||||
axisLine={{ stroke: "#e5e7eb" }}
|
||||
tickLine={{ stroke: "#e5e7eb" }}
|
||||
domain={[200, 400]}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="cpu"
|
||||
orientation="right"
|
||||
tick={{ fontSize: 12 }}
|
||||
axisLine={{ stroke: "#e5e7eb" }}
|
||||
tickLine={{ stroke: "#e5e7eb" }}
|
||||
domain={[40, 90]}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value, name, props) => {
|
||||
if (name === "users") {
|
||||
return [`${value} 人`, "活躍用戶"]
|
||||
}
|
||||
if (name === "cpuPeak") {
|
||||
return [`${value}%`, "CPU峰值"]
|
||||
}
|
||||
return [value, name]
|
||||
}}
|
||||
labelFormatter={(label, payload) => {
|
||||
if (payload && payload.length > 0) {
|
||||
const data = payload[0].payload
|
||||
return `${data.fullDate} (週${data.dayName})`
|
||||
}
|
||||
return label
|
||||
}}
|
||||
contentStyle={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
<Bar yAxisId="users" dataKey="users" fill="url(#colorUsers)" radius={[4, 4, 0, 0]} opacity={0.7} />
|
||||
<Line
|
||||
yAxisId="cpu"
|
||||
type="monotone"
|
||||
dataKey="cpuPeak"
|
||||
stroke="#ef4444"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: "#ef4444", strokeWidth: 2, r: 5 }}
|
||||
activeDot={{ r: 7, stroke: "#ef4444", strokeWidth: 2 }}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* 系統建議 */}
|
||||
<div className="mt-4 p-3 bg-orange-50 rounded-lg border border-orange-200">
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertTriangle className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-orange-800">系統負載建議</p>
|
||||
<p className="text-sm text-orange-700 mt-1">
|
||||
近7天CPU峰值達82%，當用戶數超過350時系統負載顯著增加。建議考慮硬體升級或負載均衡優化。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 應用類別分布 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>應用類別分布</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={categoryData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={90}
|
||||
innerRadius={40}
|
||||
fill="#8884d8"
|
||||
dataKey="value"
|
||||
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
||||
labelLine={false}
|
||||
>
|
||||
{categoryData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} stroke="#ffffff" strokeWidth={2} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
formatter={(value, name, props) => {
|
||||
const data = props.payload
|
||||
return [
|
||||
[`${value}%`, "占比"],
|
||||
[`${data.users?.toLocaleString()} 人`, "用戶數"],
|
||||
[`${data.apps} 個`, "應用數量"],
|
||||
]
|
||||
}}
|
||||
labelFormatter={(label) => label}
|
||||
contentStyle={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* 添加圖例說明 */}
|
||||
<div className="mt-4 grid grid-cols-2 gap-2 text-sm">
|
||||
{categoryData.map((category, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: category.color }} />
|
||||
<span className="text-gray-700">{category.name}</span>
|
||||
<span className="font-medium text-gray-900">{category.value}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 24小時使用模式 - 優化版 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5" />
|
||||
24小時使用模式
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">今日各時段用戶活躍度分析</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-4 flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
|
||||
<div className="w-3 h-3 bg-red-500 rounded mr-2"></div>
|
||||
高峰期 (80%+)
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded mr-2"></div>
|
||||
高使用期
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
|
||||
<div className="w-3 h-3 bg-gray-500 rounded mr-2"></div>
|
||||
正常期
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-gray-50 text-gray-600 border-gray-300">
|
||||
<div className="w-3 h-3 bg-gray-400 rounded mr-2"></div>
|
||||
低峰期
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<BarChart data={hourlyData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||||
<XAxis dataKey="hour" tick={{ fontSize: 12 }} tickFormatter={(value) => `${value}:00`} />
|
||||
<YAxis tick={{ fontSize: 12 }} />
|
||||
<Tooltip
|
||||
formatter={(value, name, props) => {
|
||||
const data = props.payload
|
||||
const getIntensityText = (intensity: string) => {
|
||||
switch (intensity) {
|
||||
case "peak":
|
||||
return "高峰期"
|
||||
case "high":
|
||||
return "高使用期"
|
||||
case "normal":
|
||||
return "正常期"
|
||||
case "low":
|
||||
return "低峰期"
|
||||
default:
|
||||
return "未知"
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
[`${value} 人`, "同時在線用戶"],
|
||||
[`${getIntensityText(data.intensity)}`, "時段分類"],
|
||||
[`${data.cpuUsage}%`, "CPU使用率"],
|
||||
[`${data.memoryUsage}%`, "記憶體使用率"],
|
||||
[`${data.period}`, "時段特性"],
|
||||
]
|
||||
}}
|
||||
labelFormatter={(label) => `${label}:00 時段`}
|
||||
contentStyle={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
fontSize: "14px",
|
||||
minWidth: "220px",
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="users" radius={[4, 4, 0, 0]} fill={(entry: any) => getBarColor(entry.intensity)}>
|
||||
{hourlyData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={getBarColor(entry.intensity)} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
<div className="mt-4 p-3 bg-blue-50 rounded-lg">
|
||||
<p className="text-sm text-blue-800 flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<strong>尖峰時段分析：</strong>工作時間 09:00-17:00 為主要使用時段，建議在此時段確保系統穩定性
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 熱門應用排行 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>熱門應用排行</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{topApps.map((app, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center font-bold text-blue-600">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium">{app.name}</h3>
|
||||
<p className="text-sm text-muted-foreground">{app.category}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="font-medium">{app.views}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-yellow-400 fill-current" />
|
||||
<span className="text-sm">{app.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 用戶回饋摘要 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>用戶回饋摘要</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="text-center p-4 border rounded-lg">
|
||||
<div className="text-2xl font-bold text-green-600">92%</div>
|
||||
<p className="text-sm text-muted-foreground">滿意度</p>
|
||||
</div>
|
||||
<div className="text-center p-4 border rounded-lg">
|
||||
<div className="text-2xl font-bold text-blue-600">4.6</div>
|
||||
<p className="text-sm text-muted-foreground">平均評分</p>
|
||||
</div>
|
||||
<div className="text-center p-4 border rounded-lg">
|
||||
<div className="text-2xl font-bold text-purple-600">156</div>
|
||||
<p className="text-sm text-muted-foreground">本週回饋</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 歷史數據查看模態框 */}
|
||||
{showHistoryModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[80vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold">歷史數據查看</h2>
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowHistoryModal(false)}>
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 日期範圍選擇 */}
|
||||
<div className="mb-6">
|
||||
<div className="flex gap-2 mb-4">
|
||||
{["近7天", "近30天", "近3個月", "近6個月"].map((range) => (
|
||||
<Button
|
||||
key={range}
|
||||
variant={selectedDateRange === range ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setSelectedDateRange(range)}
|
||||
>
|
||||
{range}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 歷史數據圖表 */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>歷史使用趨勢 - {selectedDateRange}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<ComposedChart data={getHistoricalData(selectedDateRange)}>
|
||||
<defs>
|
||||
<linearGradient id="colorUsersHistory" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||||
<XAxis dataKey="date" tick={{ fontSize: 12 }} />
|
||||
<YAxis yAxisId="users" orientation="left" tick={{ fontSize: 12 }} />
|
||||
<YAxis yAxisId="cpu" orientation="right" tick={{ fontSize: 12 }} />
|
||||
<Tooltip
|
||||
formatter={(value, name, props) => {
|
||||
if (name === "users") {
|
||||
return [`${value} 人`, "活躍用戶"]
|
||||
}
|
||||
if (name === "cpuPeak") {
|
||||
return [`${value}%`, "CPU峰值"]
|
||||
}
|
||||
return [value, name]
|
||||
}}
|
||||
labelFormatter={(label, payload) => {
|
||||
if (payload && payload.length > 0) {
|
||||
const data = payload[0].payload
|
||||
return data.fullDate || label
|
||||
}
|
||||
return label
|
||||
}}
|
||||
contentStyle={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
yAxisId="users"
|
||||
dataKey="users"
|
||||
fill="url(#colorUsersHistory)"
|
||||
radius={[2, 2, 0, 0]}
|
||||
opacity={0.7}
|
||||
/>
|
||||
<Line
|
||||
yAxisId="cpu"
|
||||
type="monotone"
|
||||
dataKey="cpuPeak"
|
||||
stroke="#ef4444"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "#ef4444", strokeWidth: 1, r: 3 }}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 歷史數據統計摘要 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{getHistoricalStats(selectedDateRange).avgUsers}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">平均用戶數</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{getHistoricalStats(selectedDateRange).maxUsers}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">最高用戶數</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-orange-600">
|
||||
{getHistoricalStats(selectedDateRange).avgCpu}%
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">平均CPU使用率</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-red-600">
|
||||
{getHistoricalStats(selectedDateRange).maxCpu}%
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">最高CPU使用率</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
991
components/admin/app-management.tsx
Normal file
991
components/admin/app-management.tsx
Normal file
@@ -0,0 +1,991 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
MoreHorizontal,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
Star,
|
||||
Heart,
|
||||
TrendingUp,
|
||||
Bot,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
MessageSquare,
|
||||
ExternalLink,
|
||||
AlertTriangle,
|
||||
X,
|
||||
Check,
|
||||
TrendingDown,
|
||||
Link,
|
||||
Zap,
|
||||
Brain,
|
||||
Mic,
|
||||
ImageIcon,
|
||||
FileText,
|
||||
BarChart3,
|
||||
Camera,
|
||||
Music,
|
||||
Video,
|
||||
Code,
|
||||
Database,
|
||||
Globe,
|
||||
Smartphone,
|
||||
Monitor,
|
||||
Headphones,
|
||||
Palette,
|
||||
Calculator,
|
||||
Shield,
|
||||
Settings,
|
||||
Lightbulb,
|
||||
} from "lucide-react"
|
||||
|
||||
// Add available icons array after imports
|
||||
const availableIcons = [
|
||||
{ name: "Bot", icon: Bot, color: "from-blue-500 to-purple-500" },
|
||||
{ name: "Brain", icon: Brain, color: "from-purple-500 to-pink-500" },
|
||||
{ name: "Zap", icon: Zap, color: "from-yellow-500 to-orange-500" },
|
||||
{ name: "Mic", icon: Mic, color: "from-green-500 to-teal-500" },
|
||||
{ name: "ImageIcon", icon: ImageIcon, color: "from-pink-500 to-rose-500" },
|
||||
{ name: "FileText", icon: FileText, color: "from-blue-500 to-cyan-500" },
|
||||
{ name: "BarChart3", icon: BarChart3, color: "from-emerald-500 to-green-500" },
|
||||
{ name: "Camera", icon: Camera, color: "from-indigo-500 to-purple-500" },
|
||||
{ name: "Music", icon: Music, color: "from-violet-500 to-purple-500" },
|
||||
{ name: "Video", icon: Video, color: "from-red-500 to-pink-500" },
|
||||
{ name: "Code", icon: Code, color: "from-gray-500 to-slate-500" },
|
||||
{ name: "Database", icon: Database, color: "from-cyan-500 to-blue-500" },
|
||||
{ name: "Globe", icon: Globe, color: "from-blue-500 to-indigo-500" },
|
||||
{ name: "Smartphone", icon: Smartphone, color: "from-slate-500 to-gray-500" },
|
||||
{ name: "Monitor", icon: Monitor, color: "from-gray-600 to-slate-600" },
|
||||
{ name: "Headphones", icon: Headphones, color: "from-purple-500 to-violet-500" },
|
||||
{ name: "Palette", icon: Palette, color: "from-pink-500 to-purple-500" },
|
||||
{ name: "Calculator", icon: Calculator, color: "from-orange-500 to-red-500" },
|
||||
{ name: "Shield", icon: Shield, color: "from-green-500 to-emerald-500" },
|
||||
{ name: "Settings", icon: Settings, color: "from-gray-500 to-zinc-500" },
|
||||
{ name: "Lightbulb", icon: Lightbulb, color: "from-yellow-500 to-amber-500" },
|
||||
]
|
||||
|
||||
// App data - empty for production
|
||||
const mockApps: any[] = []
|
||||
|
||||
export function AppManagement() {
|
||||
const [apps, setApps] = useState(mockApps)
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [selectedType, setSelectedType] = useState("all")
|
||||
const [selectedStatus, setSelectedStatus] = useState("all")
|
||||
const [selectedApp, setSelectedApp] = useState<any>(null)
|
||||
const [showAppDetail, setShowAppDetail] = useState(false)
|
||||
const [showAddApp, setShowAddApp] = useState(false)
|
||||
const [showEditApp, setShowEditApp] = useState(false)
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||||
const [showApprovalDialog, setShowApprovalDialog] = useState(false)
|
||||
const [approvalAction, setApprovalAction] = useState<"approve" | "reject">("approve")
|
||||
const [approvalReason, setApprovalReason] = useState("")
|
||||
const [newApp, setNewApp] = useState({
|
||||
name: "",
|
||||
type: "文字處理",
|
||||
department: "HQBU",
|
||||
creator: "",
|
||||
description: "",
|
||||
appUrl: "",
|
||||
icon: "Bot",
|
||||
iconColor: "from-blue-500 to-purple-500",
|
||||
})
|
||||
|
||||
const filteredApps = apps.filter((app) => {
|
||||
const matchesSearch =
|
||||
app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
app.creator.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesType = selectedType === "all" || app.type === selectedType
|
||||
const matchesStatus = selectedStatus === "all" || app.status === selectedStatus
|
||||
|
||||
return matchesSearch && matchesType && matchesStatus
|
||||
})
|
||||
|
||||
const handleViewApp = (app: any) => {
|
||||
setSelectedApp(app)
|
||||
setShowAppDetail(true)
|
||||
}
|
||||
|
||||
const handleEditApp = (app: any) => {
|
||||
setSelectedApp(app)
|
||||
setNewApp({
|
||||
name: app.name,
|
||||
type: app.type,
|
||||
department: app.department,
|
||||
creator: app.creator,
|
||||
description: app.description,
|
||||
appUrl: app.appUrl,
|
||||
icon: app.icon || "Bot",
|
||||
iconColor: app.iconColor || "from-blue-500 to-purple-500",
|
||||
})
|
||||
setShowEditApp(true)
|
||||
}
|
||||
|
||||
const handleDeleteApp = (app: any) => {
|
||||
setSelectedApp(app)
|
||||
setShowDeleteConfirm(true)
|
||||
}
|
||||
|
||||
const confirmDeleteApp = () => {
|
||||
if (selectedApp) {
|
||||
setApps(apps.filter((app) => app.id !== selectedApp.id))
|
||||
setShowDeleteConfirm(false)
|
||||
setSelectedApp(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleAppStatus = (appId: string) => {
|
||||
setApps(
|
||||
apps.map((app) =>
|
||||
app.id === appId
|
||||
? {
|
||||
...app,
|
||||
status: app.status === "published" ? "draft" : "published",
|
||||
}
|
||||
: app,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
const handleApprovalAction = (app: any, action: "approve" | "reject") => {
|
||||
setSelectedApp(app)
|
||||
setApprovalAction(action)
|
||||
setApprovalReason("")
|
||||
setShowApprovalDialog(true)
|
||||
}
|
||||
|
||||
const confirmApproval = () => {
|
||||
if (selectedApp) {
|
||||
setApps(
|
||||
apps.map((app) =>
|
||||
app.id === selectedApp.id
|
||||
? {
|
||||
...app,
|
||||
status: approvalAction === "approve" ? "published" : "rejected",
|
||||
}
|
||||
: app,
|
||||
),
|
||||
)
|
||||
setShowApprovalDialog(false)
|
||||
setSelectedApp(null)
|
||||
setApprovalReason("")
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddApp = () => {
|
||||
const app = {
|
||||
id: Date.now().toString(),
|
||||
...newApp,
|
||||
status: "pending",
|
||||
createdAt: new Date().toISOString().split("T")[0],
|
||||
views: 0,
|
||||
likes: 0,
|
||||
rating: 0,
|
||||
reviews: 0,
|
||||
}
|
||||
setApps([...apps, app])
|
||||
setNewApp({
|
||||
name: "",
|
||||
type: "文字處理",
|
||||
department: "HQBU",
|
||||
creator: "",
|
||||
description: "",
|
||||
appUrl: "",
|
||||
icon: "Bot",
|
||||
iconColor: "from-blue-500 to-purple-500",
|
||||
})
|
||||
setShowAddApp(false)
|
||||
}
|
||||
|
||||
const handleUpdateApp = () => {
|
||||
if (selectedApp) {
|
||||
setApps(
|
||||
apps.map((app) =>
|
||||
app.id === selectedApp.id
|
||||
? {
|
||||
...app,
|
||||
...newApp,
|
||||
}
|
||||
: app,
|
||||
),
|
||||
)
|
||||
setShowEditApp(false)
|
||||
setSelectedApp(null)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "published":
|
||||
return "bg-green-100 text-green-800 border-green-200"
|
||||
case "pending":
|
||||
return "bg-yellow-100 text-yellow-800 border-yellow-200"
|
||||
case "draft":
|
||||
return "bg-gray-100 text-gray-800 border-gray-200"
|
||||
case "rejected":
|
||||
return "bg-red-100 text-red-800 border-red-200"
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800 border-gray-200"
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
const colors = {
|
||||
文字處理: "bg-blue-100 text-blue-800 border-blue-200",
|
||||
圖像生成: "bg-purple-100 text-purple-800 border-purple-200",
|
||||
語音辨識: "bg-green-100 text-green-800 border-green-200",
|
||||
推薦系統: "bg-orange-100 text-orange-800 border-orange-200",
|
||||
}
|
||||
return colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800 border-gray-200"
|
||||
}
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case "published":
|
||||
return "已發布"
|
||||
case "pending":
|
||||
return "待審核"
|
||||
case "draft":
|
||||
return "草稿"
|
||||
case "rejected":
|
||||
return "已拒絕"
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">應用管理</h1>
|
||||
<p className="text-gray-600">管理平台上的所有 AI 應用</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setShowAddApp(true)}
|
||||
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
新增應用
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">總應用數</p>
|
||||
<p className="text-2xl font-bold">{apps.length}</p>
|
||||
</div>
|
||||
<Bot className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">已發布</p>
|
||||
<p className="text-2xl font-bold">{apps.filter((a) => a.status === "published").length}</p>
|
||||
</div>
|
||||
<CheckCircle className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">待審核</p>
|
||||
<p className="text-2xl font-bold">{apps.filter((a) => a.status === "pending").length}</p>
|
||||
</div>
|
||||
<Clock className="w-8 h-8 text-yellow-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex flex-col lg:flex-row gap-4 items-center">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
placeholder="搜尋應用名稱或創建者..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Select value={selectedType} onValueChange={setSelectedType}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="類型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部類型</SelectItem>
|
||||
<SelectItem value="文字處理">文字處理</SelectItem>
|
||||
<SelectItem value="圖像生成">圖像生成</SelectItem>
|
||||
<SelectItem value="語音辨識">語音辨識</SelectItem>
|
||||
<SelectItem value="推薦系統">推薦系統</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={selectedStatus} onValueChange={setSelectedStatus}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="狀態" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部狀態</SelectItem>
|
||||
<SelectItem value="published">已發布</SelectItem>
|
||||
<SelectItem value="pending">待審核</SelectItem>
|
||||
<SelectItem value="draft">草稿</SelectItem>
|
||||
<SelectItem value="rejected">已拒絕</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Apps Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>應用列表 ({filteredApps.length})</CardTitle>
|
||||
<CardDescription>管理所有 AI 應用</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>應用名稱</TableHead>
|
||||
<TableHead>類型</TableHead>
|
||||
<TableHead>創建者</TableHead>
|
||||
<TableHead>狀態</TableHead>
|
||||
<TableHead>統計</TableHead>
|
||||
<TableHead>評分</TableHead>
|
||||
<TableHead>創建日期</TableHead>
|
||||
<TableHead>操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredApps.map((app) => (
|
||||
<TableRow key={app.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={`w-8 h-8 bg-gradient-to-r ${app.iconColor} rounded-lg flex items-center justify-center`}
|
||||
>
|
||||
{(() => {
|
||||
const IconComponent = availableIcons.find((icon) => icon.name === app.icon)?.icon || Bot
|
||||
return <IconComponent className="w-4 h-4 text-white" />
|
||||
})()}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<p className="font-medium">{app.name}</p>
|
||||
{app.appUrl && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => window.open(app.appUrl, "_blank")}
|
||||
title="開啟應用"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className={getTypeColor(app.type)}>
|
||||
{app.type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{app.creator}</p>
|
||||
<p className="text-sm text-gray-500">{app.department}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className={getStatusColor(app.status)}>
|
||||
{getStatusText(app.status)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">
|
||||
<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>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Star className="w-4 h-4 text-yellow-500" />
|
||||
<span className="font-medium">{app.rating}</span>
|
||||
<span className="text-sm text-gray-500">({app.reviews})</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-gray-600">{app.createdAt}</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleViewApp(app)}>
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
查看詳情
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEditApp(app)}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
編輯應用
|
||||
</DropdownMenuItem>
|
||||
{app.appUrl && (
|
||||
<DropdownMenuItem onClick={() => window.open(app.appUrl, "_blank")}>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
開啟應用
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{app.status === "pending" && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={() => handleApprovalAction(app, "approve")}>
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
批准發布
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleApprovalAction(app, "reject")}>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
拒絕申請
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
{app.status !== "pending" && (
|
||||
<DropdownMenuItem onClick={() => handleToggleAppStatus(app.id)}>
|
||||
{app.status === "published" ? (
|
||||
<>
|
||||
<TrendingDown className="w-4 h-4 mr-2" />
|
||||
下架應用
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
發布應用
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem className="text-red-600" onClick={() => handleDeleteApp(app)}>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
刪除應用
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add App Dialog */}
|
||||
<Dialog open={showAddApp} onOpenChange={setShowAddApp}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新增 AI 應用</DialogTitle>
|
||||
<DialogDescription>創建一個新的 AI 應用</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">應用名稱 *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={newApp.name}
|
||||
onChange={(e) => setNewApp({ ...newApp, name: e.target.value })}
|
||||
placeholder="輸入應用名稱"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="creator">創建者 *</Label>
|
||||
<Input
|
||||
id="creator"
|
||||
value={newApp.creator}
|
||||
onChange={(e) => setNewApp({ ...newApp, creator: e.target.value })}
|
||||
placeholder="輸入創建者姓名"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="type">應用類型</Label>
|
||||
<Select value={newApp.type} onValueChange={(value) => setNewApp({ ...newApp, type: value })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="文字處理">文字處理</SelectItem>
|
||||
<SelectItem value="圖像生成">圖像生成</SelectItem>
|
||||
<SelectItem value="語音辨識">語音辨識</SelectItem>
|
||||
<SelectItem value="推薦系統">推薦系統</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="department">所屬部門</Label>
|
||||
<Select
|
||||
value={newApp.department}
|
||||
onValueChange={(value) => setNewApp({ ...newApp, department: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||||
<SelectItem value="SBU">SBU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="icon">應用圖示</Label>
|
||||
<div className="grid grid-cols-7 gap-2 p-4 border rounded-lg max-h-60 overflow-y-auto bg-gray-50">
|
||||
{availableIcons.map((iconOption) => {
|
||||
const IconComponent = iconOption.icon
|
||||
return (
|
||||
<button
|
||||
key={iconOption.name}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setNewApp({
|
||||
...newApp,
|
||||
icon: iconOption.name,
|
||||
iconColor: iconOption.color,
|
||||
})
|
||||
}}
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all hover:scale-105 ${
|
||||
newApp.icon === iconOption.name
|
||||
? `bg-gradient-to-r ${iconOption.color} shadow-lg ring-2 ring-blue-500`
|
||||
: `bg-gradient-to-r ${iconOption.color} opacity-70 hover:opacity-100`
|
||||
}`}
|
||||
title={iconOption.name}
|
||||
>
|
||||
<IconComponent className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">選擇一個代表您應用的圖示</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="appUrl">應用連結</Label>
|
||||
<div className="relative">
|
||||
<Link className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="appUrl"
|
||||
value={newApp.appUrl}
|
||||
onChange={(e) => setNewApp({ ...newApp, appUrl: e.target.value })}
|
||||
placeholder="https://your-app.example.com"
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">用戶點擊應用時將跳轉到此連結</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">應用描述 *</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={newApp.description}
|
||||
onChange={(e) => setNewApp({ ...newApp, description: e.target.value })}
|
||||
placeholder="描述應用的功能和特色"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowAddApp(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddApp} disabled={!newApp.name || !newApp.creator || !newApp.description}>
|
||||
創建應用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit App Dialog */}
|
||||
<Dialog open={showEditApp} onOpenChange={setShowEditApp}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>編輯應用</DialogTitle>
|
||||
<DialogDescription>修改應用資訊</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-name">應用名稱 *</Label>
|
||||
<Input
|
||||
id="edit-name"
|
||||
value={newApp.name}
|
||||
onChange={(e) => setNewApp({ ...newApp, name: e.target.value })}
|
||||
placeholder="輸入應用名稱"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-creator">創建者 *</Label>
|
||||
<Input
|
||||
id="edit-creator"
|
||||
value={newApp.creator}
|
||||
onChange={(e) => setNewApp({ ...newApp, creator: e.target.value })}
|
||||
placeholder="輸入創建者姓名"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-type">應用類型</Label>
|
||||
<Select value={newApp.type} onValueChange={(value) => setNewApp({ ...newApp, type: value })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="文字處理">文字處理</SelectItem>
|
||||
<SelectItem value="圖像生成">圖像生成</SelectItem>
|
||||
<SelectItem value="語音辨識">語音辨識</SelectItem>
|
||||
<SelectItem value="推薦系統">推薦系統</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-department">所屬部門</Label>
|
||||
<Select
|
||||
value={newApp.department}
|
||||
onValueChange={(value) => setNewApp({ ...newApp, department: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||||
<SelectItem value="SBU">SBU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="icon">應用圖示</Label>
|
||||
<div className="grid grid-cols-7 gap-2 p-4 border rounded-lg max-h-60 overflow-y-auto bg-gray-50">
|
||||
{availableIcons.map((iconOption) => {
|
||||
const IconComponent = iconOption.icon
|
||||
return (
|
||||
<button
|
||||
key={iconOption.name}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setNewApp({
|
||||
...newApp,
|
||||
icon: iconOption.name,
|
||||
iconColor: iconOption.color,
|
||||
})
|
||||
}}
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center transition-all hover:scale-105 ${
|
||||
newApp.icon === iconOption.name
|
||||
? `bg-gradient-to-r ${iconOption.color} shadow-lg ring-2 ring-blue-500`
|
||||
: `bg-gradient-to-r ${iconOption.color} opacity-70 hover:opacity-100`
|
||||
}`}
|
||||
title={iconOption.name}
|
||||
>
|
||||
<IconComponent className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-appUrl">應用連結</Label>
|
||||
<div className="relative">
|
||||
<Link className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="edit-appUrl"
|
||||
value={newApp.appUrl}
|
||||
onChange={(e) => setNewApp({ ...newApp, appUrl: e.target.value })}
|
||||
placeholder="https://your-app.example.com"
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-description">應用描述 *</Label>
|
||||
<Textarea
|
||||
id="edit-description"
|
||||
value={newApp.description}
|
||||
onChange={(e) => setNewApp({ ...newApp, description: e.target.value })}
|
||||
placeholder="描述應用的功能和特色"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowEditApp(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleUpdateApp} disabled={!newApp.name || !newApp.creator || !newApp.description}>
|
||||
更新應用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<AlertTriangle className="w-5 h-5 text-red-500" />
|
||||
<span>確認刪除</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>您確定要刪除應用「{selectedApp?.name}」嗎？此操作無法復原。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowDeleteConfirm(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmDeleteApp}>
|
||||
確認刪除
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Approval Dialog */}
|
||||
<Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
{approvalAction === "approve" ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||
) : (
|
||||
<X className="w-5 h-5 text-red-500" />
|
||||
)}
|
||||
<span>{approvalAction === "approve" ? "批准應用" : "拒絕應用"}</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{approvalAction === "approve"
|
||||
? `確認批准應用「${selectedApp?.name}」並發布到平台？`
|
||||
: `確認拒絕應用「${selectedApp?.name}」的發布申請？`}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="approval-reason">
|
||||
{approvalAction === "approve" ? "批准備註（可選）" : "拒絕原因 *"}
|
||||
</Label>
|
||||
<Textarea
|
||||
id="approval-reason"
|
||||
value={approvalReason}
|
||||
onChange={(e) => setApprovalReason(e.target.value)}
|
||||
placeholder={approvalAction === "approve" ? "輸入批准備註..." : "請說明拒絕原因，以便開發者了解並改進"}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowApprovalDialog(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={confirmApproval}
|
||||
variant={approvalAction === "approve" ? "default" : "destructive"}
|
||||
disabled={approvalAction === "reject" && !approvalReason.trim()}
|
||||
>
|
||||
{approvalAction === "approve" ? "確認批准" : "確認拒絕"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* App Detail Dialog */}
|
||||
<Dialog open={showAppDetail} onOpenChange={setShowAppDetail}>
|
||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>應用詳情</DialogTitle>
|
||||
<DialogDescription>查看應用的詳細資訊和統計數據</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{selectedApp && (
|
||||
<Tabs defaultValue="info" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="info">基本資訊</TabsTrigger>
|
||||
<TabsTrigger value="stats">統計數據</TabsTrigger>
|
||||
<TabsTrigger value="reviews">評價管理</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="info" className="space-y-4">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div
|
||||
className={`w-16 h-16 bg-gradient-to-r ${selectedApp.iconColor} rounded-xl flex items-center justify-center`}
|
||||
>
|
||||
{(() => {
|
||||
const IconComponent = availableIcons.find((icon) => icon.name === selectedApp.icon)?.icon || Bot
|
||||
return <IconComponent className="w-8 h-8 text-white" />
|
||||
})()}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<h3 className="text-xl font-semibold">{selectedApp.name}</h3>
|
||||
{selectedApp.appUrl && (
|
||||
<Button variant="outline" size="sm" onClick={() => window.open(selectedApp.appUrl, "_blank")}>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
開啟應用
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-600 mb-2">{selectedApp.description}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className={getTypeColor(selectedApp.type)}>
|
||||
{selectedApp.type}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-gray-100 text-gray-700">
|
||||
{selectedApp.department}
|
||||
</Badge>
|
||||
<Badge variant="outline" className={getStatusColor(selectedApp.status)}>
|
||||
{getStatusText(selectedApp.status)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">創建者</p>
|
||||
<p className="font-medium">{selectedApp.creator}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">創建日期</p>
|
||||
<p className="font-medium">{selectedApp.createdAt}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">應用ID</p>
|
||||
<p className="font-medium">{selectedApp.id}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">所屬部門</p>
|
||||
<p className="font-medium">{selectedApp.department}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedApp.appUrl && (
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">應用連結</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<p className="font-medium text-blue-600">{selectedApp.appUrl}</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigator.clipboard.writeText(selectedApp.appUrl)}
|
||||
>
|
||||
複製
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="stats" className="space-y-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-bold text-blue-600">{selectedApp.views}</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-red-600">{selectedApp.likes}</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-yellow-600">{selectedApp.rating}</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">{selectedApp.reviews}</p>
|
||||
<p className="text-sm text-gray-600">評價數量</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="reviews" className="space-y-4">
|
||||
<div className="text-center py-8">
|
||||
<MessageSquare className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-gray-600 mb-2">評價管理</h3>
|
||||
<p className="text-gray-500">此功能將顯示應用的所有評價和管理選項</p>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
6585
components/admin/competition-management.tsx
Normal file
6585
components/admin/competition-management.tsx
Normal file
File diff suppressed because it is too large
Load Diff
170
components/admin/dashboard.tsx
Normal file
170
components/admin/dashboard.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
"use client"
|
||||
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"
|
||||
|
||||
// Dashboard data - empty for production
|
||||
const mockStats = {
|
||||
totalUsers: 0,
|
||||
activeUsers: 0,
|
||||
totalApps: 0,
|
||||
totalCompetitions: 0,
|
||||
totalReviews: 0,
|
||||
totalViews: 0,
|
||||
totalLikes: 0,
|
||||
}
|
||||
|
||||
const recentActivities: any[] = []
|
||||
|
||||
const topApps: any[] = []
|
||||
|
||||
export function AdminDashboard() {
|
||||
const { competitions } = useCompetition()
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Welcome Section */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">管理儀表板</h1>
|
||||
<p className="text-gray-600">歡迎回到 AI 展示平台管理後台</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">總用戶數</CardTitle>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">AI 應用數</CardTitle>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">競賽活動</CardTitle>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">總瀏覽量</CardTitle>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Recent Activities */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Activity className="w-5 h-5" />
|
||||
<span>最新活動</span>
|
||||
</CardTitle>
|
||||
<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" />
|
||||
</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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Top Performing Apps */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Award className="w-5 h-5" />
|
||||
<span>熱門應用</span>
|
||||
</CardTitle>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary">{app.rating} ⭐</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>快速操作</CardTitle>
|
||||
<CardDescription>常用管理功能</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Button className="h-20 flex flex-col space-y-2">
|
||||
<Users className="w-6 h-6" />
|
||||
<span>管理用戶</span>
|
||||
</Button>
|
||||
<Button className="h-20 flex flex-col space-y-2 bg-transparent" variant="outline">
|
||||
<Bot className="w-6 h-6" />
|
||||
<span>新增應用</span>
|
||||
</Button>
|
||||
<Button className="h-20 flex flex-col space-y-2 bg-transparent" variant="outline">
|
||||
<Trophy className="w-6 h-6" />
|
||||
<span>創建競賽</span>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
99
components/admin/judge-list-dialog.tsx
Normal file
99
components/admin/judge-list-dialog.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Copy, Users } from "lucide-react"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
|
||||
interface Judge {
|
||||
id: string
|
||||
name: string
|
||||
specialty: string
|
||||
}
|
||||
|
||||
interface JudgeListDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
judges: Judge[]
|
||||
}
|
||||
|
||||
export function JudgeListDialog({ open, onOpenChange, judges }: JudgeListDialogProps) {
|
||||
const { toast } = useToast()
|
||||
|
||||
const handleCopyJudgeId = async (judgeId: string, judgeName: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(judgeId)
|
||||
toast({
|
||||
title: "ID已複製",
|
||||
description: `${judgeName}的ID已複製到剪貼簿`,
|
||||
})
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "複製失敗",
|
||||
description: "無法複製ID，請手動複製",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<Users className="w-5 h-5" />
|
||||
<span>評審清單</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
當前競賽的評審ID和基本資訊
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{judges.map((judge) => (
|
||||
<Card key={judge.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 左側：頭像和資訊 */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="w-12 h-12">
|
||||
<AvatarFallback className="text-sm font-semibold bg-gray-100">
|
||||
{judge.name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">{judge.name}</h3>
|
||||
<p className="text-sm text-gray-600">{judge.specialty}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右側：ID和複製按鈕 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-gray-100 px-3 py-1 rounded-lg">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
ID: {judge.id}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleCopyJudgeId(judge.id, judge.name)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
<span>複製</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
744
components/admin/proposal-management.tsx
Normal file
744
components/admin/proposal-management.tsx
Normal file
@@ -0,0 +1,744 @@
|
||||
"use client"
|
||||
|
||||
import { useState } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import {
|
||||
Lightbulb,
|
||||
Plus,
|
||||
MoreHorizontal,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
FileText,
|
||||
Users,
|
||||
Calendar,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
Loader2,
|
||||
Target,
|
||||
AlertCircle,
|
||||
} from "lucide-react"
|
||||
import type { Proposal } from "@/types/competition"
|
||||
|
||||
export function ProposalManagement() {
|
||||
const { proposals, addProposal, updateProposal, getProposalById, teams, getTeamById } = useCompetition()
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [selectedTeam, setSelectedTeam] = useState("all")
|
||||
const [selectedProposal, setSelectedProposal] = useState<Proposal | null>(null)
|
||||
const [showProposalDetail, setShowProposalDetail] = useState(false)
|
||||
const [showAddProposal, setShowAddProposal] = useState(false)
|
||||
const [showEditProposal, setShowEditProposal] = useState(false)
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [success, setSuccess] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
|
||||
const [newProposal, setNewProposal] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
problemStatement: "",
|
||||
solution: "",
|
||||
expectedImpact: "",
|
||||
teamId: "",
|
||||
attachments: [] as string[],
|
||||
})
|
||||
|
||||
const filteredProposals = proposals.filter((proposal) => {
|
||||
const team = getTeamById(proposal.teamId)
|
||||
const matchesSearch =
|
||||
proposal.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
proposal.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
team?.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesTeam = selectedTeam === "all" || proposal.teamId === selectedTeam
|
||||
return matchesSearch && matchesTeam
|
||||
})
|
||||
|
||||
const handleViewProposal = (proposal: Proposal) => {
|
||||
setSelectedProposal(proposal)
|
||||
setShowProposalDetail(true)
|
||||
}
|
||||
|
||||
const handleEditProposal = (proposal: Proposal) => {
|
||||
setSelectedProposal(proposal)
|
||||
setNewProposal({
|
||||
title: proposal.title,
|
||||
description: proposal.description,
|
||||
problemStatement: proposal.problemStatement,
|
||||
solution: proposal.solution,
|
||||
expectedImpact: proposal.expectedImpact,
|
||||
teamId: proposal.teamId,
|
||||
attachments: proposal.attachments || [],
|
||||
})
|
||||
setShowEditProposal(true)
|
||||
}
|
||||
|
||||
const handleDeleteProposal = (proposal: Proposal) => {
|
||||
setSelectedProposal(proposal)
|
||||
setShowDeleteConfirm(true)
|
||||
}
|
||||
|
||||
const confirmDeleteProposal = () => {
|
||||
if (selectedProposal) {
|
||||
// In a real app, you would call a delete function here
|
||||
setShowDeleteConfirm(false)
|
||||
setSelectedProposal(null)
|
||||
setSuccess("提案刪除成功！")
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddProposal = async () => {
|
||||
setError("")
|
||||
|
||||
if (
|
||||
!newProposal.title ||
|
||||
!newProposal.description ||
|
||||
!newProposal.problemStatement ||
|
||||
!newProposal.solution ||
|
||||
!newProposal.expectedImpact ||
|
||||
!newProposal.teamId
|
||||
) {
|
||||
setError("請填寫所有必填欄位")
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
addProposal({
|
||||
...newProposal,
|
||||
submittedAt: new Date().toISOString(),
|
||||
})
|
||||
|
||||
setShowAddProposal(false)
|
||||
setNewProposal({
|
||||
title: "",
|
||||
description: "",
|
||||
problemStatement: "",
|
||||
solution: "",
|
||||
expectedImpact: "",
|
||||
teamId: "",
|
||||
attachments: [],
|
||||
})
|
||||
setSuccess("提案創建成功！")
|
||||
setIsLoading(false)
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
}
|
||||
|
||||
const handleUpdateProposal = async () => {
|
||||
if (!selectedProposal) return
|
||||
|
||||
setError("")
|
||||
|
||||
if (
|
||||
!newProposal.title ||
|
||||
!newProposal.description ||
|
||||
!newProposal.problemStatement ||
|
||||
!newProposal.solution ||
|
||||
!newProposal.expectedImpact ||
|
||||
!newProposal.teamId
|
||||
) {
|
||||
setError("請填寫所有必填欄位")
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
updateProposal(selectedProposal.id, newProposal)
|
||||
setShowEditProposal(false)
|
||||
setSelectedProposal(null)
|
||||
setSuccess("提案更新成功！")
|
||||
setIsLoading(false)
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Success/Error Messages */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">提案管理</h1>
|
||||
<p className="text-gray-600">管理創新提案和解決方案</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setShowAddProposal(true)}
|
||||
className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
新增提案
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">總提案數</p>
|
||||
<p className="text-2xl font-bold">{proposals.length}</p>
|
||||
</div>
|
||||
<Lightbulb className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">參與團隊</p>
|
||||
<p className="text-2xl font-bold">{new Set(proposals.map((p) => p.teamId)).size}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">本月提案</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{
|
||||
proposals.filter((p) => {
|
||||
const submittedDate = new Date(p.submittedAt)
|
||||
const now = new Date()
|
||||
return (
|
||||
submittedDate.getMonth() === now.getMonth() && submittedDate.getFullYear() === now.getFullYear()
|
||||
)
|
||||
}).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<Calendar className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex flex-col lg:flex-row gap-4 items-center">
|
||||
<div className="flex-1 relative">
|
||||
<Input
|
||||
placeholder="搜尋提案標題、描述或團隊名稱..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Select value={selectedTeam} onValueChange={setSelectedTeam}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="團隊" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部團隊</SelectItem>
|
||||
{teams.map((team) => (
|
||||
<SelectItem key={team.id} value={team.id}>
|
||||
{team.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Proposals Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>提案列表 ({filteredProposals.length})</CardTitle>
|
||||
<CardDescription>管理所有創新提案</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>提案標題</TableHead>
|
||||
<TableHead>提案團隊</TableHead>
|
||||
<TableHead>問題領域</TableHead>
|
||||
<TableHead>提交日期</TableHead>
|
||||
<TableHead>附件</TableHead>
|
||||
<TableHead>操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredProposals.map((proposal) => {
|
||||
const team = getTeamById(proposal.teamId)
|
||||
const submittedDate = new Date(proposal.submittedAt)
|
||||
|
||||
return (
|
||||
<TableRow key={proposal.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
|
||||
<Lightbulb className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{proposal.title}</p>
|
||||
<p className="text-sm text-gray-500 line-clamp-1">{proposal.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-6 h-6 bg-gradient-to-r from-green-500 to-blue-500 rounded flex items-center justify-center">
|
||||
<Users className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">{team?.name || "未知團隊"}</p>
|
||||
<p className="text-xs text-gray-500">{team?.department}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="max-w-xs">
|
||||
<p className="text-sm line-clamp-2">{proposal.problemStatement}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm">
|
||||
<p>{submittedDate.toLocaleDateString()}</p>
|
||||
<p className="text-gray-500">{submittedDate.toLocaleTimeString()}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-1">
|
||||
<FileText className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm">{proposal.attachments?.length || 0}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleViewProposal(proposal)}>
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
查看詳情
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEditProposal(proposal)}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
編輯提案
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-600" onClick={() => handleDeleteProposal(proposal)}>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
刪除提案
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add Proposal Dialog */}
|
||||
<Dialog open={showAddProposal} onOpenChange={setShowAddProposal}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新增提案</DialogTitle>
|
||||
<DialogDescription>創建一個新的創新提案</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="proposalTitle">提案標題 *</Label>
|
||||
<Input
|
||||
id="proposalTitle"
|
||||
value={newProposal.title}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, title: e.target.value })}
|
||||
placeholder="輸入提案標題"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="proposalTeam">提案團隊 *</Label>
|
||||
<Select
|
||||
value={newProposal.teamId}
|
||||
onValueChange={(value) => setNewProposal({ ...newProposal, teamId: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇團隊" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{teams.map((team) => (
|
||||
<SelectItem key={team.id} value={team.id}>
|
||||
{team.name} ({team.department})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="proposalDescription">提案描述 *</Label>
|
||||
<Textarea
|
||||
id="proposalDescription"
|
||||
value={newProposal.description}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, description: e.target.value })}
|
||||
placeholder="簡要描述提案的核心內容"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="problemStatement">痛點描述 *</Label>
|
||||
<Textarea
|
||||
id="problemStatement"
|
||||
value={newProposal.problemStatement}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, problemStatement: e.target.value })}
|
||||
placeholder="詳細描述要解決的問題或痛點"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="solution">解決方案 *</Label>
|
||||
<Textarea
|
||||
id="solution"
|
||||
value={newProposal.solution}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, solution: e.target.value })}
|
||||
placeholder="描述您提出的解決方案"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expectedImpact">預期影響 *</Label>
|
||||
<Textarea
|
||||
id="expectedImpact"
|
||||
value={newProposal.expectedImpact}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, expectedImpact: e.target.value })}
|
||||
placeholder="描述預期產生的商業和社會影響"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowAddProposal(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddProposal} disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
創建中...
|
||||
</>
|
||||
) : (
|
||||
"創建提案"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit Proposal Dialog */}
|
||||
<Dialog open={showEditProposal} onOpenChange={setShowEditProposal}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>編輯提案</DialogTitle>
|
||||
<DialogDescription>修改提案內容</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editProposalTitle">提案標題 *</Label>
|
||||
<Input
|
||||
id="editProposalTitle"
|
||||
value={newProposal.title}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, title: e.target.value })}
|
||||
placeholder="輸入提案標題"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editProposalTeam">提案團隊 *</Label>
|
||||
<Select
|
||||
value={newProposal.teamId}
|
||||
onValueChange={(value) => setNewProposal({ ...newProposal, teamId: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇團隊" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{teams.map((team) => (
|
||||
<SelectItem key={team.id} value={team.id}>
|
||||
{team.name} ({team.department})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editProposalDescription">提案描述 *</Label>
|
||||
<Textarea
|
||||
id="editProposalDescription"
|
||||
value={newProposal.description}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, description: e.target.value })}
|
||||
placeholder="簡要描述提案的核心內容"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editProblemStatement">痛點描述 *</Label>
|
||||
<Textarea
|
||||
id="editProblemStatement"
|
||||
value={newProposal.problemStatement}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, problemStatement: e.target.value })}
|
||||
placeholder="詳細描述要解決的問題或痛點"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editSolution">解決方案 *</Label>
|
||||
<Textarea
|
||||
id="editSolution"
|
||||
value={newProposal.solution}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, solution: e.target.value })}
|
||||
placeholder="描述您提出的解決方案"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editExpectedImpact">預期影響 *</Label>
|
||||
<Textarea
|
||||
id="editExpectedImpact"
|
||||
value={newProposal.expectedImpact}
|
||||
onChange={(e) => setNewProposal({ ...newProposal, expectedImpact: e.target.value })}
|
||||
placeholder="描述預期產生的商業和社會影響"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowEditProposal(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleUpdateProposal} disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
更新中...
|
||||
</>
|
||||
) : (
|
||||
"更新提案"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<AlertTriangle className="w-5 h-5 text-red-500" />
|
||||
<span>確認刪除</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>您確定要刪除提案「{selectedProposal?.title}」嗎？此操作無法復原。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowDeleteConfirm(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmDeleteProposal}>
|
||||
確認刪除
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Proposal Detail Dialog */}
|
||||
<Dialog open={showProposalDetail} onOpenChange={setShowProposalDetail}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>提案詳情</DialogTitle>
|
||||
<DialogDescription>查看提案的詳細資訊</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{selectedProposal && (
|
||||
<Tabs defaultValue="overview" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="overview">提案概覽</TabsTrigger>
|
||||
<TabsTrigger value="details">詳細內容</TabsTrigger>
|
||||
<TabsTrigger value="team">提案團隊</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-4">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
|
||||
<Lightbulb className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold">{selectedProposal.title}</h3>
|
||||
<p className="text-gray-600 mb-2">{selectedProposal.description}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className="bg-purple-100 text-purple-700">
|
||||
提案賽
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-gray-100 text-gray-700">
|
||||
{getTeamById(selectedProposal.teamId)?.name || "未知團隊"}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">提案ID</p>
|
||||
<p className="font-medium">{selectedProposal.id}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">提交時間</p>
|
||||
<p className="font-medium">{new Date(selectedProposal.submittedAt).toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">提案團隊</p>
|
||||
<p className="font-medium">{getTeamById(selectedProposal.teamId)?.name || "未知團隊"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">附件數量</p>
|
||||
<p className="font-medium">{selectedProposal.attachments?.length || 0} 個</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="details" className="space-y-6">
|
||||
<div className="space-y-6">
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<h5 className="font-semibold text-red-900 mb-2 flex items-center">
|
||||
<AlertCircle className="w-5 h-5 mr-2" />
|
||||
痛點描述
|
||||
</h5>
|
||||
<p className="text-red-800">{selectedProposal.problemStatement}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<h5 className="font-semibold text-green-900 mb-2 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2" />
|
||||
解決方案
|
||||
</h5>
|
||||
<p className="text-green-800">{selectedProposal.solution}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h5 className="font-semibold text-blue-900 mb-2 flex items-center">
|
||||
<Target className="w-5 h-5 mr-2" />
|
||||
預期影響
|
||||
</h5>
|
||||
<p className="text-blue-800">{selectedProposal.expectedImpact}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="team" className="space-y-4">
|
||||
{(() => {
|
||||
const team = getTeamById(selectedProposal.teamId)
|
||||
return team ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-green-500 to-blue-500 rounded-lg flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg">{team.name}</h4>
|
||||
<p className="text-gray-600">{team.department}</p>
|
||||
<p className="text-sm text-gray-500">{team.contactEmail}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="font-medium mb-3">團隊成員</h5>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{team.members.map((member) => (
|
||||
<div key={member.id} className="flex items-center space-x-3 p-3 border rounded-lg">
|
||||
<div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-green-700 font-medium text-sm">{member.name[0]}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium">{member.name}</span>
|
||||
{member.id === team.leader && (
|
||||
<Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
|
||||
隊長
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{member.department} • {member.role}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<Users className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold text-gray-600 mb-2">團隊資訊不存在</h3>
|
||||
<p className="text-gray-500">無法找到相關的團隊資訊</p>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
152
components/admin/scoring-link-dialog.tsx
Normal file
152
components/admin/scoring-link-dialog.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
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 { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Copy, Link } from "lucide-react"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
|
||||
interface ScoringLinkDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
currentCompetition?: any
|
||||
}
|
||||
|
||||
export function ScoringLinkDialog({ open, onOpenChange, currentCompetition }: ScoringLinkDialogProps) {
|
||||
const { toast } = useToast()
|
||||
|
||||
// 生成評分連結URL
|
||||
const scoringUrl = typeof window !== 'undefined'
|
||||
? `${window.location.origin}/judge-scoring`
|
||||
: "https://preview-fork-of-ai-app-design-ieqe9ld0z64vdugqt.vusercontent.net/judge-scoring"
|
||||
|
||||
const accessCode = "judge2024"
|
||||
const competitionName = currentCompetition?.name || "2024年第四季綜合AI競賽"
|
||||
|
||||
const handleCopyUrl = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(scoringUrl)
|
||||
toast({
|
||||
title: "連結已複製",
|
||||
description: "評分系統連結已複製到剪貼簿",
|
||||
})
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "複製失敗",
|
||||
description: "無法複製連結，請手動複製",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyAccessCode = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(accessCode)
|
||||
toast({
|
||||
title: "存取碼已複製",
|
||||
description: "評審存取碼已複製到剪貼簿",
|
||||
})
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "複製失敗",
|
||||
description: "無法複製存取碼，請手動複製",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<Link className="w-5 h-5" />
|
||||
<span>評審連結管理</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
管理評審評分系統的存取連結和資訊
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* 評審評分系統連結 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Link className="w-5 h-5 text-blue-600" />
|
||||
<span>評審評分系統連結</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
評審可以通過此連結進入評分系統
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
value={scoringUrl}
|
||||
readOnly
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleCopyUrl}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
<span>複製</span>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 存取資訊 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>存取資訊</CardTitle>
|
||||
<CardDescription>
|
||||
評審登入所需的資訊
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* 存取碼 */}
|
||||
<div className="space-y-2">
|
||||
<Label>存取碼</Label>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
value={accessCode}
|
||||
readOnly
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleCopyAccessCode}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
<span>複製</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 當前競賽 */}
|
||||
<div className="space-y-2">
|
||||
<Label>當前競賽</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Badge variant="outline" className="text-blue-600 border-blue-200 bg-blue-50">
|
||||
{competitionName}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
520
components/admin/system-settings.tsx
Normal file
520
components/admin/system-settings.tsx
Normal file
@@ -0,0 +1,520 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, 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 { Switch } from "@/components/ui/switch"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import {
|
||||
Settings,
|
||||
Shield,
|
||||
Mail,
|
||||
Server,
|
||||
Users,
|
||||
Bell,
|
||||
Save,
|
||||
TestTube,
|
||||
CheckCircle,
|
||||
HardDrive,
|
||||
Clock,
|
||||
Globe,
|
||||
} from "lucide-react"
|
||||
|
||||
export function SystemSettings() {
|
||||
const [settings, setSettings] = useState({
|
||||
// 一般設定
|
||||
siteName: "AI應用展示平台",
|
||||
siteDescription: "展示和分享AI應用的專業平台",
|
||||
timezone: "Asia/Taipei",
|
||||
language: "zh-TW",
|
||||
maintenanceMode: false,
|
||||
|
||||
// 安全設定
|
||||
twoFactorAuth: true,
|
||||
sessionTimeout: 30,
|
||||
maxLoginAttempts: 5,
|
||||
passwordMinLength: 8,
|
||||
|
||||
// 郵件設定
|
||||
smtpHost: "smtp.gmail.com",
|
||||
smtpPort: "587",
|
||||
smtpUser: "",
|
||||
smtpPassword: "",
|
||||
smtpEncryption: "tls",
|
||||
|
||||
// 系統性能
|
||||
cacheEnabled: true,
|
||||
cacheTimeout: 3600,
|
||||
maxFileSize: 10,
|
||||
maxUploadSize: 50,
|
||||
|
||||
// 用戶管理
|
||||
allowRegistration: true,
|
||||
emailVerification: true,
|
||||
defaultUserRole: "user",
|
||||
|
||||
// 通知設定
|
||||
systemNotifications: true,
|
||||
emailNotifications: true,
|
||||
slackWebhook: "",
|
||||
notificationFrequency: "immediate",
|
||||
})
|
||||
|
||||
const [activeTab, setActiveTab] = useState("general")
|
||||
const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved" | "error">("idle")
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaveStatus("saving")
|
||||
// 模擬保存過程
|
||||
setTimeout(() => {
|
||||
setSaveStatus("saved")
|
||||
setTimeout(() => setSaveStatus("idle"), 2000)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const handleTestEmail = () => {
|
||||
// 測試郵件功能
|
||||
alert("測試郵件已發送！")
|
||||
}
|
||||
|
||||
const updateSetting = (key: string, value: any) => {
|
||||
setSettings((prev) => ({ ...prev, [key]: value }))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Settings className="w-8 h-8 text-blue-600" />
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">系統設定</h1>
|
||||
<p className="text-muted-foreground">管理平台的各項系統配置</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleSave} disabled={saveStatus === "saving"}>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{saveStatus === "saving" ? "保存中..." : saveStatus === "saved" ? "已保存" : "保存設定"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-6">
|
||||
<TabsTrigger value="general" className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4" />
|
||||
一般設定
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="security" className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
安全設定
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="email" className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4" />
|
||||
郵件設定
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="performance" className="flex items-center gap-2">
|
||||
<Server className="w-4 h-4" />
|
||||
系統性能
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="users" className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4" />
|
||||
用戶管理
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="notifications" className="flex items-center gap-2">
|
||||
<Bell className="w-4 h-4" />
|
||||
通知設定
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 一般設定 */}
|
||||
<TabsContent value="general" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Globe className="w-5 h-5" />
|
||||
網站基本資訊
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="siteName">網站名稱</Label>
|
||||
<Input
|
||||
id="siteName"
|
||||
value={settings.siteName}
|
||||
onChange={(e) => updateSetting("siteName", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="timezone">時區</Label>
|
||||
<Select value={settings.timezone} onValueChange={(value) => updateSetting("timezone", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Asia/Taipei">台北 (UTC+8)</SelectItem>
|
||||
<SelectItem value="Asia/Tokyo">東京 (UTC+9)</SelectItem>
|
||||
<SelectItem value="UTC">UTC (UTC+0)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="siteDescription">網站描述</Label>
|
||||
<Textarea
|
||||
id="siteDescription"
|
||||
value={settings.siteDescription}
|
||||
onChange={(e) => updateSetting("siteDescription", e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="space-y-1">
|
||||
<Label>維護模式</Label>
|
||||
<p className="text-sm text-muted-foreground">啟用後，一般用戶將無法訪問網站</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.maintenanceMode}
|
||||
onCheckedChange={(checked) => updateSetting("maintenanceMode", checked)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 安全設定 */}
|
||||
<TabsContent value="security" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Shield className="w-5 h-5" />
|
||||
安全配置
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="space-y-1">
|
||||
<Label>雙因素驗證</Label>
|
||||
<p className="text-sm text-muted-foreground">為管理員帳戶啟用額外的安全層</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={settings.twoFactorAuth ? "default" : "secondary"}>
|
||||
{settings.twoFactorAuth ? "已啟用" : "已停用"}
|
||||
</Badge>
|
||||
<Switch
|
||||
checked={settings.twoFactorAuth}
|
||||
onCheckedChange={(checked) => updateSetting("twoFactorAuth", checked)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="sessionTimeout">會話超時 (分鐘)</Label>
|
||||
<Input
|
||||
id="sessionTimeout"
|
||||
type="number"
|
||||
value={settings.sessionTimeout}
|
||||
onChange={(e) => updateSetting("sessionTimeout", Number.parseInt(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="maxLoginAttempts">最大登入嘗試次數</Label>
|
||||
<Input
|
||||
id="maxLoginAttempts"
|
||||
type="number"
|
||||
value={settings.maxLoginAttempts}
|
||||
onChange={(e) => updateSetting("maxLoginAttempts", Number.parseInt(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-green-800">
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
<span className="font-medium">安全狀態：良好</span>
|
||||
</div>
|
||||
<p className="text-sm text-green-700 mt-1">所有安全設定均已正確配置</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 郵件設定 */}
|
||||
<TabsContent value="email" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Mail className="w-5 h-5" />
|
||||
SMTP 配置
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtpHost">SMTP 主機</Label>
|
||||
<Input
|
||||
id="smtpHost"
|
||||
value={settings.smtpHost}
|
||||
onChange={(e) => updateSetting("smtpHost", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtpPort">SMTP 端口</Label>
|
||||
<Input
|
||||
id="smtpPort"
|
||||
value={settings.smtpPort}
|
||||
onChange={(e) => updateSetting("smtpPort", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtpUser">SMTP 用戶名</Label>
|
||||
<Input
|
||||
id="smtpUser"
|
||||
value={settings.smtpUser}
|
||||
onChange={(e) => updateSetting("smtpUser", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="smtpPassword">SMTP 密碼</Label>
|
||||
<Input
|
||||
id="smtpPassword"
|
||||
type="password"
|
||||
value={settings.smtpPassword}
|
||||
onChange={(e) => updateSetting("smtpPassword", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button onClick={handleTestEmail} variant="outline">
|
||||
<TestTube className="w-4 h-4 mr-2" />
|
||||
測試郵件發送
|
||||
</Button>
|
||||
<Badge variant="outline" className="text-green-600 border-green-600">
|
||||
<CheckCircle className="w-3 h-3 mr-1" />
|
||||
連接正常
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 系統性能 */}
|
||||
<TabsContent value="performance" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server className="w-5 h-5" />
|
||||
性能優化
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="space-y-1">
|
||||
<Label>快取系統</Label>
|
||||
<p className="text-sm text-muted-foreground">啟用快取以提升系統響應速度</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.cacheEnabled}
|
||||
onCheckedChange={(checked) => updateSetting("cacheEnabled", checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="maxFileSize">單檔案大小限制 (MB)</Label>
|
||||
<Input
|
||||
id="maxFileSize"
|
||||
type="number"
|
||||
value={settings.maxFileSize}
|
||||
onChange={(e) => updateSetting("maxFileSize", Number.parseInt(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="maxUploadSize">總上傳大小限制 (MB)</Label>
|
||||
<Input
|
||||
id="maxUploadSize"
|
||||
type="number"
|
||||
value={settings.maxUploadSize}
|
||||
onChange={(e) => updateSetting("maxUploadSize", Number.parseInt(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-blue-800 mb-2">
|
||||
<HardDrive className="w-5 h-5" />
|
||||
<span className="font-medium">儲存使用情況</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>已使用空間</span>
|
||||
<span>2.3 GB / 10 GB</span>
|
||||
</div>
|
||||
<div className="w-full bg-blue-200 rounded-full h-2">
|
||||
<div className="bg-blue-600 h-2 rounded-full" style={{ width: "23%" }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 用戶管理 */}
|
||||
<TabsContent value="users" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Users className="w-5 h-5" />
|
||||
用戶設定
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="space-y-1">
|
||||
<Label>允許用戶註冊</Label>
|
||||
<p className="text-sm text-muted-foreground">新用戶可以自行註冊帳戶</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.allowRegistration}
|
||||
onCheckedChange={(checked) => updateSetting("allowRegistration", checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="space-y-1">
|
||||
<Label>郵箱驗證</Label>
|
||||
<p className="text-sm text-muted-foreground">新用戶需要驗證郵箱才能使用</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.emailVerification}
|
||||
onCheckedChange={(checked) => updateSetting("emailVerification", checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="defaultUserRole">預設用戶角色</Label>
|
||||
<Select
|
||||
value={settings.defaultUserRole}
|
||||
onValueChange={(value) => updateSetting("defaultUserRole", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="user">一般用戶</SelectItem>
|
||||
<SelectItem value="contributor">貢獻者</SelectItem>
|
||||
<SelectItem value="moderator">版主</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">2,847</div>
|
||||
<p className="text-sm text-muted-foreground">總用戶數</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-600">356</div>
|
||||
<p className="text-sm text-muted-foreground">活躍用戶</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">23</div>
|
||||
<p className="text-sm text-muted-foreground">本週新增</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 通知設定 */}
|
||||
<TabsContent value="notifications" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bell className="w-5 h-5" />
|
||||
通知配置
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="space-y-1">
|
||||
<Label>系統通知</Label>
|
||||
<p className="text-sm text-muted-foreground">接收系統重要通知</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.systemNotifications}
|
||||
onCheckedChange={(checked) => updateSetting("systemNotifications", checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="space-y-1">
|
||||
<Label>郵件通知</Label>
|
||||
<p className="text-sm text-muted-foreground">通過郵件發送通知</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={settings.emailNotifications}
|
||||
onCheckedChange={(checked) => updateSetting("emailNotifications", checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="slackWebhook">Slack Webhook URL</Label>
|
||||
<Input
|
||||
id="slackWebhook"
|
||||
placeholder="https://hooks.slack.com/services/..."
|
||||
value={settings.slackWebhook}
|
||||
onChange={(e) => updateSetting("slackWebhook", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notificationFrequency">通知頻率</Label>
|
||||
<Select
|
||||
value={settings.notificationFrequency}
|
||||
onValueChange={(value) => updateSetting("notificationFrequency", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="immediate">即時</SelectItem>
|
||||
<SelectItem value="hourly">每小時</SelectItem>
|
||||
<SelectItem value="daily">每日</SelectItem>
|
||||
<SelectItem value="weekly">每週</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-yellow-800 mb-2">
|
||||
<Clock className="w-5 h-5" />
|
||||
<span className="font-medium">通知歷史</span>
|
||||
</div>
|
||||
<p className="text-sm text-yellow-700">最近24小時內發送了 12 條通知</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{saveStatus === "saved" && (
|
||||
<div className="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
設定已成功保存！
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
855
components/admin/team-management.tsx
Normal file
855
components/admin/team-management.tsx
Normal file
@@ -0,0 +1,855 @@
|
||||
"use client"
|
||||
|
||||
import { useState } 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 { 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import {
|
||||
Users,
|
||||
Plus,
|
||||
MoreHorizontal,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
UserPlus,
|
||||
UserMinus,
|
||||
Crown,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
Loader2,
|
||||
} from "lucide-react"
|
||||
import type { Team, TeamMember } from "@/types/competition"
|
||||
|
||||
export function TeamManagement() {
|
||||
const { teams, addTeam, updateTeam, getTeamById } = useCompetition()
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [selectedDepartment, setSelectedDepartment] = useState("all")
|
||||
const [selectedTeam, setSelectedTeam] = useState<Team | null>(null)
|
||||
const [showTeamDetail, setShowTeamDetail] = useState(false)
|
||||
const [showAddTeam, setShowAddTeam] = useState(false)
|
||||
const [showEditTeam, setShowEditTeam] = useState(false)
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [success, setSuccess] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
|
||||
const [newTeam, setNewTeam] = useState({
|
||||
name: "",
|
||||
department: "HQBU",
|
||||
contactEmail: "",
|
||||
members: [] as TeamMember[],
|
||||
leader: "",
|
||||
apps: [] as string[],
|
||||
totalLikes: 0,
|
||||
})
|
||||
|
||||
const [newMember, setNewMember] = useState({
|
||||
name: "",
|
||||
department: "HQBU",
|
||||
role: "成員",
|
||||
})
|
||||
|
||||
const filteredTeams = teams.filter((team) => {
|
||||
const matchesSearch =
|
||||
team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
team.members.some((member) => member.name.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
const matchesDepartment = selectedDepartment === "all" || team.department === selectedDepartment
|
||||
return matchesSearch && matchesDepartment
|
||||
})
|
||||
|
||||
const handleViewTeam = (team: Team) => {
|
||||
setSelectedTeam(team)
|
||||
setShowTeamDetail(true)
|
||||
}
|
||||
|
||||
const handleEditTeam = (team: Team) => {
|
||||
setSelectedTeam(team)
|
||||
setNewTeam({
|
||||
name: team.name,
|
||||
department: team.department,
|
||||
contactEmail: team.contactEmail,
|
||||
members: [...team.members],
|
||||
leader: team.leader,
|
||||
apps: [...team.apps],
|
||||
totalLikes: team.totalLikes,
|
||||
})
|
||||
setShowEditTeam(true)
|
||||
}
|
||||
|
||||
const handleDeleteTeam = (team: Team) => {
|
||||
setSelectedTeam(team)
|
||||
setShowDeleteConfirm(true)
|
||||
}
|
||||
|
||||
const confirmDeleteTeam = () => {
|
||||
if (selectedTeam) {
|
||||
// In a real app, you would call a delete function here
|
||||
setShowDeleteConfirm(false)
|
||||
setSelectedTeam(null)
|
||||
setSuccess("團隊刪除成功！")
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddMember = () => {
|
||||
if (!newMember.name.trim()) {
|
||||
setError("請輸入成員姓名")
|
||||
return
|
||||
}
|
||||
|
||||
const member: TeamMember = {
|
||||
id: `m${Date.now()}`,
|
||||
name: newMember.name,
|
||||
department: newMember.department,
|
||||
role: newMember.role,
|
||||
}
|
||||
|
||||
setNewTeam({
|
||||
...newTeam,
|
||||
members: [...newTeam.members, member],
|
||||
})
|
||||
|
||||
// Set as leader if it's the first member
|
||||
if (newTeam.members.length === 0) {
|
||||
setNewTeam((prev) => ({
|
||||
...prev,
|
||||
leader: member.id,
|
||||
members: [...prev.members, { ...member, role: "隊長" }],
|
||||
}))
|
||||
}
|
||||
|
||||
setNewMember({
|
||||
name: "",
|
||||
department: "HQBU",
|
||||
role: "成員",
|
||||
})
|
||||
setError("")
|
||||
}
|
||||
|
||||
const handleRemoveMember = (memberId: string) => {
|
||||
const updatedMembers = newTeam.members.filter((m) => m.id !== memberId)
|
||||
let newLeader = newTeam.leader
|
||||
|
||||
// If removing the leader, assign leadership to the first remaining member
|
||||
if (memberId === newTeam.leader && updatedMembers.length > 0) {
|
||||
newLeader = updatedMembers[0].id
|
||||
updatedMembers[0].role = "隊長"
|
||||
}
|
||||
|
||||
setNewTeam({
|
||||
...newTeam,
|
||||
members: updatedMembers,
|
||||
leader: newLeader,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSetLeader = (memberId: string) => {
|
||||
const updatedMembers = newTeam.members.map((member) => ({
|
||||
...member,
|
||||
role: member.id === memberId ? "隊長" : "成員",
|
||||
}))
|
||||
|
||||
setNewTeam({
|
||||
...newTeam,
|
||||
members: updatedMembers,
|
||||
leader: memberId,
|
||||
})
|
||||
}
|
||||
|
||||
const handleAddTeam = async () => {
|
||||
setError("")
|
||||
|
||||
if (!newTeam.name || !newTeam.contactEmail || newTeam.members.length === 0) {
|
||||
setError("請填寫所有必填欄位並至少添加一名成員")
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
addTeam(newTeam)
|
||||
setShowAddTeam(false)
|
||||
setNewTeam({
|
||||
name: "",
|
||||
department: "HQBU",
|
||||
contactEmail: "",
|
||||
members: [],
|
||||
leader: "",
|
||||
apps: [],
|
||||
totalLikes: 0,
|
||||
})
|
||||
setSuccess("團隊創建成功！")
|
||||
setIsLoading(false)
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
}
|
||||
|
||||
const handleUpdateTeam = async () => {
|
||||
if (!selectedTeam) return
|
||||
|
||||
setError("")
|
||||
|
||||
if (!newTeam.name || !newTeam.contactEmail || newTeam.members.length === 0) {
|
||||
setError("請填寫所有必填欄位並至少添加一名成員")
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
updateTeam(selectedTeam.id, newTeam)
|
||||
setShowEditTeam(false)
|
||||
setSelectedTeam(null)
|
||||
setSuccess("團隊更新成功！")
|
||||
setIsLoading(false)
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Success/Error Messages */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">團隊管理</h1>
|
||||
<p className="text-gray-600">管理競賽團隊和成員資訊</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setShowAddTeam(true)}
|
||||
className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
新增團隊
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">總團隊數</p>
|
||||
<p className="text-2xl font-bold">{teams.length}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">總成員數</p>
|
||||
<p className="text-2xl font-bold">{teams.reduce((sum, team) => sum + team.members.length, 0)}</p>
|
||||
</div>
|
||||
<UserPlus className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">平均團隊規模</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{teams.length > 0
|
||||
? Math.round((teams.reduce((sum, team) => sum + team.members.length, 0) / teams.length) * 10) / 10
|
||||
: 0}
|
||||
</p>
|
||||
</div>
|
||||
<Crown className="w-8 h-8 text-yellow-600" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex flex-col lg:flex-row gap-4 items-center">
|
||||
<div className="flex-1 relative">
|
||||
<Input
|
||||
placeholder="搜尋團隊名稱或成員姓名..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Select value={selectedDepartment} onValueChange={setSelectedDepartment}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="部門" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部部門</SelectItem>
|
||||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||||
<SelectItem value="SBU">SBU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Teams Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>團隊列表 ({filteredTeams.length})</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>
|
||||
{filteredTeams.map((team) => {
|
||||
const leader = team.members.find((m) => m.id === team.leader)
|
||||
|
||||
return (
|
||||
<TableRow key={team.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-green-500 to-blue-500 rounded-lg flex items-center justify-center">
|
||||
<Users className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{team.name}</p>
|
||||
<p className="text-sm text-gray-500">{team.contactEmail}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Avatar className="w-6 h-6">
|
||||
<AvatarFallback className="bg-green-100 text-green-700 text-xs">
|
||||
{leader?.name[0] || "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm">{leader?.name || "未設定"}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="bg-gray-100 text-gray-700">
|
||||
{team.department}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-1">
|
||||
<UserPlus className="w-4 h-4 text-blue-500" />
|
||||
<span>{team.members.length}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-medium">{team.apps.length}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-medium text-red-600">{team.totalLikes}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleViewTeam(team)}>
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
查看詳情
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEditTeam(team)}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
編輯團隊
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-600" onClick={() => handleDeleteTeam(team)}>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
刪除團隊
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add Team Dialog */}
|
||||
<Dialog open={showAddTeam} onOpenChange={setShowAddTeam}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新增團隊</DialogTitle>
|
||||
<DialogDescription>創建一個新的競賽團隊</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs defaultValue="basic" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="basic">基本資訊</TabsTrigger>
|
||||
<TabsTrigger value="members">團隊成員</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="basic" className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="teamName">團隊名稱 *</Label>
|
||||
<Input
|
||||
id="teamName"
|
||||
value={newTeam.name}
|
||||
onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
|
||||
placeholder="輸入團隊名稱"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="teamDepartment">主要部門</Label>
|
||||
<Select
|
||||
value={newTeam.department}
|
||||
onValueChange={(value) => setNewTeam({ ...newTeam, department: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||||
<SelectItem value="SBU">SBU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contactEmail">聯絡信箱 *</Label>
|
||||
<Input
|
||||
id="contactEmail"
|
||||
type="email"
|
||||
value={newTeam.contactEmail}
|
||||
onChange={(e) => setNewTeam({ ...newTeam, contactEmail: e.target.value })}
|
||||
placeholder="team@company.com"
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="members" className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold">新增成員</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memberName">成員姓名</Label>
|
||||
<Input
|
||||
id="memberName"
|
||||
value={newMember.name}
|
||||
onChange={(e) => setNewMember({ ...newMember, name: e.target.value })}
|
||||
placeholder="輸入成員姓名"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memberDepartment">部門</Label>
|
||||
<Select
|
||||
value={newMember.department}
|
||||
onValueChange={(value) => setNewMember({ ...newMember, department: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||||
<SelectItem value="SBU">SBU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="memberRole">角色</Label>
|
||||
<Input
|
||||
id="memberRole"
|
||||
value={newMember.role}
|
||||
onChange={(e) => setNewMember({ ...newMember, role: e.target.value })}
|
||||
placeholder="例如：開發工程師"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleAddMember} variant="outline" className="w-full bg-transparent">
|
||||
<UserPlus className="w-4 h-4 mr-2" />
|
||||
新增成員
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{newTeam.members.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold">團隊成員 ({newTeam.members.length})</h4>
|
||||
<div className="space-y-2">
|
||||
{newTeam.members.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="w-8 h-8">
|
||||
<AvatarFallback className="bg-green-100 text-green-700 text-sm">
|
||||
{member.name[0]}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium">{member.name}</span>
|
||||
{member.id === newTeam.leader && (
|
||||
<Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
|
||||
隊長
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{member.department} • {member.role}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{member.id !== newTeam.leader && (
|
||||
<Button variant="outline" size="sm" onClick={() => handleSetLeader(member.id)}>
|
||||
<Crown className="w-4 h-4 mr-1" />
|
||||
設為隊長
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveMember(member.id)}
|
||||
className="text-red-600 border-red-300 hover:bg-red-50"
|
||||
>
|
||||
<UserMinus className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowAddTeam(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddTeam} disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
創建中...
|
||||
</>
|
||||
) : (
|
||||
"創建團隊"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit Team Dialog */}
|
||||
<Dialog open={showEditTeam} onOpenChange={setShowEditTeam}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>編輯團隊</DialogTitle>
|
||||
<DialogDescription>修改團隊資訊和成員</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs defaultValue="basic" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="basic">基本資訊</TabsTrigger>
|
||||
<TabsTrigger value="members">團隊成員</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="basic" className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editTeamName">團隊名稱 *</Label>
|
||||
<Input
|
||||
id="editTeamName"
|
||||
value={newTeam.name}
|
||||
onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
|
||||
placeholder="輸入團隊名稱"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editTeamDepartment">主要部門</Label>
|
||||
<Select
|
||||
value={newTeam.department}
|
||||
onValueChange={(value) => setNewTeam({ ...newTeam, department: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||||
<SelectItem value="SBU">SBU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editContactEmail">聯絡信箱 *</Label>
|
||||
<Input
|
||||
id="editContactEmail"
|
||||
type="email"
|
||||
value={newTeam.contactEmail}
|
||||
onChange={(e) => setNewTeam({ ...newTeam, contactEmail: e.target.value })}
|
||||
placeholder="team@company.com"
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="members" className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold">新增成員</h4>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editMemberName">成員姓名</Label>
|
||||
<Input
|
||||
id="editMemberName"
|
||||
value={newMember.name}
|
||||
onChange={(e) => setNewMember({ ...newMember, name: e.target.value })}
|
||||
placeholder="輸入成員姓名"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editMemberDepartment">部門</Label>
|
||||
<Select
|
||||
value={newMember.department}
|
||||
onValueChange={(value) => setNewMember({ ...newMember, department: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="HQBU">HQBU</SelectItem>
|
||||
<SelectItem value="ITBU">ITBU</SelectItem>
|
||||
<SelectItem value="MBU1">MBU1</SelectItem>
|
||||
<SelectItem value="SBU">SBU</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="editMemberRole">角色</Label>
|
||||
<Input
|
||||
id="editMemberRole"
|
||||
value={newMember.role}
|
||||
onChange={(e) => setNewMember({ ...newMember, role: e.target.value })}
|
||||
placeholder="例如：開發工程師"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleAddMember} variant="outline" className="w-full bg-transparent">
|
||||
<UserPlus className="w-4 h-4 mr-2" />
|
||||
新增成員
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{newTeam.members.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold">團隊成員 ({newTeam.members.length})</h4>
|
||||
<div className="space-y-2">
|
||||
{newTeam.members.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Avatar className="w-8 h-8">
|
||||
<AvatarFallback className="bg-green-100 text-green-700 text-sm">
|
||||
{member.name[0]}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium">{member.name}</span>
|
||||
{member.id === newTeam.leader && (
|
||||
<Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
|
||||
隊長
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{member.department} • {member.role}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{member.id !== newTeam.leader && (
|
||||
<Button variant="outline" size="sm" onClick={() => handleSetLeader(member.id)}>
|
||||
<Crown className="w-4 h-4 mr-1" />
|
||||
設為隊長
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveMember(member.id)}
|
||||
className="text-red-600 border-red-300 hover:bg-red-50"
|
||||
>
|
||||
<UserMinus className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => setShowEditTeam(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleUpdateTeam} disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
更新中...
|
||||
</>
|
||||
) : (
|
||||
"更新團隊"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<AlertTriangle className="w-5 h-5 text-red-500" />
|
||||
<span>確認刪除團隊</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
您確定要刪除團隊「{selectedTeam?.name}」嗎？
|
||||
<br />
|
||||
<span className="text-red-600 font-medium">此操作無法復原，將會永久刪除團隊的所有資料。</span>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-end space-x-3 mt-6">
|
||||
<Button variant="outline" onClick={() => setShowDeleteConfirm(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmDeleteTeam}>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
確認刪除
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Team Detail Dialog */}
|
||||
<Dialog open={showTeamDetail} onOpenChange={setShowTeamDetail}>
|
||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>團隊詳情</DialogTitle>
|
||||
<DialogDescription>查看團隊的詳細資訊</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{selectedTeam && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-xl flex items-center justify-center">
|
||||
<Users className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold">{selectedTeam.name}</h3>
|
||||
<p className="text-gray-600 mb-2">{selectedTeam.contactEmail}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className="bg-gray-100 text-gray-700">
|
||||
{selectedTeam.department}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-blue-100 text-blue-700">
|
||||
{selectedTeam.members.length} 名成員
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-green-100 text-green-700">
|
||||
{selectedTeam.apps.length} 個應用
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">團隊ID</p>
|
||||
<p className="font-medium">{selectedTeam.id}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">總按讚數</p>
|
||||
<p className="font-medium text-red-600">{selectedTeam.totalLikes}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">團隊成員</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{selectedTeam.members.map((member) => (
|
||||
<div key={member.id} className="flex items-center space-x-3 p-3 border rounded-lg">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarFallback className="bg-green-100 text-green-700">{member.name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium">{member.name}</span>
|
||||
{member.id === selectedTeam.leader && (
|
||||
<Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
|
||||
隊長
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{member.department} • {member.role}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
1142
components/admin/user-management.tsx
Normal file
1142
components/admin/user-management.tsx
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user