index.html

@@ -52,7 +52,7 @@
   <!-- Timer Picker -->
   <!-- Flatpickr CSS -->
   <link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
-  <link rel="stylesheet" href="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />
+  <link rel="stylesheet" href="./src/assets/vendor/libs/jquery-timepicker/jquery-timepicker.css" />
 
 
 

public/assets/js/main.js

@@ -115,38 +115,4 @@ function Main () {
 
   // Auto update menu collapsed/expanded based on the themeConfig
   window.Helpers.setCollapsed(true, false);
-
-   
-
-
-  // perfect scrolling
-    const verticalExample = document.getElementById('vertical-example'),
-      horizontalExample = document.getElementById('horizontal-example'),
-      horizVertExample = document.getElementById('both-scrollbars-example');
-
-    // Vertical Example
-    // --------------------------------------------------------------------
-    if (verticalExample) {
-      new PerfectScrollbar(verticalExample, {
-        wheelPropagation: false
-      });
-    }
-
-    // Horizontal Example
-    // --------------------------------------------------------------------
-    if (horizontalExample) {
-      new PerfectScrollbar(horizontalExample, {
-        wheelPropagation: false,
-        suppressScrollY: true
-      });
-    }
-
-    // Both vertical and Horizontal Example
-    // --------------------------------------------------------------------
-    if (horizVertExample) {
-      new PerfectScrollbar(horizVertExample, {
-        wheelPropagation: false
-      });
-    }
-
 };

public/assets/vendor/css/core.css

@@ -454,9 +454,7 @@ table {
   caption-side: bottom;
   border-collapse: collapse;
 }
