blob: 2056a48f98e53dea09097f6708d7dbd404fab68c (
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
|
"use client"
import * as React from "react"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { formatDateTime } from "@/lib/utils"
import { CalendarClock } from "lucide-react"
import { RfqItemsTable } from "../vendor-cbe-table/rfq-items-table/rfq-items-table"
import { TbeVendorFields } from "@/config/vendorTbeColumnsConfig"
interface RfqDeailDialogProps {
isOpen: boolean
onOpenChange: (open: boolean) => void
rfqId: number | null
rfq: TbeVendorFields | 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.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.vendorStatus && (
<Badge variant="outline">
{rfq.rfqStatus}
</Badge>
)}
{rfq.rfqType && (
<Badge
variant={
rfq.rfqType === "BUDGETARY" ? "default" :
rfq.rfqType === "PURCHASE" ? "destructive" :
rfq.rfqType === "PURCHASE_BUDGETARY" ? "secondary" : "outline"
}
>
{rfq.rfqType}
</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>
)
}
|
