1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
"use client";
import * as React from "react";
import { type ColumnDef } from "@tanstack/react-table";
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header";
import { Badge } from "@/components/ui/badge";
export type EDPVendorRow = {
vendorId: number;
vendorName: string;
totalForms: number;
totalTags: number;
totalRequiredFields: number;
totalFilledFields: number;
completionPercentage: number;
};
function renderCompletionBadge(value: number | string | undefined) {
const num = typeof value === "string" ? Number(value) : (value ?? 0);
// Show '-' for vendors with no EDP data (0% completion)
if (num === 0) {
return (
<Badge variant="outline">
-
</Badge>
);
}
const variant: "success" | "secondary" | "destructive" =
num >= 80 ? "success" : num >= 50 ? "secondary" : "destructive";
return (
<Badge variant={variant}>{num}%</Badge>
);
}
export function getColumns(): ColumnDef<EDPVendorRow>[] {
const cols: ColumnDef<EDPVendorRow>[] = [
{
accessorKey: "vendorName",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title={"벤더명"} />
),
cell: ({ row }) => row.getValue("vendorName") as string,
meta: { excelHeader: "Vendor Name" },
enableResizing: true,
size: 80,
minSize: 50,
maxSize: 150,
},
{
accessorKey: "totalForms",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title={"폼 개수"} />
),
cell: ({ row }) => String(row.getValue("totalForms") ?? 0),
meta: { excelHeader: "Total Forms" },
size: 30,
minSize: 30,
maxSize: 120,
},
{
accessorKey: "totalTags",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title={"태그 개수"} />
),
cell: ({ row }) => String(row.getValue("totalTags") ?? 0),
meta: { excelHeader: "Total Tags" },
size: 30,
minSize: 30,
maxSize: 120,
},
{
accessorKey: "totalRequiredFields",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title={"전체 필드"} />
),
cell: ({ row }) => String(row.getValue("totalRequiredFields") ?? 0),
meta: { excelHeader: "Total Required Fields" },
size: 30,
minSize: 30,
maxSize: 120,
},
{
accessorKey: "totalFilledFields",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title={"입력 필드"} />
),
cell: ({ row }) => String(row.getValue("totalFilledFields") ?? 0),
meta: { excelHeader: "Total Filled Fields" },
size: 30,
minSize: 30,
maxSize: 120,
},
{
accessorKey: "completionPercentage",
header: ({ column }) => (
<DataTableColumnHeaderSimple column={column} title={"완성도(%)"} />
),
cell: ({ row }) => renderCompletionBadge(row.getValue("completionPercentage") as number | string),
meta: { excelHeader: "Completion %" },
size: 30,
minSize: 30,
maxSize: 120,
},
];
return cols;
}
|
