@snapdragonsnursery/react-components 1.3.0 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/EmployeeSearchDemo.jsx +275 -0
- package/src/EmployeeSearchModal.jsx +817 -0
- package/src/EmployeeSearchPage.jsx +804 -0
- package/src/EmployeeSearchPage.test.jsx +240 -0
- package/src/components/EmployeeSearchFilters.jsx +418 -0
- package/src/components/EmployeeSearchFilters.test.jsx +546 -0
- package/src/index.js +7 -0
package/package.json
CHANGED
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
// Employee Search Demo Component
|
|
2
|
+
// Demonstrates the employee search functionality with various configurations and examples
|
|
3
|
+
// Usage: <EmployeeSearchDemo />
|
|
4
|
+
|
|
5
|
+
import React, { useState } from "react";
|
|
6
|
+
import EmployeeSearchPage from "./EmployeeSearchPage";
|
|
7
|
+
import EmployeeSearchModal from "./EmployeeSearchModal";
|
|
8
|
+
import { Button } from "./components/ui/button";
|
|
9
|
+
|
|
10
|
+
const EmployeeSearchDemo = () => {
|
|
11
|
+
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
12
|
+
const [selectedEmployee, setSelectedEmployee] = useState(null);
|
|
13
|
+
const [selectedEmployees, setSelectedEmployees] = useState([]);
|
|
14
|
+
|
|
15
|
+
// Mock data for demonstration
|
|
16
|
+
const mockSites = [
|
|
17
|
+
{ site_id: 1, site_name: "Nursery A" },
|
|
18
|
+
{ site_id: 2, site_name: "Nursery B" },
|
|
19
|
+
{ site_id: 3, site_name: "Nursery C" },
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
const mockRoles = [
|
|
23
|
+
{ role_id: 1, role_name: "Manager" },
|
|
24
|
+
{ role_id: 2, role_name: "Deputy Manager" },
|
|
25
|
+
{ role_id: 3, role_name: "Room Leader" },
|
|
26
|
+
{ role_id: 4, role_name: "Early Years Practitioner" },
|
|
27
|
+
{ role_id: 5, role_name: "Apprentice" },
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
const mockManagers = [
|
|
31
|
+
{ entra_id: "manager1", full_name: "John Smith" },
|
|
32
|
+
{ entra_id: "manager2", full_name: "Jane Doe" },
|
|
33
|
+
{ entra_id: "manager3", full_name: "Bob Johnson" },
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const handleEmployeeSelect = (employee) => {
|
|
37
|
+
setSelectedEmployee(employee);
|
|
38
|
+
console.log("Selected employee:", employee);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const handleEmployeesSelect = (employees) => {
|
|
42
|
+
setSelectedEmployees(employees);
|
|
43
|
+
console.log("Selected employees:", employees);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const handleModalEmployeeSelect = (employee) => {
|
|
47
|
+
setSelectedEmployee(employee);
|
|
48
|
+
console.log("Modal selected employee:", employee);
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const handleModalEmployeesSelect = (employees) => {
|
|
52
|
+
setSelectedEmployees(employees);
|
|
53
|
+
console.log("Modal selected employees:", employees);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
58
|
+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
59
|
+
{/* Header */}
|
|
60
|
+
<div className="mb-8">
|
|
61
|
+
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
62
|
+
Employee Search Demo
|
|
63
|
+
</h1>
|
|
64
|
+
<p className="text-gray-600 dark:text-gray-400">
|
|
65
|
+
This demo showcases the employee search functionality with various configurations.
|
|
66
|
+
</p>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
{/* Demo Controls */}
|
|
70
|
+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
|
|
71
|
+
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
|
|
72
|
+
Demo Controls
|
|
73
|
+
</h2>
|
|
74
|
+
|
|
75
|
+
<div className="flex flex-wrap gap-4">
|
|
76
|
+
<Button
|
|
77
|
+
onClick={() => setIsModalOpen(true)}
|
|
78
|
+
variant="outline"
|
|
79
|
+
>
|
|
80
|
+
Open Employee Search Modal
|
|
81
|
+
</Button>
|
|
82
|
+
|
|
83
|
+
<Button
|
|
84
|
+
onClick={() => setIsModalOpen(true)}
|
|
85
|
+
variant="outline"
|
|
86
|
+
>
|
|
87
|
+
Open Multi-Select Modal
|
|
88
|
+
</Button>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
{/* Selected Employee Display */}
|
|
92
|
+
{selectedEmployee && (
|
|
93
|
+
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
|
94
|
+
<h3 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
|
|
95
|
+
Selected Employee:
|
|
96
|
+
</h3>
|
|
97
|
+
<div className="text-sm text-blue-800 dark:text-blue-200">
|
|
98
|
+
<p><strong>Name:</strong> {selectedEmployee.full_name}</p>
|
|
99
|
+
<p><strong>ID:</strong> {selectedEmployee.employee_id}</p>
|
|
100
|
+
<p><strong>Site:</strong> {selectedEmployee.site_name}</p>
|
|
101
|
+
<p><strong>Role:</strong> {selectedEmployee.role_name}</p>
|
|
102
|
+
<p><strong>Status:</strong> {selectedEmployee.employee_status}</p>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
)}
|
|
106
|
+
|
|
107
|
+
{/* Selected Employees Display */}
|
|
108
|
+
{selectedEmployees.length > 0 && (
|
|
109
|
+
<div className="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
|
|
110
|
+
<h3 className="text-sm font-medium text-green-900 dark:text-green-100 mb-2">
|
|
111
|
+
Selected Employees ({selectedEmployees.length}):
|
|
112
|
+
</h3>
|
|
113
|
+
<div className="flex flex-wrap gap-2">
|
|
114
|
+
{selectedEmployees.map((employee) => (
|
|
115
|
+
<span key={employee.entra_id} className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
|
|
116
|
+
{employee.full_name}
|
|
117
|
+
</span>
|
|
118
|
+
))}
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
)}
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
{/* Configuration Examples */}
|
|
125
|
+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
126
|
+
{/* Basic Employee Search */}
|
|
127
|
+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
128
|
+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
129
|
+
Basic Employee Search
|
|
130
|
+
</h3>
|
|
131
|
+
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
132
|
+
Simple employee search with default filters and single selection.
|
|
133
|
+
</p>
|
|
134
|
+
<EmployeeSearchPage
|
|
135
|
+
title="Basic Employee Search"
|
|
136
|
+
onSelect={handleEmployeeSelect}
|
|
137
|
+
sites={mockSites}
|
|
138
|
+
roles={mockRoles}
|
|
139
|
+
managers={mockManagers}
|
|
140
|
+
showRoleFilter={true}
|
|
141
|
+
showManagerFilter={true}
|
|
142
|
+
showTermTimeFilter={false}
|
|
143
|
+
showMaternityFilter={false}
|
|
144
|
+
showStartDateFilter={true}
|
|
145
|
+
showEndDateFilter={false}
|
|
146
|
+
showDbsFilter={false}
|
|
147
|
+
showWorkingHoursFilter={false}
|
|
148
|
+
/>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
{/* Advanced Employee Search */}
|
|
152
|
+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
153
|
+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
154
|
+
Advanced Employee Search
|
|
155
|
+
</h3>
|
|
156
|
+
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
157
|
+
Full-featured employee search with all filters and multi-selection.
|
|
158
|
+
</p>
|
|
159
|
+
<EmployeeSearchPage
|
|
160
|
+
title="Advanced Employee Search"
|
|
161
|
+
onSelect={handleEmployeesSelect}
|
|
162
|
+
multiSelect={true}
|
|
163
|
+
maxSelections={5}
|
|
164
|
+
sites={mockSites}
|
|
165
|
+
roles={mockRoles}
|
|
166
|
+
managers={mockManagers}
|
|
167
|
+
showRoleFilter={true}
|
|
168
|
+
showManagerFilter={true}
|
|
169
|
+
showTermTimeFilter={true}
|
|
170
|
+
showMaternityFilter={true}
|
|
171
|
+
showStartDateFilter={true}
|
|
172
|
+
showEndDateFilter={true}
|
|
173
|
+
showDbsFilter={true}
|
|
174
|
+
showWorkingHoursFilter={true}
|
|
175
|
+
/>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
{/* Site-Specific Search */}
|
|
180
|
+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
|
|
181
|
+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
182
|
+
Site-Specific Employee Search
|
|
183
|
+
</h3>
|
|
184
|
+
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
185
|
+
Employee search restricted to a specific site with custom filters.
|
|
186
|
+
</p>
|
|
187
|
+
<EmployeeSearchPage
|
|
188
|
+
title="Site-Specific Search"
|
|
189
|
+
siteId={1}
|
|
190
|
+
onSelect={handleEmployeeSelect}
|
|
191
|
+
sites={mockSites}
|
|
192
|
+
roles={mockRoles}
|
|
193
|
+
managers={mockManagers}
|
|
194
|
+
showRoleFilter={true}
|
|
195
|
+
showManagerFilter={false}
|
|
196
|
+
showTermTimeFilter={true}
|
|
197
|
+
showMaternityFilter={true}
|
|
198
|
+
showStartDateFilter={true}
|
|
199
|
+
showEndDateFilter={false}
|
|
200
|
+
showDbsFilter={false}
|
|
201
|
+
showWorkingHoursFilter={true}
|
|
202
|
+
/>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
{/* Status-Filtered Search */}
|
|
206
|
+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
|
|
207
|
+
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
208
|
+
Active Employees Only
|
|
209
|
+
</h3>
|
|
210
|
+
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
211
|
+
Employee search showing only active employees with minimal filters.
|
|
212
|
+
</p>
|
|
213
|
+
<EmployeeSearchPage
|
|
214
|
+
title="Active Employees"
|
|
215
|
+
activeOnly={true}
|
|
216
|
+
onSelect={handleEmployeeSelect}
|
|
217
|
+
sites={mockSites}
|
|
218
|
+
roles={mockRoles}
|
|
219
|
+
managers={mockManagers}
|
|
220
|
+
showRoleFilter={true}
|
|
221
|
+
showManagerFilter={false}
|
|
222
|
+
showTermTimeFilter={false}
|
|
223
|
+
showMaternityFilter={false}
|
|
224
|
+
showStartDateFilter={false}
|
|
225
|
+
showEndDateFilter={false}
|
|
226
|
+
showDbsFilter={false}
|
|
227
|
+
showWorkingHoursFilter={false}
|
|
228
|
+
/>
|
|
229
|
+
</div>
|
|
230
|
+
|
|
231
|
+
{/* Employee Search Modal */}
|
|
232
|
+
<EmployeeSearchModal
|
|
233
|
+
isOpen={isModalOpen}
|
|
234
|
+
onClose={() => setIsModalOpen(false)}
|
|
235
|
+
onSelect={handleModalEmployeeSelect}
|
|
236
|
+
title="Select Employee"
|
|
237
|
+
sites={mockSites}
|
|
238
|
+
roles={mockRoles}
|
|
239
|
+
managers={mockManagers}
|
|
240
|
+
showRoleFilter={true}
|
|
241
|
+
showManagerFilter={true}
|
|
242
|
+
showTermTimeFilter={true}
|
|
243
|
+
showMaternityFilter={true}
|
|
244
|
+
showStartDateFilter={true}
|
|
245
|
+
showEndDateFilter={true}
|
|
246
|
+
showDbsFilter={true}
|
|
247
|
+
showWorkingHoursFilter={true}
|
|
248
|
+
/>
|
|
249
|
+
|
|
250
|
+
{/* Multi-Select Modal */}
|
|
251
|
+
<EmployeeSearchModal
|
|
252
|
+
isOpen={isModalOpen}
|
|
253
|
+
onClose={() => setIsModalOpen(false)}
|
|
254
|
+
onSelect={handleModalEmployeesSelect}
|
|
255
|
+
title="Select Multiple Employees"
|
|
256
|
+
multiSelect={true}
|
|
257
|
+
maxSelections={10}
|
|
258
|
+
sites={mockSites}
|
|
259
|
+
roles={mockRoles}
|
|
260
|
+
managers={mockManagers}
|
|
261
|
+
showRoleFilter={true}
|
|
262
|
+
showManagerFilter={true}
|
|
263
|
+
showTermTimeFilter={true}
|
|
264
|
+
showMaternityFilter={true}
|
|
265
|
+
showStartDateFilter={true}
|
|
266
|
+
showEndDateFilter={true}
|
|
267
|
+
showDbsFilter={true}
|
|
268
|
+
showWorkingHoursFilter={true}
|
|
269
|
+
/>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
);
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
export default EmployeeSearchDemo;
|