diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-07-02 00:45:49 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-07-02 00:45:49 +0000 |
| commit | 2acf5f8966a40c1c9a97680c8dc263ee3f1ad3d1 (patch) | |
| tree | f406b5c86f563347c7fd088a85fd1a82284dc5ff /lib/dashboard/dashboard-summary-cards.tsx | |
| parent | 6a9ca20deddcdcbe8495cf5a73ec7ea5f53f9b55 (diff) | |
(대표님/최겸) 20250702 변경사항 업데이트
Diffstat (limited to 'lib/dashboard/dashboard-summary-cards.tsx')
| -rw-r--r-- | lib/dashboard/dashboard-summary-cards.tsx | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/lib/dashboard/dashboard-summary-cards.tsx b/lib/dashboard/dashboard-summary-cards.tsx new file mode 100644 index 00000000..9d1d9ef2 --- /dev/null +++ b/lib/dashboard/dashboard-summary-cards.tsx @@ -0,0 +1,64 @@ +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { CheckCircle, Clock, PlayCircle, Users } from "lucide-react"; +import { DashboardData } from "./service"; + +interface DashboardSummaryCardsProps { + summary: DashboardData['summary']; +} + +export function DashboardSummaryCards({ summary }: DashboardSummaryCardsProps) { + const cards = [ + { + title: "전체 업무", + value: summary.totalTasks, + icon: Users, + description: `내 업무 ${summary.myTasks}건`, + color: "text-blue-600" + }, + { + title: "대기중", + value: summary.teamPending, + icon: Clock, + description: `내 대기 ${summary.myPending}건`, + color: "text-gray-600" + }, + { + title: "진행중", + value: summary.teamInProgress, + icon: PlayCircle, + description: `내 진행 ${summary.myInProgress}건`, + color: "text-blue-600" + }, + { + title: "완료", + value: summary.teamCompleted, + icon: CheckCircle, + description: `내 완료 ${summary.myCompleted}건`, + color: "text-green-600" + } + ]; + + return ( + <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"> + {cards.map((card, index) => { + const Icon = card.icon; + return ( + <Card key={index}> + <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> + <CardTitle className="text-sm font-medium"> + {card.title} + </CardTitle> + <Icon className={`h-4 w-4 ${card.color}`} /> + </CardHeader> + <CardContent> + <div className="text-2xl font-bold">{card.value}</div> + <p className="text-xs text-muted-foreground"> + {card.description} + </p> + </CardContent> + </Card> + ); + })} + </div> + ); +}
\ No newline at end of file |
