blob: 6fd20e368262eca7d1da328ce5701736988ec8d1 (
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
|
"use client"
import React from 'react'
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { Loader2 } from "lucide-react"
interface ImportProgressDialogProps {
open: boolean
totalRows: number
processedRows: number
}
export function ImportProgressDialog({ open, totalRows, processedRows }: ImportProgressDialogProps) {
const percentage = totalRows > 0 ? Math.round((processedRows / totalRows) * 100) : 0
return (
<Dialog open={open} onOpenChange={() => {}}>
<DialogContent className="sm:max-w-md pointer-events-none [&>button]:hidden">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Loader2 className="h-5 w-5 animate-spin" />
데이터 Import 중...
</DialogTitle>
<DialogDescription>
잠시만 기다려주세요. 데이터를 처리하고 있습니다.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">진행 상황</span>
<span className="font-medium">
{processedRows} / {totalRows}건
</span>
</div>
<Progress value={percentage} className="h-2" />
<div className="text-center text-sm text-muted-foreground">
{percentage}% 완료
</div>
</div>
</DialogContent>
</Dialog>
)
}
|
