diff options
Diffstat (limited to 'lib/b-rfq/vendor-response/vendor-responses-table-columns.tsx')
| -rw-r--r-- | lib/b-rfq/vendor-response/vendor-responses-table-columns.tsx | 351 |
1 files changed, 0 insertions, 351 deletions
diff --git a/lib/b-rfq/vendor-response/vendor-responses-table-columns.tsx b/lib/b-rfq/vendor-response/vendor-responses-table-columns.tsx deleted file mode 100644 index 47b7570b..00000000 --- a/lib/b-rfq/vendor-response/vendor-responses-table-columns.tsx +++ /dev/null @@ -1,351 +0,0 @@ -// lib/vendor-responses/table/vendor-responses-table-columns.tsx -"use client" - -import * as React from "react" -import { type DataTableRowAction } from "@/types/table" -import { type ColumnDef } from "@tanstack/react-table" -import { - Ellipsis, FileText, Pencil, Edit, Trash2, - Eye, MessageSquare, Clock, CheckCircle, AlertTriangle, FileX -} from "lucide-react" -import { formatDate, formatDateTime } from "@/lib/utils" -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip" -import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import Link from "next/link" -import { useRouter } from "next/navigation" -import { VendorResponseDetail } from "../service" -import { VendorRfqResponseSummary } from "../validations" - -// 응답 상태에 따른 배지 컴포넌트 -function ResponseStatusBadge({ status }: { status: string }) { - switch (status) { - case "NOT_RESPONDED": - return ( - <Badge variant="outline" className="text-orange-600 border-orange-600"> - <Clock className="mr-1 h-3 w-3" /> - 미응답 - </Badge> - ) - case "RESPONDED": - return ( - <Badge variant="default" className="bg-green-600 text-white"> - <CheckCircle className="mr-1 h-3 w-3" /> - 응답완료 - </Badge> - ) - case "REVISION_REQUESTED": - return ( - <Badge variant="secondary" className="text-yellow-600 border-yellow-600"> - <AlertTriangle className="mr-1 h-3 w-3" /> - 수정요청 - </Badge> - ) - case "WAIVED": - return ( - <Badge variant="outline" className="text-gray-600 border-gray-600"> - <FileX className="mr-1 h-3 w-3" /> - 포기 - </Badge> - ) - default: - return <Badge>{status}</Badge> - } -} - - -type NextRouter = ReturnType<typeof useRouter>; - -interface GetColumnsProps { - router: NextRouter -} - -/** - * tanstack table 컬럼 정의 - */ -export function getColumns({ - router, -}: GetColumnsProps): ColumnDef<VendorResponseDetail>[] { - - // ---------------------------------------------------------------- - // 1) select 컬럼 (체크박스) - // ---------------------------------------------------------------- - const selectColumn: ColumnDef<VendorRfqResponseSummary> = { - 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, - } - - // ---------------------------------------------------------------- - // 2) actions 컬럼 (작성하기 버튼만) - // ---------------------------------------------------------------- - const actionsColumn: ColumnDef<VendorRfqResponseSummary> = { - id: "actions", - enableHiding: false, - cell: ({ row }) => { - const vendorId = row.original.vendorId - const rfqRecordId = row.original.rfqRecordId - const rfqType = row.original.rfqType - const rfqCode = row.original.rfq?.rfqCode || "RFQ" - - return ( - <TooltipProvider> - <Tooltip> - <TooltipTrigger asChild> - <Button - variant="ghost" - size="sm" - onClick={() => router.push(`/partners/rfq-answer/${vendorId}/${rfqRecordId}`)} - className="h-8 px-3" - > - <Edit className="h-4 w-4 mr-1" /> - 작성하기 - </Button> - </TooltipTrigger> - <TooltipContent> - <p>{rfqCode} 응답 작성하기</p> - </TooltipContent> - </Tooltip> - </TooltipProvider> - ) - }, - size: 100, - minSize: 100, - maxSize: 150, - } - - // ---------------------------------------------------------------- - // 3) 컬럼 정의 배열 - // ---------------------------------------------------------------- - const columnDefinitions = [ - { - id: "rfqCode", - label: "RFQ 번호", - group: "RFQ 정보", - size: 120, - minSize: 100, - maxSize: 150, - }, - - { - id: "rfqDueDate", - label: "RFQ 마감일", - group: "RFQ 정보", - size: 120, - minSize: 100, - maxSize: 150, - }, - - { - id: "overallStatus", - label: "전체 상태", - group: null, - size: 80, - minSize: 60, - maxSize: 100, - }, - { - id: "totalAttachments", - label: "총 첨부파일", - group: "응답 통계", - size: 100, - minSize: 80, - maxSize: 120, - }, - { - id: "respondedCount", - label: "응답완료", - group: "응답 통계", - size: 100, - minSize: 80, - maxSize: 120, - }, - { - id: "pendingCount", - label: "미응답", - group: "응답 통계", - size: 100, - minSize: 80, - maxSize: 120, - }, - { - id: "responseRate", - label: "응답률", - group: "진행률", - size: 100, - minSize: 80, - maxSize: 120, - }, - { - id: "completionRate", - label: "완료율", - group: "진행률", - size: 100, - minSize: 80, - maxSize: 120, - }, - { - id: "requestedAt", - label: "요청일", - group: "날짜 정보", - size: 120, - minSize: 100, - maxSize: 150, - }, - { - id: "lastRespondedAt", - label: "최종 응답일", - group: "날짜 정보", - size: 120, - minSize: 100, - maxSize: 150, - }, - ]; - - // ---------------------------------------------------------------- - // 4) 그룹별로 컬럼 정리 (중첩 헤더 생성) - // ---------------------------------------------------------------- - const groupMap: Record<string, ColumnDef<VendorRfqResponseSummary>[]> = {} - - columnDefinitions.forEach((cfg) => { - const groupName = cfg.group || "_noGroup" - - if (!groupMap[groupName]) { - groupMap[groupName] = [] - } - - // 개별 컬럼 정의 - const columnDef: ColumnDef<VendorRfqResponseSummary> = { - accessorKey: cfg.id, - enableResizing: true, - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title={cfg.label} /> - ), - cell: ({ row, cell }) => { - // 각 컬럼별 특별한 렌더링 처리 - switch (cfg.id) { - case "rfqCode": - return row.original.rfq?.rfqCode || "-" - - - case "rfqDueDate": - const dueDate = row.original.rfq?.dueDate; - return dueDate ? formatDate(new Date(dueDate)) : "-"; - - case "overallStatus": - return <ResponseStatusBadge status={row.original.overallStatus} /> - - case "totalAttachments": - return ( - <div className="text-center font-medium"> - {row.original.totalAttachments} - </div> - ) - - case "respondedCount": - return ( - <div className="text-center text-green-600 font-medium"> - {row.original.respondedCount} - </div> - ) - - case "pendingCount": - return ( - <div className="text-center text-orange-600 font-medium"> - {row.original.pendingCount} - </div> - ) - - case "responseRate": - const responseRate = row.original.responseRate; - return ( - <div className="text-center"> - <span className={`font-medium ${responseRate >= 80 ? 'text-green-600' : responseRate >= 50 ? 'text-yellow-600' : 'text-red-600'}`}> - {responseRate}% - </span> - </div> - ) - - case "completionRate": - const completionRate = row.original.completionRate; - return ( - <div className="text-center"> - <span className={`font-medium ${completionRate >= 80 ? 'text-green-600' : completionRate >= 50 ? 'text-yellow-600' : 'text-red-600'}`}> - {completionRate}% - </span> - </div> - ) - - case "requestedAt": - return formatDateTime(new Date(row.original.requestedAt)) - - case "lastRespondedAt": - const lastRespondedAt = row.original.lastRespondedAt; - return lastRespondedAt ? formatDateTime(new Date(lastRespondedAt)) : "-"; - - default: - return row.getValue(cfg.id) ?? "" - } - }, - size: cfg.size, - minSize: cfg.minSize, - maxSize: cfg.maxSize, - } - - groupMap[groupName].push(columnDef) - }) - - // ---------------------------------------------------------------- - // 5) 그룹별 중첩 컬럼 생성 - // ---------------------------------------------------------------- - const nestedColumns: ColumnDef<VendorRfqResponseSummary>[] = [] - Object.entries(groupMap).forEach(([groupName, colDefs]) => { - if (groupName === "_noGroup") { - // 그룹이 없는 컬럼들은 직접 추가 - nestedColumns.push(...colDefs) - } else { - // 그룹이 있는 컬럼들은 중첩 구조로 추가 - nestedColumns.push({ - id: groupName, - header: groupName, - columns: colDefs, - }) - } - }) - - // ---------------------------------------------------------------- - // 6) 최종 컬럼 배열 - // ---------------------------------------------------------------- - return [ - selectColumn, - ...nestedColumns, - actionsColumn, - ] -}
\ No newline at end of file |