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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
"use client"
import * as React from "react"
import { useRouter } from "next/navigation"
import type {
DataTableAdvancedFilterField,
DataTableFilterField,
DataTableRowAction,
} from "@/types/table"
import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { getGeneralContractsColumns, GeneralContractListItem } from "./general-contracts-table-columns"
import { getGeneralContracts, getGeneralContractStatusCounts } from "@/lib/general-contracts/service"
import { GeneralContractsTableToolbarActions } from "./general-contracts-table-toolbar-actions"
import { GeneralContractUpdateSheet } from "./general-contract-update-sheet"
import {
GENERAL_EXECUTION_METHODS
} from "@/lib/general-contracts/types"
// 상태 라벨 매핑
const contractStatusLabels = {
'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 contractCategoryLabels = {
'단가계약': '단가계약',
'일반계약': '일반계약',
'매각계약': '매각계약'
}
// 계약종류 라벨 매핑
const contractTypeLabels = {
'UP': '자재단가계약',
'LE': '임대차계약',
'IL': '개별운송계약',
'AL': '연간운송계약',
'OS': '외주용역계약',
'OW': '도급계약',
'IS': '검사계약',
'LO': 'LOI',
'FA': 'FA',
'SC': '납품합의계약',
'OF': '클레임상계계약',
'AW': '사전작업합의',
'AD': '사전납품합의',
'AM': '설계계약',
'SC_SELL': '폐기물매각계약'
}
interface GeneralContractsTableProps {
promises: Promise<
[
Awaited<ReturnType<typeof getGeneralContracts>>,
Awaited<ReturnType<typeof getGeneralContractStatusCounts>>
]
>
}
export function GeneralContractsTable({ promises }: GeneralContractsTableProps) {
const [{ data, pageCount }, statusCounts] = React.use(promises)
const [isCompact, setIsCompact] = React.useState<boolean>(false)
const [rowAction, setRowAction] = React.useState<DataTableRowAction<GeneralContractListItem> | null>(null)
const [updateSheetOpen, setUpdateSheetOpen] = React.useState(false)
const [selectedContract, setSelectedContract] = React.useState<GeneralContractListItem | null>(null)
console.log(data, "data")
const router = useRouter()
const columns = React.useMemo(
() => getGeneralContractsColumns({ setRowAction }),
[setRowAction]
)
// rowAction 변경 감지하여 해당 액션 처리
React.useEffect(() => {
if (rowAction) {
setSelectedContract(rowAction.row.original)
switch (rowAction.type) {
case "view":
// 상세 페이지로 이동
router.push(`/evcp/general-contracts/${rowAction.row.original.id}`)
break
case "update":
// 수정 시트 열기
setSelectedContract(rowAction.row.original)
setUpdateSheetOpen(true)
break
default:
break
}
}
}, [rowAction, router])
const filterFields: DataTableFilterField<GeneralContractListItem>[] = []
const advancedFilterFields: DataTableAdvancedFilterField<GeneralContractListItem>[] = [
{ id: "name", label: "계약명", type: "text" },
{ id: "contractNumber", label: "계약번호", type: "text" },
{ id: "vendorName", label: "협력업체명", type: "text" },
{ id: "managerName", label: "계약담당자", type: "text" },
{
id: "status",
label: "계약상태",
type: "multi-select",
options: Object.entries(contractStatusLabels).map(([value, label]) => ({
label,
value,
count: statusCounts[value] || 0,
})),
},
{
id: "category",
label: "계약구분",
type: "select",
options: Object.entries(contractCategoryLabels).map(([value, label]) => ({
label,
value,
})),
},
{
id: "type",
label: "계약종류",
type: "select",
options: Object.entries(contractTypeLabels).map(([value, label]) => ({
label,
value,
})),
},
{
id: "executionMethod",
label: "체결방식",
type: "select",
options: GENERAL_EXECUTION_METHODS.map(value => ({
label: value,
value: value,
})),
},
{
id: "contractSourceType",
label: "업체선정방법",
type: "select",
options: [
{ label: "estimate", value: "견적" },
{ label: "bid", value: "입찰" },
{ label: "manual", value: "자체생성" },
],
},
{ id: "registeredAt", label: "계약등록일", type: "date" },
{ id: "signedAt", label: "계약체결일", type: "date" },
{ id: "lastUpdatedAt", label: "최종수정일", type: "date" },
]
const { table } = useDataTable({
data,
columns,
pageCount,
filterFields,
enablePinning: true,
enableAdvancedFilter: true,
initialState: {
sorting: [{ id: "registeredAt", desc: true }],
columnPinning: { right: ["actions"] },
},
getRowId: (originalRow) => String(originalRow.id),
shallow: false,
clearOnDefault: true,
})
const handleCompactChange = React.useCallback((compact: boolean) => {
setIsCompact(compact)
}, [])
return (
<>
<DataTable
table={table}
compact={isCompact}
>
<DataTableAdvancedToolbar
table={table}
filterFields={advancedFilterFields}
shallow={false}
enableCompactToggle={true}
compactStorageKey="generalContractsTableCompact"
onCompactChange={handleCompactChange}
>
<GeneralContractsTableToolbarActions table={table} />
</DataTableAdvancedToolbar>
</DataTable>
<GeneralContractUpdateSheet
contract={selectedContract}
open={updateSheetOpen}
onOpenChange={setUpdateSheetOpen}
onSuccess={() => {
// 테이블 새로고침 또는 상태 업데이트
window.location.reload()
}}
/>
</>
)
}
|
