import React, { useState, useEffect, useRef } from "react"; import moment from "moment"; import showToast from "../../services/toastService"; import { Link, NavLink, useNavigate } from "react-router-dom"; import Avatar from "../../components/common/Avatar"; import Breadcrumb from "../../components/common/Breadcrumb"; import ManageEmp from "../../components/Employee/ManageRole"; import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees"; import { useProjects } from "../../hooks/useProjects"; import { useProfile } from "../../hooks/useProfile"; import { hasUserPermission } from "../../utils/authUtils"; import { MANAGE_EMPLOYEES } from "../../utils/constants"; import { clearCacheKey } from "../../slices/apiDataManager"; import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import SuspendEmp from "../../components/Employee/SuspendEmp"; import { exportToCSV, exportToExcel, printTable, exportToPDF, } from "../../utils/tableExportUtils"; import EmployeeRepository from "../../repositories/EmployeeRepository"; const EmployeeList = () => { const { profile: loginUser } = useProfile(); const [selectedProject, setSelectedProject] = useState(""); const { projects, loading: projectLoading } = useProjects(); const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES); const { employees, loading, setLoading, error,recallEmployeeData } = useEmployeesAllOrByProjectId(selectedProject); const [projectsList, setProjectsList] = useState(projects || []); const [employeeList, setEmployeeList] = useState([]); const [modelConfig, setModelConfig] = useState(); const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage] = useState(15); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [searchText, setSearchText] = useState(""); const [filteredData, setFilteredData] = useState([]); const [showModal, setShowModal] = useState(false); const navigate = useNavigate(); const handleSearch = (e) => { const value = e.target.value.toLowerCase(); setSearchText(value); if (!employeeList.length) return; const results = employeeList.filter((item) => Object.values(item).some( (field) => field && field.toString().toLowerCase().includes(value) ) ); setFilteredData(results); }; useEffect(() => { setCurrentPage(1); if (!loading && Array.isArray(employees)) { // Sort by full name (firstName + lastName) const sorted = [...employees].sort((a, b) => { const nameA = `${a.firstName || ""}${a.lastName || ""}`.toLowerCase(); const nameB = `${b.firstName || ""}${b.lastName || ""}`.toLowerCase(); return nameA.localeCompare(nameB); }); setEmployeeList(sorted); setFilteredData(sorted); } }, [loading, employees, selectedProject]); const displayData = searchText ? filteredData : employeeList; const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = Array.isArray(displayData) ? displayData.slice(indexOfFirstItem, indexOfLastItem) : []; const paginate = (pageNumber) => setCurrentPage(pageNumber); const totalPages = Array.isArray(displayData) ? Math.ceil(displayData.length / itemsPerPage) : 0; const openModal = () => { setIsCreateModalOpen(true); }; const closeModal = () => { setIsCreateModalOpen(false); const modalElement = document.getElementById("managerole-modal"); if (modalElement) { modalElement.classList.remove("show"); modalElement.style.display = "none"; document.body.classList.remove("modal-open"); document.querySelector(".modal-backdrop").remove(); } }; const handleShow = () => setShowModal(true); const handleClose = () => setShowModal(false); const suspendEmployee = (id) => { // console.log(id); EmployeeRepository.deleteEmployee(id) .then((response) => { showToast("Employee deleted successfully.", "success"); clearCacheKey("employeeListByProject"); clearCacheKey("allEmployeeList"); clearCacheKey("employeeProfile"); setEmployeeList([]) recallEmployeeData() }) .catch((error) => { showToast(error.response.data.message, "error"); }); }; const handleConfigData = (config) => { setModelConfig(config); }; useEffect(() => { if (modelConfig !== null) { openModal(); } }, [modelConfig, isCreateModalOpen]); const tableRef = useRef(null); const handleExport = (type) => { if (!currentItems || currentItems.length === 0) return; switch (type) { case "csv": exportToCSV(currentItems, "employees"); break; case "excel": exportToExcel(currentItems, "employees"); break; case "pdf": exportToPDF(currentItems, "employees"); // Pass the employeeList directly break; case "print": printTable(tableRef.current); break; default: break; } }; return ( <> {isCreateModalOpen && ( )}
{loading && ( )} {!loading && employeeList?.length === 0 && ( )} {!loading && employeeList && currentItems.length === 0 && employeeList.length !== 0 && ( )} {currentItems && !loading && currentItems.map((item) => ( {ManageEmployee && ( )} ))}
Name Email Contact Role Joining Date Status Actions

Loading...
No Data Found
'{searchText}' employee not found {" "}
{item.email ? ( {item.email} ) : ( NA )} {item.phoneNumber} {item.jobRole || "Not Assign Yet"} {moment(item.joiningDate).format("DD-MMM-YYYY")} Active
Edit
{/* Pagination */} {!loading && ( )}
); }; export default EmployeeList;