intergrated react-query

Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into react-query-v2
Merge pull request 'Issues_July_3W' (#262 ) from Issues_July_3W into main
2025-07-17 20:41:57 +05:30 · 2025-07-17 17:30:16 +05:30 · 2025-07-17 11:50:24 +00:00 · 2025-07-17 15:42:33 +05:30 · 2025-07-17 13:07:36 +05:30 · 2025-07-17 11:47:23 +05:30
23 changed files with 780 additions and 472 deletions
--- a/public/assets/vendor/css/core.css
+++ b/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;
--- a/src/components/Activities/Attendance.jsx
+++ b/src/components/Activities/Attendance.jsx
@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@ -6,29 +6,40 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { useAttendance } from "../../hooks/useAttendance";
+import { useSelector } from "react-redux";
+import { useQueryClient } from "@tanstack/react-query";
+import eventBus from "../../services/eventBus";

-const Attendance = ({
-  attendance,
-  getRole,
-  handleModalData,
-  setshowOnlyCheckout,
-  showOnlyCheckout,
-}) => {
+const Attendance = ({ getRole, handleModalData }) => {
+  const queryClient = useQueryClient();
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const [todayDate, setTodayDate] = useState(new Date());
+  const [ShowPending, setShowPending] = useState(false);
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  const {
+    attendance,
+    loading: attLoading,
+    recall: attrecall,
+  } = useAttendance(selectedProject);
+  const filteredAttendance = ShowPending
+    ? attendance?.filter(
+        (att) => att?.checkInTime !== null && att?.checkOutTime === null
+      )
+    : attendance;

-  // Ensure attendance is an array
-  const attendanceList = Array.isArray(attendance) ? attendance : [];
+  const attendanceList = Array.isArray(filteredAttendance)
+    ? filteredAttendance
+    : [];

-  // Function to sort by first and last name
  const sortByName = (a, b) => {
    const nameA = (a.firstName + a.lastName).toLowerCase();
    const nameB = (b.firstName + b.lastName).toLowerCase();
    return nameA?.localeCompare(nameB);
  };
-
-  // Filter employees based on activity
  const group1 = attendanceList
    .filter((d) => d.activity === 1 || d.activity === 4)
    .sort(sortByName);
@ -37,30 +48,65 @@ const Attendance = ({
    .sort(sortByName);

  const filteredData = [...group1, ...group2];
-
  const { currentPage, totalPages, currentItems, paginate } = usePagination(
    filteredData,
    ITEMS_PER_PAGE
  );
+
+  const handler = useCallback(
+    (msg) => {
+      if (selectedProject == msg.projectId) {
+        const updatedAttendance = attendances.map((item) =>
+          item.employeeId === msg.response.employeeId
+            ? { ...item, ...msg.response }
+            : item
+        );
+        queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
+          if (!oldData) return oldData;
+          return oldData.map((emp) =>
+            emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
+          );
+        });
+      }
+    },
+    [selectedProject, attrecall]
+  );
+
+  const employeeHandler = useCallback(
+    (msg) => {
+      if (attendances.some((item) => item.employeeId == msg.employeeId)) {
+        attrecall();
+      }
+    },
+    [selectedProject, attendance]
+  );
+  useEffect(() => {
+    eventBus.on("attendance", handler);
+    return () => eventBus.off("attendance", handler);
+  }, [handler]);
+
+  useEffect(() => {
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
  return (
    <>
-      <div className="table-responsive text-nowrap">
+      <div className="table-responsive text-nowrap h-100" >
        <div className="d-flex text-start align-items-center py-2">
          <strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
-
          <div className="form-check form-switch text-start m-0 ms-5">
            <input
              type="checkbox"
              className="form-check-input"
              role="switch"
              id="inactiveEmployeesCheckbox"
-              checked={showOnlyCheckout}
-              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
+              checked={ShowPending}
+              onChange={(e) => setShowPending(e.target.checked)}
            />
            <label className="form-check-label ms-0">Show Pending</label>
          </div>
        </div>
-        {attendance && attendance.length > 0 && (
+        {Array.isArray(attendance) && attendance.length > 0 ? (
          <>
            <table className="table ">
              <thead>
@ -81,14 +127,13 @@ const Attendance = ({
                {currentItems &&
                  currentItems
                    .sort((a, b) => {
-                      // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
                      const checkInA = a?.checkInTime
                        ? new Date(a.checkInTime)
                        : new Date(0);
                      const checkInB = b?.checkInTime
                        ? new Date(b.checkInTime)
                        : new Date(0);
-                      return checkInB - checkInA; // Sort in descending order of checkInTime
+                      return checkInB - checkInA;
                    })
                    .map((item) => (
                      <tr key={item.employeeId}>
@ -189,6 +234,14 @@ const Attendance = ({
              </nav>
            )}
          </>
+        ) : attLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <div className="text-muted">
+            {Array.isArray(attendance)
+              ? "No employees assigned to the project"
+              : "Attendance data unavailable"}
+          </div>
        )}
      </div>
    </>
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@ -38,11 +38,12 @@ const AttendanceLog = ({
  setshowOnlyCheckout,
  showOnlyCheckout,
 }) => {
-  const selectedProject = useSelector((store)=>store.localVariables.projectId)
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
  const dispatch = useDispatch();
-  const [loading,setLoading]  = useState(false)
-  // const { data, loading, error } = useSelector((store) => store.attendanceLogs);
+  const [loading, setLoading] = useState(false);

  const [isRefreshing, setIsRefreshing] = useState(false);
  const [processedData, setProcessedData] = useState([]);
@ -73,18 +74,17 @@ const AttendanceLog = ({
    return nameA?.localeCompare(nameB);
  };

-  // useEffect(() => {
-  //   const { startDate, endDate } = dateRange;
-  //   dispatch(
-  //     fetchAttendanceData({
-  //       projectId,
-  //       fromDate: startDate,
-  //       toDate: endDate,
-  //     })
-  //   );
-  //   setIsRefreshing(false);
-  // }, [dateRange, projectId, dispatch, isRefreshing]);
-  const {data= [],isLoading, error, refetch,isFetching} = useAttendancesLogs(selectedProject,dateRange.startDate, dateRange.endDate)
+  const {
+    data = [],
+    isLoading,
+    error,
+    refetch,
+    isFetching,
+  } = useAttendancesLogs(
+    selectedProject,
+    dateRange.startDate,
+    dateRange.endDate
+  );
  const filtering = (data) => {
    const filteredData = showOnlyCheckout
      ? data.filter((item) => item.checkOutTime === null)
@ -128,18 +128,16 @@ const AttendanceLog = ({
      return acc;
    }, {});

-    // Sort dates in descending order
    const sortedDates = Object.keys(groupedByDate).sort(
      (a, b) => new Date(b) - new Date(a)
    );

-    // Create the final sorted array
    const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
    setProcessedData(finalData);
-  }
+  };

  useEffect(() => {
-    filtering(data)
+    filtering(data);
  }, [data, showOnlyCheckout]);

  const {
@ -155,49 +153,47 @@ const AttendanceLog = ({
  }, [processedData, resetPage]);

  const handler = useCallback(
-  (msg) => {
-    const { startDate, endDate } = dateRange;
-    const checkIn = msg.response.checkInTime.substring(0, 10);
-    if (
-      projectId === msg.projectId &&
-      startDate <= checkIn &&
-      checkIn <= endDate
-    ) {
-      const updatedAttendance = data.map((item) =>
-        item.id === msg.response.id
-          ? { ...item, ...msg.response }
-          : item
-      );
+    (msg) => {
+      const { startDate, endDate } = dateRange;
+      const checkIn = msg.response.checkInTime.substring(0, 10);
+      if (
+        projectId === msg.projectId &&
+        startDate <= checkIn &&
+        checkIn <= endDate
+      ) {
+        const updatedAttendance = data.map((item) =>
+          item.id === msg.response.id ? { ...item, ...msg.response } : item
+        );

-      filtering(updatedAttendance);
-      resetPage();
-    }
-  },
-  [projectId, dateRange, data, filtering, resetPage]
-);
+        filtering(updatedAttendance);
+        resetPage();
+      }
+    },
+    [projectId, dateRange, data, filtering, resetPage]
+  );

-    useEffect(() => {
+  useEffect(() => {
    eventBus.on("attendance_log", handler);
    return () => eventBus.off("attendance_log", handler);
  }, [handler]);

-   const employeeHandler = useCallback(
+  const employeeHandler = useCallback(
    (msg) => {
      const { startDate, endDate } = dateRange;
      if (data.some((item) => item.employeeId == msg.employeeId)) {
        dispatch(
          fetchAttendanceData({
-        projectId,
-        fromDate: startDate,
-        toDate: endDate,
-      })
-        )
+            projectId,
+            fromDate: startDate,
+            toDate: endDate,
+          })
+        );
      }
    },
-    [projectId, dateRange,data]
+    [projectId, dateRange, data]
  );

-    useEffect(() => {
+  useEffect(() => {
    eventBus.on("employee", employeeHandler);
    return () => eventBus.off("employee", employeeHandler);
  }, [employeeHandler]);
@ -231,15 +227,14 @@ const AttendanceLog = ({
              isFetching ? "spin" : ""
            }`}
            title="Refresh"
-            onClick={()=>refetch()}
+            onClick={() => refetch()}
          />
        </div>
      </div>
-      <div
-        className="table-responsive text-nowrap"
-        style={{ minHeight: "200px", display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-      >
-        {data && data.length > 0 && (
+      <div className="table-responsive text-nowrap">
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : data?.length > 0 ? (
          <table className="table mb-0">
            <thead>
              <tr>
@ -258,87 +253,79 @@ const AttendanceLog = ({
              </tr>
            </thead>
            <tbody>
-              {(loading || isRefreshing) && (
-                <tr>
-                  <td colSpan={6}>Loading...</td>
-                </tr>
-              )}
-              {!loading &&
-                !isRefreshing &&
-                paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                  const currentDate = moment(
-                    attendance.checkInTime || attendance.checkOutTime
-                  ).format("YYYY-MM-DD");
-                  const previousAttendance = arr[index - 1];
-                  const previousDate = previousAttendance
-                    ? moment(
-                        previousAttendance.checkInTime ||
-                          previousAttendance.checkOutTime
-                      ).format("YYYY-MM-DD")
-                    : null;
+              {paginatedAttendances.reduce((acc, attendance, index, arr) => {
+                const currentDate = moment(
+                  attendance.checkInTime || attendance.checkOutTime
+                ).format("YYYY-MM-DD");
+                const previousAttendance = arr[index - 1];
+                const previousDate = previousAttendance
+                  ? moment(
+                      previousAttendance.checkInTime ||
+                        previousAttendance.checkOutTime
+                    ).format("YYYY-MM-DD")
+                  : null;

-                  if (!previousDate || currentDate !== previousDate) {
-                    acc.push(
-                      <tr
-                        key={`header-${currentDate}`}
-                        className="table-row-header"
-                      >
-                        <td colSpan={6} className="text-start">
-                          <strong>
-                            {moment(currentDate).format("DD-MM-YYYY")}
-                          </strong>
-                        </td>
-                      </tr>
-                    );
-                  }
+                if (!previousDate || currentDate !== previousDate) {
                  acc.push(
-                    <tr key={index}>
-                      <td colSpan={2}>
-                        <div className="d-flex justify-content-start align-items-center">
-                          <Avatar
-                            firstName={attendance.firstName}
-                            lastName={attendance.lastName}
-                          />
-                          <div className="d-flex flex-column">
-                            <a href="#" className="text-heading text-truncate">
-                              <span className="fw-normal">
-                                {attendance.firstName} {attendance.lastName}
-                              </span>
-                            </a>
-                          </div>
-                        </div>
-                      </td>
-                      <td>
-                        {moment(
-                          attendance.checkInTime || attendance.checkOutTime
-                        ).format("DD-MMM-YYYY")}
-                      </td>
-                      <td>{convertShortTime(attendance.checkInTime)}</td>
-                      <td>
-                        {attendance.checkOutTime
-                          ? convertShortTime(attendance.checkOutTime)
-                          : "--"}
-                      </td>
-                      <td className="text-center">
-                        <RenderAttendanceStatus
-                          attendanceData={attendance}
-                          handleModalData={handleModalData}
-                          Tab={2}
-                          currentDate={today.toLocaleDateString("en-CA")}
-                        />
+                    <tr
+                      key={`header-${currentDate}`}
+                      className="table-row-header"
+                    >
+                      <td colSpan={6} className="text-start">
+                        <strong>
+                          {moment(currentDate).format("DD-MM-YYYY")}
+                        </strong>
                      </td>
                    </tr>
                  );
-                  return acc;
-                }, [])}
+                }
+                acc.push(
+                  <tr key={index}>
+                    <td colSpan={2}>
+                      <div className="d-flex justify-content-start align-items-center">
+                        <Avatar
+                          firstName={attendance.firstName}
+                          lastName={attendance.lastName}
+                        />
+                        <div className="d-flex flex-column">
+                          <a href="#" className="text-heading text-truncate">
+                            <span className="fw-normal">
+                              {attendance.firstName} {attendance.lastName}
+                            </span>
+                          </a>
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      {moment(
+                        attendance.checkInTime || attendance.checkOutTime
+                      ).format("DD-MMM-YYYY")}
+                    </td>
+                    <td>{convertShortTime(attendance.checkInTime)}</td>
+                    <td>
+                      {attendance.checkOutTime
+                        ? convertShortTime(attendance.checkOutTime)
+                        : "--"}
+                    </td>
+                    <td className="text-center">
+                      <RenderAttendanceStatus
+                        attendanceData={attendance}
+                        handleModalData={handleModalData}
+                        Tab={2}
+                        currentDate={today.toLocaleDateString("en-CA")}
+                      />
+                    </td>
+                  </tr>
+                );
+                return acc;
+              }, [])}
            </tbody>
          </table>
-        )}
-        {!loading && !isRefreshing && data?.length === 0 && (
-         <span className="text-muted">No employee logs</span>
+        ) : (
+          <span className="text-muted">No employee logs</span>
        )}
      </div>
-      {!loading && !isRefreshing && processedData.length > 10 && (
+      {processedData.length > 10 && (
        <nav aria-label="Page ">
          <ul className="pagination pagination-sm justify-content-end py-1">
            <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
--- a/src/components/Activities/Regularization.jsx
+++ b/src/components/Activities/Regularization.jsx
@ -92,8 +92,8 @@ const Regularization = ({ handleRequest }) => {
          )} */}

          {!loading &&
-            (regularizes?.length > 0 ? (
-              regularizes?.map((att, index) => (
+            (currentItems?.length > 0 ? (
+              currentItems?.map((att, index) => (
                <tr key={index}>
                  <td colSpan={2}>
                    <div className="d-flex justify-content-start align-items-center">
--- a/src/components/Charts/Skelton.jsx
+++ b/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;
--- a/src/components/Charts/flatColor.js
+++ b/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;
--- a/src/components/Dashboard/AttendanceChart.jsx
+++ b/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;
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/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,
-useDashboardTeamsCardData,
-useDashboardTasksCardData,
+    useDashboardProjectsCardData,
+    useDashboardTeamsCardData,
+    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 { teamsCardData } = useDashboardTeamsCardData();
-const { tasksCardData } = useDashboardTasksCardData();
+    const { projectsCardData } = useDashboardProjectsCardData();
+    const { teamsCardData } = useDashboardTeamsCardData();
+    const { tasksCardData } = useDashboardTasksCardData();

-// Get the selected project ID from Redux store
-const selectedProjectId = useSelector(
-(store) => store.localVariables.projectId
-);
+    // Get the selected project ID from Redux store
+    const projectId = useSelector((store) => store.localVariables.projectId);
+    const isAllProjectsSelected = projectId === null;

-// 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-5">
+            <div className="row gy-4">
+                {isAllProjectsSelected && (
+                    <div className="col-sm-6 col-lg-4">
+                        <Projects projectsCardData={projectsCardData} />
+                    </div>
+                )}

-return (
-<div className="container-fluid mt-3">
-<div className="row gy-4">
+                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
+                    <Teams teamsCardData={teamsCardData} />
+                </div>

-{isAllProjectsSelected && (
-    <div className="col-sm-6 col-lg-4">
-<Projects projectsCardData={projectsCardData} />
-</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>
+                )}

-<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
-<Teams teamsCardData={teamsCardData} />
-</div>
+                {!isAllProjectsSelected && (
+                    <div className="col-xxl-6 col-lg-6">
+                        <ProjectOverview />
+                    </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>
-);
+                <div className="col-xxl-6 col-lg-6">
+                    <ProjectProgressChart />
+                </div>
+                {!isAllProjectsSelected && (
+                    <div className="col-xxl-6 col-lg-6">
+                        <AttendanceOverview /> {/* ✅ Removed unnecessary projectId prop */}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
 };

 export default Dashboard;
--- a/src/components/Dashboard/Tasks.jsx
+++ b/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>
-          <h4 className="mb-0 fw-bold">
-            {tasksCardData.totalTasks?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Total</small>
+
+      {loading ? (
+        // Loader will be displayed when loading is true
+        <div className="d-flex justify-content-center align-items-center flex-grow-1">
+          <div className="spinner-border text-primary" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </div>
        </div>
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {tasksCardData.completedTasks?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Completed</small>
+      ) : error ? (
+        // Error message if there's an error
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
+      ) : (
+        // 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>
  );
 };
--- a/src/components/Dashboard/Teams.jsx
+++ b/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[totalEmployees,setTotalEmployee] = useState(0);
-  const[inToday,setInToday] = useState(0);
+  const projectId = useSelector((store) => store.localVariables?.projectId);
+  const { teamsCardData, loading, error } = useDashboardTeamsCardData(projectId);

-  useEffect(() =>{
-    setTotalEmployee(teamsCardData.totalEmployees)
-    setInToday(teamsCardData.inToday)
-  },[teamsCardData.totalEmployees,teamsCardData.inToday])
+  const [totalEmployees, setTotalEmployee] = useState(0);
+  const [inToday, setInToday] = useState(0);
+
+  // 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>
-          <h4 className="mb-0 fw-bold">
-            {totalEmployees?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Total Employees</small>
+
+      {loading ? (
+        // Blue spinner loader
+        <div className="d-flex justify-content-center align-items-center flex-grow-1">
+          <div className="spinner-border text-primary" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </div>
        </div>
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {inToday?.toLocaleString()}
-          </h4>
-          <small className="text-muted">In Today</small>
+      ) : error ? (
+        // Error message if data fetching fails
+        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">{error}</div>
+      ) : (
+        // 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>
  );
 };
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/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>
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/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">
--- a/src/components/Project/ProjectCard.jsx
+++ b/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`);
  };

--- a/src/components/Project/ProjectOverview.jsx
+++ b/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">
          {" "}
--- a/src/hooks/useAttendance.js
+++ b/src/hooks/useAttendance.js
@ -3,8 +3,9 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
 import AttendanceRepository from "../repositories/AttendanceRepository";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import showToast from "../services/toastService";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { store } from "../store/store";
+import { setDefaultDateRange } from "../slices/localVariablesSlice";

 // export const useAttendace =(projectId)=>{

@ -117,6 +118,7 @@ import { store } from "../store/store";


 export const useAttendance = (projectId) => {
+  const dispatch = useDispatch()
  const {
    data: attendance = [],
    isLoading: loading,
@ -143,9 +145,11 @@ export const useAttendance = (projectId) => {
 };

 export const useAttendancesLogs = (projectId, fromDate, toDate) => {
+  const dispatch = useDispatch();
  const enabled = !!projectId && !!fromDate && !!toDate;
-  return useQuery({
-    queryKey: ["attendanceLogs", projectId, fromDate, toDate],
+
+  const query = useQuery({
+    queryKey: ['attendanceLogs', projectId, fromDate, toDate],
    queryFn: async () => {
      const res = await AttendanceRepository.getAttendanceFilteredByDate(
        projectId,
@ -156,6 +160,18 @@ export const useAttendancesLogs = (projectId, fromDate, toDate) => {
    },
    enabled,
  });
+  
+  useEffect(() => {
+    if (query.data && fromDate && toDate) {
+      dispatch(
+        setDefaultDateRange({
+          startDate: fromDate,
+          endDate: toDate,
+        })
+      );
+    }
+  }, [dispatch, query.data, fromDate, toDate]);
+  return query;
 };


@ -231,6 +247,7 @@ export const useRegularizationRequests = (projectId) => {
 export const useMarkAttendance = () => {
  const queryClient = useQueryClient();
  const selectedProject = useSelector((store)=>store.localVariables.projectId)
+  const selectedDateRange = useSelector((store)=>store.localVariables.defaultDateRange)

  return useMutation({
    mutationFn: async ({payload,forWhichTab}) => {
@ -247,9 +264,15 @@ export const useMarkAttendance = () => {
        );
      });
    }else{
-      queryClient.invalidateQueries({
-        queryKey: ["attendanceLogs"], 
-     });
+    //   queryClient.invalidateQueries({
+    //     queryKey: ["attendanceLogs"], 
+    //  });
+     queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.map((emp) =>
+          emp.id === data.id ? { ...emp, ...data } : emp
+        );
+      });
    }
     if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
    },
--- a/src/hooks/useDashboard_Data.jsx
+++ b/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 [isLineChartLoading, setLoading] = useState(false);
-    const [error, setError] = useState("");
+  const [dashboard_Attendancedata, setDashboard_AttendanceData] = useState([]);
+  const [isLineChartLoading, setLoading] = useState(false);
+  const [error, setError] = useState("");

-    useEffect(() => {
-        const fetchData = async () => {
-            setLoading(true);
-            setError("");
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      setError("");

-            try {
-                const response = await GlobalRepository.getDashboardAttendanceData(date,projectId); // date in 2nd param
-                setDashboard_AttendanceData(response.data);
-            } catch (err) {
-                setError("Failed to fetch dashboard data.");
-                console.error(err);
-            } finally {
-                setLoading(false);
-            }
-        };
+      try {
+        const response = await GlobalRepository.getDashboardAttendanceData(date, projectId); // date in 2nd param
+        setDashboard_AttendanceData(response.data);
+      } catch (err) {
+        setError("Failed to fetch dashboard data.");
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };

-        if (date && projectId !== null) {
-            fetchData();
-        }
-    }, [date, projectId]);
+    if (date && projectId !== null) {
+      fetchData();
+    }
+  }, [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 = () => {
-  const [teamsCardData, setTeamsData] = useState([]);
+export const useDashboardTeamsCardData = (projectId) => {
+  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();
-        setTeamsData(response.data);
+        const response = await GlobalRepository.getDashboardTeamsCardData(projectId);
+        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 = () => {
-  const [tasksCardData, setTasksData] = useState([]);
+export const useDashboardTasksCardData = (projectId) => {
+  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 };
+};
--- a/src/hooks/useEmployees.js
+++ b/src/hooks/useEmployees.js
@ -112,18 +112,20 @@ export const useEmployeesByProject = (projectId) => {
 };

 // EmployeeList.jsx
-export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
-  const isAllEmployees = !projectId && projectId !== undefined;
+export const useEmployeesAllOrByProjectId = (showAllEmployees ,projectId,
+      showInactive) => {

-  const queryKey = isAllEmployees
-    ? ['allEmployees', showInactive]
-    : ['projectEmployees', projectId];
+
+  	const queryKey = showAllEmployees
+  ? ['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);
    },

--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@ -8,45 +8,44 @@ import {
 import Breadcrumb from "../../components/common/Breadcrumb";
 import AttendanceLog from "../../components/Activities/AttendcesLogs";
 import Attendance from "../../components/Activities/Attendance";
-import AttendanceModel from "../../components/Activities/AttendanceModel";
+// import AttendanceModel from "../../components/Activities/AttendanceModel";
 import showToast from "../../services/toastService";
 // import { useProjects } from "../../hooks/useProjects";
 import Regularization from "../../components/Activities/Regularization";
-import { useAttendance  } from "../../hooks/useAttendance";
+import { useAttendance } from "../../hooks/useAttendance";
 import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
-import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
+// import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
 import { hasUserPermission } from "../../utils/authUtils";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 import eventBus from "../../services/eventBus";
-import AttendanceRepository from "../../repositories/AttendanceRepository";
+// import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useProjectName } from "../../hooks/useProjects";
 import GlobalModel from "../../components/common/GlobalModel";
 import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
 import AttendLogs from "../../components/Activities/AttendLogs";
-import Confirmation from "../../components/Activities/Confirmation";
+// import Confirmation from "../../components/Activities/Confirmation";
 import { useQueryClient } from "@tanstack/react-query";

 const AttendancePage = () => {
  const [activeTab, setActiveTab] = useState("all");
  const [ShowPending, setShowPending] = useState(false);
-  const queryClient = useQueryClient()
+  const queryClient = useQueryClient();
  const loginUser = getCachedProfileData();
  var selectedProject = useSelector((store) => store.localVariables.projectId);
-  const dispatch = useDispatch()
-  const {
-    attendance,
-    loading: attLoading,
-    recall: attrecall,
-  } = useAttendance(selectedProject);
+  const dispatch = useDispatch();
+  // const {
+  //   attendance,
+  //   loading: attLoading,
+  //   recall: attrecall,
+  // } = useAttendance(selectedProject);
  const [attendances, setAttendances] = useState();
  const [empRoles, setEmpRoles] = useState(null);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [modelConfig, setModelConfig] = useState();
  const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
  const { projectNames, loading: projectLoading, fetchData } = useProjectName();
-  

  const [formData, setFormData] = useState({
    markTime: "",
@ -54,47 +53,38 @@ const AttendancePage = () => {
    date: new Date().toLocaleDateString(),
  });

-  const handler = useCallback(
-    (msg) => {
-      if (selectedProject == msg.projectId) {
-        const updatedAttendance = attendances.map((item) =>
-          item.employeeId === msg.response.employeeId
-            ? { ...item, ...msg.response }
-            : item
-        );
-        // cacheData("Attendance", {
-        //   data: updatedAttendance,
-        //   projectId: selectedProject,
-        // });
-        queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
-        if (!oldData) return oldData;
-        return oldData.map((emp) =>
-          emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
-        );
-      });
-        // setAttendances(updatedAttendance);
-      }
-    },
-    [selectedProject, attrecall]
-  );
+  // const handler = useCallback(
+  //   (msg) => {
+  //     if (selectedProject == msg.projectId) {
+  //       const updatedAttendance = attendances.map((item) =>
+  //         item.employeeId === msg.response.employeeId
+  //           ? { ...item, ...msg.response }
+  //           : item
+  //       );
+  //       queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
+  //         if (!oldData) return oldData;
+  //         return oldData.map((emp) =>
+  //           emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
+  //         );
+  //       });
+  //     }
+  //   },
+  //   [selectedProject, attrecall]
+  // );

-  const employeeHandler = useCallback(
-    (msg) => {
-      if (attendances.some((item) => item.employeeId == msg.employeeId)) {
-        // AttendanceRepository.getAttendance(selectedProject)
-        //   .then((response) => {
-        //     cacheData("Attendance", { data: response.data, selectedProject });
-        //     setAttendances(response.data);
-        //   })
-        //   .catch((error) => {
-        //     console.error(error);
-        //   });
-
-        attrecall()
-      }
-    },
-    [selectedProject, attendances]
-  );
+  // const employeeHandler = useCallback(
+  //   (msg) => {
+  //     if (attendances.some((item) => item.employeeId == msg.employeeId)) {
+  //       attrecall();
+  //     }
+  //   },
+  //   [selectedProject, attendances]
+  // );
+  useEffect(() => {
+    if (selectedProject == null) {
+      dispatch(setProjectId(projectNames[0]?.id));
+    }
+  }, []);

  const getRole = (roleId) => {
    if (!empRoles) return "Unassigned";
@ -114,70 +104,28 @@ const AttendancePage = () => {
  const closeModal = () => {
    setModelConfig(null);
    setIsCreateModalOpen(false);
-    // const modalElement = document.getElementById("check-Out-modal");
-    // if (modalElement) {
-    //   modalElement.classList.remove("show");
-    //   modalElement.style.display = "none";
-    //   document.body.classList.remove("modal-open");
-    //   document.querySelector(".modal-backdrop")?.remove();
-    // }
  };

-  // const handleSubmit = (formData) => {
-  //   dispatch(markCurrentAttendance(formData))
-  //     .then((action) => {
-  //       const updatedAttendance = attendances.map((item) =>
-  //         item.employeeId === action.payload.employeeId
-  //           ? { ...item, ...action.payload }
-  //           : item
-  //       );
-  //       cacheData("Attendance", {
-  //         data: updatedAttendance,
-  //         projectId: selectedProject,
-  //       });
-  //       setAttendances(updatedAttendance);
-  //       showToast("Attedance Marked Successfully", "success");
-  //     })
-  //     .catch((error) => {
-  //       showToast(error.message, "error");
-  //     });
-  // };
-
  const handleToggle = (event) => {
    setShowOnlyCheckout(event.target.checked);
  };
-  useEffect(() => {
-   if(selectedProject == null){
-       dispatch(setProjectId(projectNames[0]?.id));
-   }
-   },[])

-  
+
  useEffect(() => {
    if (modelConfig !== null) {
      openModel();
    }
  }, [modelConfig, isCreateModalOpen]);
-  useEffect(() => {
-    setAttendances(attendance);
-  }, [attendance]);

+  // useEffect(() => {
+  //   eventBus.on("attendance", handler);
+  //   return () => eventBus.off("attendance", handler);
+  // }, [handler]);

-  const filteredAttendance = ShowPending
-    ? attendances?.filter(
-        (att) => att?.checkInTime !== null && att?.checkOutTime === null
-      )
-    : attendances;
-
-  useEffect(() => {
-    eventBus.on("attendance", handler);
-    return () => eventBus.off("attendance", handler);
-  }, [handler]);
-
-  useEffect(() => {
-    eventBus.on("employee", employeeHandler);
-    return () => eventBus.off("employee", employeeHandler);
-  }, [employeeHandler]);
+  // useEffect(() => {
+  //   eventBus.on("employee", employeeHandler);
+  //   return () => eventBus.off("employee", employeeHandler);
+  // }, [employeeHandler]);
  return (
    <>
      {/* {isCreateModalOpen && modelConfig && (
@ -195,27 +143,30 @@ const AttendancePage = () => {
          />
        </div>
      )} */}
-
-{isCreateModalOpen && modelConfig && (
-  <GlobalModel isOpen={isCreateModalOpen} size={modelConfig?.action === 6 && "lg"} closeModal={closeModal}>
-     {(modelConfig?.action === 0 || modelConfig?.action === 1 ||  modelConfig?.action === 2) && (
-          <CheckCheckOutmodel modeldata={modelConfig} closeModal={closeModal}   />
-      
-       )}
-      {/* For view logs */}
-       {modelConfig?.action === 6 && (
-            <AttendLogs Id={modelConfig?.id} closeModal={closeModal}  />
-         
+      {isCreateModalOpen && modelConfig && (
+        <GlobalModel
+          isOpen={isCreateModalOpen}
+          size={modelConfig?.action === 6 && "lg"}
+          closeModal={closeModal}
+        >
+          {(modelConfig?.action === 0 ||
+            modelConfig?.action === 1 ||
+            modelConfig?.action === 2) && (
+            <CheckCheckOutmodel
+              modeldata={modelConfig}
+              closeModal={closeModal}
+            />
+          )}
+          {/* For view logs */}
+          {modelConfig?.action === 6 && (
+            <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
+          )}
+          {modelConfig?.action === 7 && (
+            <Confirmation closeModal={closeModal} />
+          )}
+        </GlobalModel>
      )}
-      {
-        modelConfig?.action === 7 &&(
-          <Confirmation closeModal={closeModal} />
-        )
-      }
-  </GlobalModel>
-)}

-      
      <div className="container-fluid">
        <Breadcrumb
          data={[
@ -223,14 +174,14 @@ const AttendancePage = () => {
            { label: "Attendance", link: null },
          ]}
        ></Breadcrumb>
-        <div className="nav-align-top nav-tabs-shadow">
-
-
+        <div className="nav-align-top nav-tabs-shadow" >
          <ul className="nav nav-tabs" role="tablist">
            <li className="nav-item">
              <button
                type="button"
-                className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
+                className={`nav-link ${
+                  activeTab === "all" ? "active" : ""
+                } fs-6`}
                onClick={() => setActiveTab("all")}
                data-bs-toggle="tab"
                data-bs-target="#navs-top-home"
@ -241,7 +192,9 @@ const AttendancePage = () => {
            <li className="nav-item">
              <button
                type="button"
-                className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
+                className={`nav-link ${
+                  activeTab === "logs" ? "active" : ""
+                } fs-6`}
                onClick={() => setActiveTab("logs")}
                data-bs-toggle="tab"
                data-bs-target="#navs-top-profile"
@ -263,31 +216,15 @@ const AttendancePage = () => {
              </button>
            </li>
          </ul>
-          <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" && (
-              <>
-                {!attLoading && (
                  <div className="tab-pane fade show active py-0">
-                  <Attendance
-                    attendance={filteredAttendance}
-                    handleModalData={handleModalData}
-                    getRole={getRole}
-                    setshowOnlyCheckout={setShowPending}
-                    showOnlyCheckout={ShowPending}
-                  />
-                </div>
-                )}
-                {!attLoading && filteredAttendance?.length === 0 && (
-                  <p>
-                    {" "}
-                    {ShowPending
-                      ? "No Pending Available"
-                      : "No Employee assigned yet."}{" "}
-                  </p>
-                )}
-              </>
+                    <Attendance
+                      handleModalData={handleModalData}
+                      getRole={getRole}
+                    />
+                  </div>
            )}
-
            {activeTab === "logs" && (
              <div className="tab-pane fade show active py-0">
                <AttendanceLog
@ -298,16 +235,11 @@ const AttendancePage = () => {
                />
              </div>
            )}
-
            {activeTab === "regularization" && DoRegularized && (
              <div className="tab-pane fade show active py-0">
-                {/* <Regularization handleRequest={handleSubmit} /> */}
-                <Regularization  />
+                <Regularization />
              </div>
            )}
-
-            {attLoading && <span>Loading..</span>}
-            {!attLoading && !attendances && <span>Not Found</span>}
          </div>
        </div>
      </div>
--- a/src/pages/employee/EmployeeList.jsx
+++ b/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="card ">
+          // <div className="row">
+            <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">
--- a/src/pages/project/ProjectDetails.jsx
+++ b/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>
          </>
--- a/src/pages/project/ProjectListView.jsx
+++ b/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})`
--- a/src/repositories/GlobalRepository.jsx
+++ b/src/repositories/GlobalRepository.jsx
@ -26,12 +26,22 @@ const GlobalRepository = {
  getDashboardProjectsCardData: () => {
    return api.get(`/api/Dashboard/projects`);
  },
-  getDashboardTeamsCardData: () => {
-    return api.get(`/api/Dashboard/teams`);
-  },
-  getDashboardTasksCardData: () => {
-    return api.get(`/api/Dashboard/tasks`);
-  },
+  
+  getDashboardTeamsCardData: (projectId) => {
+  const url = projectId
+    ? `/api/Dashboard/teams?projectId=${projectId}`
+    : `/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}`)

 };

--- a/src/slices/localVariablesSlice.jsx
+++ b/src/slices/localVariablesSlice.jsx
@ -5,6 +5,10 @@ const localVariablesSlice = createSlice({
  initialState: {
    selectedMaster:"Application Role",
    regularizationCount:0,
+     defaultDateRange: {
+      startDate: null,
+      endDate: null,
+    },
    projectId: null,
    reload:false
  
@ -22,9 +26,12 @@ const localVariablesSlice = createSlice({
    refreshData: ( state, action ) =>
    {
      state.reload = action.payload
-    }
+    },
+    setDefaultDateRange: (state, action) => {
+      state.defaultDateRange = action.payload;
+    },
  },
 });

-export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData} = localVariablesSlice.actions;
+export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData,setDefaultDateRange} = localVariablesSlice.actions;
 export default localVariablesSlice.reducer;
Author	SHA1	Message	Date
pramod mahajan	07885d3ed4	intergrated react-query	2025-07-17 20:41:57 +05:30
pramod mahajan	6e5e206bc8	Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into react-query-v2	2025-07-17 17:30:16 +05:30
Vikas Nale	23998d8735	Merge pull request 'Issues_July_3W' (#262 ) from Issues_July_3W into main Reviewed-on: #262	2025-07-17 11:50:24 +00:00
pramod mahajan	839dfa3dc3	removed unused code	2025-07-17 15:42:33 +05:30
pramod mahajan	b9c240261c	selectProject was missing to defined in - useSuspendEmployee - therefor getting this - selected Project is not defined but actually employee is suspended properly, but show just extrap error msg	2025-07-17 13:07:36 +05:30
pramod mahajan	6bf33b27a0	Fixed: Prevent brief display of "No activities available" before task data loads - Improved conditional rendering logic in WorkArea component - Ensured "No activities" message only shows after data is loaded and empty - Avoided flicker caused by initial undefined or empty task list state	2025-07-17 11:47:23 +05:30
pramod mahajan	2a74333870	added middlerware for project selection	2025-07-16 18:40:35 +05:30
pramod.mahajan	359a9114b4	Merge pull request 'Attendance_Weidget_feature' (#261 ) from Attendance_Weidget_feature into Issues_July_3W Reviewed-on: #261 meregd	2025-07-16 13:08:25 +00:00
Kartik sharma	d2f761bd48	Changes in EmployeePage.	2025-07-16 13:08:25 +00:00
Kartik sharma	4a49bbd68d	In table remove all Capitals letters and show small letters.	2025-07-16 13:08:25 +00:00
Kartik sharma	78909e2275	Adding Color at the time of tables where value is greater then 0 and all the table times to left align.	2025-07-16 13:08:25 +00:00
Kartik sharma	c1fb50c667	Creating a new weidget Attendance Overview and accroding to project selection data will seen.	2025-07-16 13:08:25 +00:00
pramod mahajan	b502b6b31e	removed debugger	2025-07-16 18:35:43 +05:30
pramod mahajan	69c9f748f5	project properly moved on project details , on correct project where choosed project	2025-07-16 18:35:33 +05:30
pramod mahajan	2425387d8e	display correctly activie,incative and all employee according user action	2025-07-16 18:30:06 +05:30
pramod mahajan	ea6d03ef75	fiex pagination in regularization issue	2025-07-16 18:15:46 +05:30