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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
"use client"
import * as React from "react"
import { User} from "@/db/schema/users"
import type {
DataTableAdvancedFilterField,
DataTableFilterField,
DataTableRowAction,
} 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 { DataTableToolbar } from "@/components/data-table/data-table-toolbar"
import { getUsersNotPartners } from "@/lib/users/service";
import { getColumns } from "./users-table-columns"
import { UsersTableToolbarActions } from "./users-table-toolbar-actions"
import { DomainStatsCards } from "./domain-stats-cards"
interface UsersTableProps {
promises: Promise<
[
Awaited<ReturnType<typeof getUsersNotPartners>>,
]
>
}
export function UserAccessControlTable({ promises }: UsersTableProps) {
const [{ data, pageCount }] = React.use(promises)
const [currentDomainFilter, setCurrentDomainFilter] = React.useState<string | null>(null)
const columns = React.useMemo(() => getColumns(), [])
// 도메인 필터에 따른 데이터 필터링
const filteredData = React.useMemo(() => {
if (!currentDomainFilter) {
return data // 필터가 없으면 전체 데이터
}
return data.filter(user => user.domain === currentDomainFilter)
}, [data, currentDomainFilter])
// 필터링된 데이터의 페이지 수 재계산
const filteredPageCount = React.useMemo(() => {
if (!currentDomainFilter) {
return pageCount // 필터가 없으면 원본 페이지 수
}
// 필터링된 데이터는 페이지 수를 1로 설정 (클라이언트 필터링이므로)
return 1
}, [pageCount, currentDomainFilter])
/**
* Advanced filter fields for the data table.
*/
const advancedFilterFields: DataTableAdvancedFilterField<User>[] = [
{
id: "name",
label: "사용자명",
type: "text",
},
{
id: "email",
label: "이메일",
type: "text",
},
{
id: "deptName",
label: "부서",
type: "text",
},
{
id: "domain",
label: "도메인",
type: "multi-select",
options: [
{ label: "🟡 승인 대기", value: "pending" },
{ label: "🔵 전체 시스템", value: "evcp" },
{ label: "🟢 구매관리팀", value: "procurement" },
{ label: "🟣 기술영업팀", value: "sales" },
{ label: "🟠 설계관리팀", value: "engineering" },
{ label: "🟦 협력업체", value: "partners" },
],
},
{
id: "createdAt",
label: "생성일",
type: "date",
},
]
const { table } = useDataTable({
data: filteredData, // 필터링된 데이터 사용
columns,
pageCount: filteredPageCount, // 필터링된 페이지 수 사용
enablePinning: true,
enableAdvancedFilter: true,
initialState: {
sorting: [{ id: "createdAt", desc: true }],
columnPinning: { right: ["actions"] },
},
getRowId: (originalRow) => `${originalRow.id}`,
shallow: false,
clearOnDefault: true,
})
// 도메인 필터 핸들러 (단순화)
const handleDomainFilter = React.useCallback((domain: string | null) => {
setCurrentDomainFilter(domain)
}, [])
return (
<div className="space-y-6">
{/* 도메인 통계 카드 */}
<DomainStatsCards
onDomainFilter={handleDomainFilter}
currentFilter={currentDomainFilter}
/>
{/* 현재 필터 상태 표시 */}
{/* {currentDomainFilter && (
<div className="flex items-center justify-between bg-blue-50 border border-blue-200 rounded-lg p-3">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-blue-900">
필터 적용됨:
</span>
<span className="text-sm text-blue-700">
{(() => {
const domainLabels = {
pending: "🟡 승인 대기",
evcp: "🔵 전체 시스템",
procurement: "🟢 구매관리팀",
sales: "🟣 기술영업팀",
engineering: "🟠 설계관리팀",
partners: "🟦 협력업체"
}
return domainLabels[currentDomainFilter as keyof typeof domainLabels] || currentDomainFilter
})()}
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm text-blue-600">
{filteredData.length}명 표시
</span>
<button
onClick={() => handleDomainFilter(null)}
className="text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-100 px-2 py-1 rounded"
>
필터 해제
</button>
</div>
</div>
)} */}
{/* 데이터 테이블 */}
<DataTable table={table}>
<DataTableAdvancedToolbar
table={table}
filterFields={advancedFilterFields}
shallow={false}
>
<UsersTableToolbarActions table={table}/>
</DataTableAdvancedToolbar>
</DataTable>
</div>
)
}
|
