456 lines
25 KiB
TypeScript
456 lines
25 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import {
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Download,
|
|
BarChart3,
|
|
PieChartIcon,
|
|
Activity,
|
|
Users,
|
|
Target,
|
|
Award,
|
|
Calendar,
|
|
FileText,
|
|
} from "lucide-react"
|
|
|
|
// Mock data for reports
|
|
const performanceData = [
|
|
{ month: "1月", 營收成長率: 75, 團隊滿意度: 88, 市場佔有率: 72, 創新指數: 40 },
|
|
{ month: "2月", 營收成長率: 85, 團隊滿意度: 92, 市場佔有率: 68, 創新指數: 45 },
|
|
{ month: "3月", 營收成長率: 82, 團隊滿意度: 89, 市場佔有率: 70, 創新指數: 48 },
|
|
{ month: "4月", 營收成長率: 88, 團隊滿意度: 94, 市場佔有率: 73, 創新指數: 52 },
|
|
{ month: "5月", 營收成長率: 91, 團隊滿意度: 96, 市場佔有率: 75, 創新指數: 55 },
|
|
{ month: "6月", 營收成長率: 89, 團隊滿意度: 93, 市場佔有率: 77, 創新指數: 58 },
|
|
]
|
|
|
|
const departmentData = [
|
|
{ name: "業務部", performance: 95, color: "#10b981" },
|
|
{ name: "行銷部", performance: 88, color: "#3b82f6" },
|
|
{ name: "產品部", performance: 82, color: "#8b5cf6" },
|
|
{ name: "營運部", performance: 76, color: "#f59e0b" },
|
|
{ name: "人資部", performance: 71, color: "#ef4444" },
|
|
]
|
|
|
|
const kpiDistribution = [
|
|
{ name: "財務", value: 35, color: "#10b981" },
|
|
{ name: "團隊", value: 25, color: "#3b82f6" },
|
|
{ name: "營運", value: 25, color: "#8b5cf6" },
|
|
{ name: "創新", value: 15, color: "#f59e0b" },
|
|
]
|
|
|
|
const radarData = [
|
|
{ subject: "領導力", A: 120, B: 110, fullMark: 150 },
|
|
{ subject: "溝通", A: 98, B: 130, fullMark: 150 },
|
|
{ subject: "創新", A: 86, B: 130, fullMark: 150 },
|
|
{ subject: "執行力", A: 99, B: 100, fullMark: 150 },
|
|
{ subject: "團隊合作", A: 85, B: 90, fullMark: 150 },
|
|
{ subject: "策略思維", A: 65, B: 85, fullMark: 150 },
|
|
]
|
|
|
|
const executiveReports = [
|
|
{
|
|
id: 1,
|
|
name: "陳雅雯",
|
|
position: "業務副總",
|
|
department: "業務部",
|
|
overallScore: 92,
|
|
kpiCompletion: 85,
|
|
reviewsCompleted: 4,
|
|
totalReviews: 4,
|
|
lastReview: "2024-02-10",
|
|
trend: "up",
|
|
color: "emerald",
|
|
strengths: ["業務拓展", "團隊領導", "客戶關係"],
|
|
improvements: ["數據分析", "創新思維"],
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "王志明",
|
|
position: "技術長",
|
|
department: "產品部",
|
|
overallScore: 88,
|
|
kpiCompletion: 92,
|
|
reviewsCompleted: 3,
|
|
totalReviews: 4,
|
|
lastReview: "2024-02-08",
|
|
trend: "up",
|
|
color: "blue",
|
|
strengths: ["技術創新", "問題解決", "團隊協作"],
|
|
improvements: ["業務理解", "溝通技巧"],
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "李美玲",
|
|
position: "行銷總監",
|
|
department: "行銷部",
|
|
overallScore: 85,
|
|
kpiCompletion: 78,
|
|
reviewsCompleted: 4,
|
|
totalReviews: 4,
|
|
lastReview: "2024-02-05",
|
|
trend: "down",
|
|
color: "purple",
|
|
strengths: ["創意行銷", "品牌管理", "市場分析"],
|
|
improvements: ["數據驅動", "ROI 優化"],
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "張建國",
|
|
position: "營運長",
|
|
department: "營運部",
|
|
overallScore: 79,
|
|
kpiCompletion: 72,
|
|
reviewsCompleted: 2,
|
|
totalReviews: 4,
|
|
lastReview: "2024-01-28",
|
|
trend: "down",
|
|
color: "orange",
|
|
strengths: ["流程優化", "成本控制", "風險管理"],
|
|
improvements: ["創新思維", "團隊激勵"],
|
|
},
|
|
]
|
|
|
|
export default function ReportsPage() {
|
|
const [selectedPeriod, setSelectedPeriod] = useState("6months")
|
|
const [selectedDepartment, setSelectedDepartment] = useState("all")
|
|
const [activeTab, setActiveTab] = useState("overview")
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 p-3 sm:p-6">
|
|
<div className="max-w-7xl mx-auto space-y-4 sm:space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
|
|
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
|
|
<img
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAakAAABPCAMAAABmmMpCAAAAMFBMVEX///9PT08AZLLq6uxaWlr19fXX2NmNjY16enrFxsikpKRoaGi3t7eOqtg4eL9jjssqyzjzAAAPHklEQVR4nO1cB3bbSAyldnqxdf/bLvCBaRSpxI6jOLuE/WyKZQr+oA+1bRdddNFFF1100UUXXfRbyd+J3uT4jY/Nnx3PRWfk/yFSpO587P/seC46oxmptwupb0xA6i7Hl0x9Z/LvRE2m+PhC6puS80TqRRg+dH92PBf9CXoZ6I7oVX29hvzbl9CJgvSJfvgPc82HEPLKvppzHZ9czlkacr4mJZLrdphGL77WxM0r7eMI7irU9Zybbh5NTk/XMFOufag0ykPadfCbCc7dr9PbcevhZoWYreV2uyUo18YbR6fiwM7TDRlHJt6Uotny7Wbl1wa92dCDgZuXK7Y0prG2pva5q1v1M23GapPFb/U2U26DXal1tsXbMdmDGbtDOrjn8Lnj9l6BVJ9j2nxUnjiCj5lQY4zM5ziI2RhjMA9IdVJEqhwOFvJSwAVZGHJupug6UrQ4jpGa75/OfwipHA8o5FnnuMDn0vKYCXLjA4Ch33qA1Ptbekt3PWb1ddez/ujn7alMFVsKz9qD90Emw5+3BYCVAR5IxRAikCK2FigkOy9/a7q+4g6K7xAeUgFS1GbhR/m2UDP/jEZNEoGEwo6jzS3VA6IbytGMT+Y0qX0ZY1we87qMwq45Vh66PI+Qms6P4/eTnFJ6hhSUEQ/eJ4wOjC2yXLOu3HUh098iMpUwJ5EpTMB0pkL57aYuWrQeS1STqYwFUoCUrFQXh+w8sGjPt5nyh5CaxutURBehakjtx4IF/kVIPZWpNidFalBke2XYdBXjDcgbvicYjgoUqcRI5TIhVTBhVX7qeCh7MEdt9Gar2VEDujaZimEnqCKibZp14uaR3cnH2u8Uqaa4u9gvQoVBH0BlSh/FzyN14t49lakJqcIEPUXUtHQmFS6cAEOIUdLLhFSytwkpKD1elZYgSYKQk/nY7F3rjgBfyXWR7DI1KE8s7IzC0i9OR7lSrE9lyuZVUWY7hL6LVDetghRbbEzHLh7lp2TKuzFr6rB9eC5TrP4ilgXuFhabnXiyOYWssES4NsCQc1CkrBcgBSkH2fNRFAaMCeDkQ5OELbasFB6R0lu6NOLBaUWn/rmv9xnbJ0iVvV8gEjNZUizZyevFHdbnBwQ/Y6f+eW8EVN76x2dIETvF+ngkPhg0K84zmKOEhZPogExXqSxfk+/nc8g6dlM5IDOAKDur13FJ3JNEdupY9ShSFZwSpCr6ZhYR31OIuu5HhgZLnIU87HG3+an2Kw+Gonb1B5GyKe8ggUwZ9yBVn5GpQUDlfnDukZp/F/dOGdRZ92h54RT9b1m8Fi99j7540C4W+mnhqcuROOilQ7tzkgdSARrTKlJmIFWbfIJZ4vRhPfNFZ/a61D2Xqccxd6SqzB6TmJwikSmd9wThZ+zUp5AKwrawjzUFqRPrW9zspTs/W4jUkSKJXBKSDnoZSO04xQ+EZubkepWlUWRxNKRK0rWlizp11XhAH0KquycqUjr3gYjIVFsdtvsEr5SpKJZNeAP1HO2E1EGkGt3ipS9xF81BDBQh5dNKPD3HgVDxiwTUCamboLyum8rpp5yr6Uu+8SljbTi/I7N9TPsBcrC/t4/1Ntw/lalm0lok9zk79UmZ0mlXLKWA8cSBVNFo08ohvHW/+H6ucroIv8pV1VjmwSRhenHCfIRpB0jZKEZnTgz4vaXXs7v24nPtZ3f5wdB9Pzdci3Cb1VyTqaYyGtivlKlCIU9NnL8hjCS3MCOlXIkybJ8rEi9zPNWzqbmrECDlH9QmhOo49dPsVK2lab/MvkxzZZUvfe0vlPat/QCpY+KRTyK7WqouU82PVfv8SjsFshz5PkMKoaisrIZUyDUsHkVt692ITAW2ZBACOioTUnYX/djZ98vNoyiS2U+06FvCONz6Cna0vFoi2eNu7o1/bUfqQ5Ev4sbJW1+FasjUpv5r7OHKq7TfhFTmBS1/O1JNyvkKLqc+wJuuLUNqimLNEVgJUjxzzCrSf+RcG1K7eGbyKPaRb0arTd3lseIFtTqQotXP2svhwsdlSvJ+IlJuDGt8KJMwi1SFtihfo/3Iky5WkZppL1Pdnz+oeog3ksaYO1LCmO79dqTSYv/rMVIshmi1rRbx/5oMp76ucThSgD9GaifTXCrzfVZDuYZJwGaZajFD3l4oUzAE4REpkZwwM8YOBFX71a79Goy6AgdSY4IzUrcHh2KNfDWeaq02yVmNlJPUCq6cIPXzke8EwGhodv8WmWoTzgd26v5+v7//BqTa4K03yICJ9qtqAGaZkhUWJ5eneRRbMyCLqsx9RqFz4cceRdblIR6FBNppNDrSqNqiGv/bbc0H/kCmTpByO3/FTZZqlakGVX2QKeTJ/fvM9a9GahwaSJp+4km5mqXeM6axVD225rr2wm63U7FPdUZqlyHNQ/tFeMwiU3m4KI1tc9YAjJUBQRGSh0FtpV7Q+jhSO5FaLNVOpnQ4Nrm99vMzOH5C4rcglYoUL1SmRqDTq+9uRcpoROJ3SKUhhvn2Mx6F2j4nSLnuwegiXlNXrUj9EA9gNh/WfnuRWoRqL1MKVal7pO7j+F2efP8SpFh6kJYlu84LEtqPU2+0HLG8eVJzCBsSb2UxvHApBmOuG1NzS2aXjESEIuVb9tsltDyQalN2FEt7n28rUiWJNCUUxCje4/y9JGhz6D859nLLzhuyFMtl7vtjSD2IlDaMU3uZak4VrOxsp7T45N/ub246/ctI1WKL5NJ35qNobMEG1Wko3zgZNE0mZWJV2UUbgBACKbFIPD2jSD4gNSrAWbUf6UI2ksL7rEaN7z/ZKwGZMmvKoWUHP6b9DqPq7v49yNTs/y6+331tITUEviqXvjf0QZXBXItJfS+BGBCseE2PBy/1oz1SNm8dKYQssFNL3Rb9m7m4361Sy7KdIvWYyZ/mtQx+5v0hUgcipVNGGvBBpqY68OqlL1ClQz/wE0h5XYaGK9+TauFiBe/1W8fmq65ZTzcb/cttVNQXfdYNg+SC8MJOrQH+nKvui+CzPUejPkUSY4d0qxA/wp8MP8q7EQ93tdTV4M0jJTosgp8hdZyoci2l3rMzSy/2CKl/7v0+PyHzFR7F/4p4L0Y+QCpxNe2xgpJiLIVVM9fRHh5LUl97yPvd33j71NsIrBgpDvJ3SN353IXUx4jLlkdKkc4jR3y+L/M1OzMv+jr6IqTuP+7pol+jsXPll+hsZ2btG/9NEhPMxSrs/V+E3XCJwZPn0IpR/aqn+x129Tm63otVpr1j0PpwaMRrU62/fj8/vInDIRUwXNazOij0tYyfb6L2PWI2tFrFAfkDRLGp++Wf/bawTuKlI+Wv+QZH8RUy2msiIbHPG8kZb/5x92+ypeC38GVywHMLQq3X8kLZ2rYx7NWIjjMKWrSj/vr9FJ3EHk5m+FXSpPjIeMeBt/Uu/hcNNmjyke7npEl55rv/zcTJMd5UUntqWrNpeefKJr5IbDPYg1ImPygTl9nFjWCrb9cZKey5x16NWFqOqEpTrb92fwBSyK4GjMfb1uQ2krH5tkfqBqSkwpw4/LG8Dedho//fT5i6L7JtyjI3nOz3PkOKPJ2ErXhTE5ApvU7eUOXEpaNIhNCU7Vyy+atIcsh4DVAshNc5HgPdz0glhMc0nuK87U0yXhbjOUWKWrW4m+UwnJY1/mLC1E1B2iFihjR5wszXM6T0cG5CtB8B0wQA7IyyQ8MAKWdCe9cmi57K2l+7H0jlnlz1urcFTRKqWR8qx0hJq5gIson/RZkSzVSJsdUwN2jykdhzKlNnSAV7q2FFSlJI0LClyPtrhdBJ6Kb1tyCl2HEPxHlqMqPJ3CA7kSlLz5GF4mfOdv99OzKSy5Y9bw6OBAduhzEdU/coPL8iWCTdF2jucULKePMUKdipSoiVGakgRfCEPiQrz3qRFgIDREyV/mCEjpFqTTJKBpdOkCopotW/CCneFsGpUd4dwfVIMIIWsw+nmUyb4UFnlMyJGzx5eGADqVDUYHek6tIEZCqblszsMqVFQOoj8V4JrgxKjfCWpD/p5FD7sd2p2qSXseGpNZ/dZMpLq/zR4SXi726nvKUwpiQXK7bJmcLzCjfe1nqOVNvrYZUbRXeLTUjRcZYdm+faL/dK/LBTiYV7g8mD9mLpEZ+PraH2NyPluRppSD1iCK1JXUU4snV+8bsjpZ4k+ZuV622FwrLXvo79QUo85WRcbC85lcR/fgIpdrrAosB2yi17XfgiBVkUX53IFGk/Zqu+hT3ZKZFS9NGRggOQfO9v0X4ARQq9vjfJI8JrKLZtLuuhXkdKWkUdoljBzH5nr8KFwl8d4GJAIYOrEvw6CyN1MuxqxZni8HXj11vIgeMSPIWa4xFUnvg+XNpSWQo/mZ6hhzLqgnm0GSyFq8UWVy2vE246WfjrFL7W0Z/eT6fZH0f5OOJNfn75hZuUI1qGeIxLn31ojvtFq9xd2mRPfKmOR/WdkeLXjEokmYp4y9LEGlyu4YlMtdcxXH89Tt/QWN/TMEgGtZNmySrjpLgs/VGnbeH9GPnM7o1kq51rneCe0bc07pO+TNcb0wyLkd3Pbt7/DHdJOtfT9LjZ9uP/diR7+/PWtZ8PhFN8gtRFf4Yyq5SQnZa2CKNasrmQ+n5kYsyBlHahf4G9dOPZzbqQ+n7Eb3553gEReBOCq85V4xJZrNMNBxdddNFFF1100f+GWqT5I7dgvf5f+07K708mR+wt1f8G+1Yrtpzy3pCEGk/Cd+bQdSNfKMlbECPfmUL/sqOLfi+5EFNGDUP+e86PpbilkhE8Zc6KEjSGcMoluZopnEobxbwpcq411hr+g9Xqb0iVM8c5b5lfu6jR+cKp48C/hFDoSOF65hQpJK9gV0nd8G2v8VuXAP4rFPQtdHDbFe9DiI5lKuIbSEnLyU2SQsILanWTq4xiyMakcvTWw0VfTILUJsk8+uuD4T8kU6hANKTc+OJURqriTWL6m/mrUq4UxStolSkCiSWK4IHUkGzlRaZQ9ZmRInciX2bqJVTFPgkiqTiuCnLVrdkpXGeDhHorTla2U6jmZXwIz76v9aKvIlOyJz+v/+e8uOddjCWRr8f7KrPHrpZS6XrzH1wm6WNhCtg5fNmpVxBvCM7yP/IO0yy+oG/vWFUyRPyfX8rCC5r4CkuXecsxfWDs8t+yueqiiy666KKLLrrooosu+r/Qv5Veut0DM30cAAAAAElFTkSuQmCC"
|
|
alt="公司 Logo"
|
|
className="h-10 w-auto sm:h-12 md:hidden"
|
|
/>
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
|
|
績效報告中心
|
|
</h1>
|
|
<p className="text-sm sm:text-base text-gray-600 mt-1">執行管理績效分析與報告</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="1month">1個月</SelectItem>
|
|
<SelectItem value="3months">3個月</SelectItem>
|
|
<SelectItem value="6months">6個月</SelectItem>
|
|
<SelectItem value="1year">1年</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button className="bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white shadow-lg">
|
|
<Download className="h-4 w-4 mr-2" />
|
|
匯出報告
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary Cards */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
<Card className="shadow-lg bg-gradient-to-br from-emerald-50 to-green-100 border-0">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="p-3 bg-emerald-500 rounded-full">
|
|
<Target className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">整體達成率</p>
|
|
<p className="text-2xl font-bold text-gray-900">87%</p>
|
|
<div className="flex items-center text-sm text-emerald-600">
|
|
<TrendingUp className="h-4 w-4 mr-1" />
|
|
+5.2%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="shadow-lg bg-gradient-to-br from-blue-50 to-cyan-100 border-0">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="p-3 bg-blue-500 rounded-full">
|
|
<Users className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">參與人數</p>
|
|
<p className="text-2xl font-bold text-gray-900">24</p>
|
|
<div className="flex items-center text-sm text-blue-600">
|
|
<TrendingUp className="h-4 w-4 mr-1" />
|
|
+2
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="shadow-lg bg-gradient-to-br from-purple-50 to-violet-100 border-0">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="p-3 bg-purple-500 rounded-full">
|
|
<Award className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">優秀表現</p>
|
|
<p className="text-2xl font-bold text-gray-900">8</p>
|
|
<div className="flex items-center text-sm text-purple-600">
|
|
<TrendingUp className="h-4 w-4 mr-1" />
|
|
+1
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="shadow-lg bg-gradient-to-br from-orange-50 to-amber-100 border-0">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="p-3 bg-orange-500 rounded-full">
|
|
<Calendar className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-600">評審完成</p>
|
|
<p className="text-2xl font-bold text-gray-900">18</p>
|
|
<div className="flex items-center text-sm text-orange-600">
|
|
<TrendingUp className="h-4 w-4 mr-1" />
|
|
+3
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<Card className="shadow-lg bg-white/80 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
|
|
績效分析報告
|
|
</CardTitle>
|
|
<CardDescription>詳細的績效數據分析與趨勢追蹤</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList className="grid w-full grid-cols-4">
|
|
<TabsTrigger value="overview">概覽</TabsTrigger>
|
|
<TabsTrigger value="performance">績效趨勢</TabsTrigger>
|
|
<TabsTrigger value="departments">部門分析</TabsTrigger>
|
|
<TabsTrigger value="executives">執行層報告</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview" className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* KPI 分布 */}
|
|
<Card className="shadow-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center">
|
|
<PieChartIcon className="h-5 w-5 mr-2" />
|
|
KPI 類別分布
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{kpiDistribution.map((item, index) => (
|
|
<div key={index} className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">{item.name}</span>
|
|
<span className="font-medium">{item.value}%</span>
|
|
</div>
|
|
<Progress value={item.value} className="h-2" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 部門績效 */}
|
|
<Card className="shadow-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center">
|
|
<BarChart3 className="h-5 w-5 mr-2" />
|
|
部門績效排名
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{departmentData.map((dept, index) => (
|
|
<div key={index} className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-sm font-medium">
|
|
{index + 1}
|
|
</div>
|
|
<span className="text-sm font-medium">{dept.name}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Progress value={dept.performance} className="w-20 h-2" />
|
|
<span className="text-sm font-medium">{dept.performance}%</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="performance" className="space-y-6">
|
|
<Card className="shadow-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center">
|
|
<Activity className="h-5 w-5 mr-2" />
|
|
績效趨勢分析
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-6">
|
|
{performanceData.map((data, index) => (
|
|
<div key={index} className="space-y-4">
|
|
<h4 className="font-semibold text-gray-700">{data.month}</h4>
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">營收成長率</span>
|
|
<span className="font-medium">{data.營收成長率}%</span>
|
|
</div>
|
|
<Progress value={data.營收成長率} className="h-2" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">團隊滿意度</span>
|
|
<span className="font-medium">{data.團隊滿意度}%</span>
|
|
</div>
|
|
<Progress value={data.團隊滿意度} className="h-2" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">市場佔有率</span>
|
|
<span className="font-medium">{data.市場佔有率}%</span>
|
|
</div>
|
|
<Progress value={data.市場佔有率} className="h-2" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-600">創新指數</span>
|
|
<span className="font-medium">{data.創新指數}%</span>
|
|
</div>
|
|
<Progress value={data.創新指數} className="h-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="departments" className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{departmentData.map((dept, index) => (
|
|
<Card key={index} className="shadow-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">{dept.name}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-gray-600">績效分數</span>
|
|
<span className="text-lg font-bold">{dept.performance}%</span>
|
|
</div>
|
|
<Progress value={dept.performance} className="h-3" />
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-600">參與人數:</span>
|
|
<span className="ml-2 font-medium">6</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-600">完成評審:</span>
|
|
<span className="ml-2 font-medium">5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="executives" className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{executiveReports.map((exec) => (
|
|
<Card key={exec.id} className="shadow-md">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-base">{exec.name}</CardTitle>
|
|
<CardDescription>{exec.position} • {exec.department}</CardDescription>
|
|
</div>
|
|
<Badge variant={exec.trend === "up" ? "default" : "secondary"}>
|
|
{exec.overallScore}分
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p className="text-sm text-gray-600">KPI 達成率</p>
|
|
<p className="text-lg font-bold">{exec.kpiCompletion}%</p>
|
|
<Progress value={exec.kpiCompletion} className="h-2 mt-1" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">評審進度</p>
|
|
<p className="text-lg font-bold">{exec.reviewsCompleted}/{exec.totalReviews}</p>
|
|
<Progress value={(exec.reviewsCompleted / exec.totalReviews) * 100} className="h-2 mt-1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">優勢領域</p>
|
|
<div className="flex flex-wrap gap-1">
|
|
{exec.strengths.map((strength, index) => (
|
|
<Badge key={index} variant="outline" className="text-xs">
|
|
{strength}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">改進方向</p>
|
|
<div className="flex flex-wrap gap-1">
|
|
{exec.improvements.map((improvement, index) => (
|
|
<Badge key={index} variant="secondary" className="text-xs">
|
|
{improvement}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|