src/components/Activities/AttendLogs.jsx

@@ -2,27 +2,12 @@ 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";
 
 const AttendLogs = ({ Id }) => {
   const { logs, loading } = useEmployeeAttendacesLog(Id);
   const navigate = useNavigate();
 
-  const isCheckoutRegularized = (
+  const whichActivityPerform = (actvity) => {
-    activityTimeStr,
-    checkoutTimeStr,
-    threshHours
-  ) => {
-    if (!activityTimeStr || !checkoutTimeStr) return false;
-
-    const activityTime = new Date(activityTimeStr);
-    const checkoutTime = new Date(checkoutTimeStr);
-    const threshTimeMs = threshHours * 60 * 60 * 1000;
-
-    return checkoutTime - activityTime > threshTimeMs;
-  };
-
-  const whichActivityPerform = (actvity, checkOutTime) => {
     switch (actvity) {
       case 1:
         return (
@@ -39,12 +24,12 @@ const AttendLogs = ({ Id }) => {
       case 2:
         return (
           <i
-            className="bx bx-help-circle text-danger"
+            className="bx bx-help-circle text-secondary"
             data-bs-toggle="tooltip"
             data-bs-offset="0,8"
             data-bs-placement="top"
             data-bs-custom-class="tooltip"
-            title="Regularize Requested"
+            title="regularize Requested"
           ></i>
         );
         break;
@@ -56,47 +41,27 @@ const AttendLogs = ({ Id }) => {
             data-bs-offset="0,8"
             data-bs-placement="top"
             data-bs-custom-class="tooltip"
-            title="Request Deleted!"
+            title="Regularized"
           ></i>
         );
         break;
       case 4:
-        if (
+        return (
-          checkOutTime &&
+          <i
-          isCheckoutRegularized(
+            className="bx bx-left-arrow-circle text-danger "
-            logs[0]?.activityTime,
+            data-bs-toggle="tooltip"
-            checkOutTime,
+            data-bs-offset="0,8"
-            THRESH_HOLD
+            data-bs-placement="top"
-          )
+            data-bs-custom-class="tooltip"
-        ) {
+            title="Check-Out"
-          return (
+          ></i>
-            <i
+        );
-              className="bx bx-check-circle text-success"
-              data-bs-toggle="tooltip"
-              data-bs-offset="0,8"
-              data-bs-placement="top"
-              data-bs-custom-class="tooltip"
-              title="Regularized"
-            ></i>
-          );
-        } else {
-          return (
-            <i
-              className="bx bx-left-arrow-circle text-danger"
-              data-bs-toggle="tooltip"
-              data-bs-offset="0,8"
-              data-bs-placement="top"
-              data-bs-custom-class="tooltip"
-              title="Check-Out"
-            ></i>
-          );
-        }
 
         break;
       case 5:
         return (
           <i
-            className="bx bx-x-circle text-danger"
+             className="bx bx-x-circle text-danger"
             data-bs-toggle="tooltip"
             data-bs-offset="0,8"
             data-bs-placement="top"
@@ -114,7 +79,6 @@ const AttendLogs = ({ Id }) => {
     const url = `https://www.google.com/maps?q=${lat},${lng}`;
     window.open(url, "_blank"); // Open in new tab
   };
-
   useEffect(() => {
     const tooltipTriggerList = Array.from(
       document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -158,13 +122,11 @@ const AttendLogs = ({ Id }) => {
                   <tr key={index}>
                     <td>{log.activityTime.slice(0, 10)}</td>
                     <td>{convertShortTime(log.activityTime)}</td>
-                    <td>
+                    <td>{whichActivityPerform(log.activity)}</td>
-                      {whichActivityPerform(log.activity, log.activityTime)}
-                    </td>
                     <td>
                       {log?.latitude != 0 ? (
                         <i
-                          className="bx bx-map text-danger  cursor-pointer"
+                          className="bx bx-location-plus text-danger  cursor-pointer"
                           data-bs-toggle="tooltip"
                           data-bs-offset="0,8"
                           data-bs-placement="top"
@@ -184,9 +146,7 @@ const AttendLogs = ({ Id }) => {
                       }`}
                     </td>
                     <td className="text-wrap" colSpan={3}>
-                      {log?.comment?.length > 50
+                      {log?.comment || "--"}
-                        ? `${log.comment.slice(0, 50)}...`
-                        : log.comment || "--"}
                     </td>
                   </tr>
                 ))}

src/components/Directory/CardViewDirectory.jsx

@@ -23,12 +23,7 @@ const CardViewDirectory = ({
     >
       <div className="card-body  px-1 py-2 pb-0">
         <div className="d-flex justify-content-between">
-          <div className={`d-flex align-items-center ${IsActive && "cursor-pointer"}`}  onClick={() => {
+          <div className="d-flex align-items-center">
-          if (IsActive) {
-            setIsOpenModalNote(true);
-            setOpen_contact(contact);
-          }
-        }}>
             <Avatar
               size="xs"
               firstName={

src/components/Directory/ListViewDirectory.jsx

@@ -90,7 +90,7 @@ const ListViewDirectory = ({
 
       <td className="px-2" style={{ width: "10%" }}>
         <span className="badge badge-outline-secondary">
-          {contact?.contactCategory?.name || "Other"}
+          {contact?.contactCategory?.name}
         </span>
       </td>
 

src/components/Project/Infrastructure/WorkArea.jsx

@@ -6,20 +6,11 @@ import { useDispatch } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import ProjectRepository from "../../../repositories/ProjectRepository";
 import showToast from "../../../services/toastService";
-import {useHasUserPermission} from "../../../hooks/useHasUserPermission";
-import {ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA, MANAGE_TASK} from "../../../utils/constants";
-import {useParams} from "react-router-dom";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
   const [workItems, setWorkItems] = useState([]);
   const dispatch = useDispatch();
-  const [ Project, setProject ] = useState();
+  const [Project, setProject] = useState();
-  const {projectId} = useParams();
- 
-    const ManageTasks = useHasUserPermission(MANAGE_TASK);
-    const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
-  const ManageAndAssignTak = useHasUserPermission( ASSIGN_REPORT_TASK );
-  
 
   useEffect(() => {
     const project = getCachedData("projectInfo");
@@ -179,7 +170,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                   className="accordion-collapse collapse"
                   aria-labelledby={`heading-${workArea.id}`}
                 >
-                  <div className="accordion-body px-1">
+                  <div className="accordion-body p-0">
                     <table className="table table-sm mx-1">
                       <thead>
                         <tr>
@@ -198,11 +189,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                           <th className="infra-activity-table-header">
                             Progress
                           </th>
-                          {( ManageInfra || ( !projectId && ManageAndAssignTak  ) ) && (
+                          <th className="infra-activity-table-header text-end">
-                            <th className="infra-activity-table-header text-end">
+                            <span className="px-2">Actions</span>
-                              <span className="px-2">Actions</span>
+                          </th>
-                            </th>
-                          )}
                         </tr>
                       </thead>
                       <tbody className="table-border-bottom-0">

src/components/Project/Infrastructure/WorkItem.jsx

@@ -148,7 +148,7 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.activityMaster?.activityName ||
-                workItem.activityMaster?.activityName
+              workItem.activityMaster?.activityName
               : "NA"}
           </span>
         </td>
@@ -157,8 +157,8 @@ const WorkItem = ({
         <td className="text-center d-sm-table-cell d-md-none">
           {hasWorkItem
             ? NewWorkItem?.workItem?.completedWork ??
-              workItem?.completedWork ??
+            workItem?.completedWork ??
-              "NA"
+            "NA"
             : "NA"}
           /{" "}
           {hasWorkItem
@@ -171,28 +171,26 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
-                workItem.workCategoryMaster?.name ||
+              workItem.workCategoryMaster?.name ||
-                "NA"
+              "NA"
               : "NA"}
           </span>
         </td>
 
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem
+          {hasWorkItem ? (
-            ? `${
+            `${NewWorkItem?.workItem?.completedWork ??
-                NewWorkItem?.workItem?.completedWork ??
+            workItem?.completedWork ??
-                workItem?.completedWork ??
+            "0"}/${NewWorkItem?.workItem?.plannedWork ??
-                "0"
+            workItem?.plannedWork ??
-              }/${
+            "0"}`
-                NewWorkItem?.workItem?.plannedWork ??
+          ) : (
-                workItem?.plannedWork ??
+            "NA"
-                "0"
+          )}
-              }`
-            : "NA"}
         </td>
 
         {/* Progress Bar - always visible */}
-        <td className="text-center " style={{ width: "15%" }}>
+        <td className="text-center" style={{ width: "15%" }}>
           <div className="progress p-0">
             <div
               className="progress-bar"
@@ -201,7 +199,7 @@ const WorkItem = ({
                 width: getProgress(
                   NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
                   NewWorkItem?.workItem?.completedWork ||
-                    workItem?.completedWork
+                  workItem?.completedWork
                 ),
                 height: "5px",
               }}
@@ -219,90 +217,82 @@ const WorkItem = ({
         </td>
 
         {/* Actions - always visible */}
-        {(ManageInfra ||
+        <td className="text-end align-items-middle ">
-          (!projectId &&
+          {/* Desktop (md and up): inline icons */}
-            ManageAndAssignTak &&
+          <div className="d-none d-md-flex justify-content-end gap-1 px-2">
-            PlannedWork !== CompletedWork)) && (
+            {!projectId &&
-          <td className="text-end align-items-middle border-top">
+              ManageAndAssignTak &&
-            {/* Desktop (md and up): inline icons */}
+              PlannedWork !== CompletedWork && (
-            <div className="d-none d-md-flex justify-content-end gap-1 px-2">
+                <i
-              {!projectId &&
+                  className="bx bx-user-plus text-primary cursor-pointer"
-                ManageAndAssignTak &&
+                  title="Assign"
-                PlannedWork !== CompletedWork && (
+                  onClick={openModal}
-                  <i
+                  role="button"
-                    className="bx bx-user-plus text-primary cursor-pointer"
+                ></i>
-                    title="Assign"
+              )}
-                    onClick={openModal}
-                    role="button"
-                  ></i>
-                )}
 
+            {ManageInfra && (
+              <>
+                <i
+                  className="bx bxs-edit text-secondary cursor-pointer"
+                  title="Edit"
+                  onClick={showModal1}
+                  role="button"
+                ></i>
+                <i
+                  className="bx bx-trash text-danger cursor-pointer"
+                  title="Delete"
+                  onClick={showModalDelete}
+                  role="button"
+                ></i>
+              </>
+            )}
+          </div>
+
+          {/* Mobile (sm only): dropdown with icons */}
+          <div className="dropdown d-md-none text-center">
+            <i
+              className="bx bx-dots-vertical-rounded"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+              title="Actions"
+            ></i>
+
+            <ul className="dropdown-menu dropdown-menu-start">
+              {!projectId && ManageAndAssignTak && PlannedWork !== CompletedWork && (
+                <li>
+                  <a
+                    className="dropdown-item d-flex align-items-center"
+                    onClick={openModal}
+                  >
+                    <i className="bx bx-user-plus text-primary me-2"></i> Assign
+                  </a>
+                </li>
+              )}
               {ManageInfra && (
                 <>
-                  <i
+                  <li>
-                    className="bx bxs-edit text-secondary cursor-pointer"
+                    <a
-                    title="Edit"
+                      className="dropdown-item d-flex align-items-center"
-                    onClick={showModal1}
+                      onClick={showModal1}
-                    role="button"
+                    >
-                  ></i>
+                      <i className="bx bxs-edit text-secondary me-2"></i> Edit
-                  <i
+                    </a>
-                    className="bx bx-trash text-danger cursor-pointer"
+                  </li>
-                    title="Delete"
+                  <li>
-                    onClick={showModalDelete}
+                    <a
-                    role="button"
+                      className="dropdown-item d-flex align-items-center"
-                  ></i>
+                      onClick={showModalDelete}
+                    >
+                      <i className="bx bx-trash text-danger me-2"></i> Delete
+                    </a>
+                  </li>
                 </>
               )}
-            </div>
+            </ul>
-
+          </div>
-            {/* Mobile (sm only): dropdown with icons */}
+        </td>
-            <div className="dropdown d-md-none text-center">
-              <i
-                className="bx bx-dots-vertical-rounded"
-                role="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-                title="Actions"
-              ></i>
-
-              <ul className="dropdown-menu dropdown-menu-start">
-                {!projectId &&
-                  ManageAndAssignTak &&
-                  PlannedWork !== CompletedWork && (
-                    <li>
-                      <a
-                        className="dropdown-item d-flex align-items-center"
-                        onClick={openModal}
-                      >
-                        <i className="bx bx-user-plus text-primary me-2"></i>{" "}
-                        Assign
-                      </a>
-                    </li>
-                  )}
-                {ManageInfra && (
-                  <>
-                    <li>
-                      <a
-                        className="dropdown-item d-flex align-items-center"
-                        onClick={showModal1}
-                      >
-                        <i className="bx bxs-edit text-secondary me-2"></i> Edit
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        className="dropdown-item d-flex align-items-center"
-                        onClick={showModalDelete}
-                      >
-                        <i className="bx bx-trash text-danger me-2"></i> Delete
-                      </a>
-                    </li>
-                  </>
-                )}
-              </ul>
-            </div>
-          </td>
-        )}
       </tr>
     </>
   );

src/hooks/useAttendanceStatus.js

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