diff options
Diffstat (limited to 'lib/dashboard/dashboard-stats-card.tsx')
| -rw-r--r-- | lib/dashboard/dashboard-stats-card.tsx | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/lib/dashboard/dashboard-stats-card.tsx b/lib/dashboard/dashboard-stats-card.tsx new file mode 100644 index 00000000..4485e8e0 --- /dev/null +++ b/lib/dashboard/dashboard-stats-card.tsx @@ -0,0 +1,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> + ); +}
\ No newline at end of file |