(김준회) PO/계약 히스토리

2 files changed, 652 insertions, 0 deletions

diff --git a/lib/vendors/contract-history/contract-history-table-columns.tsx b/lib/vendors/contract-history/contract-history-table-columns.tsx
new file mode 100644
index 00000000..a25f8f33
--- /dev/null
+++ b/lib/vendors/contract-history/contract-history-table-columns.tsx
@@ -0,0 +1,412 @@
+/**
+ * 계약히스토리 테이블 컬럼 설정
+ *
+ *
+ * 컬럼목록:
+ * - 선택
+ * - PO/계약번호
+ * - Rev. / 품번
+ * - 계약상태
+ * - 프로젝트
+ * - PKG No.
+ * - PKG 명
+ * - 자재그룹코드
+ * - 자재그룹명
+ * - 지불조건
+ * - Incoterms
+ * - 선적지
+ * - 계약납기일
+ * - L/C No.
+ * - 연동제대상
+ * - 통화
+ * - 계약금액
+ * - 선급금
+ * - 납품대금
+ * - 유보금
+ * - PO/계약발송일
+ * - PO/계약체결일
+ * - 계약서
+ * - 계약담당자
+ * - 계약상세
+ */
+
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis, FileText, User, Eye } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { ContractDetailParsed } from "@/db/schema/contract"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+
+
+
+// 간단한 숫자 포맷팅 함수
+const formatNumber = (value: number): string => {
+    return new Intl.NumberFormat('ko-KR').format(value)
+}
+
+interface GetColumnsProps {
+    setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ContractDetailParsed> | null>>;
+}
+
+/**
+ * 계약 히스토리 테이블 컬럼 정의 (간단 버전)
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ContractDetailParsed>[] {
+    return [
+        // 선택
+        {
+            id: "select",
+            header: ({ table }) => (
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                    className="translate-y-0.5"
+                />
+            ),
+            cell: ({ row }) => (
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                    className="translate-y-0.5"
+                />
+            ),
+            size: 40,
+            enableSorting: false,
+            enableHiding: false,
+        },
+
+        // PO/계약번호
+        {
+            accessorKey: "contractNo",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="PO/계약번호" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // Rev. / 품번 (contract.contractVersion 사용)
+        {
+            accessorKey: "contractVersion",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="Rev. / 품번" />
+            ),
+            cell: ({ cell }) => {
+                const value = cell.getValue()
+                return value ? `Rev.${value}` : <span className="text-muted-foreground">-</span>
+            },
+        },
+
+        // 계약상태
+        {
+            accessorKey: "status",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="계약상태" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 프로젝트
+        {
+            accessorKey: "projectName",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="프로젝트" />
+            ),
+            cell: ({ row }) => (
+                <div className="flex flex-col">
+                    <span className="font-medium">{row.original.projectName}</span>
+                    <span className="text-xs text-muted-foreground">{row.original.projectCode}</span>
+                </div>
+            ),
+        },
+
+        // PKG No.
+        {
+            accessorKey: "projectCode",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="PKG No." />
+            ),
+            cell: ({ row }) => row.original.projectCode ? <Badge variant="outline">{row.original.projectCode}</Badge> : <span className="text-muted-foreground">-</span>,
+        },
+
+        // 벤더명
+        {
+            accessorKey: "vendorName",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="협력업체" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 계약명
+        {
+            accessorKey: "contractName",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="계약명" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 자재그룹코드 (지원되지 않음)
+        {
+            accessorKey: "materialGroupCode",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="자재그룹코드" />
+            ),
+            cell: () => <span className="text-muted-foreground">-</span>,
+        },
+
+        // 자재그룹명 (지원되지 않음)
+        {
+            accessorKey: "materialGroupName",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="자재그룹명" />
+            ),
+            cell: () => <span className="text-muted-foreground">-</span>,
+        },
+
+        // 지불조건
+        {
+            accessorKey: "paymentTerms",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="지불조건" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // Incoterms
+        {
+            accessorKey: "deliveryTerms",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="Incoterms" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 선적지
+        {
+            accessorKey: "shippmentPlace",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="선적지" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 계약납기일
+        {
+            accessorKey: "deliveryDate",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="계약납기일" />
+            ),
+            cell: ({ cell }) => {
+                const value = cell.getValue()
+                if (value instanceof Date) return formatDate(value, "KR")
+                if (typeof value === "string") return formatDate(new Date(value), "KR")
+                return ""
+            },
+        },
+
+        // L/C No.
+        {
+            accessorKey: "lcNo",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="L/C No." />
+            ),
+            cell: () => <span className="text-muted-foreground">-</span>,
+        },
+
+        // 연동제대상
+        {
+            accessorKey: "priceIndexYn",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="연동제대상" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 통화
+        {
+            accessorKey: "currency",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="통화" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 계약금액
+        {
+            accessorKey: "totalAmount",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="계약금액" />
+            ),
+            cell: ({ cell }) => {
+                const value = cell.getValue()
+                return typeof value === "number" ? formatNumber(value) : value ?? ""
+            },
+        },
+
+        // 선급금
+        {
+            accessorKey: "advancePaymentYn",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="선급금" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 납품장소
+        {
+            accessorKey: "deliveryLocation",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="납품장소" />
+            ),
+            cell: ({ cell }) => cell.getValue() ?? "",
+        },
+
+        // 유보금
+        {
+            accessorKey: "retentionAmount",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="유보금" />
+            ),
+            cell: () => <span className="text-muted-foreground">-</span>,
+        },
+
+        // PO/계약발송일
+        {
+            accessorKey: "startDate",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="PO/계약발송일" />
+            ),
+            cell: ({ cell }) => {
+                const value = cell.getValue()
+                if (value instanceof Date) return formatDate(value, "KR")
+                if (typeof value === "string") return formatDate(new Date(value), "KR")
+                return ""
+            },
+        },
+
+        // PO/계약체결일
+        {
+            accessorKey: "electronicApprovalDate",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="PO/계약체결일" />
+            ),
+            cell: ({ cell }) => {
+                const value = cell.getValue()
+                if (value instanceof Date) return formatDate(value, "KR")
+                if (typeof value === "string") return formatDate(new Date(value), "KR")
+                return ""
+            },
+        },
+
+        // 전자서명상태
+        {
+            accessorKey: "hasSignature",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="전자서명상태" />
+            ),
+            cell: ({ cell }) => {
+                const hasSignature = cell.getValue()
+                return hasSignature ? 
+                    <Badge variant="default">서명완료</Badge> : 
+                    <Badge variant="secondary">미서명</Badge>
+            },
+        },
+
+        // 계약서 (지원되지 않음)
+        {
+            accessorKey: "contractDocument",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="계약서" />
+            ),
+            cell: () => (
+                <Button variant="ghost" size="sm" className="h-8 px-2" disabled>
+                    <FileText className="size-4 mr-1" />
+                    보기
+                </Button>
+            ),
+        },
+
+        // 계약담당자 (지원되지 않음)
+        {
+            accessorKey: "contractManager",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="계약담당자" />
+            ),
+            cell: () => (
+                <div className="flex items-center text-muted-foreground">
+                    <User className="size-4 mr-2" />
+                    <span>-</span>
+                </div>
+            ),
+        },
+
+        // 계약상세 (Actions)
+        {
+            accessorKey: "contractDetail",
+            header: ({ column }) => (
+                <DataTableColumnHeaderSimple column={column} title="계약상세" />
+            ),
+            cell: ({ row }) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            aria-label="Open menu"
+                            variant="ghost"
+                            className="flex size-8 p-0 data-[state=open]:bg-muted"
+                        >
+                            <Ellipsis className="size-4" aria-hidden="true" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-40">
+                        <DropdownMenuItem
+                            onSelect={() => setRowAction({ row, type: "view" })}
+                        >
+                            <Eye className="size-4 mr-2" />
+                            상세보기
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            onSelect={() => setRowAction({ row, type: "update" })}
+                        >
+                            수정
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            onSelect={() => setRowAction({ row, type: "delete" })}
+                        >
+                            삭제
+                            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+            size: 40,
+            enableSorting: false,
+            enableHiding: false,
+        },
+    ]
+}
\ No newline at end of file
diff --git a/lib/vendors/contract-history/contract-history-table.tsx b/lib/vendors/contract-history/contract-history-table.tsx
new file mode 100644
index 00000000..62831aaa
--- /dev/null
+++ b/lib/vendors/contract-history/contract-history-table.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+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 { getColumns } from "./contract-history-table-columns"
+import { ContractDetailParsed } from "@/db/schema/contract"
+import type { ColumnDef } from "@tanstack/react-table"
+import { getVendorContractHistoryExtended } from "../contract-history-service"
+
+interface ContractHistoryTableProps {
+  vendorId: number
+  onRowAction?: (action: DataTableRowAction<ContractDetailParsed>) => void
+}
+
+// 컬럼 정보를 기반으로 필터 필드 생성하는 유틸리티 함수
+function generateFilterFieldsFromColumns(columns: ColumnDef<ContractDetailParsed>[]): {
+  basic: DataTableFilterField<ContractDetailParsed>[]
+  advanced: DataTableAdvancedFilterField<ContractDetailParsed>[]
+} {
+  const basicFields: DataTableFilterField<ContractDetailParsed>[] = []
+  const advancedFields: DataTableAdvancedFilterField<ContractDetailParsed>[] = []
+
+  // 필터링에서 제외할 컬럼 ID들
+  const excludeIds = new Set(['select', 'contractDetail'])
+
+  columns.forEach((column) => {
+    // 타입 안전하게 accessorKey 추출
+    const accessorKey = (column as { accessorKey?: string }).accessorKey
+    const header = (column as { header?: unknown }).header
+
+    // 제외할 컬럼이나 accessorKey가 없는 경우 스킵
+    if (!accessorKey || excludeIds.has(accessorKey)) return
+
+    // 헤더에서 타이틀 추출
+    let title = ''
+
+    // accessorKey를 기반으로 한글 타이틀 매핑 (contract.ts 스키마 기준)
+    const titleMap: Record<string, string> = {
+      contractNo: 'PO/계약번호',
+      contractVersion: 'Rev. / 품번',
+      status: '계약상태',
+      projectName: '프로젝트',
+      projectCode: 'PKG No.',
+      vendorName: '협력업체',
+      contractName: '계약명',
+      materialGroupCode: '자재그룹코드',
+      materialGroupName: '자재그룹명',
+      paymentTerms: '지불조건',
+      deliveryTerms: 'Incoterms',
+      shippmentPlace: '선적지',
+      deliveryDate: '계약납기일',
+      deliveryLocation: '납품장소',
+      priceIndexYn: '연동제대상',
+      currency: '통화',
+      totalAmount: '계약금액',
+      advancePaymentYn: '선급금',
+      startDate: 'PO/계약발송일',
+      endDate: '계약종료일',
+      electronicApprovalDate: 'PO/계약체결일',
+      hasSignature: '전자서명상태',
+      partialShippingAllowed: '분할선적허용',
+      partialPaymentAllowed: '분할결제허용',
+      createdAt: '생성일',
+      updatedAt: '수정일',
+      netTotal: '순총액',
+      discount: '할인',
+      tax: '세금',
+      shippingFee: '배송비',
+      remarks: '비고',
+      version: '버전'
+    }
+
+    // 매핑된 타이틀이 있으면 사용
+    if (titleMap[accessorKey]) {
+      title = titleMap[accessorKey]
+    } else {
+      // 함수형 헤더에서 추출 시도
+      if (typeof header === 'function') {
+        try {
+          const headerProps = header({ column: { id: accessorKey } })
+          if (React.isValidElement(headerProps) && headerProps.props && typeof headerProps.props === 'object' && 'title' in headerProps.props) {
+            const props = headerProps.props as { title?: string }
+            title = props.title || ''
+          }
+        } catch {
+          // 헤더 함수 실행 실패 시 스킵
+        }
+      } else if (typeof header === 'string') {
+        title = header
+      }
+    }
+
+    if (!title) return
+
+    // 필터 타입 결정 (간단한 휴리스틱)
+    const getFilterType = (key: string): "text" | "number" | "date" => {
+      if (key.includes('Date') || key.includes('date') || key.includes('At')) return 'date'
+      if (key.includes('Amount') || key.includes('amount') || key.includes('total') || key.includes('price')) return 'number'
+      return 'text'
+    }
+
+    const filterType = getFilterType(accessorKey)
+
+    // 기본 필터 (주요 필드만)
+    const importantFields = ['contractNo', 'contractName', 'status', 'projectName', 'vendorName', 'currency']
+    if (importantFields.includes(accessorKey)) {
+      basicFields.push({
+        id: accessorKey as keyof ContractDetailParsed,
+        label: title,
+      })
+    }
+
+    // 고급 필터 (모든 필터링 가능한 필드)
+    advancedFields.push({
+      id: accessorKey as keyof ContractDetailParsed,
+      label: title,
+      type: filterType,
+    })
+  })
+
+  return { basic: basicFields, advanced: advancedFields }
+}
+
+export function ContractHistoryTable({ vendorId, onRowAction }: ContractHistoryTableProps) {
+  // Row action state 관리
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<ContractDetailParsed> | null>(null)
+
+  // 데이터 상태 관리
+  const [serviceData, setServiceData] = React.useState<{
+    data: ContractDetailParsed[]
+    pageCount: number
+    totalCount: number
+  }>({ data: [], pageCount: 0, totalCount: 0 })
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  console.log('ContractHistoryTable data:', serviceData.data.length, 'contracts')
+
+  // Row action이 발생하면 외부 핸들러 호출
+  React.useEffect(() => {
+    if (rowAction && onRowAction) {
+      onRowAction(rowAction)
+      setRowAction(null) // Reset action after handling
+    }
+  }, [rowAction, onRowAction])
+
+  // 초기 데이터 로드
+  React.useEffect(() => {
+    const loadInitialData = async () => {
+      setIsLoading(true)
+      try {
+        const result = await getVendorContractHistoryExtended(vendorId, {
+          page: 1,
+          pageSize: 10
+        })
+        setServiceData(result)
+      } catch (error) {
+        console.error('Failed to load contract history:', error)
+        setServiceData({ data: [], pageCount: 0, totalCount: 0 })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadInitialData()
+  }, [vendorId])
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    []
+  )
+
+  // 컬럼 정보를 기반으로 동적으로 필터 필드 생성
+  const { basic: filterFields, advanced: advancedFilterFields } = React.useMemo(() => {
+    return generateFilterFieldsFromColumns(columns)
+  }, [columns])
+
+  // useDataTable 훅 사용
+  const {
+    table,
+  } = useDataTable({
+    data: serviceData.data,
+    columns,
+    pageCount: serviceData.pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "contractNo", desc: false }],
+    },
+    getRowId: (originalRow) => String(originalRow.id || 'unknown'),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <div className="w-full space-y-2.5 overflow-x-auto" style={{maxWidth:'100vw'}}>
+
+
+
+        {/* 로딩 상태가 아닐 때만 테이블 렌더링 */}
+        {!isLoading ? (
+          <>
+            {/* 도구 모음 */}
+            <DataTableAdvancedToolbar
+              table={table}
+              filterFields={advancedFilterFields}
+              shallow={false}
+            />
+
+            {/* 테이블 렌더링 */}
+            <DataTable
+              table={table}
+              compact={false}
+              autoSizeColumns={true}
+            />
+          </>
+        ) : (
+          /* 로딩 스켈레톤 */
+          <div className="space-y-3">
+            <div className="text-sm text-muted-foreground mb-4">
+              계약 히스토리를 불러오는 중입니다...
+            </div>
+            {Array.from({ length: 10 }).map((_, i) => (
+              <div key={i} className="h-12 w-full bg-muted animate-pulse rounded" />
+            ))}
+          </div>
+        )}
+
+    </div>
+  )
+}