time slot should display according activity

src/components/Activities/CheckCheckOutForm.jsx

@@ -73,6 +73,8 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
         label="Choose a time" 
         onChange={(e) => setValue("markTime", e)}  
         interval={10}  
+        activity={modeldata?.action}
+          checkInTime={modeldata?.checkInTime}
       />
         {errors. markTime && <p className="text-danger">{errors.markTime.message}</p>}
       </div>

src/components/Activities/RenderAttendanceStatus.jsx

@@ -17,7 +17,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);
@@ -32,10 +32,6 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
   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
@@ -43,13 +39,56 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
     currentSlot.setSeconds(0);
     currentSlot.setMilliseconds(0);
 
-    let slot = new Date();
+    const checkInDate = checkInTime ? new Date(checkInTime) : null;
-    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;
+      let isSelectable = false;
-      const isSelectable = diffInMinutes >= 0 && diffInMinutes <= interval * 5;
+  
+      // 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,
@@ -68,7 +107,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 +117,7 @@ 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 +126,7 @@ 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];
@@ -99,6 +137,14 @@ const TimePicker = ({ label, onChange, interval = 10, value }) => {
     }
   }, [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}>
       {label && <label className="form-label">{label}</label>}