新增管理者介面
This commit is contained in:
599
app/admin/page.tsx
Normal file
599
app/admin/page.tsx
Normal file
@@ -0,0 +1,599 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import {
|
||||
Download,
|
||||
Eye,
|
||||
Users,
|
||||
Heart,
|
||||
FileText,
|
||||
BarChart3,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Filter,
|
||||
ArrowLeft,
|
||||
Sparkles,
|
||||
Settings,
|
||||
Plus,
|
||||
ChevronLeft,
|
||||
ChevronRight
|
||||
} from "lucide-react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import HeaderMusicControl from "@/components/header-music-control"
|
||||
import IpDisplay from "@/components/ip-display"
|
||||
|
||||
interface WishData {
|
||||
id: number
|
||||
title: string
|
||||
current_pain: string
|
||||
expected_solution: string
|
||||
expected_effect: string
|
||||
is_public: boolean
|
||||
email: string
|
||||
images: any[]
|
||||
user_session: string
|
||||
status: string
|
||||
category: string
|
||||
priority: number
|
||||
like_count: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface AdminStats {
|
||||
totalWishes: number
|
||||
publicWishes: number
|
||||
privateWishes: number
|
||||
totalLikes: number
|
||||
categories: { [key: string]: number }
|
||||
recentWishes: number
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
const [wishes, setWishes] = useState<WishData[]>([])
|
||||
const [filteredWishes, setFilteredWishes] = useState<WishData[]>([])
|
||||
const [stats, setStats] = useState<AdminStats | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
const [visibilityFilter, setVisibilityFilter] = useState("all")
|
||||
const [isExporting, setIsExporting] = useState(false)
|
||||
|
||||
// 分頁狀態
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const itemsPerPage = 10
|
||||
|
||||
// 獲取所有數據
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
|
||||
// 獲取困擾案例數據
|
||||
const wishesResponse = await fetch('/api/admin/wishes')
|
||||
const wishesResult = await wishesResponse.json()
|
||||
|
||||
if (wishesResult.success) {
|
||||
setWishes(wishesResult.data)
|
||||
setFilteredWishes(wishesResult.data)
|
||||
}
|
||||
|
||||
// 獲取統計數據
|
||||
const statsResponse = await fetch('/api/admin/stats')
|
||||
const statsResult = await statsResponse.json()
|
||||
|
||||
if (statsResult.success) {
|
||||
setStats(statsResult.data)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('獲取數據失敗:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 過濾數據
|
||||
const filterData = () => {
|
||||
let filtered = wishes
|
||||
|
||||
// 搜索過濾
|
||||
if (searchTerm) {
|
||||
filtered = filtered.filter(wish =>
|
||||
wish.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
wish.current_pain.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
wish.expected_solution.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
// 狀態過濾
|
||||
if (statusFilter !== "all") {
|
||||
filtered = filtered.filter(wish => wish.status === statusFilter)
|
||||
}
|
||||
|
||||
// 可見性過濾
|
||||
if (visibilityFilter !== "all") {
|
||||
filtered = filtered.filter(wish =>
|
||||
visibilityFilter === "public" ? wish.is_public : !wish.is_public
|
||||
)
|
||||
}
|
||||
|
||||
setFilteredWishes(filtered)
|
||||
setCurrentPage(1) // 重置到第一頁
|
||||
}
|
||||
|
||||
// 分頁計算
|
||||
const totalPages = Math.ceil(filteredWishes.length / itemsPerPage)
|
||||
const startIndex = (currentPage - 1) * itemsPerPage
|
||||
const endIndex = startIndex + itemsPerPage
|
||||
const currentWishes = filteredWishes.slice(startIndex, endIndex)
|
||||
|
||||
// 分頁組件
|
||||
const PaginationComponent = () => {
|
||||
if (totalPages <= 1) return null
|
||||
|
||||
const getPageNumbers = () => {
|
||||
const pages = []
|
||||
const maxVisiblePages = 5
|
||||
|
||||
if (totalPages <= maxVisiblePages) {
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
} else {
|
||||
if (currentPage <= 3) {
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
pages.push('...')
|
||||
pages.push(totalPages)
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
pages.push(1)
|
||||
pages.push('...')
|
||||
for (let i = totalPages - 3; i <= totalPages; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
} else {
|
||||
pages.push(1)
|
||||
pages.push('...')
|
||||
for (let i = currentPage - 1; i <= currentPage + 1; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
pages.push('...')
|
||||
pages.push(totalPages)
|
||||
}
|
||||
}
|
||||
|
||||
return pages
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<div className="text-sm text-blue-300">
|
||||
顯示第 {startIndex + 1} - {Math.min(endIndex, filteredWishes.length)} 筆，共 {filteredWishes.length} 筆
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
{getPageNumbers().map((page, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={page === currentPage ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => typeof page === 'number' && setCurrentPage(page)}
|
||||
disabled={page === '...'}
|
||||
className={
|
||||
page === currentPage
|
||||
? "bg-cyan-600 hover:bg-cyan-700 text-white"
|
||||
: "text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
|
||||
}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 匯出 CSV
|
||||
const exportToCSV = async () => {
|
||||
try {
|
||||
setIsExporting(true)
|
||||
|
||||
const response = await fetch('/api/admin/export-csv', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
data: filteredWishes,
|
||||
filename: `困擾案例數據_${new Date().toISOString().split('T')[0]}.csv`
|
||||
})
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const blob = await response.blob()
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `困擾案例數據_${new Date().toISOString().split('T')[0]}.csv`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
document.body.removeChild(a)
|
||||
} else {
|
||||
throw new Error('匯出失敗')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('匯出 CSV 失敗:', error)
|
||||
alert('匯出失敗，請稍後再試')
|
||||
} finally {
|
||||
setIsExporting(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
filterData()
|
||||
}, [searchTerm, statusFilter, visibilityFilter, wishes])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-white mx-auto mb-4" />
|
||||
<p className="text-white">載入中...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative">
|
||||
{/* 星空背景 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-md sticky top-0 z-[9999] shadow-lg shadow-slate-900/50">
|
||||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{/* Logo 區域 */}
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">資訊部．心願星河</h1>
|
||||
</div>
|
||||
|
||||
{/* 導航區域 */}
|
||||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||||
{/* IP顯示 */}
|
||||
<div className="hidden sm:block">
|
||||
<IpDisplay />
|
||||
</div>
|
||||
|
||||
{/* 音樂控制 */}
|
||||
<div className="hidden sm:block">
|
||||
<HeaderMusicControl />
|
||||
</div>
|
||||
<div className="sm:hidden">
|
||||
<HeaderMusicControl mobileSimplified />
|
||||
</div>
|
||||
|
||||
{/* 返回按鈕 */}
|
||||
<Link href="/">
|
||||
<Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回首頁
|
||||
</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 主要內容 */}
|
||||
<main className="relative z-10 py-8">
|
||||
<div className="container mx-auto px-3 sm:px-4">
|
||||
{/* 標題區域 */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<Settings className="w-8 h-8 text-cyan-400" />
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white">後台管理系統</h2>
|
||||
</div>
|
||||
<p className="text-blue-200 text-lg">困擾案例數據管理與分析</p>
|
||||
</div>
|
||||
|
||||
{/* 統計卡片 */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-8">
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-blue-200">總案例數</CardTitle>
|
||||
<FileText className="h-4 w-4 text-cyan-400" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{stats.totalWishes}</div>
|
||||
<p className="text-xs text-blue-300">
|
||||
公開 {stats.publicWishes} + 私密 {stats.privateWishes}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-blue-200">總點讚數</CardTitle>
|
||||
<Heart className="h-4 w-4 text-pink-400" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{stats.totalLikes}</div>
|
||||
<p className="text-xs text-blue-300">用戶支持總數</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-blue-200">問題領域</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-green-400" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{Object.keys(stats.categories).length}</div>
|
||||
<p className="text-xs text-blue-300">不同類別</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-800/70 transition-all duration-300">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-blue-200">本週新增</CardTitle>
|
||||
<Users className="h-4 w-4 text-yellow-400" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{stats.recentWishes}</div>
|
||||
<p className="text-xs text-blue-300">最近7天</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 主要內容區域 */}
|
||||
<Tabs defaultValue="data" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2 bg-slate-800/50 border-slate-700/50">
|
||||
<TabsTrigger value="data" className="text-blue-200 data-[state=active]:text-white data-[state=active]:bg-slate-700/50">數據管理</TabsTrigger>
|
||||
<TabsTrigger value="analytics" className="text-blue-200 data-[state=active]:text-white data-[state=active]:bg-slate-700/50">數據分析</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="data" className="space-y-6">
|
||||
{/* 搜索和過濾區域 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-2">
|
||||
<Filter className="w-5 h-5 text-cyan-400" />
|
||||
數據篩選
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-200">
|
||||
搜索和過濾困擾案例數據
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 h-4 w-4 text-blue-400" />
|
||||
<Input
|
||||
placeholder="搜索標題或內容..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 bg-slate-700/50 border-slate-600/50 text-white placeholder:text-blue-300 focus:border-cyan-400/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="bg-slate-700/50 border-slate-600/50 text-white focus:border-cyan-400/50">
|
||||
<SelectValue placeholder="狀態" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
<SelectItem value="all" className="text-white">所有狀態</SelectItem>
|
||||
<SelectItem value="active" className="text-white">活躍</SelectItem>
|
||||
<SelectItem value="inactive" className="text-white">非活躍</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={visibilityFilter} onValueChange={setVisibilityFilter}>
|
||||
<SelectTrigger className="bg-slate-700/50 border-slate-600/50 text-white focus:border-cyan-400/50">
|
||||
<SelectValue placeholder="可見性" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
<SelectItem value="all" className="text-white">全部</SelectItem>
|
||||
<SelectItem value="public" className="text-white">公開</SelectItem>
|
||||
<SelectItem value="private" className="text-white">私密</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
onClick={exportToCSV}
|
||||
disabled={isExporting}
|
||||
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white shadow-lg shadow-green-500/25"
|
||||
>
|
||||
{isExporting ? (
|
||||
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
匯出 CSV
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 數據表格 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-cyan-400" />
|
||||
困擾案例列表
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-200">
|
||||
共 {filteredWishes.length} 筆數據
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-600/50">
|
||||
<th className="text-left py-3 px-4 text-blue-200 font-medium">ID</th>
|
||||
<th className="text-left py-3 px-4 text-blue-200 font-medium">標題</th>
|
||||
<th className="text-left py-3 px-4 text-blue-200 font-medium">狀態</th>
|
||||
<th className="text-left py-3 px-4 text-blue-200 font-medium">可見性</th>
|
||||
<th className="text-left py-3 px-4 text-blue-200 font-medium">點讚數</th>
|
||||
<th className="text-left py-3 px-4 text-blue-200 font-medium">創建時間</th>
|
||||
<th className="text-left py-3 px-4 text-blue-200 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentWishes.map((wish) => (
|
||||
<tr key={wish.id} className="border-b border-slate-700/30 hover:bg-slate-700/30 transition-colors">
|
||||
<td className="py-3 px-4 text-white font-mono text-xs">{wish.id}</td>
|
||||
<td className="py-3 px-4 text-white max-w-xs truncate" title={wish.title}>
|
||||
{wish.title}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge
|
||||
variant={wish.status === 'active' ? 'default' : 'secondary'}
|
||||
className={wish.status === 'active'
|
||||
? 'bg-green-600/20 text-green-300 border-green-500/30'
|
||||
: 'bg-slate-600/20 text-slate-300 border-slate-500/30'
|
||||
}
|
||||
>
|
||||
{wish.status === 'active' ? '活躍' : '非活躍'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge
|
||||
variant={wish.is_public ? 'default' : 'outline'}
|
||||
className={wish.is_public
|
||||
? 'bg-blue-600/20 text-blue-300 border-blue-500/30'
|
||||
: 'bg-orange-600/20 text-orange-300 border-orange-500/30'
|
||||
}
|
||||
>
|
||||
{wish.is_public ? '公開' : '私密'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-white flex items-center gap-1">
|
||||
<Heart className="w-3 h-3 text-pink-400" />
|
||||
{wish.like_count}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-blue-300 text-xs">
|
||||
{new Date(wish.created_at).toLocaleDateString('zh-TW')}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-blue-200 border-slate-600/50 hover:bg-slate-700/50 hover:text-white hover:border-cyan-400/50"
|
||||
>
|
||||
<Eye className="w-4 h-4 mr-1" />
|
||||
查看
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 分頁組件 */}
|
||||
<PaginationComponent />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="analytics" className="space-y-6">
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-2">
|
||||
<BarChart3 className="w-5 h-5 text-cyan-400" />
|
||||
數據分析
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-200">
|
||||
困擾案例統計與分析
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* 類別分布 */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-green-400" />
|
||||
問題類別分布
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{stats && Object.entries(stats.categories).map(([category, count]) => (
|
||||
<div key={category} className="flex justify-between items-center p-3 bg-slate-700/30 rounded-lg">
|
||||
<span className="text-white">{category}</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-cyan-600/20 text-cyan-300 border-cyan-500/30"
|
||||
>
|
||||
{count}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 時間分布 */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-yellow-400" />
|
||||
創建時間分布
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-slate-700/30 rounded-lg">
|
||||
<div className="text-2xl font-bold text-white mb-1">{stats?.recentWishes}</div>
|
||||
<div className="text-blue-300 text-sm">最近7天新增</div>
|
||||
</div>
|
||||
<div className="p-4 bg-slate-700/30 rounded-lg">
|
||||
<div className="text-2xl font-bold text-white mb-1">{stats?.totalWishes}</div>
|
||||
<div className="text-blue-300 text-sm">總案例數</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user