import getGreetingMessage from "../../utils/greetingHandler"; import { cacheData, clearAllCache, getCachedData, useSelectedproject, } from "../../slices/apiDataManager"; import AuthRepository from "../../repositories/AuthRepository"; import { useDispatch, useSelector } from "react-redux"; import { changeMaster, setProjectId } from "../../slices/localVariablesSlice"; import useMaster from "../../hooks/masterHook/useMaster"; import { useProfile } from "../../hooks/useProfile"; import { useLocation, useNavigate, useParams } from "react-router-dom"; import Avatar from "../../components/common/Avatar"; import { useChangePassword } from "../Context/ChangePasswordContext"; import { useProjects, useProjectName } from "../../hooks/useProjects"; // Make sure useProjects is imported if needed elsewhere import { useCallback, useEffect, useState } from "react"; import eventBus from "../../services/eventBus"; import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { MANAGE_PROJECT } from "../../utils/constants"; import { useMemo } from "react"; const Header = () => { const { profile } = useProfile(); const location = useLocation(); const dispatch = useDispatch(); const { data, loading: masterLoading } = useMaster(); // Renamed loading to masterLoading for clarity const navigate = useNavigate(); const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT); const isDirectoryPath = /^\/directory$/.test(location.pathname); const isProjectPath = /^\/projects$/.test(location.pathname); const isDashboard = /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname); // Define the specific project status IDs you want to filter by const allowedProjectStatusIds = [ "603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold "cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress "b74da4c2-d07e-46f2-9919-e75e49b12731", // Active ]; const getRole = (roles, joRoleId) => { if (!Array.isArray(roles)) return "User"; let role = roles.find((role) => role.id === joRoleId); return role ? role.name : "User"; }; const handleLogout = (e) => { e.preventDefault(); logout(); }; const logout = async () => { try { let data = { refreshToken: localStorage.getItem("refreshToken"), }; AuthRepository.logout(data) .then((response) => { localStorage.removeItem("jwtToken"); localStorage.removeItem("refreshToken"); localStorage.removeItem("user"); localStorage.clear(); clearAllCache(); window.location.href = "/auth/login"; }) .catch((error) => { localStorage.removeItem("jwtToken"); localStorage.removeItem("refreshToken"); localStorage.removeItem("user"); clearAllCache(); window.location.href = "/auth/login"; }); } catch (error) { console.error( "Error during logout:", error?.response?.data || error.message ); } }; const handleProfilePage = () => { navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`); }; const { projectNames, loading: projectLoading, fetchData } = useProjectName(); // Renamed loading to projectLoading const selectedProject = useSelectedproject(); // Filter projects for the dropdown based on the current path and allowed statuses const projectsForDropdown = useMemo(() => { if (!projectNames) return []; // Return empty array if projectNames is not yet fetched return isDashboard ? projectNames : projectNames?.filter(project => allowedProjectStatusIds.includes(project.projectStatusId)); }, [projectNames, isDashboard, allowedProjectStatusIds]); // Determine the display text for the project section let currentProjectDisplayName = "Loading..."; if (!projectLoading && projectNames) { if (projectNames.length === 0) { // If no projects are assigned at all currentProjectDisplayName = "No Projects Assigned"; } else if (projectNames.length === 1) { // If there's exactly one project overall (unfiltered list) currentProjectDisplayName = projectNames[0].name; } else { // projectNames.length > 1 (multiple projects) if (selectedProject === null) { currentProjectDisplayName = "All Projects"; } else { const selectedProjectObj = projectNames.find( (p) => p?.id === selectedProject ); currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "Unknown Project"; } } // Determine the display text for the project dropdown let displayText = "Loading..."; // Default to loading if (!projectLoading && projectNames) { // Only update if not loading and projectNames is available if (selectedProject === null) { displayText = "All Projects"; } else { // Find the selected project from the full projectNames list const selectedProjectObj = projectNames.find( // Use projectNames directly here (p) => p?.id === selectedProject ); displayText = selectedProjectObj ? selectedProjectObj.name : "All Projects"; // Fallback to "All Projects" if selected project is not found } } const { openChangePassword } = useChangePassword(); // Effect to set initial projectId based on scenarios useEffect(() => { if ( projectNames && projectNames.length > 0 && selectedProject === undefined && // Only set if no project is explicitly selected yet !getCachedData("hasReceived") // To avoid re-setting on every render selectedProject === undefined && // Only set default if no project is currently selected !getCachedData("hasReceived") // Check if this flag is still relevant for your caching strategy ) { if (projectNames.length === 1) { // If only one project exists, automatically select it dispatch(setProjectId(projectNames[0]?.id || null)); } else { // If multiple projects, default to "All Projects" on dashboard, or first allowed for others if (isDashboard) { dispatch(setProjectId(null)); // Default to "All Projects" for dashboard when multiple projects } else { const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId)); dispatch(setProjectId(firstAllowedProject?.id || null)); } const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId)); dispatch(setProjectId(firstAllowedProject?.id || null)); // Fallback to null if no allowed projects } } }, [projectNames, selectedProject, dispatch, isDashboard, allowedProjectStatusIds]); const handler = useCallback( async (data) => { if (!HasManageProjectPermission) { await fetchData(); const projectExist = data.projectIds.some( (item) => item === selectedProject ); if (projectExist) { cacheData("hasReceived", false); } } }, [fetchData, selectedProject, HasManageProjectPermission] ); const newProjectHandler = useCallback( async (msg) => { if (HasManageProjectPermission && msg.keyword === "Create_Project") { await fetchData(); } else if (projectNames?.some((item) => item.id === msg.response.id)) { await fetchData(); } cacheData("hasReceived", false); }, [HasManageProjectPermission, projectNames, fetchData] ); useEffect(() => { dispatch(changeMaster("Job Role")); }, [dispatch]); useEffect(() => { eventBus.on("assign_project_one", handler); eventBus.on("project", newProjectHandler); return () => { eventBus.off("assign_project_one", handler); eventBus.off("project", newProjectHandler); }; }, [handler, newProjectHandler]); const handleProjectChange = (projectId) => { dispatch(setProjectId(projectId)); if (isProjectPath && projectId !== null) { navigate(`/projects/details?resetDates=true`); } else if (isProjectPath && projectId === null) { navigate("/projects"); } else if (isDashboard) { } }; const shouldShowDropdown = isDashboard || (projectsForDropdown && projectsForDropdown.length > 1); return ( ); }; export default Header;