added choose all project option at dashboard

This commit is contained in:
pramod mahajan 2025-07-15 17:06:47 +05:30
parent 99f3ec19d3
commit 47e458fe7c
13 changed files with 908 additions and 661 deletions

View File

@ -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;

View File

@ -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

View File

@ -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)

View File

@ -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) && (

View File

@ -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;

View File

@ -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

View File

@ -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([]);

View File

@ -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 (
<>

View File

@ -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

View File

@ -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) => {

View File

@ -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);
}

View File

@ -5,7 +5,7 @@ const localVariablesSlice = createSlice({
initialState: {
selectedMaster:"Application Role",
regularizationCount:0,
projectId: "",
projectId: null,
reload:false
},