blob: 4485e8e0b9754e1ed5aee6f4ad56278fa846baee (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { DashboardStats, UserDashboardStats } from "./service";
interface DashboardStatsCardProps {
stats: DashboardStats | UserDashboardStats;
showUserStats?: boolean;
}
export function DashboardStatsCard({ stats, showUserStats = false }: DashboardStatsCardProps) {
const userStats = showUserStats ? stats as UserDashboardStats : null;
const completionRate = stats.total > 0 ? Math.round((stats.completed / stats.total) * 100) : 0;
const myCompletionRate = userStats && userStats.myTotal > 0
? Math.round((userStats.myCompleted / userStats.myTotal) * 100)
: 0;
return (
<Card className="h-full">
<CardHeader className="pb-3">
<CardTitle className="text-lg font-medium">{stats.displayName}</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* 팀 전체 통계 */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground">팀 전체</span>
<span className="text-sm font-bold">{stats.total}건</span>
</div>
<div className="flex gap-2">
<Badge variant="secondary" className="text-xs">
대기 {stats.pending}
</Badge>
<Badge variant="default" className="text-xs bg-blue-500">
진행 {stats.inProgress}
</Badge>
<Badge variant="default" className="text-xs bg-green-500">
완료 {stats.completed}
</Badge>
</div>
<div className="space-y-1">
<div className="flex justify-between text-xs">
<span>완료율</span>
<span>{completionRate}%</span>
</div>
<Progress value={completionRate} className="h-2" />
</div>
</div>
{/* 개인 통계 */}
{showUserStats && userStats && (
<>
<hr className="border-muted" />
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground">내 업무</span>
<span className="text-sm font-bold">{userStats.myTotal}건</span>
</div>
<div className="flex gap-2">
<Badge variant="outline" className="text-xs">
대기 {userStats.myPending}
</Badge>
<Badge variant="outline" className="text-xs border-blue-500 text-blue-600">
진행 {userStats.myInProgress}
</Badge>
<Badge variant="outline" className="text-xs border-green-500 text-green-600">
완료 {userStats.myCompleted}
</Badge>
</div>
<div className="space-y-1">
<div className="flex justify-between text-xs">
<span>완료율</span>
<span>{myCompletionRate}%</span>
</div>
<Progress value={myCompletionRate} className="h-2" />
</div>
</div>
</>
)}
</CardContent>
</Card>
);
}
|