-.tr-group{
+
-    background-color: var(--bs-body-bg);   /* apply globale color for table row, where grouping datewise*/
-}
 caption {
   padding-top: 0.782rem;
   padding-bottom: 0.782rem;

src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -6,41 +6,29 @@ 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 = ({ getRole, handleModalData }) => {
+const Attendance = ({
-  const queryClient = useQueryClient();
+  attendance,
+  getRole,
+  handleModalData,
+  setshowOnlyCheckout,
+  showOnlyCheckout,
+}) => {
   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,
-    isFetching
-  } = useAttendance(selectedProject);
-  const filteredAttendance = ShowPending
-    ? attendance?.filter(
-        (att) => att?.checkInTime !== null && att?.checkOutTime === null
-      )
-    : attendance;
 
-  const attendanceList = Array.isArray(filteredAttendance)
+  // Ensure attendance is an array
-    ? filteredAttendance
+  const attendanceList = Array.isArray(attendance) ? attendance : [];
-    : [];
 
+  // 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);
@@ -49,69 +37,30 @@ const Attendance = ({ getRole, handleModalData }) => {
     .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) {
-            queryClient.invalidateQueries({queryKey:["attendance"]})
-          };
-          return oldData.map((record) =>
-            record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record
-          );
-        });
-      }
-    },
-    [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 h-100" >
+      <div className="table-responsive text-nowrap">
         <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"
-              disabled={isFetching}
+              checked={showOnlyCheckout}
-              checked={ShowPending}
+              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
-              onChange={(e) => setShowPending(e.target.checked)}
             />
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-        {Array.isArray(attendance) && attendance.length > 0 ? (
+        {attendance && attendance.length > 0 && (
           <>
             <table className="table ">
               <thead>
@@ -132,13 +81,14 @@ const Attendance = ({ getRole, handleModalData }) => {
                 {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;
+                      return checkInB - checkInA; // Sort in descending order of checkInTime
                     })
                     .map((item) => (
                       <tr key={item.employeeId}>
@@ -188,7 +138,7 @@ const Attendance = ({ getRole, handleModalData }) => {
                       </tr>
                     ))}
                 {!attendance && (
-                  <span className="text-secondary m-4">No employees assigned to the project!</span>
+                  <span>No employees assigned to the project</span>
                 )}
               </tbody>
             </table>
@@ -239,18 +189,6 @@ const Attendance = ({ getRole, handleModalData }) => {
               </nav>
             )}
           </>
-        ) : attLoading ? (
-          <div>Loading...</div>
-        ) : (
-          <div className="text-muted">
-            {Array.isArray(attendance)
-              ? "No employees assigned to the project"
-              : "Attendance data unavailable"}
-          </div>
-        )}
-
-        {currentItems?.length == 0 && attendance.length > 0 && (
-          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
         )}
       </div>
     </>

src/components/Activities/AttendcesLogs.jsx

@@ -9,8 +9,6 @@ import DateRangePicker from "../common/DateRangePicker";
 import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
-import { useAttendancesLogs } from "../../hooks/useAttendance";
-import { queryClient } from "../../layouts/AuthLayout";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -35,15 +33,13 @@ const usePagination = (data, itemsPerPage) => {
 
 const AttendanceLog = ({
   handleModalData,
+  projectId,
+  setshowOnlyCheckout,
+  showOnlyCheckout,
 }) => {
-  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 [showPending,setShowPending] = useState(false)
-
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [processedData, setProcessedData] = useState([]);
 
@@ -73,19 +69,20 @@ const AttendanceLog = ({
     return nameA?.localeCompare(nameB);
   };
 
-  const {
+  useEffect(() => {
-    data = [],
+    const { startDate, endDate } = dateRange;
-    isLoading,
+    dispatch(
-    error,
+      fetchAttendanceData({
-    refetch,
+        projectId,
-    isFetching,
+        fromDate: startDate,
-  } = useAttendancesLogs(
+        toDate: endDate,
-    selectedProject,
+      })
-    dateRange.startDate,
+    );
-    dateRange.endDate
+    setIsRefreshing(false);
-  );
+  }, [dateRange, projectId, dispatch, isRefreshing]);
+
   const filtering = (data) => {
-    const filteredData = showPending
+    const filteredData = showOnlyCheckout
       ? data.filter((item) => item.checkOutTime === null)
       : data;
 
@@ -127,17 +124,19 @@ 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, showPending]);
+  }, [data, showOnlyCheckout]);
 
   const {
     currentPage,
@@ -147,59 +146,55 @@ const AttendanceLog = ({
     resetPage,
   } = usePagination(processedData, 20);
 
+  // Reset to the first page whenever processedData changes (due to switch on/off)
   useEffect(() => {
     resetPage();
   }, [processedData, resetPage]);
 
   const handler = useCallback(
-    (msg) => {
+  (msg) => {
-      const { startDate, endDate } = dateRange;
+    const { startDate, endDate } = dateRange;
-      const checkIn = msg.response.checkInTime.substring(0, 10);
+    const checkIn = msg.response.checkInTime.substring(0, 10);
-      if (
+    if (
-        selectedProject === msg.projectId &&
+      projectId === msg.projectId &&
-        startDate <= checkIn &&
+      startDate <= checkIn &&
-        checkIn <= endDate
+      checkIn <= endDate
-      ) {
+    ) {
-        queryClient.setQueriesData(["attendanceLogs"],(oldData)=>{
+      const updatedAttendance = data.map((item) =>
-          if(!oldData) {
+        item.id === msg.response.id
-            queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
+          ? { ...item, ...msg.response }
-          }
+          : item
-          return oldData.map((record) =>
+      );
-          record.id === msg.response.id ? { ...record, ...msg.response } : record
-        );
-        })
 
-        filtering(updatedAttendance);
+      filtering(updatedAttendance);
-        resetPage();
+      resetPage();
-      }
+    }
-    },
+  },
-    [selectedProject, dateRange, data, filtering, 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(
+        dispatch(
-        //   fetchAttendanceData({
+          fetchAttendanceData({
-        //     ,
+        projectId,
-        //     fromDate: startDate,
+        fromDate: startDate,
-        //     toDate: endDate,
+        toDate: endDate,
-        //   })
+      })
-        // );
+        )
-
-        refetch()
       }
     },
-    [selectedProject, dateRange, data]
+    [projectId, dateRange,data]
   );
 
-  useEffect(() => {
+    useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
@@ -220,10 +215,9 @@ const AttendanceLog = ({
               type="checkbox"
               className="form-check-input"
               role="switch"
-              disabled={isFetching}
               id="inactiveEmployeesCheckbox"
-              checked={showPending}
+              checked={showOnlyCheckout}
-              onChange={(e) => setShowPending(e.target.checked)}
+              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
             />
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
@@ -231,17 +225,18 @@ const AttendanceLog = ({
         <div className="col-md-2 m-0 text-end">
           <i
             className={`bx bx-refresh cursor-pointer fs-4 ${
-              isFetching ? "spin" : ""
+              loading || isRefreshing ? "spin" : ""
             }`}
             title="Refresh"
-            onClick={() => refetch()}
+            onClick={() => setIsRefreshing(true)}
           />
         </div>
       </div>
-      <div className="table-responsive text-nowrap">
+      <div
-        {isLoading ? (
+        className="table-responsive text-nowrap"
-          <div><p className="text-secondary">Loading...</p></div>
+        style={{ minHeight: "200px", display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-        ) : data?.length > 0 ? (
+      >
+        {data && data.length > 0 && (
           <table className="table mb-0">
             <thead>
               <tr>
@@ -260,82 +255,92 @@ const AttendanceLog = ({
               </tr>
             </thead>
             <tbody>
-              {paginatedAttendances.reduce((acc, attendance, index, arr) => {
+              {(loading || isRefreshing) && (
-                const currentDate = moment(
+                <tr>
-                  attendance.checkInTime || attendance.checkOutTime
+                  <td colSpan={6}>Loading...</td>
-                ).format("YYYY-MM-DD");
+                </tr>
-                const previousAttendance = arr[index - 1];
+              )}
-                const previousDate = previousAttendance
+              {!loading &&
-                  ? moment(
+                !isRefreshing &&
-                      previousAttendance.checkInTime ||
+                paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                        previousAttendance.checkOutTime
+                  const currentDate = moment(
-                    ).format("YYYY-MM-DD")
+                    attendance.checkInTime || attendance.checkOutTime
-                  : null;
+                  ).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) {
+                  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>
+                    );
+                  }
                   acc.push(
-                    <tr
+                    <tr key={index}>
-                      key={`header-${currentDate}`}
+                      <td colSpan={2}>
-                      className="table-row-header"
+                        <div className="d-flex justify-content-start align-items-center">
-                    >
+                          <Avatar
-                      <td colSpan={6} className="text-start">
+                            firstName={attendance.firstName}
-                        <strong>
+                            lastName={attendance.lastName}
-                          {moment(currentDate).format("DD-MM-YYYY")}
+                          />
-                        </strong>
+                          <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;
-                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>
-        ) : (
-           <div className="my-4"><span className="text-secondary">No Record Available !</span></div>
         )}
+        {!loading && !isRefreshing && data.length === 0 && (
+         <span className="text-muted">No employee logs</span>
+        )}
+        {/* {error && !loading && !isRefreshing && (
+          <tr>
+            <td colSpan={6}>{error}</td>
+          </tr>
+        )} */}
       </div>
-        {paginatedAttendances?.length == 0 && data?.length > 0 && (
+      {!loading && !isRefreshing && processedData.length > 10 && (
-          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
-        )}
-      {processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>

src/components/Activities/CheckCheckOutForm.jsx

@@ -8,7 +8,6 @@ import { useDispatch, useSelector } from "react-redux";
 import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
 import showToast from "../../services/toastService";
 import { checkIfCurrentDate } from "../../utils/dateUtils";
-import { useMarkAttendance } from "../../hooks/useAttendance";
 
 
 const schema = z.object({
@@ -19,7 +18,6 @@ const schema = z.object({
 const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
 
   const projectId = useSelector((store) => store.localVariables.projectId)
-  const {mutate:MarkAttendance} = useMarkAttendance()
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
   const dispatch = useDispatch()
@@ -46,34 +44,29 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
 
   const onSubmit = (data) => {
     let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, employeeId: modeldata.employeeId, action: modeldata.action, id: modeldata?.id || null }
-    // if (modeldata.forWhichTab === 1 || modeldata.forWhichTab === 2) {
+    if (modeldata.forWhichTab === 1) {
-      // handleSubmitForm(record)
+      handleSubmitForm(record)
-          const payload = {
+    } else {
-          Id: modeldata?.id || null,
-          comment: data.description,
-          employeeID: modeldata.employeeId,
-          projectId: projectId,
-          date: new Date().toISOString(),
-          markTime: data.markTime,
-          latitude: coords.latitude.toString(),
-          longitude: coords.longitude.toString(),
-          action: modeldata.action,
-          image: null,
-        };
-      MarkAttendance({payload,forWhichTab:modeldata.forWhichTab})
-    // } else {
-    //   dispatch(markAttendance(record))
-    //     .unwrap()
-    //     .then((data) => {
 
-    //       showToast("Attendance Marked Successfully", "success");
+      //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
-    //     })
+      //  {
-    //     .catch((error) => {
+      dispatch(markAttendance(record))
+        .unwrap()
+        .then((data) => {
 
-    //       showToast(error, "error");
+          showToast("Attendance Marked Successfully", "success");
+        })
+        .catch((error) => {
 
-    //     });
+          showToast(error, "error");
-    // }
+
+        });
+
+      //  } else
+      //  {
+      //   let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
+      //  }
+    }
 
     closeModal()
   };
@@ -182,6 +175,7 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
 
 
   const onSubmit = (data) => {
+
     let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, }
     handleSubmitForm(record)
     closeModal()

src/components/Activities/Regularization.jsx

@@ -8,10 +8,8 @@ import moment from "moment";
 import usePagination from "../../hooks/usePagination";
 import eventBus from "../../services/eventBus";
 import { cacheData, clearCacheKey } from "../../slices/apiDataManager";
-import { useQueryClient } from "@tanstack/react-query";
 
 const Regularization = ({ handleRequest }) => {
-  const queryClient = useQueryClient();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const [regularizesList, setregularizedList] = useState([]);
   const { regularizes, loading, error, refetch } =
@@ -30,25 +28,13 @@ const Regularization = ({ handleRequest }) => {
   const handler = useCallback(
     (msg) => {
       if (selectedProject == msg.projectId) {
-        // const updatedAttendance = regularizes?.filter(
+        const updatedAttendance = regularizes?.filter( item => item.id !== msg.response.id );
-        //   (item) => item.id !== msg.response.id
+        cacheData("regularizedList", {
-        // );
+          data: updatedAttendance,
-        // cacheData("regularizedList", {
+          projectId: selectedProject,
-        //   data: updatedAttendance,
+        });
-        //   projectId: selectedProject,
+        // clearCacheKey("regularizedList")
-        // });
+        refetch();
-        // refetch();
-
-        queryClient.setQueryData(
-          ["regularizedList", selectedProject],
-          (oldData) => {
-            if (!oldData) {
-              queryClient.invalidateQueries({ queryKey: ["regularizedList"] });
-            }
-            return oldData.filter((record) => record.id !== msg.response.id);
-          }
-        ),
-          queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
       }
     },
     [selectedProject, regularizes]
@@ -65,7 +51,7 @@ const Regularization = ({ handleRequest }) => {
     return () => eventBus.off("regularization", handler);
   }, [handler]);
 
-  const employeeHandler = useCallback(
+     const employeeHandler = useCallback(
     (msg) => {
       if (regularizes.some((item) => item.employeeId == msg.employeeId)) {
         refetch();
@@ -74,73 +60,91 @@ const Regularization = ({ handleRequest }) => {
     [regularizes]
   );
 
-  useEffect(() => {
+    useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
   return (
-    <div className="table-responsive text-nowrap pb-4">
+    <div
-      {loading ? (
+      className="table-responsive text-nowrap pb-4"
-        <div className="my-2">
+      
-          <p className="text-secondary">Loading...</p>
+    >
-        </div>
+      <table className="table mb-0">
-      ) : currentItems?.length > 0 ? (
+        <thead>
-        <table className="table mb-0">
+          <tr>
-          <thead>
+            <th colSpan={2}>Name</th>
-            <tr>
+            <th>Date</th>
-              <th colSpan={2}>Name</th>
+            <th>
-              <th>Date</th>
+              <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
-              <th>
+            </th>
-                <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
+            <th>
-              </th>
+              <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
-              <th>
+            </th>
-                <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
+            <th>Action</th>
-              </th>
+          </tr>
-              <th>Action</th>
+        </thead>
-            </tr>
+        <tbody>
-          </thead>
+          {/* {loading && (
-          <tbody>
+            <td colSpan={6} className="text-center py-5">
-            {currentItems?.map((att, index) => (
+              Loading...
-              <tr key={index}>
+            </td>
-                <td colSpan={2}>
+          )} */}
-                  <div className="d-flex justify-content-start align-items-center">
+
-                    <Avatar
+          {!loading &&
-                      firstName={att.firstName}
+            (currentItems?.length > 0 ? (
-                      lastName={att.lastName}
+              currentItems?.map((att, index) => (
-                    ></Avatar>
+                <tr key={index}>
-                    <div className="d-flex flex-column">
+                  <td colSpan={2}>
-                      <a href="#" className="text-heading text-truncate">
+                    <div className="d-flex justify-content-start align-items-center">
-                        <span className="fw-normal">
+                      <Avatar
-                          {att.firstName} {att.lastName}
+                        firstName={att.firstName}
-                        </span>
+                        lastName={att.lastName}
-                      </a>
+                      ></Avatar>
+                      <div className="d-flex flex-column">
+                        <a href="#" className="text-heading text-truncate">
+                          <span className="fw-normal">
+                            {att.firstName} {att.lastName}
+                          </span>
+                        </a>
+                      </div>
                     </div>
-                  </div>
+                  </td>
-                </td>
+                  <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
-                <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
+                  <td>{convertShortTime(att.checkInTime)}</td>
-                <td>{convertShortTime(att.checkInTime)}</td>
+                  <td>
-                <td>
+                    {att.checkOutTime
-                  {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
+                      ? convertShortTime(att.checkOutTime)
-                </td>
+                      : "--"}
-                <td className="text-center ">
+                  </td>
-                  <RegularizationActions
+                  <td className="text-center ">
-                    attendanceData={att}
+                    {/* <div className='d-flex  justify-content-center align-items-center gap-3'> */}
-                    handleRequest={handleRequest}
+                    <RegularizationActions
-                    refresh={refetch}
+                      attendanceData={att}
-                  />
+                      handleRequest={handleRequest}
-                  {/* </div> */}
+                      refresh={refetch}
+                    />
+                    {/* </div> */}
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td
+                  colSpan={6}
+                  className="text-center"
+                  style={{
+                    height: "200px",
+                    verticalAlign: "middle",
+                    borderBottom: "none",
+                  }}
+                >
+                  No Record Found
                 </td>
               </tr>
             ))}
-          </tbody>
+        </tbody>
-        </table>
+      </table>
-      ) : (
-        <div className="my-4">
-          {" "}
-          <span className="text-secondary">No Requests Found !</span>
-        </div>
-      )}
       {!loading && totalPages > 1 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
@@ -186,4 +190,4 @@ const Regularization = ({ handleRequest }) => {
   );
 };
 
-export default Regularization;
+export default Regularization;

src/components/Activities/RegularizationActions.jsx

@@ -6,16 +6,12 @@ import { usePositionTracker } from '../../hooks/usePositionTracker';
 import {markCurrentAttendance} from '../../slices/apiSlice/attendanceAllSlice';
 import {cacheData, getCachedData} from '../../slices/apiDataManager';
 import showToast from '../../services/toastService';
-import { useMarkAttendance } from '../../hooks/useAttendance';
-import { useQueryClient } from '@tanstack/react-query';
 
 
 const RegularizationActions = ({attendanceData,handleRequest,refresh}) => {
 const [status,setStatus] = useState()
 const [loadingApprove,setLoadingForApprove] = useState(false)
 const [loadingReject,setLoadingForReject] = useState(false)
-const {mutate:MarkAttendance,isPending} = useMarkAttendance()
-const queryClient = useQueryClient()
 
 const projectId = useSelector((store)=>store.localVariables.projectId)
 const {latitude,longitude} = usePositionTracker();
@@ -28,11 +24,11 @@ const dispatch = useDispatch()
     }else{
       setLoadingForReject(true)
     }
-
+  //  setLoading(true)
-    let payload = {
+    let req_Data = {
       id:request_attendance.id || null,
-      comment: ` ${IsReqularize ? "Approved" : "Rejected"}! regularization request`,
+      description: ` ${IsReqularize ? "Approved" : "Rejected"}! regularization request`,
-      employeeID:request_attendance?.employeeId,
+      employeeId:request_attendance?.employeeId,
       projectId:projectId,
       date:new Date().toISOString(),
       markTime:new Date().toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
@@ -41,46 +37,22 @@ const dispatch = useDispatch()
       action:IsReqularize ? 4 : 5,
       image:null 
     }
-     
-
-    MarkAttendance(
-    { payload, forWhichTab: 3 },
-    {
-      onSuccess: () => {
-       queryClient.invalidateQueries({queryKey:["regularizedList"]})
-         if (IsReqularize) {
-          setLoadingForApprove(false);
-        } else {
-          setLoadingForReject(false);
-        }
-        showToast(`Successfully ${IsReqularize ? "approved" : "rejected"}`, "success");
-      },
-      onError: (error) => {
-        showToast(error.message || "Failed to submit", "error");
-        if (IsReqularize) {
-          setLoadingForApprove(false);
-        } else {
-          setLoadingForReject(false);
-        }
-      },
-    }
-  );
   
-  //   dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
+    dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
-  //   {
+    {
 
-  //     const regularizedList = getCachedData("regularizedList")
+      const regularizedList = getCachedData("regularizedList")
       
-  //     const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
+      const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
      
-  //     cacheData("regularizedList",{data:updatedata,projectId:projectId})
+      cacheData("regularizedList",{data:updatedata,projectId:projectId})
-  //     setLoadingForApprove( false )
+      setLoadingForApprove( false )
-  //     setLoadingForReject( false )
+      setLoadingForReject( false )
-  //     refresh()
+      refresh()
-  //  }).catch( ( error ) =>
+   }).catch( ( error ) =>
-  //   {
+    {
-  //     showToast(error.message,"error")
+      showToast(error.message,"error")
-  // });
+  });
     
     
   }

src/components/Project/Infrastructure/WorkItem.jsx

@@ -32,7 +32,7 @@ const WorkItem = ({
   forWorkArea,
   deleteHandleTask,
 }) => {
-  const  projectId  = useSelector((store)=>store.localVariables.projectId) 
+  // const  projectId  = useSelector((store)=>store.localVariables.projectId) 
 const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
 
   const [itemName, setItemName] = useState("");

src/hooks/useAttendance.js

@@ -1,293 +1,109 @@
 import { useEffect, useState } from "react";
 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 { useDispatch, useSelector } from "react-redux";
-import { store } from "../store/store";
-import { setDefaultDateRange } from "../slices/localVariablesSlice";
 
-// export const useAttendace =(projectId)=>{
+export const useAttendace =(projectId)=>{
 
-//   const [attendance, setAttendance] = useState([]);
+  const [attendance, setAttendance] = useState([]);
-//   const[loading,setLoading] = useState(true)
+  const[loading,setLoading] = useState(true)
-//   const [error, setError] = useState(null); 
+  const [error, setError] = useState(null); 
 
-//    const fetchData =  () => {
+   const fetchData =  () => {
-//      const Attendance_cache = getCachedData("Attendance");
+     const Attendance_cache = getCachedData("Attendance");
-//      if(!Attendance_cache || Attendance_cache.projectId !== projectId){
+     if(!Attendance_cache || Attendance_cache.projectId !== projectId){
       
-//         setLoading(true);
+        setLoading(true);
-//          AttendanceRepository.getAttendance(projectId)
+         AttendanceRepository.getAttendance(projectId)
-//            .then((response) => {
+           .then((response) => {
-//              setAttendance(response.data);
+             setAttendance(response.data);
-//              cacheData( "Attendance", {data: response.data, projectId} )
+             cacheData( "Attendance", {data: response.data, projectId} )
-//              setLoading(false)
+             setLoading(false)
-//            })
+           })
-//            .catch((error) => {
+           .catch((error) => {
-//             setLoading(false)
+            setLoading(false)
-//             setError("Failed to fetch data.");
+            setError("Failed to fetch data.");
-//            })
+           })
-//       }  else {
+      }  else {
-//         setAttendance(Attendance_cache.data);
+        setAttendance(Attendance_cache.data);
-//         setLoading(false)
+        setLoading(false)
-//       }
+      }
-//     };
+    };
 
 
-//   useEffect(()=>{
+  useEffect(()=>{
-//     if ( projectId && projectId != 1 )
+    if ( projectId && projectId != 1 )
-//     {
+    {
-//       fetchData(projectId);
+      fetchData(projectId);
-//     }
-//   },[projectId])
-
-//   return {attendance,loading,error,recall:fetchData}
-// }
-
-// export const useEmployeeAttendacesLog = (id) => {
-//   const [logs, setLogs] = useState([]);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-
-   
-//   const fetchData =  () => {
-//     const AttendanceLog_cache = getCachedData("AttendanceLogs");
-//     if(!AttendanceLog_cache || AttendanceLog_cache.id !== id  ){
-//        setLoading(true)
-//        AttendanceRepository.getAttendanceLogs(id).then((response)=>{     
-//         setLogs(response.data)
-//         cacheData("AttendanceLogs", { data: response.data, id })
-//         setLoading(false)
-//         }).catch((error)=>{
-//           setError("Failed to fetch data.");
-//           setLoading(false);
-//         })     
-//     }else{
-     
-//       setLogs(AttendanceLog_cache.data);
-//     }
-//   };
-
-//   useEffect(() => {
-//     if (id) {
-//       fetchData(); 
-//     }
-
-//   }, [id]);
-
-//   return { logs, loading, error };
-// };
-
-// export const useRegularizationRequests = ( projectId ) =>
-// {
-//   const [regularizes, setregularizes] = useState([]);
-//   const [loading, setLoading] = useState(false);
-//   const [error, setError] = useState(null);
-
-   
-//   const fetchData =  () => {
-//     const regularizedList_cache = getCachedData("regularizedList");
-//     if(!regularizedList_cache || regularizedList_cache.projectId !== projectId  ){
-//        setLoading(true)
-//        AttendanceRepository.getRegularizeList(projectId).then((response)=>{     
-//         setregularizes( response.data )
-//         cacheData("regularizedList", { data: response.data, projectId })
-//         setLoading(false)
-//         }).catch((error)=>{
-//           setError("Failed to fetch data.");
-//           setLoading(false);
-//         })     
-//     }else{
-     
-//       setregularizes(regularizedList_cache.data);
-//     }
-//   };
-
-//   useEffect(() => {
-//     if (projectId) {
-//       fetchData(); 
-//     }
-
-//   }, [ projectId ] );
-//   return {regularizes,loading,error,refetch:fetchData}
-// }
-
-
-// ----------------------------Query-----------------------------
-
-
-export const useAttendance = (projectId) => {
-  const dispatch = useDispatch()
-  const {
-    data: attendance = [],
-    isLoading: loading,
-    error,
-    refetch: recall,
-    isFetching
-  } = useQuery({
-    queryKey: ["attendance", projectId],
-    queryFn: async () => {
-      const response = await AttendanceRepository.getAttendance(projectId);
-      return response.data;
-    },
-    enabled: !!projectId,
-    onError: (error) => {
-      showToast(error.message || "Error while fetching Attendance", "error");
-    },
-  });
-
-  return {
-    attendance,
-    loading,
-    error,
-    recall,
-    isFetching
-  };
-};
-
-export const useAttendancesLogs = (projectId, fromDate, toDate) => {
-  const dispatch = useDispatch();
-  const enabled = !!projectId && !!fromDate && !!toDate;
-
-  const query = useQuery({
-    queryKey: ['attendanceLogs', projectId, fromDate, toDate],
-    queryFn: async () => {
-      const res = await AttendanceRepository.getAttendanceFilteredByDate(
-        projectId,
-        fromDate,
-        toDate
-      );
-      return res.data;
-    },
-    enabled,
-  });
-  
-  useEffect(() => {
-    if (query.data && fromDate && toDate) {
-      dispatch(
-        setDefaultDateRange({
-          startDate: fromDate,
-          endDate: toDate,
-        })
-      );
     }
-  }, [dispatch, query.data, fromDate, toDate]);
+  },[projectId])
-  return query;
-};
-
 
+  return {attendance,loading,error,recall:fetchData}
+}
 
 export const useEmployeeAttendacesLog = (id) => {
-  const {
+  const [logs, setLogs] = useState([]);
-    data: logs = [],
+  const [loading, setLoading] = useState(false);
-    isLoading: loading,
+  const [error, setError] = useState(null);
-    error,
-    refetch: recall,
-  } = useQuery({
-    queryKey: ["employeeAttendanceLogs", id],
-    queryFn: async () => {
-      const response = await AttendanceRepository.getAttendanceLogs(id);
-      return response.data;
-    },
-    enabled: !!id,
-    onError: (error) => {
-      showToast(error.message || "Error while fetching Attendance Logs", "error");
-    },
-  });
 
-  return {
+   
-    logs,
+  const fetchData =  () => {
-    loading,
+    const AttendanceLog_cache = getCachedData("AttendanceLogs");
-    error,
+    if(!AttendanceLog_cache || AttendanceLog_cache.id !== id  ){
-    recall,
+       setLoading(true)
+       AttendanceRepository.getAttendanceLogs(id).then((response)=>{     
+        setLogs(response.data)
+        cacheData("AttendanceLogs", { data: response.data, id })
+        setLoading(false)
+        }).catch((error)=>{
+          setError("Failed to fetch data.");
+          setLoading(false);
+        })     
+    }else{
+     
+      setLogs(AttendanceLog_cache.data);
+    }
   };
+
+  useEffect(() => {
+    if (id) {
+      fetchData(); 
+    }
+
+  }, [id]);
+
+  return { logs, loading, error };
 };
 
-export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
+export const useRegularizationRequests = ( projectId ) =>
-  const enabled = !!employeeId && !!fromDate && !!toDate;
+{
+  const [regularizes, setregularizes] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
 
-  return useQuery({
+   
-    queryKey: ["employeeAttendance", employeeId, fromDate, toDate],
+  const fetchData =  () => {
-    queryFn: async () => {
+    const regularizedList_cache = getCachedData("regularizedList");
-      const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
+    if(!regularizedList_cache || regularizedList_cache.projectId !== projectId  ){
-      return res.data;
+       setLoading(true)
-    },
+       AttendanceRepository.getRegularizeList(projectId).then((response)=>{     
-    enabled,
+        setregularizes( response.data )
-  });
+        cacheData("regularizedList", { data: response.data, projectId })
-};
+        setLoading(false)
-
+        }).catch((error)=>{
-export const useRegularizationRequests = (projectId) => {
+          setError("Failed to fetch data.");
-  const {
+          setLoading(false);
-    data: regularizes = [],
+        })     
-    isLoading: loading,
+    }else{
-    error,
+     
-    refetch,
+      setregularizes(regularizedList_cache.data);
-  } = useQuery({
+    }
-    queryKey: ["regularizedList", projectId],
-    queryFn: async () => {
-      const response = await AttendanceRepository.getRegularizeList(projectId);
-      return response.data;
-    },
-    enabled: !!projectId,
-    onError: (error) => {
-      showToast(error.message || "Error while fetching Regularization Requests", "error");
-    },
-  });
-
-  return {
-    regularizes,
-    loading,
-    error,
-    refetch,
   };
-};
 
+  useEffect(() => {
+    if (projectId) {
+      fetchData(); 
+    }
 
-// -------------------Mutation--------------------------------------
+  }, [ projectId ] );
-
+  return {regularizes,loading,error,refetch:fetchData}
-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}) => {
-      const res = await AttendanceRepository.markAttendance(payload);
-      return res.data;
-    },
-
-    onSuccess: (data,variables) => {
-      if(variables.forWhichTab == 1){
-      queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
-        if (!oldData) return oldData;
-        return oldData.map((emp) =>
-          emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
-        );
-      });
-    }else if(variables.forWhichTab == 2){
-    //   queryClient.invalidateQueries({
-    //     queryKey: ["attendanceLogs"], 
-    //  });
-     queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
-        if (!oldData) return oldData;
-        return oldData.map((record) =>
-          record.id === data.id ? { ...record, ...data } : record
-        );
-      });
-       queryClient.invalidateQueries({queryKey:["regularizedList"]})
-    }else(
-       queryClient.setQueryData(["regularizedList",selectedProject], (oldData) => {
-        if (!oldData) return oldData;
-        return oldData.filter((record) => record.id !== data.id)
-      }),
-      queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
-    )
-
-     if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
-    },
-    onError: (error) => {
-      showToast(error.message || "Failed to mark attendance", "error");
-    },
-  });
-};

src/hooks/useImageGallery.js

@@ -2,115 +2,84 @@ import { useState, useCallback } from "react";
 // import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
 import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";
 
-// const PAGE_SIZE = 10;
-
-// const useImageGallery = (selectedProjectId) => {
-//   const [images, setImages] = useState([]);
-//   const [allImagesData, setAllImagesData] = useState([]);
-//   const [pageNumber, setPageNumber] = useState(1);
-//   const [hasMore, setHasMore] = useState(true);
-//   const [loading, setLoading] = useState(false);
-//   const [loadingMore, setLoadingMore] = useState(false);
-
-//   const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
-//     if (!selectedProjectId) return;
-
-//     try {
-//       if (page === 1) {
-//         setLoading(true);
-//       } else {
-//         setLoadingMore(true);
-//       }
-
-//       const res = await ImageGalleryAPI.ImagesGet(
-//         selectedProjectId,
-//         filters,
-//         page,
-//         PAGE_SIZE
-//       );
-
-//       const newBatches = res.data || [];
-//       const receivedCount = newBatches.length;
-
-//       setImages((prev) => {
-//         if (page === 1 || reset) return newBatches;
-//         const uniqueNew = newBatches.filter(
-//           (batch) => !prev.some((b) => b.batchId === batch.batchId)
-//         );
-//         return [...prev, ...uniqueNew];
-//       });
-
-//       setAllImagesData((prev) => {
-//         if (page === 1 || reset) return newBatches;
-//         const uniqueAll = newBatches.filter(
-//           (batch) => !prev.some((b) => b.batchId === batch.batchId)
-//         );
-//         return [...prev, ...uniqueAll];
-//       });
-
-//       setHasMore(receivedCount === PAGE_SIZE);
-//     } catch (error) {
-//       console.error("Error fetching images:", error);
-//       if (page === 1) {
-//         setImages([]);
-//         setAllImagesData([]);
-//       }
-//       setHasMore(false);
-//     } finally {
-//       setLoading(false);
-//       setLoadingMore(false);
-//     }
-//   }, [selectedProjectId]);
-
-//   const resetGallery = useCallback(() => {
-//     setImages([]);
-//     setAllImagesData([]);
-//     setPageNumber(1);
-//     setHasMore(true);
-//   }, []);
-
-//   return {
-//     images,
-//     allImagesData,
-//     pageNumber,
-//     setPageNumber,
-//     hasMore,
-//     loading,
-//     loadingMore,
-//     fetchImages,
-//     resetGallery,
-//   };
-// };
-
-// export default useImageGallery;
-import { useInfiniteQuery } from "@tanstack/react-query";
-
-
 const PAGE_SIZE = 10;
 
-const useImageGallery = (selectedProjectId, filters) => {
+const useImageGallery = (selectedProjectId) => {
-  const hasFilters = filters && Object.values(filters).some(
+  const [images, setImages] = useState([]);
-    value => Array.isArray(value) ? value.length > 0 : value !== null && value !== ""
+  const [allImagesData, setAllImagesData] = useState([]);
-  );
+  const [pageNumber, setPageNumber] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
+    if (!selectedProjectId) return;
+
+    try {
+      if (page === 1) {
+        setLoading(true);
+      } else {
+        setLoadingMore(true);
+      }
 
-  return useInfiniteQuery({
-    queryKey: ["imageGallery", selectedProjectId, hasFilters ? filters : null],
-    enabled: !!selectedProjectId,
-    getNextPageParam: (lastPage, allPages) => {
-      if (!lastPage?.data?.length) return undefined;
-      return allPages.length + 1;
-    },
-    queryFn: async ({ pageParam = 1 }) => {
       const res = await ImageGalleryAPI.ImagesGet(
         selectedProjectId,
-        hasFilters ? filters : undefined,
+        filters,
-        pageParam,
+        page,
         PAGE_SIZE
       );
-      return res;
+
-    },
+      const newBatches = res.data || [];
-  });
+      const receivedCount = newBatches.length;
+
+      setImages((prev) => {
+        if (page === 1 || reset) return newBatches;
+        const uniqueNew = newBatches.filter(
+          (batch) => !prev.some((b) => b.batchId === batch.batchId)
+        );
+        return [...prev, ...uniqueNew];
+      });
+
+      setAllImagesData((prev) => {
+        if (page === 1 || reset) return newBatches;
+        const uniqueAll = newBatches.filter(
+          (batch) => !prev.some((b) => b.batchId === batch.batchId)
+        );
+        return [...prev, ...uniqueAll];
+      });
+
+      setHasMore(receivedCount === PAGE_SIZE);
+    } catch (error) {
+      console.error("Error fetching images:", error);
+      if (page === 1) {
+        setImages([]);
+        setAllImagesData([]);
+      }
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [selectedProjectId]);
+
+  const resetGallery = useCallback(() => {
+    setImages([]);
+    setAllImagesData([]);
+    setPageNumber(1);
+    setHasMore(true);
+  }, []);
+
+  return {
+    images,
+    allImagesData,
+    pageNumber,
+    setPageNumber,
+    hasMore,
+    loading,
+    loadingMore,
+    fetchImages,
+    resetGallery,
+  };
 };
 
-export default useImageGallery;
+export default useImageGallery;
-

src/index.css

@@ -101,7 +101,25 @@ button:focus-visible {
   flex: 1;
 }
 
+/* Custom Scrollbar for Webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 6px; /* Width of the scrollbar */
+  height: 6px; /* Height of the scrollbar (for horizontal scrollbar) */
+}
 
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* Background of the scrollbar track */
+  border-radius: 2px; /* Rounded corners for the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888; /* Color of the scrollbar thumb */
+  border-radius: 10px; /* Rounded corners for the thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* Color of the thumb on hover */
+}
 
 @keyframes spin {
   100% {

src/pages/Activities/AttendancePage.jsx

@@ -8,44 +8,39 @@ 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 { useAttendace } 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 { useQueryClient } from "@tanstack/react-query";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
   const [ShowPending, setShowPending] = useState(false);
-  const queryClient = useQueryClient();
   const loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch()
-  // const {
+  const {
-  //   attendance,
+    attendance,
-  //   loading: attLoading,
+    loading: attLoading,
-  //   recall: attrecall,
+    recall: attrecall,
-  // } = useAttendance(selectedProject);
+  } = useAttendace(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: "",
@@ -53,38 +48,39 @@ const AttendancePage = () => {
     date: new Date().toLocaleDateString(),
   });
 
-  // const handler = useCallback(
+  const handler = useCallback(
-  //   (msg) => {
+    (msg) => {
-  //     if (selectedProject == msg.projectId) {
+      if (selectedProject == msg.projectId) {
-  //       const updatedAttendance = attendances.map((item) =>
+        const updatedAttendance = attendances.map((item) =>
-  //         item.employeeId === msg.response.employeeId
+          item.employeeId === msg.response.employeeId
-  //           ? { ...item, ...msg.response }
+            ? { ...item, ...msg.response }
-  //           : item
+            : item
-  //       );
+        );
-  //       queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
+        cacheData("Attendance", {
-  //         if (!oldData) return oldData;
+          data: updatedAttendance,
-  //         return oldData.map((emp) =>
+          projectId: selectedProject,
-  //           emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
+        });
-  //         );
+        setAttendances(updatedAttendance);
-  //       });
+      }
-  //     }
+    },
-  //   },
+    [selectedProject, attrecall]
-  //   [selectedProject, attrecall]
+  );
-  // );
 
-  // const employeeHandler = useCallback(
+  const employeeHandler = useCallback(
-  //   (msg) => {
+    (msg) => {
-  //     if (attendances.some((item) => item.employeeId == msg.employeeId)) {
+      if (attendances.some((item) => item.employeeId == msg.employeeId)) {
-  //       attrecall();
+        AttendanceRepository.getAttendance(selectedProject)
-  //     }
+          .then((response) => {
-  //   },
+            cacheData("Attendance", { data: response.data, selectedProject });
-  //   [selectedProject, attendances]
+            setAttendances(response.data);
-  // );
+          })
-  useEffect(() => {
+          .catch((error) => {
-    if (selectedProject == null) {
+            console.error(error);
-      dispatch(setProjectId(projectNames[0]?.id));
+          });
-    }
+      }
-  }, []);
+    },
+    [selectedProject, attendances]
+  );
 
   const getRole = (roleId) => {
     if (!empRoles) return "Unassigned";
@@ -104,35 +100,77 @@ 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]);
 
-  // useEffect(() => {
+  const filteredAttendance = ShowPending
-  //   eventBus.on("employee", employeeHandler);
+    ? attendances?.filter(
-  //   return () => eventBus.off("employee", employeeHandler);
+        (att) => att?.checkInTime !== null && att?.checkOutTime === null
-  // }, [employeeHandler]);
+      )
+    : attendances;
+
+  useEffect(() => {
+    eventBus.on("attendance", handler);
+    return () => eventBus.off("attendance", handler);
+  }, [handler]);
+
+  useEffect(() => {
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
   return (
     <>
-      {/* {isCreateModalOpen && modelConfig && (
+      {isCreateModalOpen && modelConfig && (
         <div
           className="modal fade show"
           style={{ display: "block" }}
-          id="check-Out-modalg"
+          id="check-Out-modal"
           tabIndex="-1"
           aria-hidden="true"
         >
@@ -142,29 +180,6 @@ const AttendancePage = () => {
             handleSubmitForm={handleSubmit}
           />
         </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} />
-          )}
-          {modelConfig?.action === 7 && (
-            <Confirmation closeModal={closeModal} />
-          )}
-        </GlobalModel>
       )}
 
       <div className="container-fluid">
@@ -174,14 +189,48 @@ 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">
+            <div
+              className="dataTables_length text-start py-2 px-2 d-flex "
+              id="DataTables_Table_0_length"
+            >
+              {loginUser && loginUser?.projects?.length > 1 && (
+                <label>
+                  <select
+                    name="DataTables_Table_0_length"
+                    aria-controls="DataTables_Table_0"
+                    className="form-select form-select-sm"
+                    value={selectedProject}
+                    onChange={(e) => dispatch(setProjectId(e.target.value))}
+                    aria-label=""
+                  >
+                    {!projectLoading &&
+                      projects
+                        ?.filter((project) =>
+                          loginUser?.projects?.map(String).includes(project.id)
+                        )
+                        .map((project) => (
+                          <option value={project.id} key={project.id}>
+                            {project.name}
+                          </option>
+                        ))}
+                    {projectLoading && (
+                      <option value="Loading..." disabled>
+                        Loading...
+                      </option>
+                    )}
+                  </select>
+                </label>
+              )}
+            </div>
+          </ul> */}
+
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
               <button
                 type="button"
-                className={`nav-link ${
+                className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
-                  activeTab === "all" ? "active" : ""
-                } fs-6`}
                 onClick={() => setActiveTab("all")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-home"
@@ -192,9 +241,7 @@ const AttendancePage = () => {
             <li className="nav-item">
               <button
                 type="button"
-                className={`nav-link ${
+                className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
-                  activeTab === "logs" ? "active" : ""
-                } fs-6`}
                 onClick={() => setActiveTab("logs")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-profile"
@@ -216,27 +263,50 @@ 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
-                      handleModalData={handleModalData}
+                    attendance={filteredAttendance}
-                      getRole={getRole}
+                    handleModalData={handleModalData}
-                    />
+                    getRole={getRole}
-                  </div>
+                    setshowOnlyCheckout={setShowPending}
+                    showOnlyCheckout={ShowPending}
+                  />
+                </div>
+                )}
+                {!attLoading && filteredAttendance?.length === 0 && (
+                  <p>
+                    {" "}
+                    {ShowPending
+                      ? "No Pending Available"
+                      : "No Employee assigned yet."}{" "}
+                  </p>
+                )}
+              </>
             )}
+
             {activeTab === "logs" && (
               <div className="tab-pane fade show active py-0">
                 <AttendanceLog
                   handleModalData={handleModalData}
+                  projectId={selectedProject}
+                  setshowOnlyCheckout={setShowPending}
+                  showOnlyCheckout={ShowPending}
                 />
               </div>
             )}
+
             {activeTab === "regularization" && DoRegularized && (
               <div className="tab-pane fade show active py-0">
-                <Regularization />
+                <Regularization handleRequest={handleSubmit} />
               </div>
             )}
+
+            {attLoading && <span>Loading..</span>}
+            {!attLoading && !attendances && <span>Not Found</span>}
           </div>
         </div>
       </div>

src/pages/Gallary/ImageGallary.jsx

@@ -16,20 +16,32 @@ import { setProjectId } from "../../slices/localVariablesSlice";
 const SCROLL_THRESHOLD = 5;
 
 const ImageGallery = () => {
-  const selectedProjectId = useSelector(
+  const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-    (store) => store.localVariables.projectId
-  );
-  const dispatch = useDispatch();
-  const { projectNames } = useProjectName();
 
-  // Auto-select a project on mount
+  const dispatch = useDispatch()
+    const { projectNames, loading: projectLoading, fetchData } = useProjectName();
   useEffect(() => {
-    if (!selectedProjectId && projectNames?.length) {
+   if(selectedProjectId == null){
-      dispatch(setProjectId(projectNames[0].id));
+       dispatch(setProjectId(projectNames[0]?.id));
-    }
+   }
-  }, [selectedProjectId, projectNames, dispatch]);
+   },[])
+
+  const {
+    images,
+    allImagesData,
+    pageNumber,
+    setPageNumber,
+    hasMore,
+    loading,
+    loadingMore,
+    fetchImages,
+    resetGallery,
+  } = useImageGallery(selectedProjectId);
+
+  const { openModal } = useModal();
+
+  const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
 
-  // Filter states
   const [selectedFilters, setSelectedFilters] = useState({
     building: [],
     floor: [],
@@ -40,6 +52,7 @@ const ImageGallery = () => {
     startDate: "",
     endDate: "",
   });
+
   const [appliedFilters, setAppliedFilters] = useState({
     buildingIds: null,
     floorIds: null,
@@ -50,6 +63,7 @@ const ImageGallery = () => {
     startDate: null,
     endDate: null,
   });
+
   const [collapsedFilters, setCollapsedFilters] = useState({
     dateRange: false,
     building: false,
@@ -59,6 +73,7 @@ const ImageGallery = () => {
     workCategory: false,
     workArea: false,
   });
+
   const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
   const [hoveredImage, setHoveredImage] = useState(null);
 
@@ -66,113 +81,133 @@ const ImageGallery = () => {
   const loaderRef = useRef(null);
   const filterPanelRef = useRef(null);
   const filterButtonRef = useRef(null);
-  const { openModal } = useModal();
-
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isFetchingNextPage,
-    refetch,
-  } = useImageGallery(selectedProjectId, appliedFilters);
-
-  const images = data?.pages.flatMap((page) => page.data) || [];
 
   useEffect(() => {
-    const handleClick = (e) => {
+    const handleClickOutside = (event) => {
       if (
         filterPanelRef.current &&
-        !filterPanelRef.current.contains(e.target) &&
+        !filterPanelRef.current.contains(event.target) &&
         filterButtonRef.current &&
-        !filterButtonRef.current.contains(e.target)
+        !filterButtonRef.current.contains(event.target)
       ) {
         setIsFilterPanelOpen(false);
       }
     };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
 
-  useEffect(() => {
+    if (isFilterPanelOpen) {
-    if (selectedProjectId) refetch();
+      document.addEventListener("mousedown", handleClickOutside);
-  }, [selectedProjectId, appliedFilters, refetch]);
+    } else {
-
+      document.removeEventListener("mousedown", handleClickOutside);
-  useEffect(() => {
-    const handler = (data) => {
-      if (data.projectId === selectedProjectId) refetch();
-    };
-    eventBus.on("image_gallery", handler);
-    return () => eventBus.off("image_gallery", handler);
-  }, [selectedProjectId, refetch]);
-
-useEffect(() => {
-  if (!loaderRef.current) return;
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting && hasNextPage && !isFetchingNextPage && !isLoading) {
-        fetchNextPage();
-      }
-    },
-    { rootMargin: "200px", threshold: 0.1 }
-  );
-
-  observer.observe(loaderRef.current);
-
-  return () => {
-    if (loaderRef.current) {
-      observer.unobserve(loaderRef.current); 
     }
-  };
-}, [hasNextPage, isFetchingNextPage, isLoading, fetchNextPage]);
 
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isFilterPanelOpen]);
 
-  // Utility: derive filter options
+  useEffect(() => {
-  const getUniqueValues = useCallback(
+    if (!selectedProjectId) {
-    (idKey, nameKey) => {
+      resetGallery();
-      const m = new Map();
+      return;
-      images.forEach((batch) => {
+    }
-        const id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
+
-        if (id && batch[nameKey] && !m.has(id)) {
+    resetGallery();
-          m.set(id, batch[nameKey]);
+    fetchImages(1, appliedFilters, true);
+  }, [selectedProjectId, appliedFilters]);
+
+  useEffect(() => {
+    const handleExternalEvent = (data) => {
+      if (selectedProjectId === data.projectId) {
+        resetGallery();
+        fetchImages(1, appliedFilters, true);
+      }
+    };
+
+    eventBus.on("image_gallery", handleExternalEvent);
+
+    return () => {
+      eventBus.off("image_gallery", handleExternalEvent);
+    };
+  }, [appliedFilters, fetchImages, selectedProjectId]);
+
+  useEffect(() => {
+    if (!loaderRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
+          setPageNumber((prevPageNumber) => prevPageNumber + 1);
         }
-      });
+      },
-      return [...m.entries()].sort((a, b) => a[1].localeCompare(b[1]));
+      {
-    },
+        root: null,
-    [images]
+        rootMargin: "200px",
-  );
+        threshold: 0.1,
+      }
+    );
 
-  const getUploadedBy = useCallback(() => {
+    observer.observe(loaderRef.current);
-    const m = new Map();
+
-    images.forEach((batch) => {
+    return () => {
-      batch.documents.forEach((doc) => {
+      if (loaderRef.current) {
-        const name = `${doc.uploadedBy?.firstName || ""} ${
+        observer.unobserve(loaderRef.current);
-          doc.uploadedBy?.lastName || ""
+      }
-        }`.trim();
+    };
-        if (doc.uploadedBy?.id && name && !m.has(doc.uploadedBy.id)) {
+  }, [hasMore, loadingMore, loading]);
-          m.set(doc.uploadedBy.id, name);
+
+  useEffect(() => {
+    if (pageNumber > 1) {
+      fetchImages(pageNumber, appliedFilters);
+    }
+  }, [pageNumber]);
+
+  const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
+    const map = new Map();
+    allImagesData.forEach(batch => {
+      let id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
+      const name = batch[nameKey];
+      if (id && name && !map.has(id)) {
+        map.set(id, name);
+      }
+    });
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [allImagesData]);
+
+  const getUniqueUploadedByUsers = useCallback(() => {
+    const uniqueUsersMap = new Map();
+    allImagesData.forEach(batch => {
+      batch.documents.forEach(doc => {
+        if (doc.uploadedBy && doc.uploadedBy.id) {
+          const fullName = `${doc.uploadedBy.firstName || ""} ${doc.uploadedBy.lastName || ""}`.trim();
+          if (fullName) {
+            uniqueUsersMap.set(doc.uploadedBy.id, fullName);
+          }
         }
       });
     });
-    return [...m.entries()].sort((a, b) => a[1].localeCompare(b[1]));
+    return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
-  }, [images]);
+  }, [allImagesData]);
 
-  const buildings = getUniqueValues("buildingId", "buildingName");
+  const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
-  const floors = getUniqueValues("floorIds", "floorName");
+  const floors = getUniqueValuesWithIds("floorIds", "floorName");
-  const activities = getUniqueValues("activityId", "activityName");
+  const activities = getUniqueValuesWithIds("activityId", "activityName");
-  const workAreas = getUniqueValues("workAreaId", "workAreaName");
+  const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName");
-  const workCategories = getUniqueValues("workCategoryId", "workCategoryName");
+  const uploadedByUsers = getUniqueUploadedByUsers();
-  const uploadedByUsers = getUploadedBy();
+  const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName");
 
-  const toggleFilter = useCallback((type, id, name) => {
+  const toggleFilter = useCallback((type, itemId, itemName) => {
     setSelectedFilters((prev) => {
-      const arr = prev[type];
+      const current = prev[type];
-      const exists = arr.some(([x]) => x === id);
+      const isSelected = current.some((item) => item[0] === itemId);
-      const updated = exists
+
-        ? arr.filter(([x]) => x !== id)
+      const newArray = isSelected
-        : [...arr, [id, name]];
+        ? current.filter((item) => item[0] !== itemId)
-      return { ...prev, [type]: updated };
+        : [...current, [itemId, itemName]];
+
+      return {
+        ...prev,
+        [type]: newArray,
+      };
     });
   }, []);
 
@@ -185,33 +220,48 @@ useEffect(() => {
   }, []);
 
   const toggleCollapse = useCallback((type) => {
-    setCollapsedFilters((prev) => ({ ...prev, [type]: !prev[type] }));
+    setCollapsedFilters((prev) => ({
+      ...prev,
+      [type]: !prev[type],
+    }));
   }, []);
 
   const handleApplyFilters = useCallback(() => {
     const payload = {
-      buildingIds: selectedFilters.building.map(([x]) => x) || null,
+      buildingIds: selectedFilters.building.length ? selectedFilters.building.map((item) => item[0]) : null,
-      floorIds: selectedFilters.floor.map(([x]) => x) || null,
+      floorIds: selectedFilters.floor.length ? selectedFilters.floor.map((item) => item[0]) : null,
-      activityIds: selectedFilters.activity.map(([x]) => x) || null,
+      workAreaIds: selectedFilters.workArea.length ? selectedFilters.workArea.map((item) => item[0]) : null,
-      uploadedByIds: selectedFilters.uploadedBy.map(([x]) => x) || null,
+      workCategoryIds: selectedFilters.workCategory.length ? selectedFilters.workCategory.map((item) => item[0]) : null,
-      workCategoryIds: selectedFilters.workCategory.map(([x]) => x) || null,
+      activityIds: selectedFilters.activity.length ? selectedFilters.activity.map((item) => item[0]) : null,
-      workAreaIds: selectedFilters.workArea.map(([x]) => x) || null,
+      uploadedByIds: selectedFilters.uploadedBy.length ? selectedFilters.uploadedBy.map((item) => item[0]) : null,
       startDate: selectedFilters.startDate || null,
       endDate: selectedFilters.endDate || null,
     };
-    const changed = Object.keys(payload).some((key) => {
+
-      const oldVal = appliedFilters[key],
+    const areFiltersChanged = Object.keys(payload).some(key => {
-        newVal = payload[key];
+      const oldVal = appliedFilters[key];
-      return Array.isArray(oldVal)
+      const newVal = payload[key];
-        ? oldVal.length !== newVal.length ||
+      if (Array.isArray(oldVal) && Array.isArray(newVal)) {
-            oldVal.some((x) => !newVal.includes(x))
+        if (oldVal.length !== newVal.length) return true;
-        : oldVal !== newVal;
+        const oldSet = new Set(oldVal);
+        const newSet = new Set(newVal);
+        for (const item of newSet) {
+          if (!oldSet.has(item)) return true;
+        }
+        return false;
+      }
+      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
+      return oldVal !== newVal;
     });
-    if (changed) setAppliedFilters(payload);
+
+    if (areFiltersChanged) {
+      setAppliedFilters(payload);
+      resetGallery();
+    }
   }, [selectedFilters, appliedFilters]);
 
-  const handleClear = useCallback(() => {
+  const handleClearAllFilters = useCallback(() => {
-    setSelectedFilters({
+    const initialStateSelected = {
       building: [],
       floor: [],
       activity: [],
@@ -220,8 +270,10 @@ useEffect(() => {
       workArea: [],
       startDate: "",
       endDate: "",
-    });
+    };
-    setAppliedFilters({
+    setSelectedFilters(initialStateSelected);
+
+    const initialStateApplied = {
       buildingIds: null,
       floorIds: null,
       activityIds: null,
@@ -230,70 +282,69 @@ useEffect(() => {
       workAreaIds: null,
       startDate: null,
       endDate: null,
-    });
+    };
+    setAppliedFilters(initialStateApplied);
+    resetGallery();
   }, []);
 
-  const scrollLeft = useCallback(
+  const scrollLeft = useCallback((key) => {
-    (key) =>
+    imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" });
-      imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" }),
+  }, []);
-    []
-  );
-  const scrollRight = useCallback(
-    (key) =>
-      imageGroupRefs.current[key]?.scrollBy({ left: 200, behavior: "smooth" }),
-    []
-  );
 
-  const renderCategory = (label, items, type) => (
+  const scrollRight = useCallback((key) => {
-    <div
+    imageGroupRefs.current[key]?.scrollBy({ left: 200, behavior: "smooth" });
-      className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}
+  }, []);
-    >
+
-      <div
+  const renderFilterCategory = (label, items, type) => (
-        className="dropdown-header bg-label-primary"
+    <div className={`dropdown my-2 ${collapsedFilters[type] ? "collapsed" : ""}`}>
-        onClick={() => toggleCollapse(type)}
+      <div className="dropdown-header bg-label-primary" onClick={() => toggleCollapse(type)}>
-      >
         <strong>{label}</strong>
         <div className="header-controls">
-          {((type === "dateRange" &&
+          {type === "dateRange" && (selectedFilters.startDate || selectedFilters.endDate) && (
-            (selectedFilters.startDate || selectedFilters.endDate)) ||
-            (type !== "dateRange" && selectedFilters[type]?.length > 0)) && (
             <button
               className="clear-button"
               onClick={(e) => {
                 e.stopPropagation();
-                setSelectedFilters((prev) => ({
+                setSelectedFilters((prev) => ({ ...prev, startDate: "", endDate: "" }));
-                  ...prev,
-                  [type]: type === "dateRange" ? "" : [],
-                  ...(type === "dateRange" && { startDate: "", endDate: "" }),
-                }));
               }}
             >
               Clear
             </button>
           )}
-          <span className="collapse-icon">
+          {type !== "dateRange" && selectedFilters[type]?.length > 0 && (
-            {collapsedFilters[type] ? "+" : "-"}
+            <button
-          </span>
+              className="clear-button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
+              }}
+            >
+              Clear
+            </button>
+          )}
+          <span className="collapse-icon">{collapsedFilters[type] ? '+' : '-'}</span>
         </div>
       </div>
       {!collapsedFilters[type] && (
         <div className="dropdown-content">
           {type === "dateRange" ? (
-            <DateRangePicker
+            <div className="date-range-inputs">
-              onRangeChange={setDateRange}
+              <DateRangePicker
-              endDateMode="today"
+                onRangeChange={setDateRange}
-              startDate={selectedFilters.startDate}
+                endDateMode="today"
-              endDate={selectedFilters.endDate}
+                startDate={selectedFilters.startDate}
-            />
+                endDate={selectedFilters.endDate}
+              />
+            </div>
           ) : (
-            items.map(([id, name]) => (
+            items.map(([itemId, itemName]) => (
-              <label key={id}>
+              <label key={itemId}>
                 <input
                   type="checkbox"
-                  checked={selectedFilters[type].some(([x]) => x === id)}
+                  checked={selectedFilters[type].some((item) => item[0] === itemId)}
-                  onChange={() => toggleFilter(type, id, name)}
+                  onChange={() => toggleFilter(type, itemId, itemName)}
                 />
-                {name}
+                {itemName}
               </label>
             ))
           )}
@@ -303,193 +354,105 @@ useEffect(() => {
   );
 
   return (
-    <div
+    <div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
-      className={`gallery-container container-fluid ${
+      <Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
-        isFilterPanelOpen ? "filter-panel-open-end" : ""
-      }`}
-    >
-      <Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallery" }]} />
       <div className="main-content">
         <button
-          className={`filter-button btn-primary ${
+          className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
-            isFilterPanelOpen ? "closed-icon" : ""
+          onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
-          }`}
-          onClick={() => setIsFilterPanelOpen((p) => !p)}
           ref={filterButtonRef}
         >
-          {isFilterPanelOpen ? (
+          {isFilterPanelOpen ? <i className="fa-solid fa-times fs-5"></i> : <i className="fa-solid fa-filter ms-1 fs-5"></i>}
-            <i className="fa-solid fa-times fs-5" />
-          ) : (
-            <i className="fa-solid fa-filter ms-1 fs-5" />
-          )}
         </button>
+
         <div className="activity-section">
-          {isLoading ? (
+          {loading && pageNumber === 1 ? (
-            <div className="text-center">
+            <div className="spinner-container"><div className="spinner" /></div>
-              <p>Loading...</p>
+          ) : images.length > 0 ? (
-            </div>
-          ) : images.length ? (
             images.map((batch) => {
-              const doc = batch.documents[0];
+              const firstDoc = batch.documents[0];
-              const userName = `${doc.uploadedBy?.firstName || ""} ${
+              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
-                doc.uploadedBy?.lastName || ""
+              const date = formatUTCToLocalTime(firstDoc?.uploadedAt);
-              }`.trim();
+              const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
-              const date = formatUTCToLocalTime(doc.uploadedAt);
+
-              const hasArrows = batch.documents.length > SCROLL_THRESHOLD;
               return (
                 <div key={batch.batchId} className="grouped-section">
                   <div className="group-heading">
-                    {/* Uploader Info */}
+                    <div className="d-flex flex-column">
-                    <div className="d-flex align-items-center mb-1">
+                      <div className="d-flex align-items-center mb-1">
-                      <Avatar
+                        <Avatar size="xs" firstName={firstDoc?.uploadedBy?.firstName} lastName={firstDoc?.uploadedBy?.lastName} className="me-2" />
-                        size="xs"
+                        <div className="d-flex flex-column align-items-start">
-                        firstName={doc.uploadedBy?.firstName}
+                          <strong className="user-name-text">{userName}</strong>
-                        lastName={doc.uploadedBy?.lastName}
+                          <span className="me-2">{date}</span>
-                        className="me-2"
+                        </div>
-                      />
-                      <div className="d-flex flex-column align-items-start">
-                        <strong className="user-name-text">{userName}</strong>
-                        <span className="text-muted small">{date}</span>
                       </div>
                     </div>
-
+                    <div className="location-line">
-                    {/* Location Info */}
+                      <div>{batch.buildingName} &gt; {batch.floorName} &gt; <strong>{batch.workAreaName || "Unknown"} &gt; {batch.activityName}</strong></div>
-                    <div className="location-line text-secondary">
-                      <div className="d-flex align-items-center flex-wrap gap-1 text-secondary">
-                        {" "}
-                        <span className="d-flex align-items-center">
-                          <span>{batch.buildingName}</span>
-                          <i className="bx bx-chevron-right " />
-                        </span>
-                        <span className="d-flex align-items-center">
-                          <span>{batch.floorName}</span>
-                          <i className="bx bx-chevron-right m" />
-                        </span>
-                        <span className="d-flex align-items-center ">
-                          <span>{batch.workAreaName || "Unknown"}</span>
-                          <i className="bx bx-chevron-right " />
-                          <span>{batch.activityName}</span>
-                        </span>
-                      </div>
                       {batch.workCategoryName && (
-                        <span className="badge bg-label-primary ms-2">
+                        <div className="work-category-display ms-2">
-                          {batch.workCategoryName}
+                          <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
-                        </span>
+                            {batch.workCategoryName}
+                          </span>
+                        </div>
                       )}
                     </div>
                   </div>
-
                   <div className="image-group-wrapper">
-                    {hasArrows && (
+                    {showScrollButtons && <button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>&#8249;</button>}
-                      <button
+                    <div className="image-group-horizontal" ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}>
-                        className="scroll-arrow left-arrow"
+                      {batch.documents.map((doc, idx) => {
-                        onClick={() => scrollLeft(batch.batchId)}
+                        const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
-                      >
+                        const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
-                        ‹
+
-                      </button>
-                    )}
-                    <div
-                      className="image-group-horizontal"
-                      ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
-                    >
-                      {batch.documents.map((d, i) => {
-                        const hoverDate = moment(d.uploadedAt).format(
-                          "DD-MM-YYYY"
-                        );
-                        const hoverTime = moment(d.uploadedAt).format(
-                          "hh:mm A"
-                        );
                         return (
-                          <div
+                          <div key={doc.id} className="image-card" onClick={() => openModal(<ImagePop batch={batch} initialIndex={idx} />)} onMouseEnter={() => setHoveredImage(doc)} onMouseLeave={() => setHoveredImage(null)}>
-                            key={d.id}
-                            className="image-card"
-                            onClick={() =>
-                              openModal(
-                                <ImagePop batch={batch} initialIndex={i} />
-                              )
-                            }
-                            onMouseEnter={() => setHoveredImage(d)}
-                            onMouseLeave={() => setHoveredImage(null)}
-                          >
                             <div className="image-wrapper">
-                              <img src={d.url} alt={`Image ${i + 1}`} />
+                              <img src={doc.url} alt={`Image ${idx + 1}`} />
                             </div>
-                            {hoveredImage === d && (
+                            {hoveredImage === doc && (
                               <div className="image-hover-description">
-                                <p>
+                                <p><strong>Date:</strong> {hoverDate}</p>
-                                  <strong>Date:</strong> {hoverDate}
+                                <p><strong>Time:</strong> {hoverTime}</p>
-                                </p>
+                                <p><strong>Activity:</strong> {batch.activityName}</p>
-                                <p>
-                                  <strong>Time:</strong> {hoverTime}
-                                </p>
-                                <p>
-                                  <strong>Activity:</strong>{" "}
-                                  {batch.activityName}
-                                </p>
                               </div>
                             )}
                           </div>
                         );
                       })}
                     </div>
-                    {hasArrows && (
+                    {showScrollButtons && <button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>&#8250;</button>}
-                      <button
-                        className="scroll-arrow right-arrow"
-                        onClick={() => scrollRight(batch.batchId)}
-                      >
-                        <i className="bx bx-chevron-right"></i>
-                      </button>
-                    )}
                   </div>
                 </div>
               );
             })
           ) : (
-            <p className="text-center text-muted mt-5">
+            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>No images match the selected filters.</p>
-              No images match the selected filters.
-            </p>
           )}
-          <div ref={loaderRef}>
+          <div ref={loaderRef} style={{ height: '50px', margin: '20px 0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            {isFetchingNextPage && hasNextPage && <p>Loading...</p>}
+            {loadingMore && hasMore && <div className="spinner" />}
-            {!hasNextPage && !isLoading && images.length > 0 && (
+            {!hasMore && !loading && images.length > 0 && <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>}
-              <p className="text-muted">
-                You've reached the end of the images.
-              </p>
-            )}
           </div>
         </div>
       </div>
 
-      <div
+      <div className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`} tabIndex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel" ref={filterPanelRef}>
-        className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
-        ref={filterPanelRef}
-      >
         <div className="offcanvas-header">
-          <h5>Filters</h5>
+          <h5 className="offcanvas-title" id="filterOffcanvasLabel">Filters</h5>
-          <button
+          <button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
-            className="btn-close"
-            onClick={() => setIsFilterPanelOpen(false)}
-          />
         </div>
         <div className="filter-actions mt-auto mx-2">
-          <button className="btn btn-secondary btn-xs" onClick={handleClear}>
+          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>Clear All</button>
-            Clear All
+          <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>Apply Filters</button>
-          </button>
-          <button
-            className="btn btn-primary btn-xs"
-            onClick={handleApplyFilters}
-          >
-            Apply Filters
-          </button>
         </div>
         <div className="offcanvas-body d-flex flex-column">
-          {renderCategory("Date Range", [], "dateRange")}
+          {renderFilterCategory("Date Range", [], "dateRange")}
-          {renderCategory("Building", buildings, "building")}
+          {renderFilterCategory("Building", buildings, "building")}
-          {renderCategory("Floor", floors, "floor")}
+          {renderFilterCategory("Floor", floors, "floor")}
-          {renderCategory("Work Area", workAreas, "workArea")}
+          {renderFilterCategory("Work Area", workAreas, "workArea")}
-          {renderCategory("Activity", activities, "activity")}
+          {renderFilterCategory("Activity", activities, "activity")}
-          {renderCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
+          {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
-          {renderCategory("Work Category", workCategories, "workCategory")}
+          {renderFilterCategory("Work Category", workCategories, "workCategory")}
         </div>
       </div>
     </div>

src/pages/Gallary/ImagePop.css

@@ -42,23 +42,14 @@
 }
 
 /* Image Styles */
-
-.image-container {
-  aspect-ratio: 1 / 1;         /* Square shape: width and height are equal */
-  width: 100%;                 /* or set a fixed width like 300px */
-  max-width: 400px;            /* Optional: limit how large it grows */
-  border-radius: 10px;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #f5f5f5;
-}
-
 .modal-image {
-  width: 100%;
+  max-width: 100%;
-  height: 100%;
+  max-height: 70vh;
-  object-fit: cover;
+  width: auto;
+  border-radius: 10px;
+  object-fit: contain;
+  margin-bottom: 20px;
+  flex-shrink: 0;
 }
 
 /* Scrollable Container for Text Details */

src/pages/Gallary/ImagePop.jsx

@@ -54,34 +54,44 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
   return (
     <div className="image-modal-overlay">
       <div className="image-modal-content">
-        
+        {/* Close button */}
-        <i className='bx bx-x close-button' onClick={closeModal}></i>
+        <button className="close-button" onClick={closeModal}>
+          ×
+        </button>
 
+        {/* Previous button, only shown if there's a previous image */}
         {hasPrev && (
           <button className="nav-button prev-button" onClick={handlePrev}>
-            <i className='bx bx-chevron-left'></i>
+            &#8249; {/* Unicode for single left angle quotation mark */}
           </button>
         )}
 
-     <div className="image-container">
+        {/* The main image display */}
-         <img src={image.url} alt="Preview" className="modal-image" />
+        <img src={image.url} alt="Preview" className="modal-image" />
-     </div>
 
+        {/* Next button, only shown if there's a next image */}
         {hasNext && (
           <button className="nav-button next-button" onClick={handleNext}>
-            <i className='bx bx-chevron-right'></i>
+            &#8250; {/* Unicode for single right angle quotation mark */}
           </button>
         )}
 
+        {/* Image details */}
         <div className="image-details">
-        
+          <p>
-          <div className="flex alig-items-center"> <i className='bx bxs-user'></i> <span className="text-muted">Uploaded By : </span>  <span className="text-secondary">{fullName}</span></div>
+            <strong>👤 Uploaded By:</strong> {fullName}
-            <div className="flex alig-items-center"> <i class='bx bxs-calendar' ></i> <span className="text-muted">Date : </span> <span className="text-secondary"> {date}</span></div>
+          </p>
-              <div className="flex alig-items-center"> <i class='bx bx-map' ></i> <span className="text-muted">Uploaded By : </span>  <span className="text-secondary">{buildingName} <i className='bx bx-chevron-right'></i> {floorName} <i className='bx bx-chevron-right'></i>
+          <p>
-            {workAreaName || "Unknown"} <i className='bx bx-chevron-right'></i> {activityName}</span></div>
+            <strong>📅 Date:</strong> {date}
-                <div className="flex alig-items-center"> <i className='bx bx-comment-dots'></i> <span className="text-muted">comment : </span>  <span className="text-secondary">{batchComment}</span></div>
+          </p>
-          
+          <p>
-       
+            <strong>🏢 Location:</strong> {buildingName} &gt; {floorName} &gt;{" "}
+            {workAreaName || "Unknown"} &gt; {activityName}
+          </p>
+          <p>
+            {/* Display the comment from the batch object */}
+            <strong>📝 Comments:</strong> {batchComment || "N/A"}
+          </p>
         </div>
       </div>
     </div>

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -8,9 +8,6 @@ import Avatar from "../../components/common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
 import AttendLogs from "../../components/Activities/AttendLogs";
-import { useAttendanceByEmployee } from "../../hooks/useAttendance";
-import GlobalModel from "../../components/common/GlobalModel";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const AttendancesEmployeeRecords = ({ employee }) => {
   const [attendances, setAttendnaces] = useState([]);
@@ -18,12 +15,10 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attendanceId, setAttendanecId] = useState();
-  const {data =[],isLoading:loading,isFetching,error,refetch} = useAttendanceByEmployee(employee,dateRange.startDate, dateRange.endDate)
   const dispatch = useDispatch();
-
+  const { data, loading, error } = useSelector(
-  // const { data, loading, error } = useSelector(
+    (store) => store.employeeAttendance
-  //   (store) => store.employeeAttendance
+  );
-  // );
 
   const [isRefreshing, setIsRefreshing] = useState(true);
 
@@ -90,10 +85,21 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    ITEMS_PER_PAGE
+    20
   );
 
- 
+  useEffect(() => {
+    const { startDate, endDate } = dateRange;
+    if (startDate && endDate) {
+      dispatch(
+        fetchEmployeeAttendanceData({
+          employeeId: employee,
+          fromDate: startDate,
+          toDate: endDate,
+        })
+      );
+    }
+  }, [dateRange, employee, isRefreshing]);
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -103,13 +109,32 @@ const AttendancesEmployeeRecords = ({ employee }) => {
 
   return (
     <>
-     
+      <div
+        className={`modal fade ${isModalOpen ? "show" : ""}`}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: isModalOpen ? "block" : "none" }}
+        aria-hidden={!isModalOpen}
+      >
+        {" "}
+        <div
+          className="modal-dialog modal-lg modal-simple attendance-log-modal mx-sm-auto mx-1"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-body p-sm-4 p-0">
+              <button
+                type="button"
+                className="btn-close"
+                onClick={closeModal}
+                aria-label="Close"
+              ></button>
 
-      {isModalOpen && (
+              <AttendLogs Id={attendanceId} />
-        <GlobalModel size="lg" isOpen={isModalOpen} closeModal={closeModal}>
+            </div>
-         <AttendLogs Id={attendanceId} />
+          </div>
-      </GlobalModel>
+        </div>
-      )}
+      </div>
       <div className="px-4 py-2 " style={{ minHeight: "500px" }}>
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
@@ -120,11 +145,11 @@ const AttendancesEmployeeRecords = ({ employee }) => {
           </div>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
+              className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
                 }`}
               data-toggle="tooltip"
               title="Refresh"
-              onClick={() => refetch()}
+              onClick={() => setIsRefreshing(!isRefreshing)}
             />
           </div>
         </div>

src/slices/localVariablesSlice.jsx

@@ -5,10 +5,6 @@ const localVariablesSlice = createSlice({
   initialState: {
     selectedMaster:"Application Role",
     regularizationCount:0,
-     defaultDateRange: {
-      startDate: null,
-      endDate: null,
-    },
     projectId: null,
     reload:false
   
@@ -26,12 +22,9 @@ const localVariablesSlice = createSlice({
     refreshData: ( state, action ) =>
     {
       state.reload = action.payload
-    },
+    }
-    setDefaultDateRange: (state, action) => {
-      state.defaultDateRange = action.payload;
-    },
   },
 });
 
-export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData,setDefaultDateRange} = localVariablesSlice.actions;
+export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData} = localVariablesSlice.actions;
 export default localVariablesSlice.reducer;