Issues_July_2W: Project overview widgets #256
@ -117,7 +117,7 @@ const LineChart = ({
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full overflow-x-auto">
|
<div className="w-full overflow-x-false">
|
||||||
<ReactApexChart
|
<ReactApexChart
|
||||||
options={chartOptions}
|
options={chartOptions}
|
||||||
series={seriesData}
|
series={seriesData}
|
||||||
|
|||||||
@ -1,55 +1,71 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { useSelector } from "react-redux"; // Import useSelector to access Redux state
|
||||||
import {
|
import {
|
||||||
useDashboardProjectsCardData,
|
useDashboardProjectsCardData,
|
||||||
useDashboardTeamsCardData,
|
useDashboardTeamsCardData,
|
||||||
useDashboardTasksCardData,
|
useDashboardTasksCardData,
|
||||||
} from "../../hooks/useDashboard_Data";
|
} from "../../hooks/useDashboard_Data";
|
||||||
import Projects from "./Projects";
|
import Projects from "./Projects";
|
||||||
import Teams from "./Teams";
|
import Teams from "./Teams";
|
||||||
import TasksCard from "./Tasks";
|
import TasksCard from "./Tasks";
|
||||||
import ProjectCompletionChart from "./ProjectCompletionChart";
|
import ProjectCompletionChart from "./ProjectCompletionChart";
|
||||||
import ProjectProgressChart from "./ProjectProgressChart";
|
import ProjectProgressChart from "./ProjectProgressChart";
|
||||||
|
import ProjectOverview from "../Project/ProjectOverview";
|
||||||
// import Attendance from "./Attendance";
|
// import Attendance from "./Attendance";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const { projectsCardData } = useDashboardProjectsCardData();
|
const { projectsCardData } = useDashboardProjectsCardData();
|
||||||
const { teamsCardData } = useDashboardTeamsCardData();
|
const { teamsCardData } = useDashboardTeamsCardData();
|
||||||
const { tasksCardData } = useDashboardTasksCardData();
|
const { tasksCardData } = useDashboardTasksCardData();
|
||||||
|
|
||||||
return (
|
// Get the selected project ID from Redux store
|
||||||
<div className="container-fluid mt-3">
|
const selectedProjectId = useSelector(
|
||||||
<div className="row gy-4">
|
(store) => store.localVariables.projectId
|
||||||
{/* Projects Card */}
|
);
|
||||||
|
|
||||||
|
// Determine if "All Projects" is selected
|
||||||
|
// selectedProjectId will be null when "All Projects" is chosen
|
||||||
|
const isAllProjectsSelected = selectedProjectId === null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container-fluid mt-3">
|
||||||
|
<div className="row gy-4">
|
||||||
|
|
||||||
|
{isAllProjectsSelected && (
|
||||||
<div className="col-sm-6 col-lg-4">
|
<div className="col-sm-6 col-lg-4">
|
||||||
<Projects projectsCardData={projectsCardData} />
|
<Projects projectsCardData={projectsCardData} />
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Teams Card */}
|
|
||||||
<div className="col-sm-6 col-lg-4">
|
|
||||||
<Teams teamsCardData={teamsCardData} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tasks Card */}
|
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
|
||||||
<div className="col-sm-6 col-lg-4">
|
<Teams teamsCardData={teamsCardData} />
|
||||||
<TasksCard tasksCardData={tasksCardData} />
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bar Chart (Project Completion) */}
|
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
|
||||||
|
<TasksCard tasksCardData={tasksCardData} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{isAllProjectsSelected && (
|
||||||
<div className="col-xxl-6 col-lg-6">
|
<div className="col-xxl-6 col-lg-6">
|
||||||
<ProjectCompletionChart />
|
<ProjectCompletionChart />
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Line Chart (Project Progress) */}
|
{! isAllProjectsSelected && (
|
||||||
<div className="col-xxl-6 col-lg-6">
|
<div className="col-xxl-6 col-lg-6">
|
||||||
<ProjectProgressChart />
|
<ProjectOverview />
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="col-xxl-6 col-lg-6">
|
||||||
|
<ProjectProgressChart />
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* <div className="col-xxl-6 col-lg-6">
|
|
||||||
<Attendance />
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
</div>
|
);
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dashboard;
|
export default Dashboard;
|
||||||
@ -93,33 +93,6 @@ const ProjectProgressChart = ({
|
|||||||
<h5 className="mb-1">Project Progress</h5>
|
<h5 className="mb-1">Project Progress</h5>
|
||||||
<p className="card-subtitle">Progress Overview by Project</p>
|
<p className="card-subtitle">Progress Overview by Project</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right: Checkbox and Project Name */}
|
|
||||||
<div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
|
|
||||||
{ShowAllProject == true && (
|
|
||||||
<div className="form-check form-switch mb-1 d-flex align-items-center">
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
role="switch"
|
|
||||||
id="showAllEmployees"
|
|
||||||
checked={showAllEmployees}
|
|
||||||
onChange={(e) => setShowAllEmployees(e.target.checked)}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="form-check-label ms-2"
|
|
||||||
htmlFor="showAllEmployees"
|
|
||||||
>
|
|
||||||
All Projects
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!showAllEmployees && selectedProjectName && (
|
|
||||||
<p className="text-muted mb-0 small">
|
|
||||||
<span className="card-subtitle">{selectedProjectName}</span>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Row 2: Time Range Buttons */}
|
{/* Row 2: Time Range Buttons */}
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
import getGreetingMessage from "../../utils/greetingHandler";
|
import getGreetingMessage from "../../utils/greetingHandler";
|
||||||
import {
|
import {
|
||||||
cacheData,
|
cacheData,
|
||||||
@ -20,26 +21,28 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|||||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
const {profile} = useProfile();
|
const { profile } = useProfile();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { data, loading } = useMaster();
|
const { data, loading } = useMaster();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||||
|
|
||||||
|
const isDirectoryPath = /^\/directory$/.test(location.pathname);
|
||||||
|
const isDashboard = /^\/dashboard$/.test(location.pathname);
|
||||||
const getRole = (roles, joRoleId) => {
|
const getRole = (roles, joRoleId) => {
|
||||||
if (!Array.isArray(roles)) return "User";
|
if (!Array.isArray(roles)) return "User";
|
||||||
let role = roles.find((role) => role.id === joRoleId);
|
let role = roles.find((role) => role.id === joRoleId);
|
||||||
return role ? role.name : "User";
|
return role ? role.name : "User";
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLogout = (e) => {
|
const handleLogout = (e) => {
|
||||||
e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
|
e.preventDefault();
|
||||||
logout();
|
logout();
|
||||||
};
|
};
|
||||||
|
|
||||||
const logout = async () => {
|
const logout = async () => {
|
||||||
try {
|
try {
|
||||||
// Notify server about the logout (optional)
|
|
||||||
let data = {
|
let data = {
|
||||||
refreshToken: localStorage.getItem("refreshToken"),
|
refreshToken: localStorage.getItem("refreshToken"),
|
||||||
};
|
};
|
||||||
@ -54,6 +57,7 @@ const Header = () => {
|
|||||||
window.location.href = "/auth/login";
|
window.location.href = "/auth/login";
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
|
// Even if logout API fails, clear local storage and redirect
|
||||||
localStorage.removeItem("jwtToken");
|
localStorage.removeItem("jwtToken");
|
||||||
localStorage.removeItem("refreshToken");
|
localStorage.removeItem("refreshToken");
|
||||||
localStorage.removeItem("user");
|
localStorage.removeItem("user");
|
||||||
@ -71,84 +75,80 @@ const Header = () => {
|
|||||||
const handleProfilePage = () => {
|
const handleProfilePage = () => {
|
||||||
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
|
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
|
||||||
};
|
};
|
||||||
// const { projects, loading: projectLoading } = useProjects();
|
|
||||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||||
|
|
||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector(
|
||||||
(store) => store.localVariables.projectId
|
(store) => store.localVariables.projectId
|
||||||
);
|
);
|
||||||
|
|
||||||
const selectedProjectName = projectNames?.find(
|
// Determine the display text for the project dropdown
|
||||||
|
let displayText = "All Projects";
|
||||||
|
if (selectedProject === null) {
|
||||||
|
displayText = "All Projects";
|
||||||
|
} else if (selectedProject) {
|
||||||
|
const selectedProjectObj = projectNames?.find(
|
||||||
(p) => p?.id === selectedProject
|
(p) => p?.id === selectedProject
|
||||||
)?.name;
|
);
|
||||||
|
// Fallback to selectedProject ID if name not found during loading or mismatch
|
||||||
let displayText = "";
|
displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
|
||||||
if (selectedProjectName) {
|
|
||||||
displayText = selectedProjectName;
|
|
||||||
} else if (projectLoading && selectedProject) {
|
|
||||||
displayText = selectedProject;
|
|
||||||
} else if (projectLoading) {
|
} else if (projectLoading) {
|
||||||
displayText = "Loading...";
|
displayText = "Loading...";
|
||||||
}
|
}
|
||||||
|
|
||||||
const { openChangePassword } = useChangePassword();
|
const { openChangePassword } = useChangePassword();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if (
|
||||||
projectNames &&
|
projectNames &&
|
||||||
selectedProject !== " " &&
|
projectNames.length > 0 &&
|
||||||
|
selectedProject === undefined &&
|
||||||
!getCachedData("hasReceived")
|
!getCachedData("hasReceived")
|
||||||
) {
|
) {
|
||||||
|
if(isDashboard){
|
||||||
|
dispatch(setProjectId(null));
|
||||||
|
}else{
|
||||||
dispatch(setProjectId(projectNames[0]?.id));
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
}
|
}
|
||||||
}, [projectNames]);
|
}
|
||||||
|
}, [projectNames, selectedProject, dispatch]);
|
||||||
|
|
||||||
|
|
||||||
|
/** Check if current page is project details page or directory page */
|
||||||
|
// const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
|
||||||
|
|
||||||
/** Check if current page id project details page */
|
|
||||||
const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname)
|
|
||||||
const isDirectoryPath = /^\/directory$/.test(location.pathname);
|
|
||||||
|
|
||||||
const handler = useCallback(
|
const handler = useCallback(
|
||||||
async (data) => {
|
async (data) => {
|
||||||
if (!HasManageProjectPermission) {
|
if (!HasManageProjectPermission) {
|
||||||
await fetchData();
|
await fetchData();
|
||||||
const projectExist = data.projectIds.some(
|
const projectExist = data.projectIds.some(
|
||||||
(item) => item == selectedProject
|
(item) => item === selectedProject
|
||||||
);
|
);
|
||||||
if (projectExist) {
|
if (projectExist) {
|
||||||
cacheData("hasReceived", false);
|
cacheData("hasReceived", false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[fetchData,projectNames,selectedProject]
|
[fetchData, selectedProject, HasManageProjectPermission]
|
||||||
);
|
);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// eventBus.on("assign_project_one", handler);
|
|
||||||
// return () => eventBus.off("assign_project_one", handler);
|
|
||||||
// }, [handler]);
|
|
||||||
|
|
||||||
const newProjectHandler = useCallback(
|
const newProjectHandler = useCallback(
|
||||||
async (msg) => {
|
async (msg) => {
|
||||||
|
|
||||||
if (HasManageProjectPermission && msg.keyword === "Create_Project") {
|
if (HasManageProjectPermission && msg.keyword === "Create_Project") {
|
||||||
await fetchData();
|
await fetchData();
|
||||||
} else if (projectNames.some((item) => item.id == msg.response.id)) {
|
} else if (projectNames?.some((item) => item.id === msg.response.id)) {
|
||||||
console.log((projectNames.some((item) => item.id == msg.response.id)))
|
|
||||||
await fetchData();
|
await fetchData();
|
||||||
}
|
}
|
||||||
cacheData("hasReceived", false);
|
cacheData("hasReceived", false);
|
||||||
},
|
},
|
||||||
[HasManageProjectPermission,projectNames]
|
[HasManageProjectPermission, projectNames, fetchData]
|
||||||
);
|
);
|
||||||
|
|
||||||
// useEffect(() => {
|
useEffect(() => {
|
||||||
// eventBus.on("project", newProjectHandler);
|
dispatch(changeMaster("Job Role"));
|
||||||
// return () => eventBus.off("project", newProjectHandler);
|
}, [dispatch]);
|
||||||
// }, [handler]);
|
|
||||||
|
|
||||||
useDispatch( () =>
|
|
||||||
{
|
|
||||||
dispatch(changeMaster("Job Role"))
|
|
||||||
},[])
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
eventBus.on("assign_project_one", handler);
|
eventBus.on("assign_project_one", handler);
|
||||||
eventBus.on("project", newProjectHandler);
|
eventBus.on("project", newProjectHandler);
|
||||||
@ -157,8 +157,7 @@ const Header = () => {
|
|||||||
eventBus.off("assign_project_one", handler);
|
eventBus.off("assign_project_one", handler);
|
||||||
eventBus.off("project", newProjectHandler);
|
eventBus.off("project", newProjectHandler);
|
||||||
};
|
};
|
||||||
}, [handler, newProjectHandler]);
|
}, [handler, newProjectHandler]);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav
|
<nav
|
||||||
@ -177,17 +176,12 @@ const Header = () => {
|
|||||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||||
id="navbar-collapse"
|
id="navbar-collapse"
|
||||||
>
|
>
|
||||||
{projectNames?.length > 0 && (
|
{projectNames && !isDirectoryPath && (
|
||||||
<div className=" align-items-center">
|
<div className="align-items-center">
|
||||||
{(!isProjectPath && !isDirectoryPath) && (
|
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||||
<>
|
|
||||||
<i
|
|
||||||
className="rounded-circle bx bx-building-house bx-sm-lg bx-md"
|
|
||||||
></i>
|
|
||||||
<div className="btn-group">
|
<div className="btn-group">
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm-sm btn-xl ${
|
className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
|
||||||
projectNames?.length > 1 && "dropdown-toggle"
|
|
||||||
} px-1`}
|
} px-1`}
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
@ -196,29 +190,35 @@ const Header = () => {
|
|||||||
{displayText}
|
{displayText}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{projectNames?.length > 1 && (
|
{projectNames.length > 0 && (
|
||||||
<ul
|
<ul
|
||||||
className="dropdown-menu"
|
className="dropdown-menu"
|
||||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||||
>
|
>
|
||||||
|
|
||||||
|
{isDashboard && (
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
className="dropdown-item"
|
||||||
|
onClick={() => dispatch(setProjectId(null))}
|
||||||
|
>
|
||||||
|
All Projects
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
{[...projectNames]
|
{[...projectNames]
|
||||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||||
.map((project) => (
|
.map((project) => (
|
||||||
<li key={project?.id}>
|
<li key={project?.id}>
|
||||||
<button
|
<button
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
onClick={() =>
|
onClick={() => dispatch(setProjectId(project?.id))}
|
||||||
dispatch(setProjectId(project?.id))
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
{project?.name}{" "}
|
{project?.name}
|
||||||
{project?.shortName ? (
|
{project?.shortName && (
|
||||||
<span className="text-primary fw-semibold ">
|
<span className="text-primary fw-semibold ms-1">
|
||||||
{" "}
|
|
||||||
({project?.shortName})
|
({project?.shortName})
|
||||||
</span>
|
</span>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
@ -226,11 +226,9 @@ const Header = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{isProjectPath && (<span className=" fs-5 align-items-center"><i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>{displayText}</span>)}
|
|
||||||
|
|
||||||
<ul className="navbar-nav flex-row align-items-center ms-md-auto">
|
<ul className="navbar-nav flex-row align-items-center ms-md-auto">
|
||||||
<li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
<li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
||||||
@ -269,7 +267,6 @@ const Header = () => {
|
|||||||
</span>
|
</span>
|
||||||
Dashboard
|
Dashboard
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<small>User Dashboard</small>
|
<small>User Dashboard</small>
|
||||||
</div>
|
</div>
|
||||||
<div className="dropdown-shortcuts-item col">
|
<div className="dropdown-shortcuts-item col">
|
||||||
@ -282,7 +279,6 @@ const Header = () => {
|
|||||||
</span>
|
</span>
|
||||||
Projects
|
Projects
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<small>Projects List</small>
|
<small>Projects List</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -323,7 +319,6 @@ const Header = () => {
|
|||||||
</span>
|
</span>
|
||||||
Allocate Work
|
Allocate Work
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<small>Work Allocations</small>
|
<small>Work Allocations</small>
|
||||||
</div>
|
</div>
|
||||||
<div className="dropdown-shortcuts-item col">
|
<div className="dropdown-shortcuts-item col">
|
||||||
@ -336,321 +331,12 @@ const Header = () => {
|
|||||||
</span>
|
</span>
|
||||||
Daily Work Log
|
Daily Work Log
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<small>Daily Work Allocations</small>
|
<small>Daily Work Allocations</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
{/* <li className="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
|
|
||||||
<a
|
|
||||||
className="nav-link dropdown-toggle hide-arrow cursor-pointer"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
data-bs-auto-close="outside"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<span className="position-relative">
|
|
||||||
<i className="icon-base bx bx-bell icon-lg"></i>
|
|
||||||
<span className="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<ul className="dropdown-menu dropdown-menu-end p-0">
|
|
||||||
<li className="dropdown-menu-header border-bottom">
|
|
||||||
<div className="dropdown-header d-flex align-items-center py-3">
|
|
||||||
<h6 className="mb-0 me-auto">Notification</h6>
|
|
||||||
<div className="d-flex align-items-center h6 mb-0">
|
|
||||||
<span className="badge bg-label-primary me-2">8 New</span>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="dropdown-notifications-all p-2"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-placement="top"
|
|
||||||
aria-label="Mark all as read"
|
|
||||||
data-bs-original-title="Mark all as read"
|
|
||||||
>
|
|
||||||
<i className="icon-base bx bx-envelope-open text-heading"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="dropdown-notifications-list scrollable-container ps">
|
|
||||||
<ul className="list-group list-group-flush">
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<img
|
|
||||||
src="../../assets/img/avatars/1.png"
|
|
||||||
alt=""
|
|
||||||
className="rounded-circle"
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">Congratulation Lettie 🎉</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
Won the monthly best seller gold badge
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">1h ago</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<span className="avatar-initial rounded-circle bg-label-danger">
|
|
||||||
CF
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">Charles Franklin</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
Accepted your connection
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">12hr ago</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<img
|
|
||||||
src="../../assets/img/avatars/2.png"
|
|
||||||
alt=""
|
|
||||||
className="rounded-circle"
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">New Message ✉️</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
You have new message from Natalie
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">1h ago</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<span className="avatar-initial rounded-circle bg-label-success">
|
|
||||||
<i className="icon-base bx bx-cart"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">
|
|
||||||
Whoo! You have new order 🛒
|
|
||||||
</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
ACME Inc. made new order $1,154
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">1 day ago</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<img
|
|
||||||
src="../../assets/img/avatars/9.png"
|
|
||||||
alt=""
|
|
||||||
className="rounded-circle"
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">
|
|
||||||
Application has been approved 🚀
|
|
||||||
</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
Your ABC project application has been approved.
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">
|
|
||||||
2 days ago
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<span className="avatar-initial rounded-circle bg-label-success">
|
|
||||||
<i className="icon-base bx bx-pie-chart-alt"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">
|
|
||||||
Monthly report is generated
|
|
||||||
</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
July monthly financial report is generated{" "}
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">
|
|
||||||
3 days ago
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<img
|
|
||||||
src="../../assets/img/avatars/5.png"
|
|
||||||
alt=""
|
|
||||||
className="rounded-circle"
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">Send connection request</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
Peter sent you connection request
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">
|
|
||||||
4 days ago
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<img
|
|
||||||
src="../../assets/img/avatars/6.png"
|
|
||||||
alt=""
|
|
||||||
className="rounded-circle"
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">New message from Jane</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
Your have new message from Jane
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">
|
|
||||||
5 days ago
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
|
|
||||||
<div className="d-flex">
|
|
||||||
<div className="flex-shrink-0 me-3">
|
|
||||||
<div className="avatar">
|
|
||||||
<span className="avatar-initial rounded-circle bg-label-warning">
|
|
||||||
<i className="icon-base bx bx-error"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<h6 className="small mb-0">CPU is running high</h6>
|
|
||||||
<small className="mb-1 d-block text-body">
|
|
||||||
CPU Utilization Percent is currently at 88.63%,
|
|
||||||
</small>
|
|
||||||
<small className="text-body-secondary">
|
|
||||||
5 days ago
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div className="flex-shrink-0 dropdown-notifications-actions">
|
|
||||||
<a href="#" className="dropdown-notifications-read">
|
|
||||||
<span className="badge badge-dot"></span>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="dropdown-notifications-archive">
|
|
||||||
<span className="icon-base bx bx-x"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
<li className="border-top">
|
|
||||||
<div className="d-grid p-4">
|
|
||||||
<a className="btn btn-primary btn-sm d-flex" href="#;">
|
|
||||||
<small className="align-middle">
|
|
||||||
View all notifications
|
|
||||||
</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li> */}
|
|
||||||
<li className="nav-item navbar-dropdown dropdown-user dropdown">
|
<li className="nav-item navbar-dropdown dropdown-user dropdown">
|
||||||
<a
|
<a
|
||||||
aria-label="dropdown profile avatar"
|
aria-label="dropdown profile avatar"
|
||||||
@ -709,25 +395,8 @@ const Header = () => {
|
|||||||
<span className="align-middle">Settings</span>
|
<span className="align-middle">Settings</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{/* <li>
|
|
||||||
<a
|
|
||||||
aria-label="go to billing "
|
|
||||||
className="dropdown-item cusor-pointer"
|
|
||||||
>
|
|
||||||
<span className="d-flex align-items-center align-middle">
|
|
||||||
<i className="flex-shrink-0 bx bx-credit-card me-2"></i>
|
|
||||||
<span className="flex-grow-1 align-middle ms-1">
|
|
||||||
Billing
|
|
||||||
</span>
|
|
||||||
<span className="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">
|
|
||||||
4
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li> */}
|
|
||||||
<li onClick={openChangePassword}>
|
<li onClick={openChangePassword}>
|
||||||
{" "}
|
{" "}
|
||||||
{/* Use the function from the context */}
|
|
||||||
<a
|
<a
|
||||||
aria-label="go to profile"
|
aria-label="go to profile"
|
||||||
className="dropdown-item cusor-pointer"
|
className="dropdown-item cusor-pointer"
|
||||||
@ -743,7 +412,7 @@ const Header = () => {
|
|||||||
<a
|
<a
|
||||||
aria-label="click to log out"
|
aria-label="click to log out"
|
||||||
className="dropdown-item cusor-pointer"
|
className="dropdown-item cusor-pointer"
|
||||||
href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
|
href="/logout"
|
||||||
onClick={handleLogout}
|
onClick={handleLogout}
|
||||||
>
|
>
|
||||||
<i className="bx bx-power-off me-2"></i>
|
<i className="bx bx-power-off me-2"></i>
|
||||||
|
|||||||
@ -2,34 +2,39 @@ import React, { useEffect, useState } from "react";
|
|||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { getProjectStatusName } from "../../utils/projectStatus";
|
import { getProjectStatusName } from "../../utils/projectStatus";
|
||||||
import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
|
import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
|
||||||
import {useParams} from "react-router-dom";
|
import { useSelector } from "react-redux"; // Import useSelector
|
||||||
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
||||||
import {MANAGE_PROJECT} from "../../utils/constants";
|
import {MANAGE_PROJECT} from "../../utils/constants";
|
||||||
import GlobalModel from "../common/GlobalModel";
|
import GlobalModel from "../common/GlobalModel";
|
||||||
import ManageProjectInfo from "./ManageProjectInfo";
|
import ManageProjectInfo from "./ManageProjectInfo";
|
||||||
import {useQueryClient} from "@tanstack/react-query";
|
import {useQueryClient} from "@tanstack/react-query";
|
||||||
const AboutProject = () =>
|
|
||||||
{
|
const AboutProject = () => {
|
||||||
const [ IsOpenModal, setIsOpenModal ] = useState( false )
|
const [IsOpenModal, setIsOpenModal] = useState(false);
|
||||||
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
|
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
|
||||||
onSuccessCallback: () =>
|
onSuccessCallback: () => {
|
||||||
{
|
setIsOpenModal(false);
|
||||||
setIsOpenModal(false)
|
|
||||||
}
|
}
|
||||||
} )
|
});
|
||||||
const ClientQuery = useQueryClient()
|
const ClientQuery = useQueryClient();
|
||||||
const {projectId} = useParams();
|
|
||||||
|
// *** MODIFIED LINE: Get projectId from Redux store using useSelector ***
|
||||||
|
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||||
|
|
||||||
const manageProject = useHasUserPermission(MANAGE_PROJECT);
|
const manageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||||
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId )
|
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId ); // Pass projectId from useSelector
|
||||||
const handleFormSubmit = ( updatedProject ) =>
|
|
||||||
{
|
const handleFormSubmit = ( updatedProject ) => {
|
||||||
if ( projects_Details?.id )
|
if ( projects_Details?.id ) {
|
||||||
{
|
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject });
|
||||||
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
|
// The refetch here might be redundant or could be handled by react-query's invalidateQueries
|
||||||
} );
|
// if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
|
||||||
refetch()
|
// If refetch is still needed, consider adding a delay or using onSuccess of UpdateProjectDetails.
|
||||||
|
// For now, keeping it as is based on your original code.
|
||||||
|
refetch();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{IsOpenModal && (
|
{IsOpenModal && (
|
||||||
@ -126,7 +131,6 @@ const AboutProject = () =>
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
{isLoading && <span>loading...</span>}
|
{isLoading && <span>loading...</span>}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -31,7 +31,9 @@ const WorkItem = ({
|
|||||||
forWorkArea,
|
forWorkArea,
|
||||||
deleteHandleTask,
|
deleteHandleTask,
|
||||||
}) => {
|
}) => {
|
||||||
const { projectId } = useParams();
|
// const { projectId } = useParams();
|
||||||
|
const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
|
||||||
|
|
||||||
const [itemName, setItemName] = useState("");
|
const [itemName, setItemName] = useState("");
|
||||||
const [NewWorkItem, setNewWorkItem] = useState();
|
const [NewWorkItem, setNewWorkItem] = useState();
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
@ -244,7 +246,7 @@ const WorkItem = ({
|
|||||||
<td className="text-end align-items-middle border-top">
|
<td className="text-end align-items-middle border-top">
|
||||||
{/* Desktop (md and up): inline icons */}
|
{/* Desktop (md and up): inline icons */}
|
||||||
<div className="d-none d-md-flex justify-content-end gap-1 px-2">
|
<div className="d-none d-md-flex justify-content-end gap-1 px-2">
|
||||||
{!projectId &&
|
{isTaskPlanning &&
|
||||||
ManageAndAssignTak &&
|
ManageAndAssignTak &&
|
||||||
PlannedWork !== CompletedWork && (
|
PlannedWork !== CompletedWork && (
|
||||||
<i
|
<i
|
||||||
@ -284,7 +286,7 @@ const WorkItem = ({
|
|||||||
></i>
|
></i>
|
||||||
|
|
||||||
<ul className="dropdown-menu dropdown-menu-start">
|
<ul className="dropdown-menu dropdown-menu-start">
|
||||||
{!projectId &&
|
{isTaskPlanning &&
|
||||||
ManageAndAssignTak &&
|
ManageAndAssignTak &&
|
||||||
PlannedWork !== CompletedWork && (
|
PlannedWork !== CompletedWork && (
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { formatNumber, getCompletionPercentage, getDateDifferenceInDays } from "../../utils/dateUtils";
|
import { formatNumber, getDateDifferenceInDays } from "../../utils/dateUtils";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
|
import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
|
||||||
import ManageProjectInfo from "./ManageProjectInfo";
|
import ManageProjectInfo from "./ManageProjectInfo";
|
||||||
@ -57,7 +57,7 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
const handleClose = () => setShowModal(false);
|
const handleClose = () => setShowModal(false);
|
||||||
|
|
||||||
const handleViewProject = () => {
|
const handleViewProject = () => {
|
||||||
navigate(`/projects/${projectData.id}`);
|
navigate(`/projects/details`);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFormSubmit = (updatedProject) => {
|
const handleFormSubmit = (updatedProject) => {
|
||||||
@ -87,18 +87,17 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
<div className={`card cursor-pointer ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
|
<div className={`card cursor-pointer ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
|
||||||
<div className="card-header pb-4">
|
<div className="card-header pb-4">
|
||||||
<div className="d-flex align-items-start">
|
<div className="d-flex align-items-start">
|
||||||
<div className="d-flex align-items-center ">
|
<div className="d-flex align-items-center">
|
||||||
<div className="avatar me-4">
|
<div className="avatar me-4">
|
||||||
<i
|
<i
|
||||||
className="rounded-circle bx bx-building-house"
|
className="rounded-circle bx bx-building-house"
|
||||||
style={{ fontSize: "xx-large" }}
|
style={{ fontSize: "xx-large" }}
|
||||||
></i>
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<div className="me-2 text-wrap ">
|
<div className="me-2">
|
||||||
<h5
|
<h5
|
||||||
className="mb-0 stretched-link text-heading text-start text-truncate"
|
className="mb-0 stretched-link text-heading text-start"
|
||||||
onClick={handleViewProject}
|
onClick={handleViewProject}
|
||||||
style={{ maxWidth: "180px", display: "inline-block" }}
|
|
||||||
>
|
>
|
||||||
{projectInfo.shortName
|
{projectInfo.shortName
|
||||||
? projectInfo.shortName
|
? projectInfo.shortName
|
||||||
@ -228,7 +227,12 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
|
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
|
||||||
</small>
|
</small>
|
||||||
<small className="text-body">
|
<small className="text-body">
|
||||||
{getCompletionPercentage(projectInfo.completedWork, projectInfo.plannedWork)}
|
{Math.floor(
|
||||||
|
getProgressInNumber(
|
||||||
|
projectInfo.plannedWork,
|
||||||
|
projectInfo.completedWork
|
||||||
|
)
|
||||||
|
) || 0}{" "}
|
||||||
% Completed
|
% Completed
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -25,7 +25,7 @@ import GlobalModel from "../common/GlobalModel";
|
|||||||
|
|
||||||
const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
|
const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
|
||||||
{
|
{
|
||||||
const {projectId} = useParams()
|
const projectId = useSelector((store)=>store.localVariables.projectId)
|
||||||
const reloadedData = useSelector((store) => store.localVariables.reload);
|
const reloadedData = useSelector((store) => store.localVariables.reload);
|
||||||
const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
|
const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
|
||||||
const {projectInfra,isLoading,error} = useProjectInfra(projectId)
|
const {projectInfra,isLoading,error} = useProjectInfra(projectId)
|
||||||
|
|||||||
@ -26,7 +26,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
|||||||
</li>
|
</li>
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<a
|
<a
|
||||||
className={`nav-link ${activePill === "teams" ? "active" : ""}fs-6`}
|
className={`nav-link ${activePill === "teams" ? "active" : ""} fs-6`}
|
||||||
href="#"
|
href="#"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -53,14 +53,14 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
|||||||
<a
|
<a
|
||||||
className={`nav-link ${
|
className={`nav-link ${
|
||||||
activePill === "imagegallary" ? "active" : ""
|
activePill === "imagegallary" ? "active" : ""
|
||||||
}fs-6`}
|
} fs-6`}
|
||||||
href="#"
|
href="#"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault(); // Prevent page reload
|
e.preventDefault(); // Prevent page reload
|
||||||
onPillClick("imagegallary");
|
onPillClick("imagegallary");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<i className="bx bxs-file-image bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
|
<i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">project Setup</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{(DirAdmin || DireManager || DirUser) && (
|
{(DirAdmin || DireManager || DirUser) && (
|
||||||
|
|||||||
@ -1,15 +1,168 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
useEmployeesByProjectAllocated,
|
useEmployeesByProjectAllocated,
|
||||||
useProjects,
|
useProjects,
|
||||||
} from "../../hooks/useProjects";
|
} from "../../hooks/useProjects";
|
||||||
import { formatNumber, getCompletionPercentage } from "../../utils/dateUtils";
|
import ReactApexChart from "react-apexcharts";
|
||||||
import ProgressBar from "../common/ProgressBar";
|
import Chart from "react-apexcharts";
|
||||||
|
|
||||||
const ProjectOverview = ({ project }) => {
|
const ProjectOverview = ({ project }) => {
|
||||||
const { projects } = useProjects();
|
const { projects } = useProjects();
|
||||||
|
const [current_project, setCurrentProject] = useState(
|
||||||
|
projects.find((pro) => pro.id == project)
|
||||||
|
);
|
||||||
|
|
||||||
const project_detail = projects.find((pro) => pro.id == project);
|
const selectedProject = useSelector(
|
||||||
|
(store) => store.localVariables.projectId
|
||||||
|
);
|
||||||
|
|
||||||
|
const getProgressInPercentage = (planned, completed) => {
|
||||||
|
if (completed && planned) return (completed * 100) / planned;
|
||||||
|
else return 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
//let project_detail = projects.find((pro) => pro.id == project);
|
||||||
|
|
||||||
|
// Utility function to check if a number has a decimal part
|
||||||
|
const hasDecimal = (num) => {
|
||||||
|
// Convert to string and check for a decimal point
|
||||||
|
// Or, check if the number is not equal to its integer part
|
||||||
|
return num % 1 !== 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// FormattedNumber component to display numbers with conditional decimal places
|
||||||
|
function FormattedNumber(value, locale = "en-US") {
|
||||||
|
// Ensure the value is a number
|
||||||
|
const numericValue = parseFloat(value);
|
||||||
|
|
||||||
|
// Handle non-numeric values gracefully
|
||||||
|
if (isNaN(numericValue)) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let options = {};
|
||||||
|
|
||||||
|
// Determine formatting options based on whether the number has a decimal part
|
||||||
|
if (hasDecimal(numericValue)) {
|
||||||
|
// If it has a decimal, format to exactly two decimal places
|
||||||
|
options = {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// If it's a whole number, format to zero decimal places
|
||||||
|
options = {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use Intl.NumberFormat for robust and locale-aware formatting
|
||||||
|
const formattedString = new Intl.NumberFormat(locale, options).format(
|
||||||
|
numericValue
|
||||||
|
);
|
||||||
|
|
||||||
|
return formattedString;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRadialBarOptions = (percentage) => {
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
height: 350,
|
||||||
|
type: "radialBar",
|
||||||
|
sparkline: {
|
||||||
|
// Often used with gauges for a minimalist look
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
radialBar: {
|
||||||
|
startAngle: -90, // Start the gauge from the left (bottom-left)
|
||||||
|
endAngle: 90, // End the gauge at the right (bottom-right)
|
||||||
|
hollow: {
|
||||||
|
size: "70%", // Size of the hollow part of the bar
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
show: true,
|
||||||
|
name: {
|
||||||
|
show: true,
|
||||||
|
fontSize: "16px",
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
color: "#6B7280", // Tailwind gray-500
|
||||||
|
offsetY: -10,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
show: true,
|
||||||
|
fontSize: "28px",
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
color: "#374151", // Tailwind gray-700
|
||||||
|
offsetY: 20,
|
||||||
|
formatter: function (val) {
|
||||||
|
return FormattedNumber(val) + "%"; // Format value as percentage
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
track: {
|
||||||
|
background: "#E5E7EB", // Tailwind gray-200 for the track
|
||||||
|
strokeWidth: "97%",
|
||||||
|
margin: 5, // margin in between segments
|
||||||
|
dropShadow: {
|
||||||
|
enabled: true,
|
||||||
|
top: 2,
|
||||||
|
left: 0,
|
||||||
|
blur: 4,
|
||||||
|
opacity: 0.15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
type: "gradient",
|
||||||
|
gradient: {
|
||||||
|
shade: "dark",
|
||||||
|
type: "horizontal",
|
||||||
|
shadeIntensity: 0.5,
|
||||||
|
gradientToColors: ["#6366F1"], // Tailwind indigo-500
|
||||||
|
inverseColors: true,
|
||||||
|
opacityFrom: 1,
|
||||||
|
opacityTo: 1,
|
||||||
|
stops: [0, 100],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
lineCap: "round",
|
||||||
|
},
|
||||||
|
labels: ["Progress"],
|
||||||
|
series: [percentage],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const [radialPercentage, setRadialPercentage] = useState(75); // Initial percentage
|
||||||
|
|
||||||
|
const radialBarOptions = getRadialBarOptions(radialPercentage);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (current_project) {
|
||||||
|
let val = getProgressInPercentage(
|
||||||
|
current_project.plannedWork,
|
||||||
|
current_project.completedWork
|
||||||
|
);
|
||||||
|
setRadialPercentage(val);
|
||||||
|
} else setRadialPercentage(0);
|
||||||
|
}, [current_project]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCurrentProject(projects.find((pro) => pro.id == selectedProject));
|
||||||
|
if (current_project) {
|
||||||
|
let val = getProgressInPercentage(
|
||||||
|
current_project.plannedWork,
|
||||||
|
current_project.completedWork
|
||||||
|
);
|
||||||
|
setRadialPercentage(val);
|
||||||
|
} else setRadialPercentage(0);
|
||||||
|
}, [selectedProject]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card mb-6">
|
<div className="card mb-6">
|
||||||
@ -21,68 +174,75 @@ const ProjectOverview = ({ project }) => {
|
|||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<ul className="list-unstyled mb-0 mt-3 pt-1">
|
<ul className="list-unstyled m-0 p-0">
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex flex-wrap">
|
||||||
<i className="bx bx-check"></i>
|
<div className="w-100 d-flex flex-wrap">
|
||||||
<span className="fw-medium mx-2">Task Planned:</span>{" "}
|
{/* Centered Chart */}
|
||||||
<span>{formatNumber(project_detail?.plannedWork)}</span>
|
<div className="w-100 d-flex justify-content-center mb-3">
|
||||||
</li>
|
<div >
|
||||||
<li className="d-flex align-items-center mb-3">
|
<Chart
|
||||||
<i className="bx bx-star"></i>
|
options={radialBarOptions}
|
||||||
<span className="fw-medium mx-2">Task Completed:</span>{" "}
|
series={radialBarOptions.series}
|
||||||
<span>{formatNumber(project_detail?.completedWork)}</span>
|
type="radialBar"
|
||||||
</li>
|
height="100%"
|
||||||
<li className="d-flex align-items-center mb-3">
|
|
||||||
<i className="bx bx-user"></i>
|
|
||||||
<span className="fw-medium mx-2">Current team Size:</span>{" "}
|
|
||||||
<span>{project_detail?.teamSize}</span>
|
|
||||||
</li>
|
|
||||||
<li className=" mb-3">
|
|
||||||
{project_detail && (
|
|
||||||
<>
|
|
||||||
<div className="d-flex text-end mb-2 mt-5">
|
|
||||||
<small className="text-body text-muted ">
|
|
||||||
{/* {Math.floor(
|
|
||||||
getProgressInNumber(
|
|
||||||
|
|
||||||
project_detail.completedWork
|
|
||||||
)
|
|
||||||
) || 0}{" "} */}
|
|
||||||
{
|
|
||||||
getCompletionPercentage( formatNumber(project_detail.completedWork),formatNumber(project_detail.plannedWork))
|
|
||||||
|
|
||||||
}
|
|
||||||
% Completed
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
{/* <div
|
|
||||||
className="progress mb-4 rounded"
|
|
||||||
style={{ height: "8px" }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="progress-bar rounded"
|
|
||||||
role="progressbar"
|
|
||||||
style={{
|
|
||||||
width: getProgress(
|
|
||||||
project_detail.plannedWork,
|
|
||||||
project_detail.completedWork
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
aria-valuenow={project_detail.completedWork}
|
|
||||||
aria-valuemin="0"
|
|
||||||
aria-valuemax={project_detail.plannedWork}
|
|
||||||
></div>
|
|
||||||
</div> */}
|
|
||||||
<ProgressBar
|
|
||||||
completedWork={formatNumber(project_detail?.completedWork)}
|
|
||||||
plannedWork={formatNumber(project_detail?.plannedWork)}
|
|
||||||
className="m-0 text-info"
|
|
||||||
/>
|
/>
|
||||||
</>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
|
{/* Info Section */}
|
||||||
|
<div className="mb-2" style={{ flex: "1 1 auto" }}>
|
||||||
|
<div>
|
||||||
|
{/* Tasks Planned */}
|
||||||
|
<div className="d-flex align-items-center mb-3">
|
||||||
|
<div className="avatar me-2">
|
||||||
|
<span className="avatar-initial rounded-2 bg-label-primary">
|
||||||
|
<i className="bx bx-check text-primary fs-4"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-column text-start">
|
||||||
|
<small className="fw-bold">Tasks Planned</small>
|
||||||
|
<h5 className="mb-0">
|
||||||
|
{FormattedNumber(current_project?.plannedWork)}
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tasks Completed */}
|
||||||
|
<div className="d-flex align-items-center mb-3">
|
||||||
|
<div className="avatar me-2">
|
||||||
|
<span className="avatar-initial rounded-2 bg-label-info">
|
||||||
|
<i className="bx bx-star text-info fs-4"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-column text-start">
|
||||||
|
<small className="fw-bold">Tasks Completed</small>
|
||||||
|
<h5 className="mb-0">
|
||||||
|
{FormattedNumber(current_project?.completedWork)}
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team Size */}
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
<div className="avatar me-2">
|
||||||
|
<span className="avatar-initial rounded-2 bg-label-primary">
|
||||||
|
<i className="bx bx-group text-primary fs-4"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-column text-start">
|
||||||
|
<small className="fw-bold">Current Team Size</small>
|
||||||
|
<h5 className="mb-0">
|
||||||
|
{FormattedNumber(current_project?.teamSize)}
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,7 +7,7 @@ import Avatar from "../common/Avatar";
|
|||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
|
||||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||||
import useMaster from "../../hooks/masterHook/useMaster";
|
import useMaster from "../../hooks/masterHook/useMaster";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
@ -18,7 +18,8 @@ import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../
|
|||||||
|
|
||||||
const Teams = () =>
|
const Teams = () =>
|
||||||
{
|
{
|
||||||
const {projectId} = useParams()
|
// const {projectId} = useParams()
|
||||||
|
const projectId = useSelector((store)=>store.localVariables.projectId)
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const { data, loading } = useMaster();
|
const { data, loading } = useMaster();
|
||||||
|
|||||||
@ -21,13 +21,14 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|||||||
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||||
|
import { useProjectName } from "../../hooks/useProjects";
|
||||||
|
|
||||||
const AttendancePage = () => {
|
const AttendancePage = () => {
|
||||||
const [activeTab, setActiveTab] = useState("all");
|
const [activeTab, setActiveTab] = useState("all");
|
||||||
const [ShowPending, setShowPending] = useState(false);
|
const [ShowPending, setShowPending] = useState(false);
|
||||||
const loginUser = getCachedProfileData();
|
const loginUser = getCachedProfileData();
|
||||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||||
// const { projects, loading: projectLoading } = useProjects();
|
const dispatch = useDispatch()
|
||||||
const {
|
const {
|
||||||
attendance,
|
attendance,
|
||||||
loading: attLoading,
|
loading: attLoading,
|
||||||
@ -38,7 +39,8 @@ const AttendancePage = () => {
|
|||||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||||
const [modelConfig, setModelConfig] = useState();
|
const [modelConfig, setModelConfig] = useState();
|
||||||
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
||||||
const dispatch = useDispatch();
|
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||||
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
markTime: "",
|
markTime: "",
|
||||||
@ -130,6 +132,12 @@ const AttendancePage = () => {
|
|||||||
const handleToggle = (event) => {
|
const handleToggle = (event) => {
|
||||||
setShowOnlyCheckout(event.target.checked);
|
setShowOnlyCheckout(event.target.checked);
|
||||||
};
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
if(selectedProject == null){
|
||||||
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
|
}
|
||||||
|
},[])
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (modelConfig !== null) {
|
if (modelConfig !== null) {
|
||||||
@ -140,18 +148,7 @@ const AttendancePage = () => {
|
|||||||
setAttendances(attendance);
|
setAttendances(attendance);
|
||||||
}, [attendance]);
|
}, [attendance]);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (selectedProject === 1 || selectedProject === undefined) {
|
|
||||||
// dispatch(setProjectId(loginUser?.projects[0]));
|
|
||||||
// }
|
|
||||||
// }, [selectedProject, loginUser?.projects]);
|
|
||||||
|
|
||||||
// Filter attendance data based on the toggle
|
|
||||||
// const filteredAttendance = showOnlyCheckout
|
|
||||||
// ? attendances?.filter(
|
|
||||||
// (att) => att?.checkOutTime !== null && att?.checkInTime !== null
|
|
||||||
// )
|
|
||||||
// : attendances;
|
|
||||||
const filteredAttendance = ShowPending
|
const filteredAttendance = ShowPending
|
||||||
? attendances?.filter(
|
? attendances?.filter(
|
||||||
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
||||||
@ -269,6 +266,7 @@ const AttendancePage = () => {
|
|||||||
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
|
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
|
||||||
{activeTab === "all" && (
|
{activeTab === "all" && (
|
||||||
<>
|
<>
|
||||||
|
{!attLoading && (
|
||||||
<div className="tab-pane fade show active py-0">
|
<div className="tab-pane fade show active py-0">
|
||||||
<Attendance
|
<Attendance
|
||||||
attendance={filteredAttendance}
|
attendance={filteredAttendance}
|
||||||
@ -278,6 +276,7 @@ const AttendancePage = () => {
|
|||||||
showOnlyCheckout={ShowPending}
|
showOnlyCheckout={ShowPending}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{!attLoading && filteredAttendance?.length === 0 && (
|
{!attLoading && filteredAttendance?.length === 0 && (
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
|
|||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import { useTaskList } from "../../hooks/useTasks";
|
import { useTaskList } from "../../hooks/useTasks";
|
||||||
import { useProjects } from "../../hooks/useProjects";
|
import { useProjectName, useProjects } from "../../hooks/useProjects";
|
||||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||||
import { ReportTask } from "../../components/Activities/ReportTask";
|
import { ReportTask } from "../../components/Activities/ReportTask";
|
||||||
import ReportTaskComments from "../../components/Activities/ReportTaskComments";
|
import ReportTaskComments from "../../components/Activities/ReportTaskComments";
|
||||||
@ -18,11 +18,11 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|||||||
import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
|
import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
|
||||||
|
|
||||||
const DailyTask = () => {
|
const DailyTask = () => {
|
||||||
const [searchParams] = useSearchParams();
|
|
||||||
const projectIdFromUrl = searchParams.get("project");
|
|
||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector(
|
||||||
(store) => store.localVariables.projectId
|
(store) => store.localVariables.projectId
|
||||||
);
|
);
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||||
|
|
||||||
|
|
||||||
const [filters, setFilters] = useState({
|
const [filters, setFilters] = useState({
|
||||||
@ -48,7 +48,11 @@ const DailyTask = () => {
|
|||||||
dateRange?.endDate || null
|
dateRange?.endDate || null
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(selectedProject == null){
|
||||||
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
|
}
|
||||||
|
},[])
|
||||||
const [TaskLists, setTaskLists] = useState([]);
|
const [TaskLists, setTaskLists] = useState([]);
|
||||||
const [dates, setDates] = useState([]);
|
const [dates, setDates] = useState([]);
|
||||||
const popoverRefs = useRef([]);
|
const popoverRefs = useRef([]);
|
||||||
|
|||||||
@ -1,9 +1,23 @@
|
|||||||
import React from "react";
|
import React,{useEffect} from "react";
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import InfraPlanning from "../../components/Activities/InfraPlanning";
|
import InfraPlanning from "../../components/Activities/InfraPlanning";
|
||||||
|
import { useProjectName } from "../../hooks/useProjects";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||||
|
|
||||||
|
|
||||||
const TaskPlannng = () => {
|
const TaskPlannng = () => {
|
||||||
|
const selectedProject = useSelector(
|
||||||
|
(store) => store.localVariables.projectId
|
||||||
|
);
|
||||||
|
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||||
|
useEffect(() => {
|
||||||
|
if(selectedProject == null){
|
||||||
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
|
}
|
||||||
|
},[])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||||
import "./ImageGallery.css";
|
import "./ImageGallery.css";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { useModal } from "./ModalContext";
|
import { useModal } from "./ModalContext";
|
||||||
import ImagePop from "./ImagePop";
|
import ImagePop from "./ImagePop";
|
||||||
import Avatar from "../../components/common/Avatar";
|
import Avatar from "../../components/common/Avatar";
|
||||||
@ -10,11 +10,22 @@ import eventBus from "../../services/eventBus";
|
|||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
import useImageGallery from "../../hooks/useImageGallery";
|
import useImageGallery from "../../hooks/useImageGallery";
|
||||||
|
import { useProjectName } from "../../hooks/useProjects";
|
||||||
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||||
|
|
||||||
const SCROLL_THRESHOLD = 5;
|
const SCROLL_THRESHOLD = 5;
|
||||||
|
|
||||||
const ImageGallery = () => {
|
const ImageGallery = () => {
|
||||||
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
||||||
|
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||||
|
useEffect(() => {
|
||||||
|
if(selectedProjectId == null){
|
||||||
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
|
}
|
||||||
|
},[])
|
||||||
|
|
||||||
const {
|
const {
|
||||||
images,
|
images,
|
||||||
allImagesData,
|
allImagesData,
|
||||||
|
|||||||
@ -5,11 +5,19 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
|
|||||||
import Avatar from "../../components/common/Avatar";
|
import Avatar from "../../components/common/Avatar";
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
import ManageEmp from "../../components/Employee/ManageRole";
|
import ManageEmp from "../../components/Employee/ManageRole";
|
||||||
import { useEmployeesAllOrByProjectId, useSuspendEmployee } from "../../hooks/useEmployees";
|
import {
|
||||||
import { useProjects } from "../../hooks/useProjects";
|
useEmployeesAllOrByProjectId,
|
||||||
|
useSuspendEmployee,
|
||||||
|
} from "../../hooks/useEmployees";
|
||||||
|
import { useProjectName, useProjects } from "../../hooks/useProjects";
|
||||||
import { useProfile } from "../../hooks/useProfile";
|
import { useProfile } from "../../hooks/useProfile";
|
||||||
import { hasUserPermission } from "../../utils/authUtils";
|
import { hasUserPermission } from "../../utils/authUtils";
|
||||||
import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES, VIEW_ALL_EMPLOYEES, VIEW_TEAM_MEMBERS } from "../../utils/constants";
|
import {
|
||||||
|
ITEMS_PER_PAGE,
|
||||||
|
MANAGE_EMPLOYEES,
|
||||||
|
VIEW_ALL_EMPLOYEES,
|
||||||
|
VIEW_TEAM_MEMBERS,
|
||||||
|
} from "../../utils/constants";
|
||||||
import { clearCacheKey } from "../../slices/apiDataManager";
|
import { clearCacheKey } from "../../slices/apiDataManager";
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
|
import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
|
||||||
@ -22,16 +30,20 @@ import {
|
|||||||
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||||
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
||||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||||
import { useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import { newlineChars } from "pdf-lib";
|
import { newlineChars } from "pdf-lib";
|
||||||
import GlobalModel from "../../components/common/GlobalModel";
|
import GlobalModel from "../../components/common/GlobalModel";
|
||||||
import usePagination from "../../hooks/usePagination";
|
import usePagination from "../../hooks/usePagination";
|
||||||
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||||
|
|
||||||
const EmployeeList = () => {
|
const EmployeeList = () => {
|
||||||
const selectedProjectId = useSelector(
|
const selectedProjectId = useSelector(
|
||||||
(store) => store.localVariables.projectId
|
(store) => store.localVariables.projectId
|
||||||
);
|
);
|
||||||
|
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const [showInactive, setShowInactive] = useState(false);
|
const [showInactive, setShowInactive] = useState(false);
|
||||||
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
||||||
@ -44,8 +56,8 @@ const EmployeeList = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const [employeeList, setEmployeeList] = useState([]);
|
const [employeeList, setEmployeeList] = useState([]);
|
||||||
const [ modelConfig, setModelConfig ] = useState();
|
const [modelConfig, setModelConfig] = useState();
|
||||||
const [EmpForManageRole,setEmpForManageRole] = useState(null)
|
const [EmpForManageRole, setEmpForManageRole] = useState(null);
|
||||||
// const [currentPage, setCurrentPage] = useState(1);
|
// const [currentPage, setCurrentPage] = useState(1);
|
||||||
// const [itemsPerPage] = useState(ITEMS_PER_PAGE);
|
// const [itemsPerPage] = useState(ITEMS_PER_PAGE);
|
||||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||||
@ -55,22 +67,23 @@ const EmployeeList = () => {
|
|||||||
const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
|
const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
|
||||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
|
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
|
||||||
const [ employeeLodaing, setemployeeLodaing ] = useState( false );
|
const [employeeLodaing, setemployeeLodaing] = useState(false);
|
||||||
const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS)
|
const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS);
|
||||||
const ViewAllEmployee = useHasUserPermission(VIEW_ALL_EMPLOYEES)
|
const ViewAllEmployee = useHasUserPermission(VIEW_ALL_EMPLOYEES);
|
||||||
const {
|
const { mutate: suspendEmployee, isPending: empLodaing } = useSuspendEmployee(
|
||||||
mutate: suspendEmployee,
|
{
|
||||||
isPending: empLodaing
|
|
||||||
} = useSuspendEmployee({
|
|
||||||
setIsDeleteModalOpen,
|
setIsDeleteModalOpen,
|
||||||
setemployeeLodaing
|
setemployeeLodaing,
|
||||||
} );
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedProjectId === null) {
|
||||||
|
dispatch(setProjectId(projectNames[0]?.id));
|
||||||
|
}
|
||||||
|
}, [selectedProjectId]);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
|
||||||
const applySearchFilter = (data, text) => {
|
const applySearchFilter = (data, text) => {
|
||||||
if (!text) {
|
if (!text) {
|
||||||
return data;
|
return data;
|
||||||
@ -99,73 +112,25 @@ const EmployeeList = () => {
|
|||||||
jobRole.includes(lowercasedText)
|
jobRole.includes(lowercasedText)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleSearch = (e) => {
|
const handleSearch = (e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
setSearchText(value);
|
setSearchText(value);
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
|
||||||
const filtered = applySearchFilter(employeeList, searchText);
|
|
||||||
setFilteredData(filtered);
|
|
||||||
}, [searchText, employeeList]);
|
|
||||||
|
|
||||||
|
|
||||||
const displayData = searchText ? filteredData : employeeList;
|
const displayData = searchText ? filteredData : employeeList;
|
||||||
const { currentPage, totalPages, currentItems, paginate,setCurrentPage } = usePagination(
|
const { currentPage, totalPages, currentItems, paginate, setCurrentPage } =
|
||||||
displayData,
|
usePagination(displayData, ITEMS_PER_PAGE);
|
||||||
ITEMS_PER_PAGE
|
|
||||||
);
|
|
||||||
const openModal = () => {
|
const openModal = () => {
|
||||||
setIsCreateModalOpen(true);
|
setIsCreateModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!loading && Array.isArray(employees)) {
|
|
||||||
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((prevList) => {
|
|
||||||
const prevJSON = JSON.stringify(prevList);
|
|
||||||
const nextJSON = JSON.stringify(sorted);
|
|
||||||
if (prevJSON !== nextJSON) {
|
|
||||||
return sorted;
|
|
||||||
}
|
|
||||||
return prevList;
|
|
||||||
});
|
|
||||||
|
|
||||||
setFilteredData((prev) => {
|
|
||||||
const prevJSON = JSON.stringify(prev);
|
|
||||||
const nextJSON = JSON.stringify(sorted);
|
|
||||||
if (prevJSON !== nextJSON) {
|
|
||||||
return sorted;
|
|
||||||
}
|
|
||||||
return prev;
|
|
||||||
});
|
|
||||||
|
|
||||||
// set currentPage to 1 only if needed
|
|
||||||
setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
|
|
||||||
}
|
|
||||||
}, [loading, employees, selectedProjectId, showAllEmployees]);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleConfigData = (config) => {
|
const handleConfigData = (config) => {
|
||||||
setModelConfig(config);
|
setModelConfig(config);
|
||||||
};
|
};
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (modelConfig !== null) {
|
|
||||||
// openModal();
|
|
||||||
// }
|
|
||||||
// }, [modelConfig, isCreateModalOpen]);
|
|
||||||
|
|
||||||
const tableRef = useRef(null);
|
const tableRef = useRef(null);
|
||||||
const handleExport = (type) => {
|
const handleExport = (type) => {
|
||||||
if (!currentItems || currentItems.length === 0) return;
|
if (!currentItems || currentItems.length === 0) return;
|
||||||
@ -190,15 +155,17 @@ useEffect(() => {
|
|||||||
|
|
||||||
const handleToggle = (e) => {
|
const handleToggle = (e) => {
|
||||||
setShowInactive(e.target.checked);
|
setShowInactive(e.target.checked);
|
||||||
recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
|
recallEmployeeData(
|
||||||
|
e.target.checked,
|
||||||
|
showAllEmployees ? null : selectedProjectId
|
||||||
|
); // Use selectedProjectId here
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAllEmployeesToggle = (e) => {
|
const handleAllEmployeesToggle = (e) => {
|
||||||
const isChecked = e.target.checked;
|
const isChecked = e.target.checked;
|
||||||
setShowInactive(false);
|
setShowInactive(false);
|
||||||
setShowAllEmployees(isChecked);
|
setShowAllEmployees(isChecked);
|
||||||
|
};
|
||||||
};
|
|
||||||
|
|
||||||
const handleEmployeeModel = (id) => {
|
const handleEmployeeModel = (id) => {
|
||||||
setSelecedEmployeeId(id);
|
setSelecedEmployeeId(id);
|
||||||
@ -209,6 +176,43 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
setSelectedEmpFordelete(employee);
|
setSelectedEmpFordelete(employee);
|
||||||
setIsDeleteModalOpen(true);
|
setIsDeleteModalOpen(true);
|
||||||
};
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
const filtered = applySearchFilter(employeeList, searchText);
|
||||||
|
setFilteredData(filtered);
|
||||||
|
}, [searchText, employeeList]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!loading && Array.isArray(employees)) {
|
||||||
|
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((prevList) => {
|
||||||
|
const prevJSON = JSON.stringify(prevList);
|
||||||
|
const nextJSON = JSON.stringify(sorted);
|
||||||
|
if (prevJSON !== nextJSON) {
|
||||||
|
return sorted;
|
||||||
|
}
|
||||||
|
return prevList;
|
||||||
|
});
|
||||||
|
|
||||||
|
setFilteredData((prev) => {
|
||||||
|
const prevJSON = JSON.stringify(prev);
|
||||||
|
const nextJSON = JSON.stringify(sorted);
|
||||||
|
if (prevJSON !== nextJSON) {
|
||||||
|
return sorted;
|
||||||
|
}
|
||||||
|
return prev;
|
||||||
|
});
|
||||||
|
|
||||||
|
setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
|
||||||
|
}
|
||||||
|
}, [loading, employees, selectedProjectId, showAllEmployees]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!showAllEmployees) {
|
if (!showAllEmployees) {
|
||||||
@ -218,32 +222,45 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
|
|
||||||
const handler = useCallback(
|
const handler = useCallback(
|
||||||
(msg) => {
|
(msg) => {
|
||||||
if(employees.some((item) => item.id == msg.employeeId)){
|
if (employees.some((item) => item.id == msg.employeeId)) {
|
||||||
setEmployeeList([]);
|
setEmployeeList([]);
|
||||||
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
|
recallEmployeeData(
|
||||||
|
showInactive,
|
||||||
|
showAllEmployees ? null : selectedProjectId
|
||||||
|
); // Use selectedProjectId here
|
||||||
}
|
}
|
||||||
},[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
|
},
|
||||||
|
[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
eventBus.on("employee",handler);
|
eventBus.on("employee", handler);
|
||||||
return () => eventBus.off("employee",handler)
|
return () => eventBus.off("employee", handler);
|
||||||
},[handler])
|
}, [handler]);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{EmpForManageRole && (
|
{EmpForManageRole && (
|
||||||
<GlobalModel isOpen={EmpForManageRole} closeModal={() => setEmpForManageRole( null )}>
|
<GlobalModel
|
||||||
<ManageEmp employeeId={EmpForManageRole} onClosed={()=>setEmpForManageRole(null)} />
|
isOpen={EmpForManageRole}
|
||||||
|
closeModal={() => setEmpForManageRole(null)}
|
||||||
|
>
|
||||||
|
<ManageEmp
|
||||||
|
employeeId={EmpForManageRole}
|
||||||
|
onClosed={() => setEmpForManageRole(null)}
|
||||||
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{showModal && (
|
{showModal && (
|
||||||
<GlobalModel isOpen={showModal} size="lg" closeModal={()=>setShowModal(false)}>
|
<GlobalModel
|
||||||
|
isOpen={showModal}
|
||||||
|
size="lg"
|
||||||
|
closeModal={() => setShowModal(false)}
|
||||||
|
>
|
||||||
<ManageEmployee
|
<ManageEmployee
|
||||||
employeeId={selectedEmployeeId}
|
employeeId={selectedEmployeeId}
|
||||||
onClosed={() => setShowModal( false )}
|
onClosed={() => setShowModal(false)}
|
||||||
IsAllEmployee={showAllEmployees}
|
IsAllEmployee={showAllEmployees}
|
||||||
/>
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
@ -282,11 +299,10 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
]}
|
]}
|
||||||
></Breadcrumb>
|
></Breadcrumb>
|
||||||
|
|
||||||
|
{ViewTeamMember ? (
|
||||||
{ViewTeamMember ? (<div className="row">
|
<div className="row">
|
||||||
<div className="card ">
|
<div className="card ">
|
||||||
<div className="card-datatable table-responsive pt-2">
|
<div className="card-datatable table-responsive pt-2">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id="DataTables_Table_0_wrapper"
|
id="DataTables_Table_0_wrapper"
|
||||||
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||||
@ -306,11 +322,14 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
checked={showAllEmployees}
|
checked={showAllEmployees}
|
||||||
onChange={handleAllEmployeesToggle}
|
onChange={handleAllEmployeesToggle}
|
||||||
/>
|
/>
|
||||||
<label className="form-check-label ms-0" htmlFor="allEmployeesCheckbox">
|
<label
|
||||||
|
className="form-check-label ms-0"
|
||||||
|
htmlFor="allEmployeesCheckbox"
|
||||||
|
>
|
||||||
All Employees
|
All Employees
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
) }
|
)}
|
||||||
|
|
||||||
{/* Show Inactive Employees Switch */}
|
{/* Show Inactive Employees Switch */}
|
||||||
{showAllEmployees && (
|
{showAllEmployees && (
|
||||||
@ -323,12 +342,14 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
checked={showInactive}
|
checked={showInactive}
|
||||||
onChange={handleToggle}
|
onChange={handleToggle}
|
||||||
/>
|
/>
|
||||||
<label className="form-check-label ms-0" htmlFor="inactiveEmployeesCheckbox">
|
<label
|
||||||
|
className="form-check-label ms-0"
|
||||||
|
htmlFor="inactiveEmployeesCheckbox"
|
||||||
|
>
|
||||||
Show Inactive Employees
|
Show Inactive Employees
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right side: Search + Export + Add Employee */}
|
{/* Right side: Search + Export + Add Employee */}
|
||||||
@ -360,22 +381,38 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
</button>
|
</button>
|
||||||
<ul className="dropdown-menu">
|
<ul className="dropdown-menu">
|
||||||
<li>
|
<li>
|
||||||
<a className="dropdown-item" href="#" onClick={() => handleExport("print")}>
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("print")}
|
||||||
|
>
|
||||||
<i className="bx bx-printer me-1"></i> Print
|
<i className="bx bx-printer me-1"></i> Print
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a className="dropdown-item" href="#" onClick={() => handleExport("csv")}>
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("csv")}
|
||||||
|
>
|
||||||
<i className="bx bx-file me-1"></i> CSV
|
<i className="bx bx-file me-1"></i> CSV
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a className="dropdown-item" href="#" onClick={() => handleExport("excel")}>
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("excel")}
|
||||||
|
>
|
||||||
<i className="bx bxs-file-export me-1"></i> Excel
|
<i className="bx bxs-file-export me-1"></i> Excel
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a className="dropdown-item" href="#" onClick={() => handleExport("pdf")}>
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("pdf")}
|
||||||
|
>
|
||||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -390,7 +427,9 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
onClick={() => handleEmployeeModel(null)}
|
onClick={() => handleEmployeeModel(null)}
|
||||||
>
|
>
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
<span className="d-none d-md-inline-block">Add New Employee</span>
|
<span className="d-none d-md-inline-block">
|
||||||
|
Add New Employee
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -471,7 +510,8 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
Status
|
Status
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
className={`sorting_disabled ${!Manage_Employee && "d-none"
|
className={`sorting_disabled ${
|
||||||
|
!Manage_Employee && "d-none"
|
||||||
}`}
|
}`}
|
||||||
rowSpan="1"
|
rowSpan="1"
|
||||||
colSpan="1"
|
colSpan="1"
|
||||||
@ -491,7 +531,10 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
{/* Conditional messages for no data or no search results */}
|
{/* Conditional messages for no data or no search results */}
|
||||||
{!loading && displayData?.length === 0 && searchText && !showAllEmployees ? (
|
{!loading &&
|
||||||
|
displayData?.length === 0 &&
|
||||||
|
searchText &&
|
||||||
|
!showAllEmployees ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={8}>
|
<td colSpan={8}>
|
||||||
<small className="muted">
|
<small className="muted">
|
||||||
@ -500,7 +543,9 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
) : null}
|
) : null}
|
||||||
{!loading && displayData?.length === 0 && (!searchText || showAllEmployees) ? (
|
{!loading &&
|
||||||
|
displayData?.length === 0 &&
|
||||||
|
(!searchText || showAllEmployees) ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td
|
||||||
colSpan={8}
|
colSpan={8}
|
||||||
@ -512,7 +557,9 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{/* Render current items */}
|
{/* Render current items */}
|
||||||
{currentItems && !loading && currentItems.map((item) => (
|
{currentItems &&
|
||||||
|
!loading &&
|
||||||
|
currentItems.map((item) => (
|
||||||
<tr className="odd" key={item.id}>
|
<tr className="odd" key={item.id}>
|
||||||
<td className="sorting_1" colSpan={2}>
|
<td className="sorting_1" colSpan={2}>
|
||||||
<div className="d-flex justify-content-start align-items-center user-name">
|
<div className="d-flex justify-content-start align-items-center user-name">
|
||||||
@ -598,7 +645,8 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
}
|
}
|
||||||
className="dropdown-item py-1"
|
className="dropdown-item py-1"
|
||||||
>
|
>
|
||||||
<i className="bx bx-detail bx-sm"></i> View
|
<i className="bx bx-detail bx-sm"></i>{" "}
|
||||||
|
View
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="dropdown-item py-1"
|
className="dropdown-item py-1"
|
||||||
@ -649,7 +697,9 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
<nav aria-label="Page">
|
<nav aria-label="Page">
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||||
<li
|
<li
|
||||||
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
|
className={`page-item ${
|
||||||
|
currentPage === 1 ? "disabled" : ""
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="page-link btn-xs"
|
className="page-link btn-xs"
|
||||||
@ -662,7 +712,8 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
{[...Array(totalPages)]?.map((_, index) => (
|
{[...Array(totalPages)]?.map((_, index) => (
|
||||||
<li
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
className={`page-item ${
|
||||||
|
currentPage === index + 1 ? "active" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
@ -675,7 +726,8 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
))}
|
))}
|
||||||
|
|
||||||
<li
|
<li
|
||||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
className={`page-item ${
|
||||||
|
currentPage === totalPages ? "disabled" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
@ -691,11 +743,15 @@ const handleAllEmployeesToggle = (e) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>):(
|
</div>
|
||||||
|
) : (
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<i className="fa-solid fa-triangle-exclamation fs-5"></i>
|
<i className="fa-solid fa-triangle-exclamation fs-5"></i>
|
||||||
<p>Access Denied: You don't have permission to perform this action. !</p>
|
<p>
|
||||||
|
Access Denied: You don't have permission to perform this action.
|
||||||
|
!
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -1,11 +1,9 @@
|
|||||||
import { useParams } from "react-router-dom";
|
import { useSelector } from "react-redux"; // Import useSelector
|
||||||
import React, { useState, useEffect, useCallback } from "react";
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
|
|
||||||
import ActivityTimeline from "../../components/Project/ActivityTimeline";
|
|
||||||
import ProjectOverview from "../../components/Project/ProjectOverview";
|
import ProjectOverview from "../../components/Project/ProjectOverview";
|
||||||
import AboutProject from "../../components/Project/AboutProject";
|
import AboutProject from "../../components/Project/AboutProject";
|
||||||
import ProjectNav from "../../components/Project/ProjectNav";
|
import ProjectNav from "../../components/Project/ProjectNav";
|
||||||
import ProjectBanner from "../../components/Project/ProjectBanner";
|
|
||||||
import Teams from "../../components/Project/Teams";
|
import Teams from "../../components/Project/Teams";
|
||||||
import ProjectInfra from "../../components/Project/ProjectInfra";
|
import ProjectInfra from "../../components/Project/ProjectInfra";
|
||||||
import Loader from "../../components/common/Loader";
|
import Loader from "../../components/common/Loader";
|
||||||
@ -16,171 +14,115 @@ import {
|
|||||||
clearCacheKey,
|
clearCacheKey,
|
||||||
getCachedData,
|
getCachedData,
|
||||||
} from "../../slices/apiDataManager";
|
} from "../../slices/apiDataManager";
|
||||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
|
||||||
import { ActivityeRepository } from "../../repositories/MastersRepository";
|
|
||||||
import "./ProjectDetails.css";
|
import "./ProjectDetails.css";
|
||||||
import {
|
import {
|
||||||
useEmployeesByProjectAllocated,
|
|
||||||
useProjectDetails,
|
useProjectDetails,
|
||||||
} from "../../hooks/useProjects";
|
} from "../../hooks/useProjects";
|
||||||
import { useDispatch } from "react-redux";
|
|
||||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
|
||||||
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||||
import Directory from "../Directory/Directory";
|
import Directory from "../Directory/Directory";
|
||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
|
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
|
||||||
|
|
||||||
const ProjectDetails = () => {
|
const ProjectDetails = () => {
|
||||||
let { projectId } = useParams();
|
|
||||||
|
|
||||||
|
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
projects_Details,
|
projects_Details,
|
||||||
loading: projectLoading,
|
loading: projectLoading,
|
||||||
error: ProjectError,
|
error: projectError,
|
||||||
refetch
|
refetch,
|
||||||
} = useProjectDetails(projectId);
|
} = useProjectDetails(projectId);
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [project, setProject] = useState(null);
|
|
||||||
// const [projectDetails, setProjectDetails] = useState(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState("");
|
|
||||||
|
|
||||||
// const fetchData = async () => {
|
|
||||||
// const project_cache = getCachedData("projectInfo");
|
|
||||||
// if (!project_cache || project_cache?.projectId !== projectId) {
|
|
||||||
// ProjectRepository.getProjectByprojectId(projectId)
|
|
||||||
// .then((response) => {
|
|
||||||
// setProjectDetails(response.data);
|
|
||||||
// setProject(response.data);
|
|
||||||
// cacheData("projectInfo", { projectId, data: response.data });
|
|
||||||
// setLoading(false);
|
|
||||||
// })
|
|
||||||
// .catch((error) => {
|
|
||||||
// console.error(error);
|
|
||||||
// setError("Failed to fetch data.");
|
|
||||||
// setLoading(false);
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// setProjectDetails(project_cache.data);
|
|
||||||
// setProject(project_cache.data);
|
|
||||||
// setLoading(false);
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
|
|
||||||
const [activePill, setActivePill] = useState("profile");
|
const [activePill, setActivePill] = useState("profile");
|
||||||
|
|
||||||
const handlePillClick = (pillKey) => {
|
|
||||||
setActivePill(pillKey);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDataChange = (data) => {
|
|
||||||
fetchData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderContent = () => {
|
|
||||||
if (projectLoading) return <Loader></Loader>;
|
|
||||||
switch (activePill) {
|
|
||||||
case "profile": {
|
|
||||||
return (
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-xl-4 col-lg-5 col-md-5 mt-5">
|
|
||||||
<AboutProject ></AboutProject>
|
|
||||||
</div>
|
|
||||||
<div className="col-xl-4 col-lg-5 col-md-5 mt-5">
|
|
||||||
<ProjectOverview project={projectId} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
case "teams": {
|
|
||||||
return (
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-lg-12 col-xl-12">
|
|
||||||
{/* Teams */}
|
|
||||||
<Teams ></Teams>
|
|
||||||
{/* Teams */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "infra": {
|
|
||||||
return (
|
|
||||||
<ProjectInfra
|
|
||||||
data={projects_Details}
|
|
||||||
onDataChange={handleDataChange}
|
|
||||||
></ProjectInfra>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "workplan": {
|
|
||||||
return (
|
|
||||||
<WorkPlan
|
|
||||||
data={projects_Details}
|
|
||||||
onDataChange={handleDataChange}
|
|
||||||
></WorkPlan>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "directory": {
|
|
||||||
return (
|
|
||||||
<div className="row">
|
|
||||||
<Directory IsPage={false} prefernceContacts={projects_Details.id} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
default:
|
|
||||||
return <ComingSoonPage></ComingSoonPage>;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
dispatch(setProjectId(projectId));
|
|
||||||
|
|
||||||
}, [projects_Details, projectId]);
|
|
||||||
|
|
||||||
const handler = useCallback(
|
const handler = useCallback(
|
||||||
(msg) => {
|
(msg) => {
|
||||||
if (msg.keyword === "Update_Project" && projects_Details.id === msg.response.id) {
|
if (msg.keyword === "Update_Project" && projects_Details?.id === msg.response.id) {
|
||||||
refetch()
|
refetch();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[projects_Details, handleDataChange]
|
[projects_Details, refetch]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
eventBus.on("project", handler);
|
eventBus.on("project", handler);
|
||||||
return () => eventBus.off("project", handler);
|
return () => eventBus.off("project", handler);
|
||||||
}, [handler]);
|
}, [handler]);
|
||||||
|
|
||||||
|
const handlePillClick = (pillKey) => {
|
||||||
|
setActivePill(pillKey);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderContent = () => {
|
||||||
|
if (projectLoading || !projects_Details) return <Loader />;
|
||||||
|
|
||||||
|
switch (activePill) {
|
||||||
|
case "profile":
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{}
|
<div className="row">
|
||||||
|
<div className="col-lg-4 col-md-5 mt-5">
|
||||||
|
<AboutProject></AboutProject>
|
||||||
|
<ProjectOverview project={projectId} />
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-8 col-md-7 mt-5">
|
||||||
|
<ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
case "teams":
|
||||||
|
return (
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-12">
|
||||||
|
<Teams />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
case "infra":
|
||||||
|
return (
|
||||||
|
<ProjectInfra data={projects_Details} onDataChange={refetch} />
|
||||||
|
);
|
||||||
|
|
||||||
|
case "workplan":
|
||||||
|
return (
|
||||||
|
<WorkPlan data={projects_Details} onDataChange={refetch} />
|
||||||
|
);
|
||||||
|
|
||||||
|
case "directory":
|
||||||
|
return (
|
||||||
|
<div className="row mt-2">
|
||||||
|
<Directory IsPage={false} prefernceContacts={projects_Details.id} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
default:
|
||||||
|
return <ComingSoonPage />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<Breadcrumb
|
<Breadcrumb
|
||||||
data={[
|
data={[
|
||||||
{ label: "Home", link: "/dashboard" },
|
{ label: "Home", link: "/dashboard" },
|
||||||
{ label: "Projects", link: "/projects" },
|
{ label: "Projects", link: "/projects" },
|
||||||
{ label: `${project?.name ? project?.name : ""}`, link: null },
|
{ label: projects_Details?.name || "Project", link: null },
|
||||||
]}
|
]}
|
||||||
></Breadcrumb>
|
/>
|
||||||
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{projectLoading && <p>Loading....</p>}
|
<ProjectNav onPillClick={handlePillClick} activePill={activePill} />
|
||||||
{/* {!projectLoading && project && (
|
|
||||||
<ProjectBanner project_data={project}></ProjectBanner>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
<ProjectNav
|
|
||||||
onPillClick={handlePillClick}
|
|
||||||
activePill={activePill}
|
|
||||||
></ProjectNav>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row"></div>
|
|
||||||
|
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -5,11 +5,6 @@ import Breadcrumb from "../../components/common/Breadcrumb";
|
|||||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||||
import { useProjects, useCreateProject } from "../../hooks/useProjects";
|
import { useProjects, useCreateProject } from "../../hooks/useProjects";
|
||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
// import {
|
|
||||||
// getCachedData,
|
|
||||||
// cacheData,
|
|
||||||
// clearCacheKey,
|
|
||||||
// } from "../../slices/apiDataManager";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||||
import { useProfile } from "../../hooks/useProfile";
|
import { useProfile } from "../../hooks/useProfile";
|
||||||
import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
|
import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
|
||||||
@ -20,11 +15,15 @@ import { defaultCheckBoxAppearanceProvider } from "pdf-lib";
|
|||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation } from "@tanstack/react-query";
|
||||||
import usePagination from "../../hooks/usePagination";
|
import usePagination from "../../hooks/usePagination";
|
||||||
import GlobalModel from "../../components/common/GlobalModel";
|
import GlobalModel from "../../components/common/GlobalModel";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||||
|
|
||||||
const ProjectList = () => {
|
const ProjectList = () => {
|
||||||
const { profile: loginUser } = useProfile();
|
const { profile: loginUser } = useProfile();
|
||||||
const [listView, setListView] = useState(false);
|
const [listView, setListView] = useState(false);
|
||||||
const [showModal, setShowModal] = useState(false);
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
const { projects, loading, error, refetch } = useProjects();
|
const { projects, loading, error, refetch } = useProjects();
|
||||||
const [projectList, setProjectList] = useState([]);
|
const [projectList, setProjectList] = useState([]);
|
||||||
@ -75,6 +74,10 @@ const ProjectList = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if(selectedProject == null){
|
||||||
|
dispatch(setProjectId(projects[0]?.id));
|
||||||
|
}
|
||||||
|
|
||||||
if (!loading && projects) {
|
if (!loading && projects) {
|
||||||
sortingProject(projects);
|
sortingProject(projects);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -62,7 +62,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
|||||||
const handleClose = () => setShowModal(false);
|
const handleClose = () => setShowModal(false);
|
||||||
|
|
||||||
const handleViewProject = () => {
|
const handleViewProject = () => {
|
||||||
navigate(`/projects/${projectData.id}`);
|
navigate(`/projects/details`);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFormSubmit = (updatedProject) => {
|
const handleFormSubmit = (updatedProject) => {
|
||||||
@ -89,7 +89,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
|||||||
<td className="text-start" colSpan={5}>
|
<td className="text-start" colSpan={5}>
|
||||||
<span
|
<span
|
||||||
className="text-primary cursor-pointer"
|
className="text-primary cursor-pointer"
|
||||||
onClick={() => navigate(`/projects/${projectInfo.id}`)}
|
onClick={() => navigate(`/projects/details`)}
|
||||||
>
|
>
|
||||||
{projectInfo.shortName
|
{projectInfo.shortName
|
||||||
? `${projectInfo.name} (${projectInfo.shortName})`
|
? `${projectInfo.name} (${projectInfo.shortName})`
|
||||||
@ -162,7 +162,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
|||||||
<a
|
<a
|
||||||
aria-label="click to View details"
|
aria-label="click to View details"
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
onClick={() => navigate(`/projects/${projectInfo.id}`)}
|
onClick={() => navigate(`/projects/details`)}
|
||||||
>
|
>
|
||||||
<i className="bx bx-detail me-2"></i>
|
<i className="bx bx-detail me-2"></i>
|
||||||
<span className="align-left">View details</span>
|
<span className="align-left">View details</span>
|
||||||
|
|||||||
@ -63,7 +63,7 @@ const router = createBrowserRouter(
|
|||||||
{ path: "/", element: <Dashboard /> },
|
{ path: "/", element: <Dashboard /> },
|
||||||
{ path: "/dashboard", element: <Dashboard /> },
|
{ path: "/dashboard", element: <Dashboard /> },
|
||||||
{ path: "/projects", element: <ProjectList /> },
|
{ path: "/projects", element: <ProjectList /> },
|
||||||
{ path: "/projects/:projectId", element: <ProjectDetails /> },
|
{ path: "/projects/details", element: <ProjectDetails /> },
|
||||||
{ path: "/project/manage/:projectId", element: <ManageProject /> },
|
{ path: "/project/manage/:projectId", element: <ManageProject /> },
|
||||||
{ path: "/employees", element: <EmployeeList /> },
|
{ path: "/employees", element: <EmployeeList /> },
|
||||||
{ path: "/employee/:employeeId", element: <EmployeeProfile /> },
|
{ path: "/employee/:employeeId", element: <EmployeeProfile /> },
|
||||||
|
|||||||
@ -5,7 +5,7 @@ const localVariablesSlice = createSlice({
|
|||||||
initialState: {
|
initialState: {
|
||||||
selectedMaster:"Application Role",
|
selectedMaster:"Application Role",
|
||||||
regularizationCount:0,
|
regularizationCount:0,
|
||||||
projectId: "",
|
projectId: null,
|
||||||
reload:false
|
reload:false
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user