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
|
"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, type AvlDetailItem } from "./columns-detail"
interface AvlDetailTableProps {
data: AvlDetailItem[]
pageCount?: number
avlType?: '프로젝트AVL' | '선종별표준AVL' // AVL 타입
projectCode?: string // 프로젝트 코드
shipOwnerName?: string // 선주명
businessType?: string // 사업 유형 (예: 조선/해양)
}
export function AvlDetailTable({
data,
pageCount,
avlType = '프로젝트AVL',
projectCode,
shipOwnerName,
businessType = '조선'
}: AvlDetailTableProps) {
// 액션 핸들러
const handleAction = React.useCallback(async (action: string) => {
switch (action) {
case 'avl-form':
toast.info("AVL 양식을 준비 중입니다.")
// TODO: AVL 양식 다운로드 로직 구현
break
case 'quote-request':
toast.info("견적 요청을 처리 중입니다.")
// TODO: 견적 요청 로직 구현
break
case 'vendor-pool':
toast.info("Vendor Pool을 열고 있습니다.")
// TODO: Vendor Pool 페이지 이동 또는 모달 열기 로직 구현
break
case 'download':
toast.info("데이터를 다운로드 중입니다.")
// TODO: 데이터 다운로드 로직 구현
break
default:
toast.error(`알 수 없는 액션: ${action}`)
}
}, [])
// 테이블 메타 설정 (읽기 전용)
const tableMeta = React.useMemo(() => ({
onAction: handleAction,
}), [handleAction])
// 데이터 테이블 설정
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: tableMeta,
})
return (
<div className="space-y-4">
{/* 상단 정보 표시 영역 */}
<div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
<div className="flex items-center gap-4">
<h2 className="text-lg font-semibold">AVL 상세내역</h2>
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
{avlType}
</span>
<span className="text-sm text-muted-foreground">
[{businessType}] {projectCode || '프로젝트코드'} ({shipOwnerName || '선주명'})
</span>
</div>
</div>
{/* 상단 버튼 영역 */}
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={() => handleAction('avl-form')}>
AVL양식
</Button>
<Button variant="outline" size="sm" onClick={() => handleAction('quote-request')}>
견적요청
</Button>
<Button variant="outline" size="sm" onClick={() => handleAction('vendor-pool')}>
Vendor Pool
</Button>
<Button variant="outline" size="sm" onClick={() => handleAction('download')}>
다운로드
</Button>
</div>
{/* 데이터 테이블 */}
<DataTable table={table} />
</div>
)
}
|
