removed unused ModalContext

src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -7,17 +7,38 @@ import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
 
 const Attendance = ({ attendance, getRole, handleModalData }) => {
-  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    attendance,
-    5
-  );
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
 
+  // Ensure attendance is an array
+  const attendanceList = Array.isArray(attendance) ? attendance : [];
+
+  // Function to sort by first and last name
+  const sortByName = (a, b) => {
+    const nameA = (a.firstName + a.lastName).toLowerCase();
+    const nameB = (b.firstName + b.lastName).toLowerCase();
+    return nameA.localeCompare(nameB);
+  };
+
+  // Filter employees based on activity
+  const group1 = attendanceList
+    .filter((d) => d.activity === 1 || d.activity === 4)
+    .sort(sortByName);
+  const group2 = attendanceList
+    .filter((d) => d.activity === 0)
+    .sort(sortByName);
+
+  const filteredData = [...group1, ...group2];
+
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    filteredData,
+    5
+  );
+
   return (
     <>
       <div className="table-responsive text-nowrap">
-        {attendance && attendance.length > 0 ? (
+        {attendance && attendance.length > 0 && (
           <>
             <table className="table ">
               <thead>
@@ -96,6 +117,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                         </td>
                       </tr>
                     ))}
+                {!attendance && (
+                  <span>No employees assigned to the project</span>
+                )}
               </tbody>
             </table>
 
@@ -145,8 +169,6 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
               </nav>
             )}
           </>
-        ) : (
-          <span>No employees assigned to the project</span>
         )}
       </div>
     </>

src/components/Activities/AttendcesLogs.jsx

@@ -15,10 +15,44 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
-  const [isRefreshing, setIsRefreshing] = useState(true);
+  const [ isRefreshing, setIsRefreshing ] = useState( true );
+  
+
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0); // Strip time to compare dates only
+  
+  const isSameDay = (dateStr) => {
+    if (!dateStr) return false;
+    const d = new Date(dateStr);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime() === today.getTime();
+  };
+  
+  const isBeforeToday = (dateStr) => {
+    if (!dateStr) return false;
+    const d = new Date(dateStr);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime() < today.getTime();
+  };
+  
+  const sortByName = (a, b) => {
+    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
+    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
+    return nameA.localeCompare(nameB);
+  };
+  
+  const group1 = data.filter(d => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
+  const group2 = data.filter(d => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
+  const group3 = data.filter(d => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
+  const group4 = data.filter(d => d.activity === 4 && isBeforeToday(d.checkOutTime)).sort(sortByName);
+  const group5 = data.filter(d => d.activity === 5).sort(sortByName);
+  
+  const sortedFinalList = [...group1, ...group2, ...group3, ...group4, ...group5];
+  
   const currentDate = new Date().toLocaleDateString( "en-CA" );
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    data,
+    sortedFinalList,
     5
   );
 
@@ -36,6 +70,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   }, [dateRange, projectId, isRefreshing]);
 
 
+
   return (
     <>
       <div

src/components/Activities/CheckCheckOutForm.jsx

@@ -16,11 +16,11 @@ const schema = z.object({
 });
 
 const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
-
   const projectId = useSelector((store)=>store.localVariables.projectId)
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
   const dispatch = useDispatch()
+  console.log(modeldata)
 
   const {
     register,
@@ -72,7 +72,9 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
         <TimePicker 
         label="Choose a time" 
         onChange={(e) => setValue("markTime", e)}  
-        interval={10}  
+          interval={10}  
+          checkOutTime={modeldata?.checkOutTime}
+          checkInTime={modeldata?.checkInTime}
       />
         {errors. markTime && <p className="text-danger">{errors.markTime.message}</p>}
       </div>
@@ -124,7 +126,8 @@ const schemaReg = z.object({
 
 
 
-export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
+export const Regularization = ( {modeldata, closeModal, handleSubmitForm} ) =>
+{
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
   

src/components/Activities/Regularization.jsx

@@ -5,16 +5,31 @@ import RegularizationActions from "./RegularizationActions";
 import { useSelector } from "react-redux";
 import { useRegularizationRequests } from "../../hooks/useAttendance";
 import moment from "moment";
+import usePagination from "../../hooks/usePagination";
 
 const Regularization = ({ handleRequest }) => {
-  var selectedProject = useSelector((store) => store.localVariables.projectId);
+  var selectedProject = useSelector( ( store ) => store.localVariables.projectId );
+  
   const [regularizesList, setregularizedList] = useState([]);
   const { regularizes, loading, error, refetch } =
     useRegularizationRequests(selectedProject);
 
   useEffect(() => {
     setregularizedList(regularizes);
-  }, [regularizes]);
+  }, [ regularizes ] );
+
+  const sortByName = (a, b) => {
+    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
+    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
+    return nameA.localeCompare(nameB);
+  };
+
+  const filteredData = regularizesList.sort(sortByName)
+  
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
+    filteredData,
+    5
+  );
 
   return (
     <div className="table-responsive text-nowrap">
@@ -79,6 +94,52 @@ const Regularization = ({ handleRequest }) => {
             ))}
         </tbody>
       </table>
+
+      {!loading && (
+              <nav aria-label="Page ">
+                <ul className="pagination pagination-sm justify-content-end py-1">
+                  <li
+                    className={`page-item  ${
+                      currentPage === 1 ? "disabled" : ""
+                    }`}
+                  >
+                    <button
+                      className="page-link btn-xs"
+                      onClick={() => paginate(currentPage - 1)}
+                    >
+                      &laquo;
+                    </button>
+                  </li>
+                  {[...Array(totalPages)].map((_, index) => (
+                    <li
+                      key={index}
+                      className={`page-item ${
+                        currentPage === index + 1 ? "active" : ""
+                      }`}
+                    >
+                      <button
+                        className="page-link "
+                        onClick={() => paginate(index + 1)}
+                      >
+                        {index + 1}
+                      </button>
+                    </li>
+                  ))}
+                  <li
+                    className={`page-item ${
+                      currentPage === totalPages ? "disabled" : ""
+                    }`}
+                  >
+                    <button
+                      className="page-link "
+                      onClick={() => paginate(currentPage + 1)}
+                    >
+                      &raquo;
+                    </button>
+                  </li>
+                </ul>
+              </nav>
+            )}
     </div>
   );
 };

