diff options
Diffstat (limited to 'lib/vendors/table/vendors-table.tsx')
| -rw-r--r-- | lib/vendors/table/vendors-table.tsx | 99 |
1 files changed, 69 insertions, 30 deletions
diff --git a/lib/vendors/table/vendors-table.tsx b/lib/vendors/table/vendors-table.tsx index 36fd45bd..02768f32 100644 --- a/lib/vendors/table/vendors-table.tsx +++ b/lib/vendors/table/vendors-table.tsx @@ -8,19 +8,18 @@ import type { DataTableRowAction, } from "@/types/table" -import { toSentenceCase } from "@/lib/utils" 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 { useFeatureFlags } from "./feature-flags-provider" import { getColumns } from "./vendors-table-columns" import { getVendors, getVendorStatusCounts } from "../service" -import { Vendor, vendors } from "@/db/schema/vendors" +import { VendorWithType, vendors } from "@/db/schema/vendors" import { VendorsTableToolbarActions } from "./vendors-table-toolbar-actions" -import { VendorsTableFloatingBar } from "./vendors-table-floating-bar" -import { UpdateTaskSheet } from "@/lib/tasks/table/update-task-sheet" import { UpdateVendorSheet } from "./update-vendor-sheet" import { getVendorStatusIcon } from "@/lib/vendors/utils" +import { ViewVendorLogsDialog } from "./view-vendors_logs-dialog" +import { useSession } from "next-auth/react" interface VendorsTableProps { promises: Promise< @@ -32,58 +31,83 @@ interface VendorsTableProps { } export function VendorsTable({ promises }: VendorsTableProps) { - const { featureFlags } = useFeatureFlags() - + const { data: session } = useSession() + const userId = Number(session?.user.id) + // Suspense로 받아온 데이터 const [{ data, pageCount }, statusCounts] = React.use(promises) + const [isCompact, setIsCompact] = React.useState<boolean>(false) - const [rowAction, setRowAction] = React.useState<DataTableRowAction<Vendor> | null>(null) - + const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorWithType> | null>(null) + // **router** 획득 const router = useRouter() - + // getColumns() 호출 시, router를 주입 const columns = React.useMemo( - () => getColumns({ setRowAction, router }), - [setRowAction, router] + () => getColumns({ setRowAction, router , userId}), + [setRowAction, router, userId] ) - - const filterFields: DataTableFilterField<Vendor>[] = [ + + // 상태 한글 변환 유틸리티 함수 + const getStatusDisplay = (status: string): string => { + const statusMap: Record<string, string> = { + "PENDING_REVIEW": "가입 신청 중", + "IN_REVIEW": "심사 중", + "REJECTED": "심사 거부됨", + "IN_PQ": "PQ 진행 중", + "PQ_SUBMITTED": "PQ 제출", + "PQ_FAILED": "PQ 실패", + "PQ_APPROVED": "PQ 통과", + "APPROVED": "승인됨", + "READY_TO_SEND": "MDG 송부대기", + "ACTIVE": "활성 상태", + "INACTIVE": "비활성 상태", + "BLACKLISTED": "거래 금지" + }; + + return statusMap[status] || status; + }; + + const filterFields: DataTableFilterField<VendorWithType>[] = [ { id: "status", - label: "Status", + label: "상태", options: vendors.status.enumValues.map((status) => ({ - label: toSentenceCase(status), + label: getStatusDisplay(status), value: status, count: statusCounts[status], })), }, - - { id: "vendorCode", label: "Vendor Code" }, - + + { id: "vendorCode", label: "업체 코드" }, ] - - const advancedFilterFields: DataTableAdvancedFilterField<Vendor>[] = [ - { id: "vendorName", label: "Vendor Name", type: "text" }, - { id: "vendorCode", label: "Vendor Code", type: "text" }, - { id: "email", label: "Email", type: "text" }, - { id: "country", label: "Country", type: "text" }, + + const advancedFilterFields: DataTableAdvancedFilterField<VendorWithType>[] = [ + { id: "vendorName", label: "업체명", type: "text" }, + { id: "vendorCode", label: "업체코드", type: "text" }, + { id: "email", label: "이메일", type: "text" }, + { id: "country", label: "국가", type: "text" }, + { id: "vendorTypeName", label: "업체 유형", type: "text" }, + { id: "vendorCategory", label: "업체 분류", type: "select", options: [ + { label: "정규업체", value: "정규업체" }, + { label: "잠재업체", value: "잠재업체" }, + ]}, { id: "status", - label: "Status", + label: "업체승인상태", type: "multi-select", options: vendors.status.enumValues.map((status) => ({ - label: (status), + label: getStatusDisplay(status), value: status, count: statusCounts[status], icon: getVendorStatusIcon(status), - })), }, - { id: "createdAt", label: "Created at", type: "date" }, - { id: "updatedAt", label: "Updated at", type: "date" }, + { id: "createdAt", label: "등록일", type: "date" }, + { id: "updatedAt", label: "수정일", type: "date" }, ] - + const { table } = useDataTable({ data, columns, @@ -100,16 +124,25 @@ export function VendorsTable({ promises }: VendorsTableProps) { clearOnDefault: true, }) + const handleCompactChange = React.useCallback((compact: boolean) => { + setIsCompact(compact) + }, []) + + return ( <> <DataTable table={table} + compact={isCompact} // floatingBar={<VendorsTableFloatingBar table={table} />} > <DataTableAdvancedToolbar table={table} filterFields={advancedFilterFields} shallow={false} + enableCompactToggle={true} + compactStorageKey="vendorsTableCompact" + onCompactChange={handleCompactChange} > <VendorsTableToolbarActions table={table} /> </DataTableAdvancedToolbar> @@ -119,6 +152,12 @@ export function VendorsTable({ promises }: VendorsTableProps) { onOpenChange={() => setRowAction(null)} vendor={rowAction?.row.original ?? null} /> + + <ViewVendorLogsDialog + open={rowAction?.type === "log"} + onOpenChange={() => setRowAction(null)} + vendorId={rowAction?.row.original?.id ?? null} + /> </> ) }
\ No newline at end of file |
