diff options
Diffstat (limited to 'lib/general-contracts_old/detail/general-contract-info-header.tsx')
| -rw-r--r-- | lib/general-contracts_old/detail/general-contract-info-header.tsx | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/lib/general-contracts_old/detail/general-contract-info-header.tsx b/lib/general-contracts_old/detail/general-contract-info-header.tsx new file mode 100644 index 00000000..9be9840d --- /dev/null +++ b/lib/general-contracts_old/detail/general-contract-info-header.tsx @@ -0,0 +1,211 @@ +import { Building2, Package, DollarSign, Calendar, FileText } from 'lucide-react'
+import { formatDate } from '@/lib/utils'
+
+interface GeneralContractInfoHeaderProps {
+ contract: {
+ id: number
+ contractNumber: string
+ revision: number
+ status: string
+ category: string
+ type: string
+ name: string
+ vendorName?: string
+ vendorCode?: string
+ startDate: string
+ endDate: string
+ validityEndDate: string
+ contractAmount?: string
+ currency?: string
+ registeredAt: string
+ signedAt?: string
+ linkedRfqOrItb?: string
+ linkedBidNumber?: string
+ linkedPoNumber?: string
+ }
+}
+
+const statusLabels = {
+ 'Draft': '임시저장',
+ 'Request to Review': '조건검토요청',
+ 'Confirm to Review': '조건검토완료',
+ 'Contract Accept Request': '계약승인요청',
+ 'Complete the Contract': '계약체결',
+ 'Reject to Accept Contract': '계약승인거절',
+ 'Contract Delete': '계약폐기',
+ 'PCR Request': 'PCR요청',
+ 'VO Request': 'VO요청',
+ 'PCR Accept': 'PCR승인',
+ 'PCR Reject': 'PCR거절'
+}
+
+const categoryLabels = {
+ '단가계약': '단가계약',
+ '일반계약': '일반계약',
+ '매각계약': '매각계약'
+}
+
+const typeLabels = {
+ 'UP': '자재단가계약',
+ 'LE': '임대차계약',
+ 'IL': '개별운송계약',
+ 'AL': '연간운송계약',
+ 'OS': '외주용역계약',
+ 'OW': '도급계약',
+ 'IS': '검사계약',
+ 'LO': 'LOI',
+ 'FA': 'FA',
+ 'SC': '납품합의계약',
+ 'OF': '클레임상계계약',
+ 'AW': '사전작업합의',
+ 'AD': '사전납품합의',
+ 'AM': '설계계약',
+ 'SC_SELL': '폐기물매각계약'
+}
+
+export function GeneralContractInfoHeader({ contract }: GeneralContractInfoHeaderProps) {
+ 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">
+ {/* 계약번호 */}
+ <div className="mb-4">
+ <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+ <FileText className="w-4 h-4" />
+ <span>계약번호 (Rev.)</span>
+ </div>
+ <div className="font-mono font-medium text-gray-900">
+ {contract.contractNumber} (Rev.{contract.revision})
+ </div>
+ </div>
+
+ {/* 계약명 */}
+ <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">{contract.name}</div>
+ </div>
+
+ {/* 협력업체 */}
+ <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">
+ {contract.vendorName || '협력업체 미선택'}
+ {contract.vendorCode && (
+ <span className="text-sm text-gray-500 ml-2">({contract.vendorCode})</span>
+ )}
+ </div>
+ </div>
+
+
+ {/* 계약금액 */}
+ {contract.contractAmount && (
+ <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: contract.currency || 'KRW',
+ }).format(Number(contract.contractAmount))}
+ </div>
+ </div>
+ )}
+ </div>
+
+ {/* 가운데 섹션: 계약 분류 정보 */}
+ <div className="w-full border-l border-gray-100 pl-6">
+ <div className="space-y-3">
+ <div className="flex flex-col gap-1">
+ <span className="text-gray-500 text-sm">계약상태</span>
+ <span className="font-medium">{statusLabels[contract.status as keyof typeof statusLabels] || contract.status}</span>
+ </div>
+
+ <div className="flex flex-col gap-1">
+ <span className="text-gray-500 text-sm">계약구분</span>
+ <span className="font-medium">{categoryLabels[contract.category as keyof typeof categoryLabels] || contract.category}</span>
+ </div>
+
+ <div className="flex flex-col gap-1">
+ <span className="text-gray-500 text-sm">계약종류</span>
+ <span className="font-medium">{typeLabels[contract.type as keyof typeof typeLabels] || contract.type}</span>
+ </div>
+
+ <div className="flex flex-col gap-1">
+ <span className="text-gray-500 text-sm">통화</span>
+ <span className="font-mono font-medium">{contract.currency || 'KRW'}</span>
+ </div>
+ </div>
+ </div>
+
+ {/* 오른쪽 섹션: 일정 및 연계 정보 */}
+ <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">
+ <div>
+ <span className="text-gray-500 text-sm">계약기간</span>
+ <div className="font-medium">
+ {formatDate(contract.startDate, 'KR')} ~ {formatDate(contract.endDate, 'KR')}
+ </div>
+ </div>
+
+ <div>
+ <span className="text-gray-500 text-sm">계약 유효기간</span>
+ <div className="font-medium">{formatDate(contract.validityEndDate, 'KR')}</div>
+ </div>
+
+ {contract.signedAt && (
+ <div>
+ <span className="text-gray-500 text-sm">계약체결일</span>
+ <div className="font-medium">{formatDate(contract.signedAt, 'KR')}</div>
+ </div>
+ )}
+
+ {contract.registeredAt && (
+ <div>
+ <span className="text-gray-500 text-sm">등록일</span>
+ <div className="font-medium">{formatDate(contract.registeredAt, 'KR')}</div>
+ </div>
+ )}
+
+ {(contract.linkedRfqOrItb || contract.linkedBidNumber || contract.linkedPoNumber) && (
+ <div className="space-y-2">
+ <span className="text-gray-500 text-sm font-medium">연계 정보</span>
+ {contract.linkedRfqOrItb && (
+ <div>
+ <span className="text-gray-500 text-xs">연계 견적/입찰번호</span>
+ <div className="font-medium text-sm">{contract.linkedRfqOrItb}</div>
+ </div>
+ )}
+ {contract.linkedBidNumber && (
+ <div>
+ <span className="text-gray-500 text-xs">연계 BID번호</span>
+ <div className="font-medium text-sm">{contract.linkedBidNumber}</div>
+ </div>
+ )}
+ {contract.linkedPoNumber && (
+ <div>
+ <span className="text-gray-500 text-xs">연계 PO번호</span>
+ <div className="font-medium text-sm">{contract.linkedPoNumber}</div>
+ </div>
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}
|