99 lines
3.5 KiB
JavaScript
99 lines
3.5 KiB
JavaScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Sidebar from '../sidebar/Sidebar';
|
|
import axiosInstance from '../../api/axiosConfig';
|
|
|
|
|
|
const EmployeeList = ({ className = '' }) => {
|
|
const [employees, setEmployees] = useState([]);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
getEmployees();
|
|
}, []);
|
|
|
|
const getEmployees = async () => {
|
|
try {
|
|
const response = await axiosInstance.get('http://localhost:5000/employees');
|
|
let employees_data = response.data;
|
|
setEmployees(employees_data);
|
|
} catch (error) {
|
|
console.error('Error fetching employees:', error.response || error.message);
|
|
}
|
|
};
|
|
|
|
const handleAddEmployee = () => {
|
|
navigate('/add-employee');
|
|
};
|
|
|
|
const onEmployeeClick = useCallback(() => {
|
|
navigate('/employee-profile');
|
|
}, [navigate]);
|
|
|
|
return (
|
|
<div className="flex flex-row min-h-screen">
|
|
<Sidebar />
|
|
<div className="flex-grow p-6 bg-gray-100">
|
|
<div className="bg-white p-6 rounded-lg shadow">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-2xl font-semibold text-gray-800">employees list</h1>
|
|
<button
|
|
className="bg-#0e355b text-d1d5db px-4 py-2 rounded-md text-sm"
|
|
onClick={handleAddEmployee}
|
|
>
|
|
add new employee
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center mb-4">
|
|
<svg
|
|
className="w-5 h-5 mr-2 text-gray-500"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
|
|
/>
|
|
</svg>
|
|
<span className="text-sm text-gray-600">filter</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600 mb-4">total employees: ({employees.length})</p>
|
|
<table className="w-full bg-white">
|
|
<thead>
|
|
<tr className="text-left text-xs uppercase text-gray-600 border-b">
|
|
<th className="py-2">#</th>
|
|
<th className="py-2">Employee Name</th>
|
|
<th className="py-2">Email Address</th>
|
|
<th className="py-2">Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{employees.map((employee, index) => (
|
|
<tr key={employee.id} className="border-b last:border-none">
|
|
<td className="py-2 text-gray-800">{index + 1}</td>
|
|
<td className="py-2 text-gray-800">{employee.firstname} {employee.lastname}</td>
|
|
<td className="py-2 text-gray-800">{employee.email}</td>
|
|
<td className="py-2 text-gray-800">
|
|
<span
|
|
className="text-#4b5563 underline cursor-pointer hover:text-#0e355b transition"
|
|
onClick={onEmployeeClick}
|
|
>
|
|
view details
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmployeeList;
|