blob: dace05059440fa6d47e4db9e6492657453faf830 (
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
89
90
91
92
93
94
95
96
97
|
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Clock, CheckCircle, Eye, FileText } from "lucide-react";
interface ComplianceResponseStatsProps {
stats: {
inProgress: number;
completed: number;
reviewed: number;
total: number;
};
onFilterChange?: (filter: 'all' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED') => void;
currentFilter?: string;
}
export function ComplianceResponseStats({ stats, onFilterChange, currentFilter }: ComplianceResponseStatsProps) {
return (
<div className="grid gap-4 md:grid-cols-4">
{/* 전체 응답 */}
<Card
className={`cursor-pointer hover:shadow-md transition-shadow ${
currentFilter === 'all' ? 'ring-2 ring-blue-500' : ''
}`}
onClick={() => onFilterChange?.('all')}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">전체 응답</CardTitle>
<FileText className="h-3 w-3 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stats.total}</div>
<p className="text-xs text-muted-foreground">
총 {stats.total}개 응답
</p>
</CardContent>
</Card>
{/* 진행중 */}
<Card
className={`cursor-pointer hover:shadow-md transition-shadow ${
currentFilter === 'IN_PROGRESS' ? 'ring-2 ring-orange-500' : ''
}`}
onClick={() => onFilterChange?.('IN_PROGRESS')}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">진행중</CardTitle>
<Clock className="h-4 w-4 text-orange-500" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-orange-500">{stats.inProgress}</div>
<p className="text-xs text-muted-foreground">
작성 중인 응답
</p>
</CardContent>
</Card>
{/* 제출완료 */}
<Card
className={`cursor-pointer hover:shadow-md transition-shadow ${
currentFilter === 'COMPLETED' ? 'ring-2 ring-green-500' : ''
}`}
onClick={() => onFilterChange?.('COMPLETED')}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">제출완료</CardTitle>
<CheckCircle className="h-4 w-4 text-green-500" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-green-500">{stats.completed}</div>
<p className="text-xs text-muted-foreground">
제출 완료된 응답
</p>
</CardContent>
</Card>
{/* 검토완료 */}
<Card
className={`cursor-pointer hover:shadow-md transition-shadow ${
currentFilter === 'REVIEWED' ? 'ring-2 ring-blue-500' : ''
}`}
onClick={() => onFilterChange?.('REVIEWED')}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">검토완료</CardTitle>
<Eye className="h-4 w-4 text-blue-500" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-blue-500">{stats.reviewed}</div>
<p className="text-xs text-muted-foreground">
검토 완료된 응답
</p>
</CardContent>
</Card>
</div>
);
}
|
