From 1110427907bbe9c11a378da4c1a233b83b5ca3b1 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Tue, 26 Aug 2025 12:09:39 +0000
Subject: (김준회) 구매정의서 구현 - PO (shi & vendor)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/po/vendor-table/shi-vendor-po-columns.tsx | 462 ++++++++++++++++++++++++++
 1 file changed, 462 insertions(+)
 create mode 100644 lib/po/vendor-table/shi-vendor-po-columns.tsx

(limited to 'lib/po/vendor-table/shi-vendor-po-columns.tsx')

diff --git a/lib/po/vendor-table/shi-vendor-po-columns.tsx b/lib/po/vendor-table/shi-vendor-po-columns.tsx
new file mode 100644
index 00000000..041e0c05
--- /dev/null
+++ b/lib/po/vendor-table/shi-vendor-po-columns.tsx
@@ -0,0 +1,462 @@
+"use client"
+
+import * as React from "react"
+import { type ColumnDef } from "@tanstack/react-table"
+import { 
+  SendIcon, 
+  FileTextIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+import { VendorPO } from "./types"
+
+// 서명 요청 전용 액션 타입
+type ShiVendorPORowAction = {
+  row: { original: VendorPO }
+  type: "view-items" | "signature-request"
+}
+
+interface GetShiVendorColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<ShiVendorPORowAction | null>>
+  selectedRows: number[]
+  onRowSelect: (id: number, selected: boolean) => void
+}
+
+export function getShiVendorColumns({
+  setRowAction,
+  selectedRows,
+  onRowSelect,
+}: GetShiVendorColumnsProps): ColumnDef<VendorPO>[] {
+  return [
+    // 선택 체크박스 (1개만 선택 가능)
+    {
+      id: "select",
+      header: () => <div className="text-center">선택</div>,
+      cell: ({ row }) => (
+        <div className="flex justify-center">
+          <Checkbox
+            checked={selectedRows.includes(row.original.id)}
+            onCheckedChange={(checked) => {
+              onRowSelect(row.original.id, !!checked)
+            }}
+            aria-label="행 선택"
+          />
+        </div>
+      ),
+      enableSorting: false,
+      enableHiding: false,
+      size: 40,
+    },
+
+    // No. (ID)
+    {
+      accessorKey: "id",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="No." />
+      ),
+      cell: ({ row }) => {
+        const id = row.getValue("id") as number
+        return <div className="text-sm font-mono">{id}</div>
+      },
+      size: 60,
+    },
+
+    // PO/계약번호
+    {
+      accessorKey: "contractNo",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="PO/계약번호" />
+      ),
+      cell: ({ row }) => {
+        const contractNo = row.getValue("contractNo") as string
+        return (
+          <div className="font-medium">
+            {contractNo}
+          </div>
+        )
+      },
+      size: 120,
+    },
+
+    // Rev. / 품번 (PO 버전)
+    {
+      accessorKey: "poVersion",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Rev. / 품번" />
+      ),
+      cell: ({ row }) => {
+        const version = row.getValue("poVersion") as number
+        return <div className="text-sm font-medium">{version || '-'}</div>
+      },
+      size: 80,
+    },
+
+    // 계약상태
+    {
+      accessorKey: "contractStatus",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="계약상태" />
+      ),
+      cell: ({ row }) => {
+        const status = row.getValue("contractStatus") as string
+        return (
+          <Badge variant="outline">
+            {status || '-'}
+          </Badge>
+        )
+      },
+      size: 100,
+    },
+
+    // 계약종류
+    {
+      accessorKey: "contractType",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="계약종류" />
+      ),
+      cell: ({ row }) => {
+        const type = row.getValue("contractType") as string
+        return <Badge variant="outline">{type || '-'}</Badge>
+      },
+      size: 100,
+    },
+
+    // 상세품목 (버튼)
+    {
+      id: "itemsAction",
+      header: () => <div className="text-center">상세품목</div>,
+      cell: ({ row }) => (
+        <div className="flex justify-center">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 px-2"
+            onClick={() => setRowAction({ row, type: "view-items" })}
+          >
+            <FileTextIcon className="h-3.5 w-3.5 mr-1" />
+            보기
+          </Button>
+        </div>
+      ),
+      enableSorting: false,
+      size: 80,
+    },
+
+    // 프로젝트
+    {
+      accessorKey: "projectName",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="프로젝트" />
+      ),
+      cell: ({ row }) => {
+        const projectName = row.getValue("projectName") as string
+        return (
+          <div className="max-w-[150px] truncate" title={projectName}>
+            {projectName || '-'}
+          </div>
+        )
+      },
+      size: 150,
+    },
+
+    // 계약명/자재내역
+    {
+      accessorKey: "contractName",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="계약명/자재내역" />
+      ),
+      cell: ({ row }) => {
+        const contractName = row.getValue("contractName") as string
+        return (
+          <div className="max-w-[200px] truncate" title={contractName}>
+            {contractName || '-'}
+          </div>
+        )
+      },
+      size: 200,
+    },
+
+    // PO/계약기간
+    {
+      accessorKey: "contractPeriod",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="PO/계약기간" />
+      ),
+      cell: ({ row }) => {
+        const period = row.getValue("contractPeriod") as string
+        return (
+          <div className="text-sm whitespace-nowrap">
+            {period || '-'}
+          </div>
+        )
+      },
+      size: 150,
+    },
+
+    // PO/계약금액
+    {
+      accessorKey: "totalAmount",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="PO/계약금액" />
+      ),
+      cell: ({ row }) => {
+        const amount = row.getValue("totalAmount") as string | number
+        return <div className="text-sm text-right font-mono">{amount || '-'}</div>
+      },
+      size: 120,
+    },
+
+    // 계약통화
+    {
+      accessorKey: "currency",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="계약통화" />
+      ),
+      cell: ({ row }) => {
+        const currency = row.getValue("currency") as string
+        return <div className="text-sm font-mono">{currency || '-'}</div>
+      },
+      size: 80,
+    },
+
+    // 지불조건
+    {
+      accessorKey: "paymentTerms",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="지불조건" />
+      ),
+      cell: ({ row }) => {
+        const terms = row.getValue("paymentTerms") as string
+        return (
+          <div className="max-w-[120px] truncate text-sm" title={terms}>
+            {terms || '-'}
+          </div>
+        )
+      },
+      size: 120,
+    },
+
+    // Tax
+    {
+      accessorKey: "tax",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Tax" />
+      ),
+      cell: ({ row }) => {
+        const tax = row.getValue("tax") as string
+        return <div className="text-sm">{tax || '-'}</div>
+      },
+      size: 80,
+    },
+
+    // 환율
+    {
+      accessorKey: "exchangeRate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="환율" />
+      ),
+      cell: ({ row }) => {
+        const rate = row.getValue("exchangeRate") as string
+        return <div className="text-sm font-mono">{rate || '-'}</div>
+      },
+      size: 100,
+    },
+
+    // 인도조건
+    {
+      accessorKey: "deliveryTerms",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="인도조건" />
+      ),
+      cell: ({ row }) => {
+        const terms = row.getValue("deliveryTerms") as string
+        return <div className="text-sm">{terms || '-'}</div>
+      },
+      size: 100,
+    },
+
+    // 구매/계약담당
+    {
+      accessorKey: "purchaseManager",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="구매/계약담당" />
+      ),
+      cell: ({ row }) => {
+        const manager = row.getValue("purchaseManager") as string
+        return <div className="text-sm">{manager || '-'}</div>
+      },
+      size: 120,
+    },
+
+    // PO/계약수신일
+    {
+      accessorKey: "poReceiveDate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="PO/계약수신일" />
+      ),
+      cell: ({ row }) => {
+        const date = row.getValue("poReceiveDate") as string
+        return <div className="text-sm">{date || '-'}</div>
+      },
+      size: 120,
+    },
+
+    // 계약체결일
+    {
+      accessorKey: "contractDate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="계약체결일" />
+      ),
+      cell: ({ row }) => {
+        const date = row.getValue("contractDate") as string
+        return <div className="text-sm">{date || '-'}</div>
+      },
+      size: 120,
+    },
+
+    // L/C No.
+    {
+      accessorKey: "lcNo",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="L/C No." />
+      ),
+      cell: ({ row }) => {
+        const lcNo = row.getValue("lcNo") as string
+        return <div className="text-sm">{lcNo || '-'}</div>
+      },
+      size: 120,
+    },
+
+    // 납품대금 연동제 대상
+    {
+      accessorKey: "priceIndexTarget",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="납품대금 연동제 대상" />
+      ),
+      cell: ({ row }) => {
+        const target = row.getValue("priceIndexTarget") as string | boolean
+        return <div className="text-sm">{target?.toString() || '-'}</div>
+      },
+      size: 140,
+    },
+
+    // 연계 PO/계약번호
+    {
+      accessorKey: "linkedContractNo",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="연계 PO/계약번호" />
+      ),
+      cell: ({ row }) => {
+        const linkedNo = row.getValue("linkedContractNo") as string
+        return <div className="text-sm">{linkedNo || '-'}</div>
+      },
+      size: 140,
+    },
+
+    // 최종수정일
+    {
+      accessorKey: "lastModifiedDate",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="최종수정일" />
+      ),
+      cell: ({ row }) => {
+        const date = row.getValue("lastModifiedDate") as string
+        return <div className="text-sm">{date || '-'}</div>
+      },
+      size: 120,
+    },
+
+    // 최종수정자
+    {
+      accessorKey: "lastModifiedBy",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="최종수정자" />
+      ),
+      cell: ({ row }) => {
+        const user = row.getValue("lastModifiedBy") as string
+        return <div className="text-sm">{user || '-'}</div>
+      },
+      size: 120,
+    },
+
+    // 액션 컬럼 (서명 요청 중심)
+    {
+      id: "actions",
+      enableHiding: false,
+      header: () => <div className="text-center">Actions</div>,
+      cell: ({ row }) => {
+        return (
+          <div className="flex items-center justify-center gap-2">
+            {/* 서명 요청 버튼 */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 px-2 text-blue-600 border-blue-200 hover:bg-blue-50"
+                    onClick={() => setRowAction({ row, type: "signature-request" })}
+                  >
+                    <SendIcon className="h-3.5 w-3.5 mr-1" aria-hidden="true" />
+                    서명 요청
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  벤더에게 전자서명 요청
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            {/* 드롭다운 메뉴 (추가 액션)
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <span className="sr-only">Open menu</span>
+                  <MoreHorizontalIcon className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>액션</DropdownMenuLabel>
+                <DropdownMenuItem
+                  onClick={() => setRowAction({ row, type: "view-items" })}
+                >
+                  <FileTextIcon className="mr-2 h-4 w-4" />
+                  상세품목 보기
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => setRowAction({ row, type: "signature-request" })}
+                  className="text-blue-600"
+                >
+                  <SendIcon className="mr-2 h-4 w-4" />
+                  서명 요청
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu> */}
+          </div>
+        )
+      },
+      size: 160,
+      minSize: 160,
+    },
+  ]
+}
\ No newline at end of file
-- 
cgit v1.2.3