392 lines
20 KiB
TypeScript
392 lines
20 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, useRef } from "react"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Brain, Lightbulb, BarChart3, Users, Settings, Menu, ChevronDown } from "lucide-react"
|
||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
|
||
import Link from "next/link"
|
||
import Image from "next/image"
|
||
import { useAuth } from "@/lib/hooks/use-auth"
|
||
import { useRouter } from "next/navigation"
|
||
import { ProtectedRoute } from "@/components/protected-route"
|
||
|
||
export default function HomePage() {
|
||
const { user, logout } = useAuth()
|
||
const router = useRouter()
|
||
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
|
||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||
|
||
const handleLogout = () => {
|
||
logout()
|
||
router.push("/")
|
||
}
|
||
|
||
// 點擊外部關閉下拉選單
|
||
useEffect(() => {
|
||
const handleClickOutside = (event: MouseEvent) => {
|
||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||
setIsDropdownOpen(false)
|
||
}
|
||
}
|
||
|
||
if (isDropdownOpen) {
|
||
document.addEventListener('mousedown', handleClickOutside)
|
||
}
|
||
|
||
return () => {
|
||
document.removeEventListener('mousedown', handleClickOutside)
|
||
}
|
||
}, [isDropdownOpen])
|
||
|
||
// 調試信息
|
||
console.log("Current user:", user)
|
||
|
||
return (
|
||
<ProtectedRoute>
|
||
<div className="min-h-screen bg-background">
|
||
{/* Header */}
|
||
<header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
|
||
<div className="container mx-auto px-4 py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
|
||
<Users className="w-6 h-6 text-primary-foreground" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-xl font-bold text-foreground">HR 評估系統</h1>
|
||
<p className="text-sm text-muted-foreground">員工能力測評平台</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Desktop Navigation */}
|
||
<div className="hidden md:flex items-center gap-6">
|
||
{/* Navigation Links */}
|
||
<div className="flex items-center gap-12">
|
||
<Link
|
||
href={user?.role === "admin" ? "/admin/results" : "/results"}
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
{user?.role === "admin" ? "所有測試結果" : "我的測試結果"}
|
||
</Link>
|
||
{user?.role === "admin" && (
|
||
<Link
|
||
href="/admin/analytics"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
部門分析
|
||
</Link>
|
||
)}
|
||
</div>
|
||
|
||
{/* 自定義下拉選單 */}
|
||
<div className="relative" ref={dropdownRef}>
|
||
<Button
|
||
variant="ghost"
|
||
className="flex items-center gap-3 hover:bg-accent px-6 py-6 text-foreground rounded-lg group"
|
||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||
>
|
||
<div className="text-right">
|
||
<p className="text-sm font-medium text-foreground group-hover:text-white">{user?.name || '系統管理員'}</p>
|
||
<p className="text-xs text-muted-foreground group-hover:text-white/80">{user?.department || '人力資源部'}</p>
|
||
</div>
|
||
<ChevronDown className={`w-4 h-4 transition-transform group-hover:text-white ${isDropdownOpen ? 'rotate-180' : ''}`} />
|
||
</Button>
|
||
|
||
{isDropdownOpen && (
|
||
<div className="absolute right-0 top-full mt-1 w-56 bg-background border border-border rounded-md shadow-lg z-50">
|
||
<div className="py-1">
|
||
<Link
|
||
href="/settings"
|
||
className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
|
||
onClick={() => setIsDropdownOpen(false)}
|
||
>
|
||
<Settings className="w-4 h-4" />
|
||
帳戶設定
|
||
</Link>
|
||
{user?.role === "admin" && (
|
||
<>
|
||
<div className="border-t border-border my-1"></div>
|
||
<Link
|
||
href="/admin/users"
|
||
className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
|
||
onClick={() => setIsDropdownOpen(false)}
|
||
>
|
||
<Users className="w-4 h-4" />
|
||
用戶管理
|
||
</Link>
|
||
<Link
|
||
href="/admin/questions"
|
||
className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
|
||
onClick={() => setIsDropdownOpen(false)}
|
||
>
|
||
<Brain className="w-4 h-4" />
|
||
題目管理
|
||
</Link>
|
||
</>
|
||
)}
|
||
<div className="border-t border-border my-1"></div>
|
||
<button
|
||
onClick={() => {
|
||
handleLogout()
|
||
setIsDropdownOpen(false)
|
||
}}
|
||
className="flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700 w-full text-left"
|
||
>
|
||
登出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="md:hidden">
|
||
<Sheet>
|
||
<SheetTrigger asChild>
|
||
<Button variant="ghost" size="sm">
|
||
<Menu className="w-5 h-5" />
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent>
|
||
<SheetHeader>
|
||
<SheetTitle className="text-left">選單</SheetTitle>
|
||
</SheetHeader>
|
||
<div className="mt-6 space-y-4 px-4">
|
||
<div className="pb-4 border-b">
|
||
<p className="font-medium">{user?.name}</p>
|
||
<p className="text-sm text-muted-foreground">{user?.department}</p>
|
||
</div>
|
||
|
||
{/* Navigation Links */}
|
||
<Button asChild variant="ghost" className="w-full justify-start px-4">
|
||
<Link href={user?.role === "admin" ? "/admin/results" : "/results"} className="flex items-center gap-2">
|
||
<BarChart3 className="w-4 h-4" />
|
||
{user?.role === "admin" ? "所有測試結果" : "我的測試結果"}
|
||
</Link>
|
||
</Button>
|
||
{user?.role === "admin" && (
|
||
<Button asChild variant="ghost" className="w-full justify-start px-4">
|
||
<Link href="/admin/analytics" className="flex items-center gap-2">
|
||
<BarChart3 className="w-4 h-4" />
|
||
部門分析
|
||
</Link>
|
||
</Button>
|
||
)}
|
||
|
||
<Button asChild variant="ghost" className="w-full justify-start px-4">
|
||
<Link href="/settings" className="flex items-center gap-2">
|
||
<Settings className="w-4 h-4" />
|
||
帳戶設定
|
||
</Link>
|
||
</Button>
|
||
{user?.role === "admin" && (
|
||
<>
|
||
<Button asChild variant="ghost" className="w-full justify-start px-4">
|
||
<Link href="/admin/users" className="flex items-center gap-2">
|
||
<Users className="w-4 h-4" />
|
||
用戶管理
|
||
</Link>
|
||
</Button>
|
||
<Button asChild variant="ghost" className="w-full justify-start px-4">
|
||
<Link href="/admin/questions" className="flex items-center gap-2">
|
||
<Brain className="w-4 h-4" />
|
||
題目管理
|
||
</Link>
|
||
</Button>
|
||
</>
|
||
)}
|
||
<Button onClick={handleLogout} variant="ghost" className="w-full justify-start text-red-600 px-4">
|
||
登出
|
||
</Button>
|
||
</div>
|
||
</SheetContent>
|
||
</Sheet>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Hero Section */}
|
||
<section className="py-8 md:py-16 px-4 flex items-center">
|
||
<div className="container mx-auto text-center">
|
||
<div className="max-w-2xl mx-auto">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 md:mb-6 text-balance">
|
||
歡迎回來，{user?.name}
|
||
</h2>
|
||
<p className="text-lg md:text-xl text-muted-foreground text-pretty leading-relaxed">
|
||
透過科學的邏輯思維測試和創意能力評估，全面了解您的綜合素質
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Test Cards / Admin Info Cards */}
|
||
<section className="py-8 md:py-16 px-4">
|
||
<div className="container mx-auto">
|
||
{user?.role === "admin" ? (
|
||
// 管理者看到的介紹卡片
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 max-w-6xl mx-auto">
|
||
{/* 邏輯思維測試介紹 */}
|
||
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20">
|
||
<CardHeader className="text-center pb-4">
|
||
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-primary/20 transition-colors">
|
||
<Brain className="w-6 h-6 text-primary" />
|
||
</div>
|
||
<CardTitle className="text-lg">邏輯思維測試</CardTitle>
|
||
<CardDescription>評估邏輯推理、分析判斷和問題解決能力</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">題目數量</span>
|
||
<span className="text-sm font-bold text-primary">10題</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">題目類型</span>
|
||
<span className="text-sm font-bold text-primary">單選題</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">預計時間</span>
|
||
<span className="text-sm font-bold text-primary">15-20分鐘</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 創意能力測試介紹 */}
|
||
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-accent/20">
|
||
<CardHeader className="text-center pb-4">
|
||
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-accent/20 transition-colors">
|
||
<Lightbulb className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<CardTitle className="text-lg">創意能力測試</CardTitle>
|
||
<CardDescription>評估創新思維、想像力和創造性解決問題的能力</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">題目數量</span>
|
||
<span className="text-sm font-bold text-accent">20題</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">題目類型</span>
|
||
<span className="text-sm font-bold text-accent">5級量表</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">預計時間</span>
|
||
<span className="text-sm font-bold text-accent">25-30分鐘</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 綜合測試介紹 */}
|
||
<Card className="group hover:shadow-lg transition-all duration-300 border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5 md:col-span-2 lg:col-span-1">
|
||
<CardHeader className="text-center pb-4">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
|
||
<BarChart3 className="w-6 h-6 text-white" />
|
||
</div>
|
||
<CardTitle className="text-lg">綜合測試</CardTitle>
|
||
<CardDescription>完整的邏輯思維 + 創意能力雙重評估，獲得全面的能力報告</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">總題目數</span>
|
||
<span className="text-sm font-bold text-primary">30題</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xs text-muted-foreground">預計時間</span>
|
||
<span className="text-sm font-bold text-accent">45分鐘</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
) : (
|
||
// 一般用戶看到的測試功能
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 max-w-6xl mx-auto">
|
||
{/* Logic Test */}
|
||
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20">
|
||
<CardHeader className="text-center pb-4">
|
||
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-primary/20 transition-colors">
|
||
<Brain className="w-6 h-6 text-primary" />
|
||
</div>
|
||
<CardTitle className="text-lg">邏輯思維測試</CardTitle>
|
||
<CardDescription>評估邏輯推理能力</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<Button asChild className="w-full">
|
||
<Link href="/tests/logic">開始測試</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Creative Test */}
|
||
<Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-accent/20">
|
||
<CardHeader className="text-center pb-4">
|
||
<div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-accent/20 transition-colors">
|
||
<Lightbulb className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<CardTitle className="text-lg">創意能力測試</CardTitle>
|
||
<CardDescription>評估創新思維能力</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="w-full border-accent text-accent hover:bg-accent hover:text-accent-foreground bg-transparent"
|
||
>
|
||
<Link href="/tests/creative">開始測試</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Combined Test */}
|
||
<Card className="group hover:shadow-lg transition-all duration-300 border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5 md:col-span-2 lg:col-span-1">
|
||
<CardHeader className="text-center pb-4">
|
||
<div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
|
||
<BarChart3 className="w-6 h-6 text-white" />
|
||
</div>
|
||
<CardTitle className="text-lg">綜合測試</CardTitle>
|
||
<CardDescription>完整能力評估</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<Button asChild size="lg" className="w-full">
|
||
<Link href="/tests/combined">開始測試</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="border-t bg-muted/30 py-12 px-4 mt-16">
|
||
<div className="container mx-auto">
|
||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||
{/* 左側內容 */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
|
||
<Users className="w-6 h-6 text-primary-foreground" />
|
||
</div>
|
||
<div>
|
||
<span className="text-lg font-semibold">HR 評估系統</span>
|
||
<p className="text-muted-foreground text-sm">專業的員工能力測評解決方案，助力企業人才發展</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右側內容 */}
|
||
<div className="text-sm text-muted-foreground">
|
||
© 2025 HR 評估系統. All rights reserved.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</ProtectedRoute>
|
||
)
|
||
}
|