1
import React from "react";
2
import Sidebar from "./Sidebar";
3
import { useState } from "react";
4
import dot from "./../Assets/img/employee/dot.svg";
5
 
6
import axios from "axios";
7
import { useEffect } from "react";
8
 
9
import { COUNTRY_URL, DEPARTMENT_URL, GET_EMPLOYEES } from "../Utils/constants";
10
 
11
function Employees() {
12
  const [countries, setCountries] = useState([]);
13
  const [designations, setDesignations] = useState([]);
14
  const [managers, setManagers] = useState([]);
15
  const [employees, setEmployees] = useState([]);
16
 
17
  useEffect(() => {
18
    const getCountriesAndDept = async () => {
19
      try {
20
        const response = await axios.get(COUNTRY_URL);
21
        const depResponse = await axios.get(DEPARTMENT_URL);
22
 
23
        console.log(response.data);
24
        setCountries(response.data);
25
        console.log(depResponse.data);
26
        setDesignations(depResponse.data);
27
      } catch (error) {
28
        console.error("Error fetching countries", error);
29
      }
30
    };
31
    getCountriesAndDept();
32
  }, []);
33
 
34
  useEffect(() => {
35
    getManagers();
36
  }, []);
37
 
38
  const getManagers = async () => {
39
    try {
40
      const response = await axios.get(GET_EMPLOYEES);
41
      const data = response.data;
42
 
43
      console.log(response.data);
44
 
45
      // Create a mapping of employee IDs to employee names
46
      const employeeMap = data.reduce((acc, employee) => {
47
        acc[employee.employeeId] = employee.name;
48
        return acc;
49
      }, {});
50
 
51
      console.log(employeeMap);
52
 
53
      const manager = data.filter((employee) =>
54
        data.some((e) => e.managerId === employee.employeeId)
55
      );
56
      setManagers(manager);
57
    } catch (error) {
58
      console.error("Error:", error);
59
    }
60
  };
61
 
62
  useEffect(() => {
63
    getEmployees();
64
  }, []);
65
 
66
  const getEmployees = async () => {
67
    try {
68
      const response = await axios.get(GET_EMPLOYEES);
69
      const data = response.data;
70
 
71
      console.log(response.data);
72
 
73
      // Create a mapping of employee IDs to employee names
74
      const employeeMap = data.reduce((acc, employee) => {
75
        acc[employee.employeeId] = employee.name;
76
        return acc;
77
      }, {});
78
 
79
      console.log(employeeMap);
80
 
81
      let departmentNames = {};
82
      designations.forEach((department) => {
83
        departmentNames[department.departmentId] = department.departmentName;
84
      });
85
 
86
      const employee = data.map((e) => {
87
        const name = e.name;
88
        const email = e.email;
89
        const manager = employeeMap[e.managerId];
90
        let dateOfBirth = new Date(e.dateOfBirth);
91
        let currDepartment = "NOT ACTIVE";
92
        const country = e.country.name;
93
 
94
        let departmentHistory = e.employeeDepartmentHistory;
95
        let activeDepartmentHistory = departmentHistory.find(
96
          (history) => history.activeTill === null
97
        );
98
 
99
        if (activeDepartmentHistory) {
100
          let departmentId = activeDepartmentHistory.departmentId;
101
          currDepartment = departmentNames[departmentId];
102
        }
103
 
104
        return {
105
          name,
106
          email,
107
          manager,
108
          birthDay: dateOfBirth,
109
          department: currDepartment,
110
          country,
111
        };
112
      });
113
 
114
      console.log(employee);
115
      setEmployees(employee);
116
    } catch (error) {
117
      console.error("Error:", error);
118
    }
119
  };
120
 
121
  const today = new Date();
122
 
123
  const [searchTerm, setSearchTerm] = useState("");
124
  const [selectedCountry, setSelectedCountry] = useState("");
125
  const [selectedManager, setSelectedManager] = useState("");
126
  const [selectedDepartment, setSelectedDepartment] = useState("");
127
  const [selectedDob, setSelectedDob] = useState(false);
128
  const [dotToggle, setDotToggle] = useState("");
129
 
130
  const handleSearchChange = (event) => {
131
    setSearchTerm(event.target.value);
132
  };
133
 
134
  const handleCountryChange = (event) => {
135
    setSelectedCountry(event.target.value);
136
  };
137
 
138
  const handleManagerFilter = (event) => {
139
    setSelectedManager(event.target.value);
140
  };
141
 
142
  const handleDepartmentFilter = (event) => {
143
    setSelectedDepartment(event.target.value);
144
  };
145
 
146
  const handleDobFilter = (event) => {
147
    setSelectedDob(event.target.checked);
148
  };
149
 
150
  const toggleDot = (event) => {
151
    setDotToggle(event.target.value);
152
  };
153
 
154
  return (
155
    <div className="flex flex-row min-h-screen">
156
      <div className="w-1/6 bg-[#334252]">
157
        <Sidebar />
158
      </div>
159
      <div className="w-5/6 bg-gray-200">
160
        <div className="w-[56] bg-white p-5 h-[56]">
161
          <h1 className="text-slate-900 font-bold px-4">Employees</h1>
162
        </div>
163
        <div className="p-4">
164
          <div className="flex flex-row">
165
            <div className="w-2/6">
166
              <input
167
                type="text"
168
                value={searchTerm}
169
                onChange={handleSearchChange}
170
                placeholder="Search Employees"
171
                class="h-10 block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-300 rounded-md"
172
              />
173
            </div>
174
 
175
            <div className="w-1/6 content-center px-4">
176
              <input
177
                type="checkbox"
178
                checked={selectedDob}
179
                onChange={handleDobFilter}
180
                class=""
181
              />
182
              <label className="px-2">Show Birthdays</label>
183
            </div>
184
 
185
            <div className="w-1/6 px-3">
186
              <select
187
                className="text-xs h-10 block w-full px-5 py-3 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md"
188
                defaultValue=""
189
                value={selectedCountry}
190
                onChange={handleCountryChange}
191
              >
192
                <option value="">Select a country</option>
193
                {countries.map((country) => (
194
                  <option key={country.id} value={country.name}>
195
                    {country.name}
196
                  </option>
197
                ))}
198
              </select>
199
            </div>
200
 
201
            <div className="w-1/6 px-3">
202
              <select
203
                className="text-xs h-10 block w-full px-5 py-3 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md"
204
                defaultValue=""
205
                value={selectedManager}
206
                onChange={handleManagerFilter}
207
              >
208
                <option value="">Reportees Of</option>
209
                {managers.map((manager) => (
210
                  <option key={manager.id} value={manager.name}>
211
                    {manager.name}
212
                  </option>
213
                ))}
214
              </select>
215
            </div>
216
 
217
            <div className="w-1/6 px-3">
218
              <select
219
                className="text-xs h-10 block w-full px-5 py-3 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md"
220
                defaultValue=""
221
                value={selectedDepartment}
222
                onChange={handleDepartmentFilter}
223
              >
224
                <option value="">Designations</option>
225
                {designations.map((designation) => (
226
                  <option
227
                    key={designation.id}
228
                    value={designation.departmentName}
229
                  >
230
                    {designation.departmentName}
231
                  </option>
232
                ))}
233
              </select>
234
            </div>
235
          </div>
236
 
237
          <div className="pt-4">
238
            <div className="w-full mx-auto overflow-auto">
239
              <table className="table-auto w-full text-left whitespace-no-wrap border border-gray-500">
240
                <thead>
241
                  <tr>
242
                    <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl ">
243
                      Name
244
                    </th>
245
                    <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 border-t border-b border-gray-500">
246
                      Email
247
                    </th>
248
                    <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 border-t border-b border-gray-500">
249
                      Manager
250
                    </th>
251
                    <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br border-t border-b border-gray-500">
252
                      Designation
253
                    </th>
254
                    <th className="bg-gray-100"></th>
255
                  </tr>
256
                </thead>
257
                <tbody>
258
                  {employees
259
                    .filter((employee) => {
260
                      return (
261
                        (selectedCountry === "" ||
262
                          employee.country === selectedCountry) &&
263
                        (selectedManager === "" ||
264
                          employee.manager === selectedManager) &&
265
                        (selectedDepartment === "" ||
266
                          employee.department === selectedDepartment) &&
267
                        (selectedDob === false ||
268
                          (today.getDate() === employee.birthDay.getDate() &&
269
                            today.getMonth() ===
270
                              employee.birthDay.getMonth())) &&
271
                        employee.name
272
                          .toLowerCase()
273
                          .includes(searchTerm.toLowerCase())
274
                      );
275
                    })
276
                    .map((employee, index) => (
277
                      <tr key={index}>
278
                        <td className="px-4 py-3 border-t border-b border-gray-500">
279
                          {employee.name}
280
                        </td>
281
                        <td className="px-4 py-3 border-t border-b border-gray-500">
282
                          {employee.email}
283
                        </td>
284
                        <td className="px-4 py-3 border-t border-b border-gray-500">
285
                          {employee.manager}
286
                        </td>
287
                        <td className="px-4 py-3 border-t border-b border-gray-500">
288
                          {employee.department}
289
                        </td>
290
                        <td className="border-t border-b border-gray-500">
291
                          <button
292
                            className="text-sm active:bg-gray-700 cursor-pointer font-regular text-white px-5 py-2 mt-2 rounded uppercase"
293
                            type="submit"
294
                            onClick={toggleDot}
295
                          >
296
                            <img src={dot} alt="three-dot" />
297
                          </button>
298
                        </td>
299
                      </tr>
300
                    ))}
301
                </tbody>
302
              </table>
303
            </div>
304
          </div>
305
        </div>
306
      </div>
307
    </div>
308
  );
309
}
310
 
311
export default Employees;