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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import { Bidding } from '@/db/schema/bidding'
import { Building2, Package, User, DollarSign, Calendar } from 'lucide-react'
import { contractTypeLabels, biddingTypeLabels } from '@/db/schema/bidding'
import { formatDate } from '@/lib/utils'
interface BiddingInfoHeaderProps {
bidding: Bidding | null
}
export function BiddingInfoHeader({ bidding }: BiddingInfoHeaderProps) {
if (!bidding) {
return (
<div className="bg-white border rounded-lg p-6 mb-6 shadow-sm">
<div className="text-center text-gray-500">입찰 정보를 불러오는 중...</div>
</div>
)
}
return (
<div className="bg-white border rounded-lg p-6 mb-6 shadow-sm">
{/* 3개 섹션을 Grid로 배치 - 각 섹션이 동일한 width로 꽉 채움 */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 왼쪽 섹션: 프로젝트, 품목, 담당자 정보 */}
<div className="w-full space-y-4">
{/* 프로젝트 정보 */}
{bidding.projectName && (
<div className="mb-4">
<div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
<Building2 className="w-4 h-4" />
<span>프로젝트</span>
</div>
<div className="font-medium text-gray-900">{bidding.projectName}</div>
</div>
)}
{/* 품목 정보 */}
{bidding.itemName && (
<div className="mb-4">
<div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
<Package className="w-4 h-4" />
<span>품목</span>
</div>
<div className="font-medium text-gray-900">{bidding.itemName}</div>
</div>
)}
{/* 담당자 정보 */}
{bidding.managerName && (
<div className="mb-4">
<div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
<User className="w-4 h-4" />
<span>담당자</span>
</div>
<div className="font-medium text-gray-900">{bidding.managerName}</div>
</div>
)}
{/* 예산 정보 */}
{bidding.budget && (
<div className="mb-4">
<div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
<DollarSign className="w-4 h-4" />
<span>예산</span>
</div>
<div className="font-semibold text-gray-900">
{new Intl.NumberFormat('ko-KR', {
style: 'currency',
currency: bidding.currency || 'KRW',
}).format(Number(bidding.budget))}
</div>
</div>
)}
</div>
{/* 가운데 섹션: 계약 정보 */}
<div className="w-full border-l border-gray-100 pl-6">
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-1">
<span className="text-gray-500 text-sm">계약</span>
<span className="font-medium">{contractTypeLabels[bidding.contractType]}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-gray-500 text-sm">유형</span>
<span className="font-medium">{biddingTypeLabels[bidding.biddingType]}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-gray-500 text-sm">낙찰</span>
<span className="font-medium">{bidding.awardCount === 'single' ? '단수' : '복수'}</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-gray-500 text-sm">통화</span>
<span className="font-mono font-medium">{bidding.currency}</span>
</div>
</div>
</div>
{/* 오른쪽 섹션: 일정 정보 */}
{(bidding.submissionStartDate || bidding.evaluationDate || bidding.preQuoteDate || bidding.biddingRegistrationDate) && (
<div className="w-full border-l border-gray-100 pl-6">
<div className="flex items-center gap-2 mb-3 text-sm text-gray-500">
<Calendar className="w-4 h-4" />
<span>일정 정보</span>
</div>
<div className="space-y-3">
{bidding.submissionStartDate && bidding.submissionEndDate && (
<div>
<span className="text-gray-500 text-sm">제출기간</span>
<div className="font-medium">
{formatDate(bidding.submissionStartDate, 'KR')} ~ {formatDate(bidding.submissionEndDate, 'KR')}
</div>
</div>
)}
{bidding.biddingRegistrationDate && (
<div>
<span className="text-gray-500 text-sm">입찰등록일</span>
<div className="font-medium">{formatDate(bidding.biddingRegistrationDate, 'KR')}</div>
</div>
)}
{bidding.preQuoteDate && (
<div>
<span className="text-gray-500 text-sm">사전견적일</span>
<div className="font-medium">{formatDate(bidding.preQuoteDate, 'KR')}</div>
</div>
)}
{bidding.evaluationDate && (
<div>
<span className="text-gray-500 text-sm">평가일</span>
<div className="font-medium">{formatDate(bidding.evaluationDate, 'KR')}</div>
</div>
)}
</div>
</div>
)}
</div>
</div>
)
}
|
