diff options
Diffstat (limited to 'lib/b-rfq/initial/initial-rfq-detail-table.tsx')
| -rw-r--r-- | lib/b-rfq/initial/initial-rfq-detail-table.tsx | 263 |
1 files changed, 263 insertions, 0 deletions
diff --git a/lib/b-rfq/initial/initial-rfq-detail-table.tsx b/lib/b-rfq/initial/initial-rfq-detail-table.tsx new file mode 100644 index 00000000..fc8a5bc2 --- /dev/null +++ b/lib/b-rfq/initial/initial-rfq-detail-table.tsx @@ -0,0 +1,263 @@ +"use client" + +import * as React from "react" +import { type DataTableAdvancedFilterField, type DataTableFilterField } 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 { getInitialRfqDetail } from "../service" // 앞서 만든 서버 액션 +import { getInitialRfqDetailColumns } from "./initial-rfq-detail-columns" +import { InitialRfqDetailTableToolbarActions } from "./initial-rfq-detail-toolbar-actions" + +interface InitialRfqDetailTableProps { + promises: Promise<Awaited<ReturnType<typeof getInitialRfqDetail>>> + rfqId?: number +} + +export function InitialRfqDetailTable({ promises, rfqId }: InitialRfqDetailTableProps) { + const { data, pageCount } = React.use(promises) + + // 선택된 상세 정보 + const [selectedDetail, setSelectedDetail] = React.useState<any>(null) + + const columns = React.useMemo( + () => getInitialRfqDetailColumns({ + onSelectDetail: setSelectedDetail + }), + [] + ) + + /** + * 필터 필드 정의 + */ + const filterFields: DataTableFilterField<any>[] = [ + { + id: "rfqCode", + label: "RFQ 코드", + placeholder: "RFQ 코드로 검색...", + }, + { + id: "vendorName", + label: "벤더명", + placeholder: "벤더명으로 검색...", + }, + { + id: "rfqStatus", + label: "RFQ 상태", + options: [ + { label: "Draft", value: "DRAFT", count: 0 }, + { label: "문서 접수", value: "Doc. Received", count: 0 }, + { label: "담당자 배정", value: "PIC Assigned", count: 0 }, + { label: "문서 확정", value: "Doc. Confirmed", count: 0 }, + { label: "초기 RFQ 발송", value: "Init. RFQ Sent", count: 0 }, + { label: "초기 RFQ 응답", value: "Init. RFQ Answered", count: 0 }, + { label: "TBE 시작", value: "TBE started", count: 0 }, + { label: "TBE 완료", value: "TBE finished", count: 0 }, + { label: "최종 RFQ 발송", value: "Final RFQ Sent", count: 0 }, + { label: "견적 접수", value: "Quotation Received", count: 0 }, + { label: "벤더 선정", value: "Vendor Selected", count: 0 }, + ], + }, + { + id: "initialRfqStatus", + label: "초기 RFQ 상태", + options: [ + { label: "대기", value: "PENDING", count: 0 }, + { label: "발송", value: "SENT", count: 0 }, + { label: "응답", value: "RESPONDED", count: 0 }, + { label: "만료", value: "EXPIRED", count: 0 }, + { label: "취소", value: "CANCELLED", count: 0 }, + ], + }, + { + id: "vendorCountry", + label: "벤더 국가", + options: [ + { label: "한국", value: "KR", count: 0 }, + { label: "중국", value: "CN", count: 0 }, + { label: "일본", value: "JP", count: 0 }, + { label: "미국", value: "US", count: 0 }, + { label: "독일", value: "DE", count: 0 }, + ], + }, + ] + + /** + * 고급 필터 필드 + */ + const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [ + { + id: "rfqCode", + label: "RFQ 코드", + type: "text", + }, + { + id: "vendorName", + label: "벤더명", + type: "text", + }, + { + id: "vendorCode", + label: "벤더 코드", + type: "text", + }, + { + id: "vendorCountry", + label: "벤더 국가", + type: "multi-select", + options: [ + { label: "한국", value: "KR" }, + { label: "중국", value: "CN" }, + { label: "일본", value: "JP" }, + { label: "미국", value: "US" }, + { label: "독일", value: "DE" }, + ], + }, + { + id: "rfqStatus", + label: "RFQ 상태", + type: "multi-select", + options: [ + { label: "Draft", value: "DRAFT" }, + { label: "문서 접수", value: "Doc. Received" }, + { label: "담당자 배정", value: "PIC Assigned" }, + { label: "문서 확정", value: "Doc. Confirmed" }, + { label: "초기 RFQ 발송", value: "Init. RFQ Sent" }, + { label: "초기 RFQ 응답", value: "Init. RFQ Answered" }, + { label: "TBE 시작", value: "TBE started" }, + { label: "TBE 완료", value: "TBE finished" }, + { label: "최종 RFQ 발송", value: "Final RFQ Sent" }, + { label: "견적 접수", value: "Quotation Received" }, + { label: "벤더 선정", value: "Vendor Selected" }, + ], + }, + { + id: "initialRfqStatus", + label: "초기 RFQ 상태", + type: "multi-select", + options: [ + { label: "대기", value: "PENDING" }, + { label: "발송", value: "SENT" }, + { label: "응답", value: "RESPONDED" }, + { label: "만료", value: "EXPIRED" }, + { label: "취소", value: "CANCELLED" }, + ], + }, + { + id: "vendorBusinessSize", + label: "벤더 규모", + type: "multi-select", + options: [ + { label: "대기업", value: "LARGE" }, + { label: "중기업", value: "MEDIUM" }, + { label: "소기업", value: "SMALL" }, + { label: "스타트업", value: "STARTUP" }, + ], + }, + { + id: "incotermsCode", + label: "Incoterms", + type: "text", + }, + { + id: "dueDate", + label: "마감일", + type: "date", + }, + { + id: "validDate", + label: "유효일", + type: "date", + }, + { + id: "shortList", + label: "Short List", + type: "boolean", + }, + { + id: "returnYn", + label: "Return 여부", + type: "boolean", + }, + { + id: "cpRequestYn", + label: "CP Request 여부", + type: "boolean", + }, + { + id: "prjectGtcYn", + label: "Project GTC 여부", + type: "boolean", + }, + { + id: "classification", + label: "분류", + type: "text", + }, + { + id: "sparepart", + label: "예비부품", + type: "text", + }, + { + id: "createdAt", + label: "등록일", + type: "date", + }, + ] + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => originalRow.initialRfqId.toString(), + shallow: false, + clearOnDefault: true, + }) + + return ( + <div className="space-y-6"> + {/* 메인 테이블 */} + <div className="h-full w-full"> + <DataTable table={table} className="h-full"> + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <InitialRfqDetailTableToolbarActions table={table} rfqId={rfqId} /> + </DataTableAdvancedToolbar> + </DataTable> + </div> + + {/* 선택된 상세 정보 패널 (필요시 추가) */} + {selectedDetail && ( + <div className="border rounded-lg p-4"> + <h3 className="text-lg font-semibold mb-2"> + 상세 정보: {selectedDetail.rfqCode} + </h3> + <div className="grid grid-cols-2 gap-4 text-sm"> + <div> + <strong>벤더:</strong> {selectedDetail.vendorName} + </div> + <div> + <strong>국가:</strong> {selectedDetail.vendorCountry} + </div> + <div> + <strong>마감일:</strong> {formatDate(selectedDetail.dueDate)} + </div> + <div> + <strong>유효일:</strong> {formatDate(selectedDetail.validDate)} + </div> + </div> + </div> + )} + </div> + ) +}
\ No newline at end of file |