"use client" import * as React from "react" import type { DataTableAdvancedFilterField, 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 { toast } from "sonner" import { useRouter, useParams } from "next/navigation" import { getVendorPOs, handleVendorPOAction } from "./service" import { getVendorColumns } from "./vendor-po-columns" import { VendorPO, VendorPOActionType } from "./types" import { VendorPOItemsDialog } from "./vendor-po-items-dialog" import { VendorPONoteDialog } from "./vendor-po-note-dialog" import { VendorPOToolbarActions } from "./vendor-po-toolbar-actions" interface VendorPoTableProps { promises: Promise< [ Awaited>, ] > } export function VendorPoTable({ promises }: VendorPoTableProps) { const router = useRouter() const params = useParams() const lng = params.lng as string const [data, setData] = React.useState<{ data: VendorPO[]; pageCount: number; }>({ data: [], pageCount: 0 }); const [selectedRows, setSelectedRows] = React.useState([]) // 데이터 로딩 React.useEffect(() => { promises.then(([result]) => { console.log("Vendor PO data:", result.data) setData(result); }); }, [promises]); const [rowAction, setRowAction] = React.useState<{ row: { original: VendorPO }; type: VendorPOActionType } | null>(null) // 다이얼로그 상태 const [itemsDialogOpen, setItemsDialogOpen] = React.useState(false) const [noteDialogOpen, setNoteDialogOpen] = React.useState(false) const [selectedPO, setSelectedPO] = React.useState(null) // 행 선택 처리 (1개만 선택 가능) const handleRowSelect = (id: number, selected: boolean) => { if (selected) { setSelectedRows([id]) // 1개만 선택 } else { setSelectedRows([]) } } // 행 액션 처리 React.useEffect(() => { if (!rowAction) return const po = rowAction.row.original setSelectedPO(po) switch (rowAction.type as VendorPOActionType) { case "view-items": setItemsDialogOpen(true) break case "pcr-create": handleAction(po.id, "pcr-create") break case "approve": handleAction(po.id, "approve") break case "cancel-approve": handleAction(po.id, "cancel-approve") break case "reject-contract": handleAction(po.id, "reject-contract") break case "print-contract": handleAction(po.id, "print-contract") break case "item-status": setItemsDialogOpen(true) break case "contract-detail": router.push(`/${lng}/partners/po/${po.id}`) break case "po-note": setNoteDialogOpen(true) break case "price-index": toast.info("연동표입력 기능은 개발 중입니다.") break default: toast.info("해당 기능은 개발 중입니다.") } setRowAction(null) }, [rowAction]) // 액션 처리 함수 const handleAction = async (poId: number, action: string) => { try { const result = await handleVendorPOAction(poId, action) if (result.success) { toast.success(result.message) // 필요시 데이터 새로고침 } else { toast.error(result.message) } } catch (error) { console.error("Action error:", error) toast.error("액션 처리 중 오류가 발생했습니다.") } } const columns = React.useMemo( () => getVendorColumns({ setRowAction, selectedRows, onRowSelect: handleRowSelect }), [selectedRows] ) const filterFields: DataTableFilterField[] = [ { id: "contractStatus", label: "계약상태", options: [ { label: "승인대기", value: "승인대기" }, { label: "계약완료", value: "계약완료" }, { label: "진행중", value: "진행중" }, { label: "수정요청", value: "수정요청" }, { label: "거절됨", value: "거절됨" }, ] }, { id: "contractType", label: "계약종류", options: [ { label: "구매계약", value: "구매계약" }, { label: "서비스계약", value: "서비스계약" }, { label: "임가공계약", value: "임가공계약" }, ] }, { id: "currency", label: "계약통화", options: [ { label: "KRW", value: "KRW" }, { label: "USD", value: "USD" }, { label: "EUR", value: "EUR" }, { label: "JPY", value: "JPY" }, ] } ] const advancedFilterFields: DataTableAdvancedFilterField[] = [ { id: "contractNo", label: "PO/계약번호", type: "text", }, { id: "contractName", label: "계약명/자재내역", type: "text", }, { id: "projectName", label: "프로젝트", type: "text", }, { id: "purchaseManager", label: "구매/계약담당", type: "text", }, { id: "poReceiveDate", label: "PO/계약수신일", type: "date", }, { id: "contractDate", label: "계약체결일", type: "date", }, { id: "lastModifiedDate", label: "최종수정일", type: "date", }, ] const { table } = useDataTable({ data: data.data, columns, pageCount: data.pageCount, filterFields, enablePinning: true, enableAdvancedFilter: true, initialState: { sorting: [{ id: "lastModifiedDate", desc: true }], columnPinning: { right: ["actions"] }, }, getRowId: (originalRow) => String(originalRow.id), shallow: false, clearOnDefault: true, }) return ( <> { setSelectedPO(po) setItemsDialogOpen(true) }} /> ) }