(임수민) EDP 벤더별 진척도 페이지 구현

- menu 작업
- 오류수정

1 files changed, 61 insertions, 0 deletions

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>
+  )
+}