Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into react-query-v2

public/assets/vendor/css/core.css

@@ -836,7 +836,7 @@ progress {
 }
 
 .row {
-  --bs-gutter-x: 0.500rem;
+  --bs-gutter-x: 1.625rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;

src/components/Activities/Regularization.jsx

@@ -92,8 +92,8 @@ const Regularization = ({ handleRequest }) => {
           )} */}
 
           {!loading &&
-            (regularizes?.length > 0 ? (
+            (currentItems?.length > 0 ? (
-              regularizes?.map((att, index) => (
+              currentItems?.map((att, index) => (
                 <tr key={index}>
                   <td colSpan={2}>
                     <div className="d-flex justify-content-start align-items-center">

src/components/Charts/Skelton.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const ChartSkeleton = () => {
+  return (
+    <div className="w-100">
+     
+      <div
+        className="bg-secondary bg-opacity-10 rounded"
+        style={{ height: "300px", width: "100%" }}
+      />
+    </div>
+  );
+};
+
+export default ChartSkeleton;

src/components/Charts/flatColor.js

@@ -0,0 +1,14 @@
+const flatColors = [
+    "#E57373", "#64B5F6", "#81C784", "#FFB74D",
+    "#FF8A65", "#4DB6AC", "#DCE775",
+    "#7986CB", "#AED581", "#4FC3F7", "#F06292", "#E0E0E0",
+    "#FFF176", "#A5D6A7", "#90CAF9", "#FFAB91",
+    "#E6EE9C", "#FFCC80", "#80DEEA", "#B0BEC5",
+    "#EF9A9A", "#FFCDD2", "#C5CAE9", "#F8BBD0", "#D1C4E9",
+    "#FFF9C4", "#C8E6C9", "#BBDEFB", "#FFECB3",
+    "#B2EBF2", "#CFD8DC", "#FBE9E7", "#FFFDE7",
+    "#DCEDC8", "#B3E5FC", "#FFF3E0", "#FCE4EC",
+    "#E0F7FA", "#ECEFF1", "#FFE0B2", "#FFD54F", "#FFA726",
+];
+
+export default flatColors;

src/components/Dashboard/AttendanceChart.jsx

@@ -0,0 +1,185 @@
+import React, { useState, useMemo } from "react";
+import { useSelector } from "react-redux";
+import ReactApexChart from "react-apexcharts";
+import { useAttendanceOverviewData } from "../../hooks/useDashboard_Data";
+import flatColors from "../Charts/flatColor";
+import ChartSkeleton from "../Charts/Skelton";
+
+const formatDate = (dateStr) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "long",
+    });
+};
+
+const AttendanceOverview = () => {
+    const [dayRange, setDayRange] = useState(7);
+    const [view, setView] = useState("chart");
+
+    const projectId = useSelector((store) => store.localVariables.projectId);
+    const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(projectId, dayRange);
+
+    const { tableData, roles, dates } = useMemo(() => {
+        const map = new Map();
+
+        attendanceOverviewData.forEach((entry) => {
+            const date = formatDate(entry.date);
+            if (!map.has(date)) map.set(date, {});
+            map.get(date)[entry.role.trim()] = entry.present;
+        });
+
+        const uniqueRoles = [...new Set(attendanceOverviewData.map((e) => e.role.trim()))];
+        const sortedDates = [...map.keys()];
+        const data = sortedDates.map((date) => {
+            const row = { date };
+            uniqueRoles.forEach((role) => {
+                row[role] = map.get(date)?.[role] ?? 0;
+            });
+            return row;
+        });
+
+        return {
+            tableData: data,
+            roles: uniqueRoles,
+            dates: sortedDates,
+        };
+    }, [attendanceOverviewData]);
+
+    const chartSeries = roles.map((role) => ({
+        name: role,
+        data: tableData.map((row) => row[role]),
+    }));
+
+    const chartOptions = {
+        chart: {
+            type: "bar",
+            stacked: true,
+            height: 400,
+            toolbar: { show: false },
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 2,
+                columnWidth: "60%",
+            },
+        },
+        xaxis: {
+            categories: tableData.map((row) => row.date),
+        },
+        yaxis: {
+            show: true,
+            axisBorder: {
+                show: true,
+                color: '#78909C',
+                offsetX: 0,
+                offsetY: 0
+            },
+            axisTicks: {
+                show: true,
+                borderType: 'solid',
+                color: '#78909C',
+                width: 6,
+                offsetX: 0,
+                offsetY: 0
+            },
+        },
+        legend: {
+            position: "bottom",
+        },
+        fill: {
+            opacity: 1,
+        },
+        colors: roles.map((_, i) => flatColors[i % flatColors.length]),
+    };
+
+    return (
+        <div
+            className="bg-white p-4 rounded shadow d-flex flex-column"
+        >
+            {/* Header */}
+            <div className="d-flex justify-content-between align-items-center mb-3">
+                <div className="card-title mb-0 text-start">
+                    <h5 className="mb-1">Attendance Overview</h5>
+                    <p className="card-subtitle">Role-wise present count</p>
+                </div>
+                <div className="d-flex gap-2">
+                    <select
+                        className="form-select form-select-sm"
+                        value={dayRange}
+                        onChange={(e) => setDayRange(Number(e.target.value))}
+                    >
+                        <option value={7}>Last 7 Days</option>
+                        <option value={15}>Last 15 Days</option>
+                        <option value={30}>Last 30 Days</option>
+                    </select>
+                    <button
+                        className={`btn btn-sm ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
+                        onClick={() => setView("chart")}
+                    >
+                        📊
+                    </button>
+                    <button
+                        className={`btn btn-sm ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
+                        onClick={() => setView("table")}
+                    >
+                        📋
+                    </button>
+                </div>
+            </div>
+
+            {/* Content */}
+            <div className="flex-grow-1 d-flex align-items-center justify-content-center">
+                {loading ? (
+                    <ChartSkeleton />
+                ) : error ? (
+                    <p className="text-danger">{error}</p>
+                ) : view === "chart" ? (
+                    <div className="w-100">
+                        <ReactApexChart
+                            options={chartOptions}
+                            series={chartSeries}
+                            type="bar"
+                            height={400}
+                        />
+                    </div>
+                ) : (
+                    <div
+                        className="table-responsive w-100"
+                        style={{ maxHeight: "350px", overflowY: "auto" }}
+                    >
+                        <table className="table table-bordered table-sm text-start align-middle mb-0">
+                            <thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
+                                <tr>
+                                    <th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
+                                    {dates.map((date, idx) => (
+                                        <th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>{date}</th>
+                                    ))}
+                                </tr>
+                            </thead>
+
+                            <tbody>
+                                {roles.map((role) => (
+                                    <tr key={role}>
+                                        <td>{role}</td>
+                                        {tableData.map((row, idx) => {
+                                            const value = row[role];
+                                            const cellStyle = value > 0 ? { backgroundColor: '#d5d5d5' } : {};
+                                            return (
+                                                <td key={idx} style={cellStyle}>
+                                                    {value}
+                                                </td>
+                                            );
+                                        })}
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default AttendanceOverview;

src/components/Dashboard/Dashboard.jsx

@@ -1,71 +1,69 @@
 import React from "react";
-import { useSelector } from "react-redux"; // Import useSelector to access Redux state
+import { useSelector } from "react-redux";
 import {
-useDashboardProjectsCardData,
+    useDashboardProjectsCardData,
-useDashboardTeamsCardData,
+    useDashboardTeamsCardData,
-useDashboardTasksCardData,
+    useDashboardTasksCardData,
+    useAttendanceOverviewData
 } 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";
+import AttendanceOverview from "./AttendanceChart";
 
 const Dashboard = () => {
-const { projectsCardData } = useDashboardProjectsCardData();
+    const { projectsCardData } = useDashboardProjectsCardData();
-const { teamsCardData } = useDashboardTeamsCardData();
+    const { teamsCardData } = useDashboardTeamsCardData();
-const { tasksCardData } = useDashboardTasksCardData();
+    const { tasksCardData } = useDashboardTasksCardData();
 
-// Get the selected project ID from Redux store
+    // Get the selected project ID from Redux store
-const selectedProjectId = useSelector(
+    const projectId = useSelector((store) => store.localVariables.projectId);
-(store) => store.localVariables.projectId
+    const isAllProjectsSelected = projectId === null;
-);
 
-// Determine if "All Projects" is selected
+    return (
-// selectedProjectId will be null when "All Projects" is chosen
+        <div className="container-fluid mt-5">
-const isAllProjectsSelected = selectedProjectId === null;
+            <div className="row gy-4">
+                {isAllProjectsSelected && (
+                    <div className="col-sm-6 col-lg-4">
+                        <Projects projectsCardData={projectsCardData} />
+                    </div>
+                )}
 
-return (
+                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-<div className="container-fluid mt-3">
+                    <Teams teamsCardData={teamsCardData} />
-<div className="row gy-4">
+                </div>
 
-{isAllProjectsSelected && (
+                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-    <div className="col-sm-6 col-lg-4">
+                    <TasksCard tasksCardData={tasksCardData} />
-<Projects projectsCardData={projectsCardData} />
+                </div>
-</div>
-)}
 
+                {isAllProjectsSelected && (
+                    <div className="col-xxl-6 col-lg-6">
+                        <ProjectCompletionChart />
+                    </div>
+                )}
 
-<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
+                {!isAllProjectsSelected && (
-<Teams teamsCardData={teamsCardData} />
+                    <div className="col-xxl-6 col-lg-6">
-</div>
+                        <ProjectOverview />
+                    </div>
+                )}
 
-<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
+                <div className="col-xxl-6 col-lg-6">
-<TasksCard tasksCardData={tasksCardData} />
+                    <ProjectProgressChart />
-</div>
+                </div>
-
+                {!isAllProjectsSelected && (
-
+                    <div className="col-xxl-6 col-lg-6">
-{isAllProjectsSelected && (
+                        <AttendanceOverview /> {/* ✅ Removed unnecessary projectId prop */}
-    <div className="col-xxl-6 col-lg-6">
+                    </div>
-<ProjectCompletionChart />
+                )}
-</div>
+            </div>
-)}
+        </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;

src/components/Dashboard/Tasks.jsx

@@ -1,8 +1,11 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
 
 const TasksCard = () => {
-  const { tasksCardData } = useDashboardTasksCardData();
+  const projectId = useSelector((store) => store.localVariables?.projectId);
+  const { tasksCardData, loading, error } = useDashboardTasksCardData(projectId);
+  console.log(tasksCardData);
 
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
@@ -11,20 +14,34 @@ const TasksCard = () => {
           <i className="bx bx-task text-success"></i> Tasks
         </h5>
       </div>
-      <div className="d-flex justify-content-around align-items-start mt-n2">
+
-        <div>
+      {loading ? (
-          <h4 className="mb-0 fw-bold">
+        // Loader will be displayed when loading is true
-            {tasksCardData.totalTasks?.toLocaleString()}
+        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          </h4>
+          <div className="spinner-border text-primary" role="status">
-          <small className="text-muted">Total</small>
+            <span className="visually-hidden">Loading...</span>
+          </div>
         </div>
-        <div>
+      ) : error ? (
-          <h4 className="mb-0 fw-bold">
+        // Error message if there's an error
-            {tasksCardData.completedTasks?.toLocaleString()}
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
-          </h4>
+      ) : (
-          <small className="text-muted">Completed</small>
+        // Actual data when loaded successfully
+        <div className="d-flex justify-content-around align-items-start mt-n2">
+          <div>
+            <h4 className="mb-0 fw-bold">
+              {tasksCardData?.totalTasks?.toLocaleString()}
+            </h4>
+            <small className="text-muted">Total</small>
+          </div>
+          <div>
+            <h4 className="mb-0 fw-bold">
+              {tasksCardData?.completedTasks?.toLocaleString()}
+            </h4>
+            <small className="text-muted">Completed</small>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

src/components/Dashboard/Teams.jsx

@@ -1,29 +1,33 @@
 import React, { useCallback, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
 
 const Teams = () => {
-  const { teamsCardData } = useDashboardTeamsCardData();
+  const projectId = useSelector((store) => store.localVariables?.projectId);
-  const[totalEmployees,setTotalEmployee] = useState(0);
+  const { teamsCardData, loading, error } = useDashboardTeamsCardData(projectId);
-  const[inToday,setInToday] = useState(0);
 
-  useEffect(() =>{
+  const [totalEmployees, setTotalEmployee] = useState(0);
-    setTotalEmployee(teamsCardData.totalEmployees)
+  const [inToday, setInToday] = useState(0);
-    setInToday(teamsCardData.inToday)
+
-  },[teamsCardData.totalEmployees,teamsCardData.inToday])
+  // Update state when API data arrives
+  useEffect(() => {
+    setTotalEmployee(teamsCardData?.totalEmployees || 0);
+    setInToday(teamsCardData?.inToday || 0);
+  }, [teamsCardData]);
+
+  // Handle real-time updates via eventBus
+  const handler = useCallback((msg) => {
+    if (msg.activity === 1) {
+      setInToday((prev) => prev + 1);
+    }
+  }, []);
 
-  const handler = useCallback(
-    (msg) => {
-      if (msg.activity == 1) {
-        setInToday(prev => prev + 1);
-      }
-    },
-    [inToday]
-  );
   useEffect(() => {
     eventBus.on("attendance", handler);
     return () => eventBus.off("attendance", handler);
   }, [handler]);
+
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
       <div className="d-flex justify-content-start align-items-center mb-3">
@@ -31,20 +35,30 @@ const Teams = () => {
           <i className="bx bx-group text-warning"></i> Teams
         </h5>
       </div>
-      <div className="d-flex justify-content-around align-items-start mt-n2">
+
-        <div>
+      {loading ? (
-          <h4 className="mb-0 fw-bold">
+        // Blue spinner loader
-            {totalEmployees?.toLocaleString()}
+        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          </h4>
+          <div className="spinner-border text-primary" role="status">
-          <small className="text-muted">Total Employees</small>
+            <span className="visually-hidden">Loading...</span>
+          </div>
         </div>
-        <div>
+      ) : error ? (
-          <h4 className="mb-0 fw-bold">
+        // Error message if data fetching fails
-            {inToday?.toLocaleString()}
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
-          </h4>
+      ) : (
-          <small className="text-muted">In Today</small>
+        // Display data once loaded
+        <div className="d-flex justify-content-around align-items-start mt-n2">
+          <div>
+            <h4 className="mb-0 fw-bold">{totalEmployees.toLocaleString()}</h4>
+            <small className="text-muted">Total Employees</small>
+          </div>
+          <div>
+            <h4 className="mb-0 fw-bold">{inToday.toLocaleString()}</h4>
+            <small className="text-muted">In Today</small>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

src/components/Project/Infrastructure/WorkArea.jsx

@@ -122,9 +122,11 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                 aria-labelledby={`heading-${workArea.id}`}
               >
                 <div className="accordion-body px-1">
-                  {isLoading ? (
+                  {isLoading  || ProjectTaskList === undefined  ? (
                     <div className="text-center py-2 text-muted">Loading activities...</div>
-                  ) : ProjectTaskList?.length > 0 ? (
+                  ) :  ProjectTaskList?.length ===  0 ? (
+                    <div className="text-center py-2 text-muted">Loading activities...</div>
+                  ):ProjectTaskList?.length > 0 ? (
                     <table className="table table-sm mx-1">
                       <thead>
                         <tr>

src/components/Project/Infrastructure/WorkItem.jsx

@@ -23,6 +23,7 @@ import {
 import { refreshData } from "../../../slices/localVariablesSlice";
 import GlobalModel from "../../common/GlobalModel";
 import { useDeleteMasterItem } from "../../../hooks/masterHook/useMaster";
+import { useSelector } from "react-redux";
 
 const WorkItem = ({
   workItem,
@@ -31,7 +32,7 @@ const WorkItem = ({
   forWorkArea,
   deleteHandleTask,
 }) => {
-  // const { projectId } = useParams();
+  // const  projectId  = useSelector((store)=>store.localVariables.projectId) 
 const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
 
   const [itemName, setItemName] = useState("");
@@ -91,7 +92,6 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
 
   const handleSubmit = async () => {
     let WorkItemId = workItem.workItemId || workItem.id;
-    debugger
     DeleteTask({
       workItemId: WorkItemId,
       workAreaId: forWorkArea?.id,
@@ -240,7 +240,7 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
         </td>
 
         {(ManageInfra ||
-          (!projectId &&
+          (
             ManageAndAssignTak &&
             PlannedWork !== CompletedWork)) && (
           <td className="text-end align-items-middle border-top">

src/components/Project/ProjectCard.jsx

@@ -14,6 +14,8 @@ import {
   getProjectStatusName,
 } from "../../utils/projectStatus";
 import GlobalModel from "../common/GlobalModel";
+	import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
 
 const ProjectCard = ({ projectData, recall }) => {
   const [ projectInfo, setProjectInfo ] = useState( projectData );
@@ -21,6 +23,7 @@ const ProjectCard = ({ projectData, recall }) => {
     projectInfo?.id,false
   );
   const [showModal, setShowModal] = useState(false);
+  	  const  dispatch = useDispatch()
   const navigate = useNavigate();
   const ManageProject = useHasUserPermission(MANAGE_PROJECT);
   const {
@@ -57,6 +60,7 @@ const ProjectCard = ({ projectData, recall }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
+    dispatch(setProjectId(projectInfo.id))
     navigate(`/projects/details`);
   };
 

src/components/Project/ProjectOverview.jsx

@@ -165,7 +165,7 @@ const ProjectOverview = ({ project }) => {
   }, [selectedProject]);
 
   return (
-    <div className="card mb-6">
+    <div className="card" style={{ minHeight: "490px" }}>
       <div className="card-header text-start">
         <h6 className="card-action-title mb-0">
           {" "}

src/hooks/useDashboard_Data.jsx

@@ -39,32 +39,32 @@ export const useDashboard_Data = ({ days, FromDate, projectId }) => {
 
 
 export const useDashboard_AttendanceData = (date, projectId) => {
-    const [dashboard_Attendancedata, setDashboard_AttendanceData] = useState([]);
+  const [dashboard_Attendancedata, setDashboard_AttendanceData] = useState([]);
-    const [isLineChartLoading, setLoading] = useState(false);
+  const [isLineChartLoading, setLoading] = useState(false);
-    const [error, setError] = useState("");
+  const [error, setError] = useState("");
 
-    useEffect(() => {
+  useEffect(() => {
-        const fetchData = async () => {
+    const fetchData = async () => {
-            setLoading(true);
+      setLoading(true);
-            setError("");
+      setError("");
 
-            try {
+      try {
-                const response = await GlobalRepository.getDashboardAttendanceData(date,projectId); // date in 2nd param
+        const response = await GlobalRepository.getDashboardAttendanceData(date, projectId); // date in 2nd param
-                setDashboard_AttendanceData(response.data);
+        setDashboard_AttendanceData(response.data);
-            } catch (err) {
+      } catch (err) {
-                setError("Failed to fetch dashboard data.");
+        setError("Failed to fetch dashboard data.");
-                console.error(err);
+        console.error(err);
-            } finally {
+      } finally {
-                setLoading(false);
+        setLoading(false);
-            }
+      }
-        };
+    };
 
-        if (date && projectId !== null) {
+    if (date && projectId !== null) {
-            fetchData();
+      fetchData();
-        }
+    }
-    }, [date, projectId]);
+  }, [date, projectId]);
 
-    return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
+  return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
 };
 
 
@@ -97,36 +97,38 @@ export const useDashboardProjectsCardData = () => {
 };
 
 // 🔹 Dashboard Teams Card Data Hook
-export const useDashboardTeamsCardData = () => {
+export const useDashboardTeamsCardData = (projectId) => {
-  const [teamsCardData, setTeamsData] = useState([]);
+  const [teamsCardData, setTeamsData] = useState({});
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   useEffect(() => {
     const fetchTeamsData = async () => {
+      if (!projectId) return; // ✅ Skip if projectId is not provided
+
       setLoading(true);
       setError("");
 
       try {
-        const response = await GlobalRepository.getDashboardTeamsCardData();
+        const response = await GlobalRepository.getDashboardTeamsCardData(projectId);
-        setTeamsData(response.data);
+        setTeamsData(response.data); // ✅ Handle undefined/null
       } catch (err) {
         setError("Failed to fetch teams card data.");
         console.error(err);
+        setTeamsData({});
       } finally {
         setLoading(false);
       }
     };
 
     fetchTeamsData();
-  }, []);
+  }, [projectId]);
 
   return { teamsCardData, loading, error };
 };
 
-// 🔹 Dashboard Tasks Card Data Hook
+export const useDashboardTasksCardData = (projectId) => {
-export const useDashboardTasksCardData = () => {
+  const [tasksCardData, setTasksData] = useState({});
-  const [tasksCardData, setTasksData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
@@ -136,18 +138,47 @@ export const useDashboardTasksCardData = () => {
       setError("");
 
       try {
-        const response = await GlobalRepository.getDashboardTasksCardData();
+        const response = await GlobalRepository.getDashboardTasksCardData(projectId);
         setTasksData(response.data);
       } catch (err) {
         setError("Failed to fetch tasks card data.");
         console.error(err);
+        setTasksData({});
       } finally {
         setLoading(false);
       }
     };
 
     fetchTasksData();
-  }, []);
+  }, [projectId]);
 
   return { tasksCardData, loading, error };
 };
+
+
+export const useAttendanceOverviewData = (projectId, days) => {
+  const [attendanceOverviewData, setAttendanceOverviewData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!projectId || !days) return;
+    const fetchAttendanceOverview = async () => {
+      setLoading(true);
+      setError("");
+
+      try {
+        const response = await GlobalRepository.getAttendanceOverview(projectId, days);
+        setAttendanceOverviewData(response.data);
+      } catch (err) {
+        setError("Failed to fetch attendance overview data.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAttendanceOverview();
+  }, [projectId, days]);
+
+  return { attendanceOverviewData, loading, error };
+};

src/hooks/useEmployees.js

@@ -112,18 +112,20 @@ export const useEmployeesByProject = (projectId) => {
 };
 
 // EmployeeList.jsx
-export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
+export const useEmployeesAllOrByProjectId = (showAllEmployees ,projectId,
-  const isAllEmployees = !projectId && projectId !== undefined;
+      showInactive) => {
 
-  const queryKey = isAllEmployees
+
-    ? ['allEmployees', showInactive]
+  	const queryKey = showAllEmployees
-    : ['projectEmployees', projectId];
+  ? ['allEmployees', showInactive]
+  : ['projectEmployees', projectId, showInactive];
 
   const queryFn = async () => {
-  if (isAllEmployees) {
+  if (showAllEmployees) {
       const res = await EmployeeRepository.getAllEmployeeList(showInactive);
       return res.data;
     } else {
+      if (!projectId) return [];
       const res = await EmployeeRepository.getEmployeeListByproject(projectId);
       return res.data;
     }
@@ -137,7 +139,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
   } = useQuery({
     queryKey,
     queryFn,
-    enabled: isAllEmployees || !!projectId, 
+    enabled:typeof showInactive === "boolean" && (showAllEmployees || !!projectId),  
   });
 
   return {
@@ -211,7 +213,7 @@ export const useUpdateEmployee = () =>
 
 export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
   const queryClient = useQueryClient();
-
+ const selectedProject = useSelector((store)=>store.localVariables.projectId)
   return useMutation({
     mutationFn: (id) => {
       setemployeeLodaing(true);
@@ -219,12 +221,12 @@ export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing })
     },
 
     onSuccess: () => {
-      showToast("Employee deleted successfully.", "success");
+  
 
       // queryClient.invalidateQueries( ['allEmployee',false]);
       queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
       queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
-
+          showToast("Employee deleted successfully.", "success");
       setIsDeleteModalOpen(false);
     },
 

src/pages/employee/EmployeeList.jsx

@@ -51,7 +51,7 @@ const EmployeeList = () => {
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(
-      showAllEmployees ? null : selectedProjectId,
+      showAllEmployees ,selectedProjectId,
       showInactive
     );
 
@@ -153,13 +153,7 @@ const EmployeeList = () => {
     }
   };
 
-  const handleToggle = (e) => {
+
-    setShowInactive(e.target.checked);
-    recallEmployeeData(
-      e.target.checked,
-      showAllEmployees ? null : selectedProjectId
-    ); // Use selectedProjectId here
-  };
 
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
@@ -300,8 +294,8 @@ const EmployeeList = () => {
         ></Breadcrumb>
 
         {ViewTeamMember ? (
-          <div className="row">
+          // <div className="row">
-            <div className="card ">
+            <div className="card p-1">
               <div className="card-datatable table-responsive pt-2">
                 <div
                   id="DataTables_Table_0_wrapper"
@@ -340,7 +334,7 @@ const EmployeeList = () => {
                             role="switch"
                             id="inactiveEmployeesCheckbox"
                             checked={showInactive}
-                            onChange={handleToggle}
+                           onChange={(e)=> setShowInactive(e.target.checked)}
                           />
                           <label
                             className="form-check-label ms-0"
@@ -743,7 +737,7 @@ const EmployeeList = () => {
                 </div>
               </div>
             </div>
-          </div>
+          // </div>
         ) : (
           <div className="card">
             <div className="text-center">

src/pages/project/ProjectDetails.jsx

@@ -1,4 +1,4 @@
-import { useSelector } from "react-redux"; // Import useSelector
+import { useSelector, useDispatch } from "react-redux"; // Import useSelector
 import React, { useState, useEffect, useCallback } from "react";
 
 import ProjectOverview from "../../components/Project/ProjectOverview";
@@ -22,14 +22,26 @@ import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import Directory from "../Directory/Directory";
 import eventBus from "../../services/eventBus";
 import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
+import { useProjectName } from "../../hooks/useProjects";
+import AttendanceOverview from "../../components/Dashboard/AttendanceChart";
+import { setProjectId } from "../../slices/localVariablesSlice";
 
 const ProjectDetails = () => {
 
 
   const projectId = useSelector((store) => store.localVariables.projectId);
 
+  const { projectNames, fetchData } = useProjectName();
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    if (projectId == null) {
+      dispatch(setProjectId(projectNames[0]?.id));
+    }
+  }, [projectNames])
+
   const {
-    projects_Details,	
+    projects_Details,
     loading: projectLoading,
     error: projectError,
     refetch,
@@ -71,6 +83,8 @@ const ProjectDetails = () => {
               </div>
               <div className="col-lg-8 col-md-7 mt-5">
                 <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
+                <div className="mt-5"> <AttendanceOverview  /></div>
+               
               </div>
             </div>
           </>

src/pages/project/ProjectListView.jsx

@@ -20,9 +20,12 @@ import showToast from "../../services/toastService";
 import { getCachedData, cacheData } from "../../slices/apiDataManager";
 import GlobalModel from "../../components/common/GlobalModel";
 import {formatNumber} from "../../utils/dateUtils";
+import { setProjectId } from "../../slices/localVariablesSlice";
+import { useDispatch } from "react-redux";
 
 const ProjectListView = ({ projectData, recall }) => {
   const [projectInfo, setProjectInfo] = useState(projectData);
+    const dispatch = useDispatch()
   const { projects_Details, loading, error, refetch } = useProjectDetails(
     projectInfo?.id,false
   );
@@ -89,7 +92,10 @@ const ProjectListView = ({ projectData, recall }) => {
         <td className="text-start" colSpan={5}>
           <span
             className="text-primary cursor-pointer"
-            onClick={() => navigate(`/projects/details`)}
+             onClick={() => {
+              dispatch(setProjectId(projectInfo.id))
+              navigate(`/projects/details`)
+            }}
           >
             {projectInfo.shortName
               ? `${projectInfo.name} (${projectInfo.shortName})`

src/repositories/GlobalRepository.jsx

@@ -26,12 +26,22 @@ const GlobalRepository = {
   getDashboardProjectsCardData: () => {
     return api.get(`/api/Dashboard/projects`);
   },
-  getDashboardTeamsCardData: () => {
+  
-    return api.get(`/api/Dashboard/teams`);
+  getDashboardTeamsCardData: (projectId) => {
-  },
+  const url = projectId
-  getDashboardTasksCardData: () => {
+    ? `/api/Dashboard/teams?projectId=${projectId}`
-    return api.get(`/api/Dashboard/tasks`);
+    : `/api/Dashboard/teams`;
-  },
+  return api.get(url);
+},
+
+  getDashboardTasksCardData: (projectId) => {
+  const url = projectId
+    ? `/api/Dashboard/tasks?projectId=${projectId}`
+    : `/api/Dashboard/tasks`;
+  return api.get(url);
+},
+
+ getAttendanceOverview:(projectId,days)=>api.get(`/api/dashboard/attendance-overview/${projectId}?days=${days}`)
 
 };