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"; import ManageEmployee from "../../components/Employee/ManageEmployee"; import ConfirmModal from "../../components/common/ConfirmModal"; import GlobalModel from "../../components/common/GlobalModel"; import AssignToProject from "./AssignToProject"; const EmployeeList = () => { const { profile: loginUser } = useProfile(); const [selectedProject, setSelectedProject] = useState(""); const { projects, loading: projectLoading } = useProjects(); const [showInactive, setShowInactive] = useState(false); const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES); const { employees, loading, setLoading, error, recallEmployeeData } = useEmployeesAllOrByProjectId(selectedProject, showInactive); 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 [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false); const [searchText, setSearchText] = useState(""); const [filteredData, setFilteredData] = useState([]); const [showModal, setShowModal] = useState(false); const [selectedEmployeeId, setSelecedEmployeeId] = useState(null); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null); const [employeeLodaing, setemployeeLodaing] = useState(false); const [ selectedEmployee, setSelectEmployee ] = useState( null ) const [IsOpenAsssingModal,setOpenAssignModal] = 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) => { const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); return fullName.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.middleName || ""}${ a.lastName || "" }`.toLowerCase(); const nameB = `${b.firstName || ""}${b.middleName || ""}${ 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 && !showModal) { modalElement.classList.remove("show"); modalElement.style.display = "none"; document.body.classList.remove("modal-open"); document.querySelector(".modal-backdrop").remove(); } setShowModal(false); clearCacheKey("employeeProfile"); recallEmployeeData(showInactive); }; const handleShow = () => setShowModal(true); const handleClose = () => setShowModal(false); const suspendEmployee = (id) => { setemployeeLodaing(true); EmployeeRepository.deleteEmployee(id) .then((response) => { showToast("Employee deleted successfully.", "success"); clearCacheKey("employeeListByProject"); clearCacheKey("allEmployeeList"); clearCacheKey("allInactiveEmployeeList"); clearCacheKey("employeeProfile"); setEmployeeList([]); recallEmployeeData(showInactive); setemployeeLodaing(false); setIsDeleteModalOpen(false); }) .catch((error) => { const message = error.response?.data?.message || error.message || "An unexpected error occurred"; showToast(message, "error"); setemployeeLodaing(false); setIsDeleteModalOpen(false); }); }; 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; } }; const handleToggle = (e) => { setShowInactive(e.target.checked); recallEmployeeData(e.target.checked); }; const handleEmployeeModel = (id) => { setSelecedEmployeeId(id); setShowModal(true); }; const handleOpenDelete = (employee) => { console.log(employee); setSelectedEmpFordelete(employee); setIsDeleteModalOpen(true); }; const handleCloseAssignModal = () => { setOpenAssignModal( false ) setSelectEmployee(null) } return ( <> {isCreateModalOpen && ( )} {showModal && (
)} {IsDeleteModalOpen && (
setIsDeleteModalOpen(false)} loading={employeeLodaing} paramData={selectedEmpFordelete} />
)} {IsOpenAsssingModal && ( setOpenAssignModal(false)}> setOpenAssignModal( false )} /> )}
{loading && ( )} {!loading && employeeList?.length === 0 && ( )} {!loading && employeeList && currentItems.length === 0 && employeeList.length !== 0 && ( )} {currentItems && !loading && currentItems.map((item) => ( {Manage_Employee && ( )} ))}
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")} {showInactive ? ( Inactive ) : ( Active )}
{!item.isSystem && ( <> )}
{/* Pagination */} {!loading && ( )}
); }; export default EmployeeList;