time slot should display according activity

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}  
+          activity={modeldata?.action}
+          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/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,8 @@ const RenderAttendanceStatus = ({ attendanceData, handleModalData,Tab,currentDat
       action,               
       employeeId: attendanceData?.employeeId,
       id: attendanceData?.id,
-      currentDate
+      currentDate,
+      checkInTime:attendanceData.checkInTime
     });
   }
   };

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/common/TimePicker.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 
-const TimePicker = ({ label, onChange, interval = 10, value }) => {
+const TimePicker = ({ label, onChange, interval = 10, value,checkInTime,activity }) => {
   const [time, setTime] = useState(value || "");
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -9,7 +9,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,39 +28,80 @@ 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(
+    currentSlot.setMinutes(Math.floor(currentSlot.getMinutes() / interval) * interval);
-      Math.floor(currentSlot.getMinutes() / interval) * interval
-    );
     currentSlot.setSeconds(0);
     currentSlot.setMilliseconds(0);
+  
+    const checkInDate = checkInTime ? new Date(checkInTime) : null;
 
-    let slot = new Date();
-    slot.setHours(0, 0, 0, 0); // Start from midnight
 
-    for (let i = 0; i < 144; i++) {
+    const fullStart = checkInDate ? new Date(checkInDate) : new Date();
+    fullStart.setHours(0, 0, 0, 0);
+    
+    const fullEnd = checkInDate ? new Date(checkInDate) : new Date();
+    fullEnd.setHours(23, 59, 59, 999);
+    
+  
+    let minSelectable = null;
+    let maxSelectable = null;
+  
+    // Activity 0: Time slots based on current time
+    if (activity === 0 && !checkInDate) {
+      minSelectable = new Date(currentSlot.getTime() - 60 * 60000); // one hour before current time
+      maxSelectable = new Date(currentSlot);
+    }
+    // Activity 1: Time slots based on check-in time today
+    else if (activity === 1 && checkInDate) {
+      if (checkInDate.toDateString() === now.toDateString()) {
+        minSelectable = new Date(checkInDate);
+        maxSelectable = new Date(currentSlot);
+      }
+    }
+    // Activity 2: Time slots from check-in time to 12:00 AM of the same day
+    else if (activity === 2 && checkInDate) {
+      // Set minSelectable to the exact check-in time
+      minSelectable = new Date(checkInDate);
+  
+      // Set maxSelectable to midnight (12:00 AM) of the same day
+      maxSelectable = new Date(checkInDate);
+      maxSelectable.setHours(23, 59, 59, 999); // Set to 23:59:59.999 (end of the day)
+    }
+  
+    // Loop through every slot in the day to check which ones are selectable
+    const slot = new Date(fullStart.getTime());
+    while (slot <= fullEnd) {
       const formatted = formatTime(slot);
-      const diffInMinutes = (currentSlot - slot) / 60000;
+  
-      const isSelectable = diffInMinutes >= 0 && diffInMinutes <= interval * 5;
+      let isSelectable = false;
-
+  
+      // For activity 2, allow only slots from the check-in time up to 12:00 AM of the same day
+      if (minSelectable && maxSelectable) {
+        if (activity === 2 && checkInDate) {
+          // Ensure slot is greater than or equal to minSelectable and less than or equal to maxSelectable
+          isSelectable = slot >= minSelectable && slot <= maxSelectable;
+        } else {
+          isSelectable = slot >= minSelectable && slot <= maxSelectable;
+        }
+      }
+  
       slots.push({
         time: formatted,
         isSelectable,
       });
-
+  
       slot.setMinutes(slot.getMinutes() + interval);
     }
-
+  
     return slots;
   };
+  ;
+  
+  
+  
 
   const handleSelect = (selectedTime) => {
     setTime(selectedTime);
@@ -68,7 +109,6 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
     setIsOpen(false);
   };
 
-  // Handle click outside the dropdown to close it
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -79,7 +119,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 +127,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 +135,21 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
         block: "center",
       });
     }
-  }, [isOpen, time]);
+  }, [ isOpen, time ] );
+
+
+  useEffect(() => {
+    if (activity === 2 && checkInTime) {
+      const slots = generateTimeSlots();
+      const selectableSlots = slots.filter(slot => slot.isSelectable);
+      console.log("Selectable Slots for Activity 2:", selectableSlots);
+    }
+  }, [activity, checkInTime]);
+  
+  
+  
+  
+
 
   return (
     <div className="position-relative w-100" ref={dropdownRef}>