src/components/Activities/RenderAttendanceStatus.jsx

@@ -4,8 +4,7 @@ import useAttendanceStatus from "../../hooks/useAttendanceStatus";
 
 const RenderAttendanceStatus = ({ attendanceData, handleModalData,Tab,currentDate}) => {
 
-  const { text, color, disabled, action,checkInTime } = useAttendanceStatus(attendanceData);
-
+  const {text, color, disabled, action, checkInTime} = useAttendanceStatus( attendanceData );
   const handleButtonClick = (key) => {
   
     if(key === 6){
@@ -17,7 +16,9 @@ const RenderAttendanceStatus = ({ attendanceData, handleModalData,Tab,currentDat
       action,               
       employeeId: attendanceData?.employeeId,
       id: attendanceData?.id,
-      currentDate
+      currentDate,
+      checkInTime: attendanceData.checkInTime,
+      checkOutTime:attendanceData.checkOutTime
     });
   }
   };
@@ -40,7 +41,7 @@ const RenderAttendanceStatus = ({ attendanceData, handleModalData,Tab,currentDat
       {attendanceData?.checkInTime   && (  
         <button
           type="button"
-          className="btn btn-xs btn-success ms-2"
+          className="btn btn-xs btn-secondary ms-2"
           tabIndex="0"
           aria-controls="DataTables_Table_0"
           data-bs-toggle="modal"

src/components/Layout/Header.jsx

@@ -70,7 +70,7 @@ const Header = () => {
         </a>
       </div>
       <div
-        className="navbar-nav-right d-flex align-items-center"
+        className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
         {/* Search */}

src/components/Project/AssignRole.jsx

@@ -6,7 +6,6 @@ import { employee } from "../../data/masters";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { getCachedData } from "../../slices/apiDataManager";
-import { useModal } from "../../ModalContext";
 import { useProjects } from "../../hooks/useProjects";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { TasksRepository } from "../../repositories/ProjectRepository";

src/components/Project/Infrastructure/WorkItem.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { useModal } from "../../../ModalContext";
 import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
 import GlobalModel from "../../common/GlobalModel";

src/components/common/TimePicker.jsx

@@ -1,6 +1,7 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, {useState, useRef, useEffect} from "react";
+import {THRESH_HOLD} from "../../utils/constants"
 
-const TimePicker = ({ label, onChange, interval = 10, value }) => {
+const TimePicker = ({ label, onChange, interval = 10, value,checkInTime, checkOutTime }) => {
   const [time, setTime] = useState(value || "");
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -9,7 +10,7 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
   const getCurrentTime = () => {
     const now = new Date();
     const minutes = now.getMinutes();
-    const roundedMinutes = Math.round(minutes / interval) * interval; // Round to nearest interval
+    const roundedMinutes = Math.round(minutes / interval) * interval; 
     now.setMinutes(roundedMinutes);
     now.setSeconds(0);
     now.setMilliseconds(0);
@@ -28,47 +29,73 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
 
     return `${hoursFormatted}:${minutesFormatted} ${period}`;
   };
-
   const generateTimeSlots = () => {
     const slots = [];
     const now = new Date();
-    now.setSeconds(0);
-    now.setMilliseconds(0);
-
-    // Round current time DOWN to nearest interval
     const currentSlot = new Date();
-    currentSlot.setMinutes(
-      Math.floor(currentSlot.getMinutes() / interval) * interval
-    );
+    currentSlot.setMinutes(Math.floor(currentSlot.getMinutes() / interval) * interval);
     currentSlot.setSeconds(0);
     currentSlot.setMilliseconds(0);
   
-    let slot = new Date();
-    slot.setHours(0, 0, 0, 0); // Start from midnight
+    const checkInDate = checkInTime ? new Date(checkInTime) : null;
+    const checkOutDate = checkOutTime ? new Date(checkOutTime) : null;
   
-    for (let i = 0; i < 144; i++) {
+    const dayStart = new Date();
+    const dayEnd = new Date();
+    if (checkInDate) {
+      dayStart.setTime(checkInDate.getTime());
+      dayEnd.setTime(checkInDate.getTime());
+    }
+    dayStart.setHours(0, 0, 0, 0);
+    dayEnd.setHours(23, 59, 59, 999);
+  
+    let minSelectable = null;
+    let maxSelectable = null;
+  
+    if (!checkInDate) {
+      // Case 1: No check-in time (new check-in)
+      minSelectable = new Date(dayStart);
+      maxSelectable = new Date(currentSlot);
+    } else if (checkInDate && !checkOutDate) {
+      const hoursDiff = (now - checkInDate) / (1000 * 60 * 60);
+      if (hoursDiff < THRESH_HOLD) {
+        // Case 2: Check-in present, no checkout, within THRESH_HOLD hours
+        minSelectable = new Date(checkInDate);
+        maxSelectable = new Date(currentSlot);
+      } else {
+        // Case 4: Check-in present, no checkout, more than THRESH_HOLD hours
+        minSelectable = new Date(checkInDate);
+        maxSelectable = new Date(dayEnd);
+      }
+    } else if (checkInDate && checkOutDate) {
+      // Case 3: Both check-in and checkout present
+      const isSameDay = new Date(checkOutDate).toDateString() === new Date().toDateString();
+      minSelectable = new Date(checkOutDate);
+      maxSelectable = isSameDay ? new Date(dayEnd) : new Date(currentSlot);
+    
+    }
+  
+    const slot = new Date(dayStart.getTime());
+    while (slot <= dayEnd) {
       const formatted = formatTime(slot);
-      const diffInMinutes = (currentSlot - slot) / 60000;
-      const isSelectable = diffInMinutes >= 0 && diffInMinutes <= interval * 5;
-
-      slots.push({
-        time: formatted,
-        isSelectable,
-      });
-
+      const isSelectable = slot >= minSelectable && slot <= maxSelectable;
+      slots.push({ time: formatted, isSelectable });
       slot.setMinutes(slot.getMinutes() + interval);
     }
   
     return slots;
   };
   
+  
+  
+  
+
   const handleSelect = (selectedTime) => {
     setTime(selectedTime);
     if (onChange) onChange(selectedTime);
     setIsOpen(false);
   };
 
-  // Handle click outside the dropdown to close it
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -79,7 +106,6 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  // If there's no value, set the default time
   useEffect(() => {
     if (!value) {
       const defaultTime = formatTime(getCurrentTime());
@@ -88,7 +114,6 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
     }
   }, [value, interval, onChange]);
 
-  // Scroll to the selected slot when it's open
   useEffect(() => {
     if (isOpen && time && slotRefs.current[time]) {
       const selectedSlot = slotRefs.current[time];
@@ -97,7 +122,11 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
         block: "center",
       });
     }
-  }, [isOpen, time]);
+  }, [ isOpen, time ] );
+
+
+  
+
 
   return (
     <div className="position-relative w-100" ref={dropdownRef}>

src/hooks/useAttendanceStatus.js

@@ -74,15 +74,31 @@ const useAttendanceStatus = (attendanceData) => {
           text: "Regularize",
           color: 'btn-warning',
         });
-      }else if(activity === 4 && checkInTime !== null && checkOutTime !== null && !timeElapsed(checkInTime,THRESH_HOLD) ){
-        setStatus({
-          status: "Check-In",
-          action: ACTIONS.CHECK_IN,
-          disabled: false,
-          text: "Check In",
-          color: 'btn-primary',
-        })
-      }else if(activity === 2 && checkInTime !== null    ){
+      } else if ( activity === 4 && checkInTime !== null && checkOutTime !== null && !timeElapsed( checkInTime, THRESH_HOLD ) )
+      {
+        
+        if ( activity === 4 && checkInTime !== null && checkOutTime !== null && new Date(checkOutTime).toDateString() !== new Date().toDateString())
+        {
+          setStatus( {
+            status: "Approved",
+            action: ACTIONS.APPROVED,
+            disabled: true,
+            text: "Approved",
+            color: 'btn-success',
+          } );
+        } else
+        {
+          setStatus( {
+            status: "Check-In",
+            action: ACTIONS.CHECK_IN,
+            disabled: false,
+            text: "Check In",
+            color: 'btn-primary',
+          } )
+        }
+      } 
+      else if ( activity === 2 && checkInTime !== null )
+      {
         setStatus({
           status: "Requested",
           action: ACTIONS.REQUESTED,

src/utils/constants.jsx

@@ -1,4 +1,4 @@
-export const THRESH_HOLD = 12;  //  hours
+export const THRESH_HOLD = 48;  //  hours
 export const DURATION_TIME = 10; // minutes
 
 export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";