added choose all project option at dashboard
This commit is contained in:
parent
99f3ec19d3
commit
47e458fe7c
@ -1,55 +1,71 @@
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux"; // Import useSelector to access Redux state
|
||||
import {
|
||||
useDashboardProjectsCardData,
|
||||
useDashboardTeamsCardData,
|
||||
useDashboardTasksCardData,
|
||||
useDashboardProjectsCardData,
|
||||
useDashboardTeamsCardData,
|
||||
useDashboardTasksCardData,
|
||||
} from "../../hooks/useDashboard_Data";
|
||||
import Projects from "./Projects";
|
||||
import Teams from "./Teams";
|
||||
import TasksCard from "./Tasks";
|
||||
import ProjectCompletionChart from "./ProjectCompletionChart";
|
||||
import ProjectProgressChart from "./ProjectProgressChart";
|
||||
import ProjectOverview from "../Project/ProjectOverview";
|
||||
// import Attendance from "./Attendance";
|
||||
|
||||
const Dashboard = () => {
|
||||
const { projectsCardData } = useDashboardProjectsCardData();
|
||||
const { teamsCardData } = useDashboardTeamsCardData();
|
||||
const { tasksCardData } = useDashboardTasksCardData();
|
||||
const { projectsCardData } = useDashboardProjectsCardData();
|
||||
const { teamsCardData } = useDashboardTeamsCardData();
|
||||
const { tasksCardData } = useDashboardTasksCardData();
|
||||
|
||||
return (
|
||||
<div className="container-fluid mt-3">
|
||||
<div className="row gy-4">
|
||||
{/* Projects Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<Projects projectsCardData={projectsCardData} />
|
||||
</div>
|
||||
// Get the selected project ID from Redux store
|
||||
const selectedProjectId = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
|
||||
{/* Teams Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<Teams teamsCardData={teamsCardData} />
|
||||
</div>
|
||||
// Determine if "All Projects" is selected
|
||||
// selectedProjectId will be null when "All Projects" is chosen
|
||||
const isAllProjectsSelected = selectedProjectId === null;
|
||||
|
||||
{/* Tasks Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<TasksCard tasksCardData={tasksCardData} />
|
||||
</div>
|
||||
return (
|
||||
<div className="container-fluid mt-3">
|
||||
<div className="row gy-4">
|
||||
|
||||
{/* Bar Chart (Project Completion) */}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectCompletionChart />
|
||||
</div>
|
||||
{isAllProjectsSelected && (
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<Projects projectsCardData={projectsCardData} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Line Chart (Project Progress) */}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectProgressChart />
|
||||
</div>
|
||||
|
||||
{/* <div className="col-xxl-6 col-lg-6">
|
||||
<Attendance />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
|
||||
<Teams teamsCardData={teamsCardData} />
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<ProjectCompletionChart />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{! isAllProjectsSelected && (
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectOverview />
|
||||
</div>
|
||||
)}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectProgressChart />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
@ -27,9 +27,9 @@ const Header = () => {
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const isDashboard = location.pathname === "/dashboard";
|
||||
// const isDirectoryPath = location.pathname === "/directory";
|
||||
|
||||
const isDirectoryPath = /^\/directory$/.test(location.pathname);
|
||||
const isDashboard = /^\/dashboard$/.test(location.pathname);
|
||||
const getRole = (roles, joRoleId) => {
|
||||
if (!Array.isArray(roles)) return "User";
|
||||
let role = roles.find((role) => role.id === joRoleId);
|
||||
@ -37,7 +37,7 @@ const Header = () => {
|
||||
};
|
||||
|
||||
const handleLogout = (e) => {
|
||||
e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
|
||||
e.preventDefault();
|
||||
logout();
|
||||
};
|
||||
|
||||
@ -105,14 +105,18 @@ const Header = () => {
|
||||
selectedProject === undefined &&
|
||||
!getCachedData("hasReceived")
|
||||
) {
|
||||
dispatch(setProjectId(null)); // Set to null for "All Projects"
|
||||
if(isDashboard){
|
||||
dispatch(setProjectId(null));
|
||||
}else{
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
}
|
||||
}, [projectNames, selectedProject, dispatch]);
|
||||
|
||||
|
||||
/** Check if current page is project details page or directory page */
|
||||
// const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
|
||||
const isDirectoryPath = /^\/directory$/.test(location.pathname);
|
||||
|
||||
|
||||
const handler = useCallback(
|
||||
async (data) => {
|
||||
@ -141,12 +145,10 @@ const Header = () => {
|
||||
[HasManageProjectPermission, projectNames, fetchData]
|
||||
);
|
||||
|
||||
// Correct way to dispatch an action on mount
|
||||
useEffect(() => {
|
||||
dispatch(changeMaster("Job Role"));
|
||||
}, [dispatch]);
|
||||
|
||||
// Event bus listeners for project changes
|
||||
useEffect(() => {
|
||||
eventBus.on("assign_project_one", handler);
|
||||
eventBus.on("project", newProjectHandler);
|
||||
@ -174,7 +176,6 @@ const Header = () => {
|
||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||
id="navbar-collapse"
|
||||
>
|
||||
{/* Project Selection Dropdown */}
|
||||
{projectNames && !isDirectoryPath && (
|
||||
<div className="align-items-center">
|
||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||
@ -194,7 +195,7 @@ const Header = () => {
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
{/* Show "All Projects" only on dashboard */}
|
||||
|
||||
{isDashboard && (
|
||||
<li>
|
||||
<button
|
||||
@ -228,10 +229,7 @@ const Header = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Display project name on project details or directory pages */}
|
||||
{/* { (<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>)} */}
|
||||
|
||||
{/* User Profile and Shortcuts */}
|
||||
<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">
|
||||
<a
|
||||
|
@ -25,7 +25,7 @@ import GlobalModel from "../common/GlobalModel";
|
||||
|
||||
const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
|
||||
{
|
||||
const {projectId} = useParams()
|
||||
const projectId = useSelector((store)=>store.localVariables.projectId)
|
||||
const reloadedData = useSelector((store) => store.localVariables.reload);
|
||||
const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
|
||||
const {projectInfra,isLoading,error} = useProjectInfra(projectId)
|
||||
|
@ -60,7 +60,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
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>
|
||||
</li>
|
||||
{(DirAdmin || DireManager || DirUser) && (
|
||||
|
@ -1,15 +1,168 @@
|
||||
import React from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useProjects,
|
||||
} from "../../hooks/useProjects";
|
||||
import { formatNumber, getCompletionPercentage } from "../../utils/dateUtils";
|
||||
import ProgressBar from "../common/ProgressBar";
|
||||
import ReactApexChart from "react-apexcharts";
|
||||
import Chart from "react-apexcharts";
|
||||
|
||||
const ProjectOverview = ({ project }) => {
|
||||
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 (
|
||||
<div className="card mb-6">
|
||||
@ -20,71 +173,78 @@ const ProjectOverview = ({ project }) => {
|
||||
<span className="ms-2">Project Statistics</span>
|
||||
</h6>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled mb-0 mt-3 pt-1">
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Task Planned:</span>{" "}
|
||||
<span>{formatNumber(project_detail?.plannedWork)}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-star"></i>
|
||||
<span className="fw-medium mx-2">Task Completed:</span>{" "}
|
||||
<span>{formatNumber(project_detail?.completedWork)}</span>
|
||||
</li>
|
||||
<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"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled m-0 p-0">
|
||||
<li className="d-flex flex-wrap">
|
||||
<div className="w-100 d-flex flex-wrap">
|
||||
{/* Centered Chart */}
|
||||
<div className="w-100 d-flex justify-content-center mb-3">
|
||||
<div >
|
||||
<Chart
|
||||
options={radialBarOptions}
|
||||
series={radialBarOptions.series}
|
||||
type="radialBar"
|
||||
height="100%"
|
||||
/>
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectOverview;
|
||||
export default ProjectOverview;
|
@ -21,13 +21,14 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
const [ShowPending, setShowPending] = useState(false);
|
||||
const loginUser = getCachedProfileData();
|
||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
// const { projects, loading: projectLoading } = useProjects();
|
||||
const dispatch = useDispatch()
|
||||
const {
|
||||
attendance,
|
||||
loading: attLoading,
|
||||
@ -38,7 +39,8 @@ const AttendancePage = () => {
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [modelConfig, setModelConfig] = useState();
|
||||
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
||||
const dispatch = useDispatch();
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
markTime: "",
|
||||
@ -130,7 +132,13 @@ const AttendancePage = () => {
|
||||
const handleToggle = (event) => {
|
||||
setShowOnlyCheckout(event.target.checked);
|
||||
};
|
||||
useEffect(() => {
|
||||
if(selectedProject == null){
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
},[])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
openModel();
|
||||
@ -140,18 +148,7 @@ const AttendancePage = () => {
|
||||
setAttendances(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
|
||||
? attendances?.filter(
|
||||
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
||||
|
@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { useTaskList } from "../../hooks/useTasks";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useProjectName, useProjects } from "../../hooks/useProjects";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { ReportTask } from "../../components/Activities/ReportTask";
|
||||
import ReportTaskComments from "../../components/Activities/ReportTaskComments";
|
||||
@ -18,11 +18,11 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
|
||||
|
||||
const DailyTask = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const projectIdFromUrl = searchParams.get("project");
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const dispatch = useDispatch()
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
|
||||
const [filters, setFilters] = useState({
|
||||
@ -48,7 +48,11 @@ const DailyTask = () => {
|
||||
dateRange?.endDate || null
|
||||
);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if(selectedProject == null){
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
},[])
|
||||
const [TaskLists, setTaskLists] = useState([]);
|
||||
const [dates, setDates] = useState([]);
|
||||
const popoverRefs = useRef([]);
|
||||
|
@ -1,9 +1,23 @@
|
||||
import React from "react";
|
||||
import React,{useEffect} from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
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 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 (
|
||||
<>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import "./ImageGallery.css";
|
||||
import moment from "moment";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useModal } from "./ModalContext";
|
||||
import ImagePop from "./ImagePop";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
@ -10,11 +10,22 @@ import eventBus from "../../services/eventBus";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import useImageGallery from "../../hooks/useImageGallery";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
|
||||
const SCROLL_THRESHOLD = 5;
|
||||
|
||||
const ImageGallery = () => {
|
||||
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 {
|
||||
images,
|
||||
allImagesData,
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,9 @@
|
||||
import { useSelector } from "react-redux"; // Import useSelector
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
|
||||
import ActivityTimeline from "../../components/Project/ActivityTimeline";
|
||||
import ProjectOverview from "../../components/Project/ProjectOverview";
|
||||
import AboutProject from "../../components/Project/AboutProject";
|
||||
import ProjectNav from "../../components/Project/ProjectNav";
|
||||
import ProjectBanner from "../../components/Project/ProjectBanner";
|
||||
import Teams from "../../components/Project/Teams";
|
||||
import ProjectInfra from "../../components/Project/ProjectInfra";
|
||||
import Loader from "../../components/common/Loader";
|
||||
@ -16,25 +14,18 @@ import {
|
||||
clearCacheKey,
|
||||
getCachedData,
|
||||
} from "../../slices/apiDataManager";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { ActivityeRepository } from "../../repositories/MastersRepository";
|
||||
import "./ProjectDetails.css";
|
||||
import {
|
||||
useEmployeesByProjectAllocated,
|
||||
useProjectDetails,
|
||||
} from "../../hooks/useProjects";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||
import Directory from "../Directory/Directory";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
|
||||
|
||||
const ProjectDetails = () => {
|
||||
// const { projectId } = useParams(); // REMOVE THIS LINE
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// GET projectId FROM REDUX STORE
|
||||
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
|
||||
const {
|
||||
@ -46,10 +37,7 @@ const ProjectDetails = () => {
|
||||
|
||||
const [activePill, setActivePill] = useState("profile");
|
||||
|
||||
// REMOVE THIS useEffect AS projectId IS NOW FROM REDUX
|
||||
// useEffect(() => {
|
||||
// if (projectId) dispatch(setProjectId(projectId));
|
||||
// }, [projectId, dispatch]);
|
||||
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
|
@ -5,11 +5,6 @@ import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { useProjects, useCreateProject } from "../../hooks/useProjects";
|
||||
import showToast from "../../services/toastService";
|
||||
// import {
|
||||
// getCachedData,
|
||||
// cacheData,
|
||||
// clearCacheKey,
|
||||
// } from "../../slices/apiDataManager";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
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 usePagination from "../../hooks/usePagination";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
|
||||
const ProjectList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
const [listView, setListView] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const { projects, loading, error, refetch } = useProjects();
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
@ -75,6 +74,10 @@ const ProjectList = () => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(selectedProject == null){
|
||||
dispatch(setProjectId(projects[0]?.id));
|
||||
}
|
||||
|
||||
if (!loading && projects) {
|
||||
sortingProject(projects);
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ const localVariablesSlice = createSlice({
|
||||
initialState: {
|
||||
selectedMaster:"Application Role",
|
||||
regularizationCount:0,
|
||||
projectId: "",
|
||||
projectId: null,
|
||||
reload:false
|
||||
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user