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
|
"use client"
import * as React from "react"
import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
import { columns } from "./columns-detail"
import type { AvlDetailItem } from "../types"
import { BackButton } from "@/components/ui/back-button"
import { exportTableToExcel } from "@/lib/export_all"
interface AvlDetailTableProps {
data: AvlDetailItem[]
pageCount?: number
avlType?: '프로젝트AVL' | '선종별표준AVL' // AVL 타입
projectInfo?: {
code?: string
pspid?: string
OWN_NM?: string
kunnrNm?: string
} // 프로젝트 정보
businessType?: string // 사업 유형 (예: 조선/해양)
}
export function AvlDetailTable({
data,
pageCount,
avlType,
projectInfo,
businessType,
}: AvlDetailTableProps) {
// 데이터 테이블 설정 (초기 meta는 없음)
const { table } = useDataTable({
data,
columns,
pageCount: pageCount ?? 1,
initialState: {
sorting: [{ id: "no", desc: false }],
pagination: {
pageIndex: 0,
pageSize: 10,
},
},
getRowId: (row) => String(row.id),
// meta는 useEffect에서 설정
// 정적 데이터이므로 무한 스크롤 설정하지 않음 (클라이언트 측 소팅 활성화)
infiniteScrollConfig: undefined,
})
// Excel export 핸들러
const handleExcelExport = React.useCallback(async () => {
try {
toast.info("엑셀 파일을 생성 중입니다...")
await exportTableToExcel(table, {
filename: `AVL_상세내역_${new Date().toISOString().split('T')[0]}`,
allPages: true,
excludeColumns: ["select", "actions"],
useGroupHeader: true,
})
toast.success("엑셀 파일이 다운로드되었습니다.")
} catch (error) {
console.error("Excel export error:", error)
toast.error("엑셀 파일 생성 중 오류가 발생했습니다.")
}
}, [table])
// 액션 핸들러 (table을 직접 사용하지 않는 액션들)
const handleAction = React.useCallback(async (action: string) => {
switch (action) {
case 'vendor-pool':
window.open('/evcp/vendor-pool', '_blank')
break
case 'download':
toast.info("데이터를 다운로드 중입니다.")
// TODO: 데이터 다운로드 로직 구현
break
case 'avl-form':
toast.info("AVL 양식을 준비 중입니다.")
// TODO: AVL 양식 다운로드 로직 구현
break
default:
toast.error(`알 수 없는 액션: ${action}`)
}
}, [])
// 테이블 메타 설정
const tableMeta = React.useMemo(() => ({
onAction: handleAction,
}), [handleAction])
// table의 meta 설정
React.useEffect(() => {
table.options.meta = tableMeta
}, [table, tableMeta])
return (
<div className="space-y-4">
{/* 상단 정보 표시 영역 */}
<div className="flex items-center justify-between p-4">
<div className="flex items-center gap-4">
<h2 className="text-lg font-semibold">AVL 상세내역</h2>
<span className="px-3 py-1 bg-secondary-foreground text-secondary-foreground-foreground rounded-full text-sm font-medium">
{avlType}
</span>
<span className="text-sm text-muted-foreground">
[{businessType}] {projectInfo?.code || projectInfo?.pspid || '코드정보없음(표준AVL)'} ({projectInfo?.OWN_NM || projectInfo?.kunnrNm || '선주정보 없음'})
</span>
</div>
<div className="justify-end">
<BackButton>목록으로</BackButton>
</div>
</div>
{/* 상단 버튼 영역 */}
<div className="flex items-center gap-2 ml-auto justify-end">
{/* Excel Export 버튼 */}
<Button variant="outline" size="sm" onClick={handleExcelExport}>
Excel Export
</Button>
{/* 단순 이동 버튼 */}
<Button variant="outline" size="sm" onClick={() => handleAction('vendor-pool')}>
Vendor Pool
</Button>
</div>
{/* 데이터 테이블 */}
<DataTable table={table} />
</div>
)
}
|
