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"; 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(); const [ IsDeleteModalOpen, setIsDeleteModalOpen ] = useState( false ) const [ selectedEmpFordelete, setSelectedEmpFordelete ] = useState( null ) const[employeeLodaing,setemployeeLodaing] = 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.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 && !showModal) { modalElement.classList.remove("show"); modalElement.style.display = "none"; document.body.classList.remove("modal-open"); document.querySelector(".modal-backdrop").remove(); } setShowModal(false); }; 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 ); } return ( <> {isCreateModalOpen && ( )}
{IsDeleteModalOpen && (
setIsDeleteModalOpen(false)} loading={employeeLodaing} paramData={selectedEmpFordelete} />
)}
{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;