src/components/Activities/AttendLogs.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useEmployeeAttendacesLog } from "../../hooks/useAttendance";
 import { convertShortTime } from "../../utils/dateUtils";
 import { useNavigate } from "react-router-dom";
-import {THRESH_HOLD} from "../../utils/constants";
+import { THRESH_HOLD } from "../../utils/constants";
 
 const AttendLogs = ({ Id }) => {
   const { logs, loading } = useEmployeeAttendacesLog(Id);
@@ -12,7 +12,7 @@ const AttendLogs = ({ Id }) => {
     activityTimeStr,
     checkoutTimeStr,
     threshHours
-  )=> {
+  ) => {
     if (!activityTimeStr || !checkoutTimeStr) return false;
 
     const activityTime = new Date(activityTimeStr);
@@ -20,9 +20,9 @@ const AttendLogs = ({ Id }) => {
     const threshTimeMs = threshHours * 60 * 60 * 1000;
 
     return checkoutTime - activityTime > threshTimeMs;
-  }
+  };
 
-  const whichActivityPerform = (actvity,checkOutTime) => {
+  const whichActivityPerform = (actvity, checkOutTime) => {
     switch (actvity) {
       case 1:
         return (
@@ -63,7 +63,11 @@ const AttendLogs = ({ Id }) => {
       case 4:
         if (
           checkOutTime &&
-          isCheckoutRegularized(logs[0]?.activityTime, checkOutTime, THRESH_HOLD)
+          isCheckoutRegularized(
+            logs[0]?.activityTime,
+            checkOutTime,
+            THRESH_HOLD
+          )
         ) {
           return (
             <i
@@ -154,7 +158,9 @@ const AttendLogs = ({ Id }) => {
                   <tr key={index}>
                     <td>{log.activityTime.slice(0, 10)}</td>
                     <td>{convertShortTime(log.activityTime)}</td>
-                    <td>{whichActivityPerform(log.activity,log.activityTime)}</td>
+                    <td>
+                      {whichActivityPerform(log.activity, log.activityTime)}
+                    </td>
                     <td>
                       {log?.latitude != 0 ? (
                         <i
@@ -178,7 +184,9 @@ const AttendLogs = ({ Id }) => {
                       }`}
                     </td>
                     <td className="text-wrap" colSpan={3}>
-                      {log?.comment || "--"}
+                      {log?.comment?.length > 50
+                        ? `${log.comment.slice(0, 50)}...`
+                        : log.comment || "--"}
                     </td>
                   </tr>
                 ))}

src/hooks/useAttendanceStatus.js

@@ -1,17 +1,16 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { timeElapsed } from "../utils/dateUtils";
+import { timeElapsed } from '../utils/dateUtils'; // Make sure it calculates in hours
-import { useSelector } from "react-redux";
+import { THRESH_HOLD } from '../utils/constants';
-import { THRESH_HOLD } from "../utils/constants";
 
+// THRESH_HOLD in hours (e.g., 12, 48, or 60)
 export const ACTIONS = {
   CHECK_IN: 0,
   CHECK_OUT: 1,
   REGULARIZATION: 2,
   REQUESTED: 3,
   APPROVED: 4,
-  REJECTED: 5,
+  REJECTED: 5
 };
-const now = new Date();
 
 const useAttendanceStatus = (attendanceData) => {
   const [status, setStatus] = useState({
@@ -19,133 +18,100 @@ const useAttendanceStatus = (attendanceData) => {
     action: null,
     disabled: true,
     text: "Unknown",
-    color: "btn-secondary",
+    color: 'btn-secondary',
   });
 
   useEffect(() => {
     const { checkInTime, checkOutTime, activity } = attendanceData;
+    const now = new Date();
 
-    if (activity === 0 && checkInTime === null && checkOutTime === null) {
+    const isSameDay = (date1, date2) =>
-      setStatus({
+      new Date(date1).toDateString() === new Date(date2).toDateString();
+
+    // 1. No check-in/check-out yet → Allow Check-In
+    if (activity === 0 && !checkInTime && !checkOutTime) {
+      return setStatus({
         status: "Check-In",
         action: ACTIONS.CHECK_IN,
         disabled: false,
         text: "Check In",
-        color: "btn-primary",
+        color: 'btn-primary',
       });
-    } else if (activity === 4 && new Date(checkOutTime) < now) {
+    }
-      setStatus({
+
-        status: "Approved",
+    // 2. Checked in, no checkout yet
-        action: ACTIONS.APPROVED,
+    if (checkInTime && !checkOutTime) {
-        disabled: true,
+      if (timeElapsed(checkInTime, THRESH_HOLD)) {
-        text: "Approved",
+        return setStatus({
-        color: "btn-success",
-      });
-    } else if (
-      activity === 0 &&
-      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 === 0 &&
-      checkInTime !== null &&
-      checkOutTime === null &&
-      timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      setStatus({
-        status: "Request Regularize",
-        action: ACTIONS.REGULARIZATION,
-        disabled: false,
-        text: "Regularizes",
-        color: "btn-warning",
-      });
-    } else if (
-      activity === 1 &&
-      checkInTime !== null &&
-      checkOutTime === null &&
-      !timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      setStatus({
-        status: "Check-Out",
-        action: ACTIONS.CHECK_OUT,
-        disabled: false,
-        text: "Check Out",
-        color: "btn-primary",
-      });
-    } else if (
-      activity === 1 &&
-      checkInTime !== null &&
-      checkOutTime === null &&
-      timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      setStatus({
           status: "Request Regularize",
           action: ACTIONS.REGULARIZATION,
           disabled: false,
           text: "Regularize",
-        color: "btn-warning",
+          color: 'btn-warning',
         });
-    } else if (
+      } else {
-      activity === 4 &&
+        return setStatus({
-      checkInTime !== null &&
+          status: "Check-Out",
-      checkOutTime !== null &&
+          action: ACTIONS.CHECK_OUT,
-      !timeElapsed(checkInTime, THRESH_HOLD)
+          disabled: false,
-    ) {
+          text: "Check Out",
-      if (
+          color: 'btn-primary',
-        activity === 4 &&
+        });
-        checkInTime !== null &&
+      }
-        checkOutTime !== null &&
+    }
-        new Date(checkOutTime).toDateString() !== new Date().toDateString()
+
-      ) {
+    // 3. Already checked in and out → Handle activity === 4 (Approved)
-        setStatus({
+    if (checkInTime && checkOutTime && activity === 4) {
+      if (!isSameDay(checkOutTime, now) && !timeElapsed(checkOutTime, THRESH_HOLD)) {
+        return setStatus({
           status: "Approved",
           action: ACTIONS.APPROVED,
           disabled: true,
           text: "Approved",
-          color: "btn-success",
+          color: 'btn-success',
         });
-      } else {
+      } else if (isSameDay(checkOutTime, now)) {
-        setStatus({
+        return setStatus({
           status: "Check-In",
           action: ACTIONS.CHECK_IN,
           disabled: false,
           text: "Check In",
-          color: "btn-primary",
+          color: 'btn-primary',
         });
       }
-    } else if (activity === 2 && checkInTime !== null) {
+    }
-      setStatus({
+
+    // 4. Regularization Requested
+    if (activity === 2) {
+      return setStatus({
         status: "Requested",
         action: ACTIONS.REQUESTED,
         disabled: true,
         text: "Requested",
-        color: "btn-info",
+        color: 'btn-info',
       });
-    } else if (activity === 5 && checkInTime !== null) {
+    }
-      setStatus({
+
+    // 5. Rejected Regularization
+    if (activity === 5) {
+      return setStatus({
         status: "Rejected",
         action: ACTIONS.REJECTED,
         disabled: true,
         text: "Rejected",
-        color: "btn-danger",
+        color: 'btn-danger',
       });
-    } else {
+    }
-      setStatus({
+
+    // Default to Approved if none of the above apply
+    return setStatus({
       status: "Approved",
       action: ACTIONS.APPROVED,
       disabled: true,
       text: "Approved",
-        color: "btn-success",
+      color: 'btn-success',
     });
-    }
+
   }, [attendanceData]);
 
   return status;