Merge branch 'Issues_July_4W' of https://git.marcoaiot.com/admin/marco.pms.web into Kartik_Bug#800

index.html

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

public/assets/js/main.js

@@ -115,4 +115,38 @@ 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,7 +454,9 @@ 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 } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -6,29 +6,41 @@ 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 = ({
+const Attendance = ({ getRole, handleModalData }) => {
-  attendance,
+  const queryClient = useQueryClient();
-  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;
 
-  // Ensure attendance is an array
+  const attendanceList = Array.isArray(filteredAttendance)
-  const attendanceList = Array.isArray(attendance) ? attendance : [];
+    ? filteredAttendance
+    : [];
 
-  // Function to sort by first and last name
   const sortByName = (a, b) => {
     const nameA = (a.firstName + a.lastName).toLowerCase();
     const nameB = (b.firstName + b.lastName).toLowerCase();
     return nameA?.localeCompare(nameB);
   };
-
-  // Filter employees based on activity
   const group1 = attendanceList
     .filter((d) => d.activity === 1 || d.activity === 4)
     .sort(sortByName);
@@ -37,30 +49,69 @@ const Attendance = ({
     .sort(sortByName);
 
   const filteredData = [...group1, ...group2];
-
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredData,
     ITEMS_PER_PAGE
   );
+
+  const handler = useCallback(
+    (msg) => {
+      if (selectedProject == msg.projectId) {
+        // const updatedAttendance = attendances.map((item) =>
+        //   item.employeeId === msg.response.employeeId
+        //     ? { ...item, ...msg.response }
+        //     : item
+        // );
+        queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
+          if (!oldData) {
+            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">
+      <div className="table-responsive text-nowrap h-100" >
         <div className="d-flex text-start align-items-center py-2">
           <strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
-
           <div className="form-check form-switch text-start m-0 ms-5">
             <input
               type="checkbox"
               className="form-check-input"
               role="switch"
               id="inactiveEmployeesCheckbox"
-              checked={showOnlyCheckout}
+              disabled={isFetching}
-              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
+              checked={ShowPending}
+              onChange={(e) => setShowPending(e.target.checked)}
             />
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-        {attendance && attendance.length > 0 && (
+        {Array.isArray(attendance) && attendance.length > 0 ? (
           <>
             <table className="table ">
               <thead>
@@ -81,14 +132,13 @@ const Attendance = ({
                 {currentItems &&
                   currentItems
                     .sort((a, b) => {
-                      // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
                       const checkInA = a?.checkInTime
                         ? new Date(a.checkInTime)
                         : new Date(0);
                       const checkInB = b?.checkInTime
                         ? new Date(b.checkInTime)
                         : new Date(0);
-                      return checkInB - checkInA; // Sort in descending order of checkInTime
+                      return checkInB - checkInA;
                     })
                     .map((item) => (
                       <tr key={item.employeeId}>
@@ -138,7 +188,7 @@ const Attendance = ({
                       </tr>
                     ))}
                 {!attendance && (
-                  <span>No employees assigned to the project</span>
+                  <span className="text-secondary m-4">No employees assigned to the project!</span>
                 )}
               </tbody>
             </table>
@@ -189,6 +239,18 @@ const Attendance = ({
               </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

@@ -4,12 +4,14 @@ import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import { useSelector, useDispatch } from "react-redux";
-import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
+import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; // Make sure setAttendanceData is correctly imported
 import DateRangePicker from "../common/DateRangePicker";
 import eventBus from "../../services/eventBus";
 
+// Custom hook for pagination
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
+  // Ensure data is an array before accessing length
   const totalItems = Array.isArray(data) ? data.length : 0;
   const maxPage = Math.ceil(totalItems / itemsPerPage);
 
@@ -28,7 +30,6 @@ const usePagination = (data, itemsPerPage) => {
     }
   }, [maxPage]);
 
-  // Ensure resetPage is returned by the hook
   const resetPage = useCallback(() => setCurrentPage(1), []);
 
   return {
@@ -45,13 +46,28 @@ const AttendanceLog = ({
   projectId,
   setshowOnlyCheckout,
   showOnlyCheckout,
-  searchQuery, // Prop for search query
+  searchQuery,
 }) => {
-  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  const selectedProject = useSelector(
-  const dispatch = useDispatch();
+    (store) => store.localVariables.projectId
-  const { data, loading, error } = useSelector((store) => store.attendanceLogs);
+  );
-  const [isRefreshing, setIsRefreshing] = useState(false);
+  // Initialize date range with sensible defaults, e.g., last 7 days or current day
+  const defaultEndDate = moment().format("YYYY-MM-DD");
+  const defaultStartDate = moment().subtract(6, 'days').format("YYYY-MM-DD"); // Last 7 days including today
 
+  const [dateRange, setDateRange] = useState({ 
+    startDate: defaultStartDate, 
+    endDate: defaultEndDate 
+  });
+  const dispatch = useDispatch();
+
+  const { data: attendanceLogsData, loading: logsLoading, isFetching: logsFetching } = useSelector(
+    (state) => state.attendanceLogs
+  );
+
+  const [isRefreshing, setIsRefreshing] = useState(false); // Local state for refresh spinner
+
+  // Memoize today and yesterday dates to prevent re-creation on every render
   const today = useMemo(() => {
     const d = new Date();
     d.setHours(0, 0, 0, 0);
@@ -61,6 +77,7 @@ const AttendanceLog = ({
   const yesterday = useMemo(() => {
     const d = new Date();
     d.setDate(d.getDate() - 1);
+    d.setHours(0, 0, 0, 0); // Set to start of day for accurate comparison
     return d;
   }, []);
 
@@ -84,6 +101,7 @@ const AttendanceLog = ({
     return nameA.localeCompare(nameB);
   }, []);
 
+  // Effect to fetch attendance data when dateRange or projectId changes, or when refreshed
   useEffect(() => {
     const { startDate, endDate } = dateRange;
     dispatch(
@@ -93,21 +111,26 @@ const AttendanceLog = ({
         toDate: endDate,
       })
     );
+    // Reset refreshing state only after the dispatch, assuming fetchAttendanceData
+    // will eventually update logsLoading/logsFetching
+    const timer = setTimeout(() => { // Give Redux time to update
       setIsRefreshing(false);
+    }, 500); // Small delay to show spinner for a bit longer
+
+    return () => clearTimeout(timer);
   }, [dateRange, projectId, dispatch, isRefreshing]);
 
   const processedData = useMemo(() => {
     let filteredData = showOnlyCheckout
-      ? data.filter((item) => item.checkOutTime === null)
+      ? (attendanceLogsData || []).filter((item) => item.checkOutTime === null) // Ensure attendanceLogsData is an array
-      : data;
+      : (attendanceLogsData || []); // Ensure attendanceLogsData is an array
 
     // Apply search query filter
     if (searchQuery) {
       const lowerCaseSearchQuery = searchQuery.toLowerCase();
       filteredData = filteredData.filter((att) => {
-        // Construct a full name from available parts, filtering out null/undefined
         const fullName = [att.firstName, att.middleName, att.lastName]
-          .filter(Boolean) // This removes null, undefined, or empty string parts
+          .filter(Boolean)
           .join(" ")
           .toLowerCase();
 
@@ -119,6 +142,7 @@ const AttendanceLog = ({
       });
     }
 
+    // Grouping and sorting logic remains mostly the same, ensuring 'filteredData' is used
     const group1 = filteredData
       .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
       .sort(sortByName);
@@ -149,7 +173,10 @@ const AttendanceLog = ({
 
     // Group by date
     const groupedByDate = sortedList.reduce((acc, item) => {
-      const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
+      // Use checkInTime for activity 1, and checkOutTime for others or if checkInTime is null
+      const dateString = item.activity === 1 ? item.checkInTime : item.checkOutTime;
+      const date = dateString ? moment(dateString).format("YYYY-MM-DD") : null;
+
       if (date) {
         acc[date] = acc[date] || [];
         acc[date].push(item);
@@ -157,53 +184,62 @@ 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
     return sortedDates.flatMap((date) => groupedByDate[date]);
-  }, [data, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]);
+  }, [attendanceLogsData, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]);
 
   const {
     currentPage,
     totalPages,
     currentItems: paginatedAttendances,
     paginate,
-    resetPage, // Destructure resetPage here
+    resetPage,
   } = usePagination(processedData, 20);
 
-  // Effect to reset pagination when search query changes
+  // Effect to reset pagination when search query or showOnlyCheckout changes
   useEffect(() => {
     resetPage();
-  }, [searchQuery, resetPage]); // Add resetPage to dependencies
+  }, [searchQuery, showOnlyCheckout, resetPage]);
 
+  // Handler for 'attendance_log' event from eventBus
+  // This will now trigger a re-fetch of data
   const handler = useCallback(
     (msg) => {
+      // Check if the event is relevant to the current project and date range
       const { startDate, endDate } = dateRange;
-      const checkIn = msg.response.checkInTime.substring(0, 10);
+      const eventDate = (msg.response.checkInTime || msg.response.checkOutTime)?.substring(0, 10);
+
+      // Only refetch if the event relates to the currently viewed project and date range
       if (
         projectId === msg.projectId &&
-        startDate <= checkIn &&
+        eventDate &&
-        checkIn <= endDate
+        eventDate >= startDate && // Ensure eventDate is within the current range
+        eventDate <= endDate
       ) {
-        const updatedAttendance = data.map((item) =>
+        // Trigger a re-fetch of attendance data to get the latest state
-          item.id === msg.response.id
+        dispatch(
-            ? { ...item, ...msg.response }
+          fetchAttendanceData({
-            : item
+            projectId,
+            fromDate: startDate,
+            toDate: endDate,
+          })
         );
-        dispatch(setAttendanceData(updatedAttendance)); // Update Redux store
       }
     },
-    [projectId, dateRange, data, dispatch]
+    [projectId, dateRange, dispatch]
   );
 
+
   useEffect(() => {
     eventBus.on("attendance_log", handler);
     return () => eventBus.off("attendance_log", handler);
   }, [handler]);
 
+  // Handler for 'employee' event from eventBus (already triggers a refetch)
   const employeeHandler = useCallback(
     (msg) => {
       const { startDate, endDate } = dateRange;
@@ -223,6 +259,11 @@ const AttendanceLog = ({
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+  const handleRefreshClick = () => {
+    setIsRefreshing(true); // Set refreshing state to true
+    // The useEffect for fetching data will automatically trigger due to isRefreshing dependency
+  };
+
   return (
     <>
       <div
@@ -232,13 +273,14 @@ const AttendanceLog = ({
         <div className="d-flex align-items-center my-0 ">
           <DateRangePicker
             onRangeChange={setDateRange}
-            defaultStartDate={yesterday}
+            defaultStartDate={yesterday.toLocaleDateString("en-CA")} // Pass default as string YYYY-MM-DD
           />
           <div className="form-check form-switch text-start m-0 ms-5">
             <input
               type="checkbox"
               className="form-check-input"
               role="switch"
+              disabled={logsFetching}
               id="inactiveEmployeesCheckbox"
               checked={showOnlyCheckout}
               onChange={(e) => setshowOnlyCheckout(e.target.checked)}
@@ -248,10 +290,10 @@ const AttendanceLog = ({
         </div>
         <div className="col-md-2 m-0 text-end">
           <i
-            className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+            className={`bx bx-refresh cursor-pointer fs-4 ${logsLoading || isRefreshing ? "spin" : ""
               }`}
             title="Refresh"
-            onClick={() => setIsRefreshing(true)}
+            onClick={handleRefreshClick}
           />
         </div>
       </div>
@@ -259,7 +301,12 @@ const AttendanceLog = ({
         className="table-responsive text-nowrap"
         style={{ minHeight: "200px", display: 'flex' }}
       >
-        {processedData && processedData.length > 0 ? (
+        {/* Conditional rendering for loading state */}
+        {(logsLoading || isRefreshing) ? (
+          <div className="d-flex justify-content-center align-items-center text-muted w-100">
+            Loading...
+          </div>
+        ) : processedData && processedData.length > 0 ? (
           <table className="table mb-0">
             <thead>
               <tr>
@@ -278,14 +325,7 @@ const AttendanceLog = ({
               </tr>
             </thead>
             <tbody>
-              {(loading || isRefreshing) && (
+              {paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                <tr>
-                  <td colSpan={6}>Loading...</td>
-                </tr>
-              )}
-              {!loading &&
-                !isRefreshing &&
-                paginatedAttendances.reduce((acc, attendance, index, arr) => {
                 const currentDate = moment(
                   attendance.checkInTime || attendance.checkOutTime
                 ).format("YYYY-MM-DD");
@@ -354,20 +394,15 @@ const AttendanceLog = ({
             </tbody>
           </table>
         ) : (
-          !loading &&
-          !isRefreshing && (
           <div
-              className="d-flex justify-content-center align-items-center text-muted"
+            className="d-flex justify-content-center align-items-center text-muted w-100"
-              style={{
+            style={{ height: "200px" }} // Added height for better visual during no data
-                width: "100%",
-              }}
           >
             No employee logs.
           </div>
-          )
         )}
       </div>
-      {!loading && !isRefreshing && processedData.length > 20 && (
+      {!logsLoading && !isRefreshing && processedData.length > 20 && (
         <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

@@ -51,6 +51,7 @@ const createSchema = (modeldata) => {
 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()
@@ -97,11 +98,11 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
         .unwrap()
         .then((data) => {
 
-          showToast("Attendance Marked Successfully", "success");
+    //       showToast("Attendance Marked Successfully", "success");
-        })
+    //     })
-        .catch((error) => {
+    //     .catch((error) => {
 
-          showToast(error, "error");
+    //       showToast(error, "error");
 
         });
     }
@@ -213,7 +214,6 @@ 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

@@ -14,40 +14,45 @@ const Regularization = ({ handleRequest, searchQuery }) => {
   const [regularizesList, setRegularizedList] = useState([]);
   const { regularizes, loading, refetch } = useRegularizationRequests(selectedProject);
 
+  // Update regularizesList when regularizes data changes
   useEffect(() => {
     setRegularizedList(regularizes);
   }, [regularizes]);
 
-  const sortByName = (a, b) => {
+  const sortByName = useCallback((a, b) => {
     const nameA = (a.firstName + a.lastName).toLowerCase();
     const nameB = (b.firstName + b.lastName).toLowerCase();
     return nameA.localeCompare(nameB);
-  };
+  }, []);
 
   const handler = useCallback(
     (msg) => {
-      if (selectedProject == msg.projectId) {
+      if (selectedProject === msg.projectId) { // Use strict equality for comparison
-        const updatedAttendance = regularizes?.filter(item => item.id !== msg.response.id);
+        // Filter out the updated item to effectively remove it from the list
+        // as it's likely been processed (approved/rejected)
+        const updatedAttendance = regularizesList?.filter(item => item.id !== msg.response.id);
         cacheData("regularizedList", {
           data: updatedAttendance,
           projectId: selectedProject,
         });
+        // Refetch to get the latest data from the source, ensuring consistency
         refetch();
       }
     },
-    [selectedProject, regularizes]
+    [selectedProject, regularizesList, refetch] // Added regularizesList and refetch to dependencies
   );
 
-
   const employeeHandler = useCallback(
     (msg) => {
-      if (regularizes.some((item) => item.employeeId == msg.employeeId)) {
+      // If any regularization request belongs to the updated employee, refetch
+      if (regularizes?.some((item) => item.employeeId === msg.employeeId)) { // Use strict equality
         refetch();
       }
     },
-    [regularizes]
+    [regularizes, refetch] // Added refetch to dependencies
   );
 
+  // Event bus listeners
   useEffect(() => {
     eventBus.on("regularization", handler);
     return () => eventBus.off("regularization", handler);
@@ -58,7 +63,7 @@ const Regularization = ({ handleRequest, searchQuery }) => {
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
-  // ✅ Search filter logic added here
+  // Search filter logic
   const filteredData = [...regularizesList]
     ?.filter((item) => {
       if (!searchQuery) return true;
@@ -143,7 +148,7 @@ const Regularization = ({ handleRequest, searchQuery }) => {
       {!loading && totalPages > 1 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
-            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
+            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
               <button
                 className="page-link btn-xs"
                 onClick={() => paginate(currentPage - 1)}

src/components/Activities/RegularizationActions.jsx

@@ -6,12 +6,16 @@ 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();
@@ -24,11 +28,11 @@ const dispatch = useDispatch()
     }else{
       setLoadingForReject(true)
     }
-  //  setLoading(true)
+
-    let req_Data = {
+    let payload = {
       id:request_attendance.id || null,
-      description: ` ${IsReqularize ? "Approved" : "Rejected"}! regularization request`,
+      comment: ` ${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" }),
@@ -38,21 +42,45 @@ const dispatch = useDispatch()
       image:null 
     }
      
-    dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
+
+    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);
+        }
+      },
+    }
+  );
   
-      const regularizedList = getCachedData("regularizedList")
+  //   dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
+  //   {
 
-      const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
+  //     const regularizedList = getCachedData("regularizedList")
       
-      cacheData("regularizedList",{data:updatedata,projectId:projectId})
+  //     const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
-      setLoadingForApprove( false )
+     
-      setLoadingForReject( false )
+  //     cacheData("regularizedList",{data:updatedata,projectId:projectId})
-      refresh()
+  //     setLoadingForApprove( false )
-   }).catch( ( error ) =>
+  //     setLoadingForReject( false )
-    {
+  //     refresh()
-      showToast(error.message,"error")
+  //  }).catch( ( error ) =>
-  });
+  //   {
+  //     showToast(error.message,"error")
+  // });
     
     
   }

src/components/Project/AboutProject.jsx

@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from "react";
 import moment from "moment";
 import { getProjectStatusName } from "../../utils/projectStatus";
-import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
+import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
 import { useSelector } from "react-redux"; // Import useSelector
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {MANAGE_PROJECT} from "../../utils/constants";
+import { MANAGE_PROJECT } from "../../utils/constants";
 import GlobalModel from "../common/GlobalModel";
 import ManageProjectInfo from "./ManageProjectInfo";
-import {useQueryClient} from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 
 const AboutProject = () => {
   const [IsOpenModal, setIsOpenModal] = useState(false);
-  const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
+  const { mutate: UpdateProjectDetails, isPending } = useUpdateProject({
     onSuccessCallback: () => {
       setIsOpenModal(false);
     }
@@ -22,11 +22,11 @@ const AboutProject = () => {
   const projectId = useSelector((store) => store.localVariables.projectId);
 
   const manageProject = useHasUserPermission(MANAGE_PROJECT);
-  const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId ); // Pass projectId from useSelector
+  const { projects_Details, isLoading, error, refetch } = useProjectDetails(projectId); // Pass projectId from useSelector
 
-  const handleFormSubmit = ( updatedProject ) => {
+  const handleFormSubmit = (updatedProject) => {
-    if ( projects_Details?.id ) {
+    if (projects_Details?.id) {
-      UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject });
+      UpdateProjectDetails({ projectId: projects_Details?.id, updatedData: updatedProject });
       // The refetch here might be redundant or could be handled by react-query's invalidateQueries
       // if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
       // If refetch is still needed, consider adding a delay or using onSuccess of UpdateProjectDetails.
@@ -38,11 +38,11 @@ const AboutProject = () => {
   return (
     <>
       {IsOpenModal && (
-        <GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
+        <GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
           <ManageProjectInfo
             project={projects_Details}
             handleSubmitForm={handleFormSubmit}
-            onClose={() => setIsOpenModal( false )}
+            onClose={() => setIsOpenModal(false)}
             isPending={isPending}
           />
         </GlobalModel>
@@ -139,8 +139,10 @@ const AboutProject = () => {
                   )}
                 </li>
               </ul>
+
             </div>
           </div>
+
         </>
       )}
 

src/components/Project/AssignTask.jsx

@@ -88,6 +88,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
 
   // Changed to an array to hold multiple selected roles
   const [selectedRoles, setSelectedRoles] = useState(["all"]);
+  // Changed to an array to hold multiple selected roles
+  // const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
   const {
     handleSubmit,
@@ -127,6 +129,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     dispatch(changeMaster("Job Role"));
     // Initial state should reflect "All Roles" selected
     setSelectedRoles(["all"]);
+    // Initial state should reflect "All Roles" selected
+    setSelectedRoles(["all"]);
   }, [dispatch]);
 
   // Modified handleRoleChange to handle multiple selections
@@ -230,7 +234,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     <div className="mb-1">
       <p className="mb-0">
         <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
-              <span className="me-2 m-0 font-bold">Work Location :</span>
+          <span className="me-2 m-0 fw-bold">Work Location :</span> {/* Changed font-bold to fw-bold */}
           {[
             assignData?.building?.buildingName,
             assignData?.floor?.floorName,
@@ -258,7 +262,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                   <span className="text-dark">Select Team</span>
                   <div className="dropdown position-relative d-inline-block">
                     <a
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
+                      className={`dropdown-toggle hide-arrow cursor-pointer ${
+                        selectedRoles.includes("all") || selectedRoles.length === 0
                           ? "text-secondary"
                           : "text-primary"
                       }`}
@@ -287,16 +292,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       </span>
                     )}
 
-                        {/* Dropdown Menu */}
+                    {/* Dropdown Menu - Corrected: Removed duplicate ul block */}
-                        <ul
+                    <ul className="dropdown-menu p-2 text-capitalize" style={{ maxHeight: "300px", overflowY: "auto" }}>
-                          className="dropdown-menu p-2 text-capitalize "
+                      <li> {/* Changed key="all" to a unique key if possible, or keep it if "all" is a unique identifier */}
-                        >
-                          <li key="all">
                         <div className="form-check dropdown-item py-0">
                           <input
                             className="form-check-input"
                             type="checkbox"
-                                id="checkboxAllRoles"
+                            id="checkboxAllRoles" // Unique ID
                             value="all"
                             checked={selectedRoles.includes("all")}
                             onChange={(e) => handleRoleChange(e, e.target.value)}
@@ -313,7 +316,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                             <input
                               className="form-check-input"
                               type="checkbox"
-                                  id={`checkboxRole-${role.id}`}
+                              id={`checkboxRole-${role.id}`} // Unique ID
                               value={role.id}
                               checked={selectedRoles.includes(String(role.id))}
                               onChange={(e) => handleRoleChange(e, e.target.value)}
@@ -326,60 +329,13 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       ))}
                     </ul>
                   </div>
-                      <ul
-                        className="dropdown-menu p-2 text-capitalize"
-                        style={{ maxHeight: "300px", overflowY: "auto" }}
-                      >
-                        <li key="all">
-                          <div className="form-check dropdown-item py-0">
-                            <input
-                              className="form-check-input"
-                              type="checkbox"
-                              id="checkboxAllRoles"
-                              value="all"
-                              checked={selectedRoles.includes("all")}
-                              onChange={(e) =>
-                                handleRoleChange(e, e.target.value)
-                              }
-                            />
-                            <label
-                              className="form-check-label ms-2"
-                              htmlFor="checkboxAllRoles"
-                            >
-                              All Roles
-                            </label>
-                          </div>
-                        </li>
-                        {jobRolesForDropdown?.map((role) => (
-                          <li key={role.id}>
-                            <div className="form-check dropdown-item py-0">
-                              <input
-                                className="form-check-input"
-                                type="checkbox"
-                                id={`checkboxRole-${role.id}`}
-                                value={role.id}
-                                checked={selectedRoles.includes(String(role.id))}
-                                onChange={(e) =>
-                                  handleRoleChange(e, e.target.value)
-                                }
-                              />
-                              <label
-                                className="form-check-label ms-2"
-                                htmlFor={`checkboxRole-${role.id}`}
-                              >
-                                {role.name}
-                              </label>
-                            </div>
-                          </li>
-                        ))}
-                      </ul>
                   <input
                     type="text"
                     className="form-control form-control-sm ms-auto mb-2 mt-2"
                     placeholder="Search employees or roles..."
                     value={searchTerm}
                     onChange={handleSearchChange}
-                        style={{ maxWidth: '200px' }}
+                    style={{ maxWidth: "200px" }}
                   />
                 </div>
               </div>
@@ -415,7 +371,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                 {...field}
                                 className="form-check-input me-1 mt-1"
                                 type="checkbox"
-                                    id={`employee-${emp?.id}`}
+                                id={`employee-${emp?.id}`} // Unique ID
                                 value={emp.id}
                                 checked={field.value?.includes(emp.id)}
                                 onChange={(e) => {
@@ -475,10 +431,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
                         >
                           {emp.firstName} {emp.lastName}
-                              <p
+                          {/* Changed p tag to button for semantic correctness and accessibility */}
+                          <button
                             type="button"
-                                className=" btn-close-white p-0 m-0"
+                            className="btn-close btn-close-white ms-1" // Added ms-1 for spacing, removed p-0 m-0
-                                aria-label="Close"
+                            aria-label="Remove employee" // More descriptive aria-label
                             onClick={() => {
                               const updatedSelected = watch(
                                 "selectedEmployees"
@@ -490,8 +447,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               trigger("selectedEmployees");
                             }}
                           >
-                                <i className="icon-base bx bx-x icon-md "></i>
+                            <i className="icon-base bx bx-x icon-md"></i>
-                              </p>
+                          </button>
                         </span>
                       )
                     );
@@ -511,12 +468,12 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
             <div className="form-check form-check-inline mt-3 px-1">
               <label
                 className="form-text text-dark align-items-center d-flex"
-                    htmlFor="inlineCheckbox1"
+                htmlFor="inlineCheckbox1" // This htmlFor isn't linked to a checkbox in this context
               >
                 Pending Task of Activity :
                 <label
                   className="form-check-label fs-7 ms-4"
-                      htmlFor="inlineCheckbox1"
+                  htmlFor="inlineCheckbox1" // This htmlFor isn't linked to a checkbox in this context
                 >
                   <strong>
                     {assignData?.workItem?.plannedWork -
@@ -563,7 +520,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
             <div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
               <label
                 className="text-dark text-start d-flex align-items-center flex-wrap form-text"
-                    htmlFor="inlineCheckbox1"
+                htmlFor="targetForTodayInput" // Added a unique htmlFor for clarity
               >
                 <span>Target for Today</span>&nbsp;
                 <span style={{ marginLeft: "46px" }}>:</span>
@@ -582,14 +539,17 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       type="text"
                       className="form-control form-control-sm"
                       {...field}
-                          id="defaultFormControlInput"
+                      id="defaultFormControlInput" // Consider a more descriptive ID if used elsewhere
                       aria-describedby="defaultFormControlHelp"
                     />
                     <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
-                          <u>  {
+                      <u>
+                        {" "}
+                        {
                           assignData?.workItem?.activityMaster
                             ?.unitOfMeasurement
-                          }</u>
+                        }
+                      </u>
                     </span>
                     <div
                       style={{
@@ -645,7 +605,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
           </div>
 
           <label
-                className="form-text fs-7 m-1 text-lg text-dark"
+            className="form-text fs-7 m-1 text-dark" // Removed duplicate htmlFor and text-lg
             htmlFor="descriptionTextarea"
           >
             Description
@@ -657,7 +617,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               <textarea
                 {...field}
                 className="form-control"
-                    id="descriptionTextarea"
+                id="descriptionTextarea" // Unique ID
                 rows="2"
               />
             )}
@@ -689,7 +649,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
       </form>
     </div>
   </div>
-    </div>
+</div>  );
-  );
 };
 export default AssignTask;

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,109 +1,293 @@
 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(()=>{
+//     if ( projectId && projectId != 1 )
+//     {
+//       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
   };
-
-
-  useEffect(()=>{
-    if ( projectId && projectId != 1 )
-    {
-      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 ) =>
+export const useAttendancesLogs = (projectId, fromDate, toDate) => {
-{
+  const dispatch = useDispatch();
-  const [regularizes, setregularizes] = useState([]);
+  const enabled = !!projectId && !!fromDate && !!toDate;
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
 
-   
+  const query = useQuery({
-  const fetchData =  () => {
+    queryKey: ['attendanceLogs', projectId, fromDate, toDate],
-    const regularizedList_cache = getCachedData("regularizedList");
+    queryFn: async () => {
-    if(!regularizedList_cache || regularizedList_cache.projectId !== projectId  ){
+      const res = await AttendanceRepository.getAttendanceFilteredByDate(
-       setLoading(true)
+        projectId,
-       AttendanceRepository.getRegularizeList(projectId).then((response)=>{     
+        fromDate,
-        setregularizes( response.data )
+        toDate
-        cacheData("regularizedList", { data: response.data, projectId })
+      );
-        setLoading(false)
+      return res.data;
-        }).catch((error)=>{
+    },
-          setError("Failed to fetch data.");
+    enabled,
-          setLoading(false);
+  });
-        })     
-    }else{
-     
-      setregularizes(regularizedList_cache.data);
-    }
-  };
   
   useEffect(() => {
-    if (projectId) {
+    if (query.data && fromDate && toDate) {
-      fetchData(); 
+      dispatch(
+        setDefaultDateRange({
+          startDate: fromDate,
+          endDate: toDate,
+        })
+      );
     }
+  }, [dispatch, query.data, fromDate, toDate]);
+  return query;
+};
 
-  }, [ projectId ] );
+
-  return {regularizes,loading,error,refetch:fetchData}
+
-}
+export const useEmployeeAttendacesLog = (id) => {
+  const {
+    data: logs = [],
+    isLoading: loading,
+    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,
+    loading,
+    error,
+    recall,
+  };
+};
+
+export const useAttendanceByEmployee = (employeeId, fromDate, toDate) => {
+  const enabled = !!employeeId && !!fromDate && !!toDate;
+
+  return useQuery({
+    queryKey: ["employeeAttendance", employeeId, fromDate, toDate],
+    queryFn: async () => {
+      const res = await AttendanceRepository.getAttendanceByEmployee(employeeId, fromDate, toDate);
+      return res.data;
+    },
+    enabled,
+  });
+};
+
+export const useRegularizationRequests = (projectId) => {
+  const {
+    data: regularizes = [],
+    isLoading: loading,
+    error,
+    refetch,
+  } = 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,
+  };
+};
+
+
+// -------------------Mutation--------------------------------------
+
+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,84 +2,115 @@ 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) => {
+const useImageGallery = (selectedProjectId, filters) => {
-  const [images, setImages] = useState([]);
+  const hasFilters = filters && Object.values(filters).some(
-  const [allImagesData, setAllImagesData] = useState([]);
+    value => Array.isArray(value) ? value.length > 0 : value !== null && value !== ""
-  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,
-        filters,
+        hasFilters ? filters : undefined,
-        page,
+        pageParam,
         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;
+

src/index.css

@@ -101,25 +101,7 @@ 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

@@ -1,17 +1,15 @@
 import React, { useState, useEffect, useCallback } from "react";
 import {
   cacheData,
-  clearCacheKey,
-  getCachedData,
   getCachedProfileData,
-} from "../../slices/apiDataManager";
+} from "../../slices/apiDataManager"; // clearCacheKey and getCachedData are not used
 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 showToast from "../../services/toastService";
 import Regularization from "../../components/Activities/Regularization";
-import { useAttendace } from "../../hooks/useAttendance";
+import { useAttendance } from "../../hooks/useAttendance";
 import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
@@ -23,58 +21,61 @@ import { useProjectName } from "../../hooks/useProjects";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
-  const [showPending, setShowPending] = useState(false); // Renamed for consistency
+  const [showPending, setShowPending] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
-  const loginUser = getCachedProfileData();
+  // const loginUser = getCachedProfileData(); // Declared but not used
   const selectedProject = useSelector((store) => store.localVariables.projectId);
   const dispatch = useDispatch();
+
   const {
     attendance,
     loading: attLoading,
-    recall: attrecall,
+    // recall: attrecall, // Declared but not used in the current logic
-  } = useAttendace(selectedProject);
+  } = useAttendance(selectedProject);
   const [attendances, setAttendances] = useState();
-  const [empRoles, setEmpRoles] = useState(null);
+  const [empRoles, setEmpRoles] = useState(null); // This state is declared but never populated or used
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const [modelConfig, setModelConfig] = useState();
+  const [modelConfig, setModelConfig] = useState(null); // Initialize with null for clarity
   const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
-  const { projectNames, loading: projectLoading, fetchData } = useProjectName();
+  // const { projectNames, loading: projectLoading, fetchData } = useProjectName(); // loading and fetchData are not used directly here
 
-
+  // FormData is declared but not used in the provided snippet's logic
-  const [formData, setFormData] = useState({
+  // const [formData, setFormData] = useState({
-    markTime: "",
+  //   markTime: "",
-    description: "",
+  //   description: "",
-    date: new Date().toLocaleDateString(),
+  //   date: new Date().toLocaleDateString(),
-  });
+  // });
 
   const handler = useCallback(
     (msg) => {
       if (selectedProject === msg.projectId) {
-        // Ensure attendances is not null before mapping
         const updatedAttendance = attendances
           ? attendances.map((item) =>
               item.employeeId === msg.response.employeeId
                 ? { ...item, ...msg.response }
                 : item
             )
-          : [msg.response]; // If attendances is null, initialize with new response
+          : [msg.response];
 
         cacheData("Attendance", {
           data: updatedAttendance,
-          projectId: selectedProject,
+          projectId: selectedProject, // Corrected key from selectedProject to projectId for consistency
         });
         setAttendances(updatedAttendance);
       }
     },
-    [selectedProject, attendances] // Removed attrecall as it's not a direct dependency for this state update
+    [selectedProject, attendances]
   );
 
   const employeeHandler = useCallback(
     (msg) => {
+      // This logic fetches all attendance when an employee event occurs,
+      // which might be inefficient if only a single employee's data needs updating.
+      // Consider a more granular update if performance is an issue.
       if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
         AttendanceRepository.getAttendance(selectedProject)
           .then((response) => {
-            cacheData("Attendance", { data: response.data, selectedProject });
+            cacheData("Attendance", { data: response.data, projectId: selectedProject }); // Corrected key
             setAttendances(response.data);
           })
           .catch((error) => {
@@ -85,24 +86,29 @@ const AttendancePage = () => {
     [selectedProject, attendances]
   );
 
-  const getRole = (roleId) => {
+  // The `getRole` function has a duplicate line: `const role = empRoles.find((b) => b.id === roleId);`
-    if (!empRoles) return "Unassigned";
+  // Also, `empRoles` is declared but never set. If this function is meant to be used,
+  // `empRoles` needs to be fetched and set in the state.
+  const getRole = useCallback((roleId) => {
+    if (!empRoles) return "Unassigned"; // empRoles is always null with current code
     if (!roleId) return "Unassigned";
     const role = empRoles.find((b) => b.id === roleId);
     return role ? role.role : "Unassigned";
-  };
+  }, [empRoles]);
 
-  const openModel = () => {
+  const openModel = useCallback(() => {
     setIsCreateModalOpen(true);
-  };
+  }, []);
 
-  const handleModalData = (employee) => {
+  const handleModalData = useCallback((employee) => {
     setModelConfig(employee);
-  };
+  }, []);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     setModelConfig(null);
     setIsCreateModalOpen(false);
+    // Directly manipulating DOM is generally discouraged in React.
+    // Consider using React state to control modal visibility.
     const modalElement = document.getElementById("check-Out-modal");
     if (modalElement) {
       modalElement.classList.remove("show");
@@ -113,12 +119,11 @@ const AttendancePage = () => {
         modalBackdrop.remove();
       }
     }
-  };
+  }, []);
 
-  const handleSubmit = (formData) => {
+  const handleSubmit = useCallback((formData) => {
     dispatch(markCurrentAttendance(formData))
       .then((action) => {
-        // Check if payload and employeeId exist before mapping
         if (action.payload && action.payload.employeeId) {
           const updatedAttendance = attendances
             ? attendances.map((item) =>
@@ -126,7 +131,7 @@ const AttendancePage = () => {
                   ? { ...item, ...action.payload }
                   : item
               )
-            : [action.payload]; // If attendances is null, initialize with new payload
+            : [action.payload];
 
           cacheData("Attendance", {
             data: updatedAttendance,
@@ -141,29 +146,30 @@ const AttendancePage = () => {
       .catch((error) => {
         showToast(error.message, "error");
       });
-  };
+  }, [dispatch, attendances, selectedProject]);
 
-  const handleToggle = (event) => {
+  const handleToggle = useCallback((event) => {
     setShowPending(event.target.checked);
-  };
+  }, []);
+
+  // Use useProjectName hook to get projectNames and set selected project
+  const { projectNames } = useProjectName();
   useEffect(() => {
     if (selectedProject === null && projectNames.length > 0) {
       dispatch(setProjectId(projectNames[0]?.id));
     }
   }, [selectedProject, projectNames, dispatch]);
 
-  // Open modal when modelConfig is set
   useEffect(() => {
     if (modelConfig !== null) {
       openModel();
     }
-  }, [modelConfig]); // Removed isCreateModalOpen from here as it's set by openModel()
+  }, [modelConfig, openModel]); // Added openModel to dependency array
 
   useEffect(() => {
     setAttendances(attendance);
   }, [attendance]);
 
-  // Filter and search logic for the 'Today's' tab (Attendance component)
   const filteredAndSearchedTodayAttendance = useCallback(() => {
     let currentData = attendances;
 
@@ -176,9 +182,8 @@ const AttendancePage = () => {
     if (searchQuery) {
       const lowerCaseSearchQuery = searchQuery.toLowerCase();
       currentData = currentData?.filter((att) => {
-        // Combine first, middle, and last names for a comprehensive search
         const fullName = [att.firstName, att.middleName, att.lastName]
-          .filter(Boolean) // Remove null or undefined parts
+          .filter(Boolean)
           .join(" ")
           .toLowerCase();
 
@@ -203,6 +208,7 @@ const AttendancePage = () => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
+
   return (
     <>
       {isCreateModalOpen && modelConfig && (
@@ -270,16 +276,15 @@ const AttendancePage = () => {
             <div className="p-2">
               <input
                 type="text"
-                className="form-control form-control-sm" // Bootstrap small size input
+                className="form-control form-control-sm"
                 placeholder="Search employee..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-              // style={{ width: "200px", height: "30px" }} // Optional: further reduce width/height
               />
             </div>
 
           </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 && (
@@ -303,7 +308,6 @@ const AttendancePage = () => {
                 )}
               </>
             )}
-
             {activeTab === "logs" && (
               <div className="tab-pane fade show active py-0">
                 <AttendanceLog
@@ -311,16 +315,15 @@ const AttendancePage = () => {
                   projectId={selectedProject}
                   setshowOnlyCheckout={setShowPending}
                   showOnlyCheckout={showPending}
-                  searchQuery={searchQuery} // Pass search query to AttendanceLog
+                  searchQuery={searchQuery}
                 />
               </div>
             )}
-
             {activeTab === "regularization" && DoRegularized && (
               <div className="tab-pane fade show active py-0">
                 <Regularization
                   handleRequest={handleSubmit}
-                  searchQuery={searchQuery} // ✅ Pass it here
+                  searchQuery={searchQuery}
                 />
               </div>
             )}

src/pages/Gallary/ImageGallary.jsx

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

src/pages/Gallary/ImagePop.css

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

src/pages/Gallary/ImagePop.jsx

@@ -54,44 +54,34 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
   return (
     <div className="image-modal-overlay">
       <div className="image-modal-content">
-        {/* Close button */}
-        <button className="close-button" onClick={closeModal}>
-          ×
-        </button>
         
-        {/* Previous button, only shown if there's a previous image */}
+        <i className='bx bx-x close-button' onClick={closeModal}></i>
+
         {hasPrev && (
           <button className="nav-button prev-button" onClick={handlePrev}>
-            &#8249; {/* Unicode for single left angle quotation mark */}
+            <i className='bx bx-chevron-left'></i>
           </button>
         )}
 
-        {/* The main image display */}
+     <div className="image-container">
          <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}>
-            &#8250; {/* Unicode for single right angle quotation mark */}
+            <i className='bx bx-chevron-right'></i>
           </button>
         )}
 
-        {/* Image details */}
         <div className="image-details">
-          <p>
+        
-            <strong>👤 Uploaded By:</strong> {fullName}
+          <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>
-          </p>
+            <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>
-            <strong>📅 Date:</strong> {date}
+            {workAreaName || "Unknown"} <i className='bx bx-chevron-right'></i> {activityName}</span></div>
-          </p>
+                <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>
+          
-            <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,6 +8,9 @@ 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([]);
@@ -15,10 +18,12 @@ 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(
+
-    (store) => store.employeeAttendance
+  // const { data, loading, error } = useSelector(
-  );
+  //   (store) => store.employeeAttendance
+  // );
 
   const [isRefreshing, setIsRefreshing] = useState(true);
 
@@ -85,21 +90,10 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    20
+    ITEMS_PER_PAGE
   );
 
-  useEffect(() => {
+ 
-    const { startDate, endDate } = dateRange;
-    if (startDate && endDate) {
-      dispatch(
-        fetchEmployeeAttendanceData({
-          employeeId: employee,
-          fromDate: startDate,
-          toDate: endDate,
-        })
-      );
-    }
-  }, [dateRange, employee, isRefreshing]);
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -109,32 +103,13 @@ 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 && (
+        <GlobalModel size="lg" isOpen={isModalOpen} closeModal={closeModal}>
          <AttendLogs Id={attendanceId} />
-            </div>
+      </GlobalModel>
-          </div>
+      )}
-        </div>
-      </div>
       <div className="px-4 py-2 " style={{ minHeight: "500px" }}>
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
@@ -145,11 +120,11 @@ const AttendancesEmployeeRecords = ({ employee }) => {
           </div>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
+              className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
                 }`}
               data-toggle="tooltip"
               title="Refresh"
-              onClick={() => setIsRefreshing(!isRefreshing)}
+              onClick={() => refetch()}
             />
           </div>
         </div>

src/slices/localVariablesSlice.jsx

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