From 13dc007de652ce3da2a5e85d2cdccafe2288dea9 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Thu, 4 Sep 2025 10:46:19 +0000
Subject: (임수민) EDP 벤더별 진척도 페이지 구현 - menu 작업 - 오류수정
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table/edp-progress-table-columns.tsx           | 108 +++++++++++++++++++++
 .../table/edp-progress-table-toolbar-actions.tsx   |  24 +++++
 lib/edp-progress/table/edp-progress-table.tsx      |  61 ++++++++++++
 3 files changed, 193 insertions(+)
 create mode 100644 lib/edp-progress/table/edp-progress-table-columns.tsx
 create mode 100644 lib/edp-progress/table/edp-progress-table-toolbar-actions.tsx
 create mode 100644 lib/edp-progress/table/edp-progress-table.tsx

(limited to 'lib/edp-progress/table')

diff --git a/lib/edp-progress/table/edp-progress-table-columns.tsx b/lib/edp-progress/table/edp-progress-table-columns.tsx
new file mode 100644
index 00000000..dc0e87e2
--- /dev/null
+++ b/lib/edp-progress/table/edp-progress-table-columns.tsx
@@ -0,0 +1,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;
+}
diff --git a/lib/edp-progress/table/edp-progress-table-toolbar-actions.tsx b/lib/edp-progress/table/edp-progress-table-toolbar-actions.tsx
new file mode 100644
index 00000000..55c56bab
--- /dev/null
+++ b/lib/edp-progress/table/edp-progress-table-toolbar-actions.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { RefreshCw } from "lucide-react"
+
+interface Props {
+  onRefresh?: () => void
+}
+
+export function EDPProgressTableToolbarActions({ onRefresh }: Props) {
+  const handleRefresh = React.useCallback(() => {
+    if (onRefresh) return onRefresh()
+    if (typeof window !== "undefined") window.location.reload()
+  }, [onRefresh])
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button variant="samsung" size="sm" className="inline-flex items-center gap-2" onClick={handleRefresh}>
+        <RefreshCw className="h-4 w-4" /> 새로고침
+      </Button>
+    </div>
+  )
+}
diff --git a/lib/edp-progress/table/edp-progress-table.tsx b/lib/edp-progress/table/edp-progress-table.tsx
new file mode 100644
index 00000000..dc3073a4
--- /dev/null
+++ b/lib/edp-progress/table/edp-progress-table.tsx
@@ -0,0 +1,61 @@
+"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 { getColumns, type EDPVendorRow } from "./edp-progress-table-columns"
+import { EDPProgressTableToolbarActions } from "./edp-progress-table-toolbar-actions"
+
+interface Props {
+  promises: Promise<[
+    { data: EDPVendorRow[]; pageCount: number },
+  ]>
+}
+
+export function EDPProgressTable({ promises }: Props) {
+  const columns = React.useMemo(() => getColumns(), [])
+
+  const [{ data, pageCount }] = React.use(promises)
+
+  const filterFields: DataTableFilterField<EDPVendorRow>[] = []
+  const advancedFilterFields: DataTableAdvancedFilterField<EDPVendorRow>[] = [
+    { id: "vendorName", label: "Vendor Name", type: "text" },
+    { id: "totalTags", label: "Tags", type: "number" },
+    { id: "totalForms", label: "Forms", type: "number" },
+    { id: "completionPercentage", label: "Completion %", type: "number" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "completionPercentage", desc: true }],
+      columnPinning: { left: ["select"], right: [] },
+    },
+    getRowId: (row) => String(row.vendorId),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <DataTable table={table}>
+      <DataTableAdvancedToolbar
+        table={table}
+        filterFields={advancedFilterFields}
+        shallow={false}
+      >
+        <EDPProgressTableToolbarActions />
+      </DataTableAdvancedToolbar>
+    </DataTable>
+  )
+}
-- 
cgit v1.2.3