blob: e93286414fdddd7e1241b1c37ae553c8cd3aadf2 (
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
|
"use client"
import * as React from "react"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig"
import { RfqItemsTable } from "./rfq-items-table/rfq-items-table"
import { formatDateTime } from "@/lib/utils"
import { CalendarClock } from "lucide-react"
interface RfqDeailDialogProps {
isOpen: boolean
onOpenChange: (open: boolean) => void
rfqId: number | null
rfq: VendorWithCbeFields | null
}
export function RfqDeailDialog({
isOpen,
onOpenChange,
rfqId,
rfq,
}: RfqDeailDialogProps) {
return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent className="max-w-[90wv] sm:max-h-[80vh] overflow-auto" style={{ maxWidth: 1000, height: 480 }}>
<DialogHeader>
<div className="flex flex-col space-y-2">
<DialogTitle>프로젝트: {rfq && rfq.projectName}({rfq && rfq.projectCode}) / RFQ: {rfq && rfq.rfqCode} Detail</DialogTitle>
{rfq && (
<div className="flex flex-col space-y-3 mt-2">
<div className="text-sm text-muted-foreground">
<span className="font-medium text-foreground">{rfq.rfqDescription && rfq.rfqDescription}</span>
</div>
{/* 정보를 두 행으로 나누어 표시 */}
<div className="flex flex-col space-y-2 sm:space-y-0 sm:flex-row sm:justify-between sm:items-center">
{/* 첫 번째 행: 상태 배지 */}
<div className="flex items-center flex-wrap gap-2">
{rfq.rfqType && (
<Badge
variant={
rfq.rfqType === "BUDGETARY" ? "default" :
rfq.rfqType === "PURCHASE" ? "destructive" :
rfq.rfqType === "PURCHASE_BUDGETARY" ? "secondary" : "outline"
}
>
RFQ 유형: {rfq.rfqType}
</Badge>
)}
{rfq.vendorStatus && (
<Badge variant="outline">
RFQ 상태: {rfq.rfqStatus}
</Badge>
)}
</div>
{/* 두 번째 행: Due Date를 강조 표시 */}
{rfq.rfqDueDate && (
<div className="flex items-center">
<Badge variant="secondary" className="flex gap-1 text-xs py-1 px-3">
<CalendarClock className="h-3.5 w-3.5" />
<span className="font-semibold">Due Date:</span>
<span>{formatDateTime(rfq.rfqDueDate)}</span>
</Badge>
</div>
)}
</div>
</div>
)}
</div>
</DialogHeader>
{rfqId && (
<div className="py-4">
<RfqItemsTable rfqId={rfqId} />
</div>
)}
</DialogContent>
</Dialog>
)
}
|
