src/components/Activities/Attendance.jsx

@@ -5,15 +5,9 @@ import { convertShortTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
-import { ITEMS_PER_PAGE } from "../../utils/constants";
+import {ITEMS_PER_PAGE} from "../../utils/constants";
 
-const Attendance = ({
+const Attendance = ({ attendance, getRole, handleModalData }) => {
-  attendance,
-  getRole,
-  handleModalData,
-  setshowOnlyCheckout,
-  showOnlyCheckout,
-}) => {
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
   const [todayDate, setTodayDate] = useState(new Date());
@@ -25,7 +19,7 @@ const Attendance = ({
   const sortByName = (a, b) => {
     const nameA = (a.firstName + a.lastName).toLowerCase();
     const nameB = (b.firstName + b.lastName).toLowerCase();
-    return nameA?.localeCompare(nameB);
+    return nameA.localeCompare(nameB);
   };
 
   // Filter employees based on activity
@@ -45,47 +39,41 @@ const Attendance = ({
   return (
     <>
       <div className="table-responsive text-nowrap">
-        <div className="d-flex text-start align-items-center py-2">
-          <strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
-
-          <div className="form-check form-switch text-start m-0 ms-5">
-            <input
-              type="checkbox"
-              className="form-check-input"
-              role="switch"
-              id="inactiveEmployeesCheckbox"
-              checked={showOnlyCheckout}
-              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
-            />
-            <label className="form-check-label ms-0">Show Pending</label>
-          </div>
-        </div>
         {attendance && attendance.length > 0 && (
           <>
             <table className="table ">
               <thead>
-                <tr className="border-top-1">
+                <tr className="border-none" style={{ textAlign: 'left' }}>
-                  <th colSpan={2}>Name</th>
+                  <td style={{ borderBottom: 'none' }}>
-                  <th>Role</th>
+                    <strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
-                  <th>
+                  </td>
+                  <td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
+                </tr>
+
+                <tr>
+                  <th className="border-top-0" colSpan={2}>
+                    Name
+                  </th>
+                  <th className="border-top-0">Role</th>
+                  <th className="border-top-0">
                     <i className="bx bxs-down-arrow-alt text-success"></i>
                     Check-In
                   </th>
-                  <th>
+                  <th className="border-top-0">
                     <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
                   </th>
-                  <th>Actions</th>
+                  <th className="border-top-0">Actions</th>
                 </tr>
               </thead>
-              <tbody className="table-border-bottom-0 ">
+              <tbody className="table-border-bottom-0">
                 {currentItems &&
                   currentItems
                     .sort((a, b) => {
                       // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
-                      const checkInA = a?.checkInTime
+                      const checkInA = a.checkInTime
                         ? new Date(a.checkInTime)
                         : new Date(0);
-                      const checkInB = b?.checkInTime
+                      const checkInB = b.checkInTime
                         ? new Date(b.checkInTime)
                         : new Date(0);
                       return checkInB - checkInA; // Sort in descending order of checkInTime
@@ -143,13 +131,12 @@ const Attendance = ({
               </tbody>
             </table>
 
-            {!loading > 20 && (
+            {!loading>20 && (
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">
                   <li
-                    className={`page-item  ${
+                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
-                      currentPage === 1 ? "disabled" : ""
+                      }`}
-                    }`}
                   >
                     <button
                       className="page-link btn-xs"
@@ -161,9 +148,8 @@ const Attendance = ({
                   {[...Array(totalPages)].map((_, index) => (
                     <li
                       key={index}
-                      className={`page-item ${
+                      className={`page-item ${currentPage === index + 1 ? "active" : ""
-                        currentPage === index + 1 ? "active" : ""
+                        }`}
-                      }`}
                     >
                       <button
                         className="page-link "
@@ -174,9 +160,8 @@ const Attendance = ({
                     </li>
                   ))}
                   <li
-                    className={`page-item ${
+                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                      currentPage === totalPages ? "disabled" : ""
+                      }`}
-                    }`}
                   >
                     <button
                       className="page-link "

src/components/Activities/AttendcesLogs.jsx

@@ -12,6 +12,7 @@ import eventBus from "../../services/eventBus";
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
   const maxPage = Math.ceil(data.length / itemsPerPage);
+
   const currentItems = useMemo(() => {
     const startIndex = (currentPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage;
@@ -21,21 +22,10 @@ const usePagination = (data, itemsPerPage) => {
   const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
   const resetPage = useCallback(() => setCurrentPage(1), []);
 
-  return {
+  return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
-    currentPage,
-    totalPages: maxPage,
-    currentItems,
-    paginate,
-    resetPage,
-  };
 };
 
-const AttendanceLog = ({
+const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
-  handleModalData,
-  projectId,
-  setshowOnlyCheckout,
-  showOnlyCheckout,
-}) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
@@ -65,7 +55,7 @@ const AttendanceLog = ({
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA?.localeCompare(nameB);
+    return nameA.localeCompare(nameB);
   };
 
   useEffect(() => {
@@ -94,24 +84,14 @@ const AttendanceLog = ({
     const group3 = filteredData
       .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
       .sort(sortByName);
-    const group4 = filteredData.filter(
+    const group4 = filteredData
-      (d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
+      .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
-    );
     const group5 = filteredData
       .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
       .sort(sortByName);
-    const group6 = filteredData
+    const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
-      .filter((d) => d.activity === 5)
-      .sort(sortByName);
 
-    const sortedList = [
+    const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-      ...group1,
-      ...group2,
-      ...group3,
-      ...group4,
-      ...group5,
-      ...group6,
-    ];
 
     // Group by date
     const groupedByDate = sortedList.reduce((acc, item) => {
@@ -124,9 +104,7 @@ const AttendanceLog = ({
     }, {});
 
     // Sort dates in descending order
-    const sortedDates = Object.keys(groupedByDate).sort(
+    const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
-      (a, b) => new Date(b) - new Date(a)
-    );
 
     // Create the final sorted array
     const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
@@ -137,13 +115,10 @@ const AttendanceLog = ({
     filtering(data)
   }, [data, showOnlyCheckout]);
 
-  const {
+  const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
-    currentPage,
+    processedData,
-    totalPages,
+    20
-    currentItems: paginatedAttendances,
+  );
-    paginate,
-    resetPage,
-  } = usePagination(processedData, 20);
 
   // Reset to the first page whenever processedData changes (due to switch on/off)
   useEffect(() => {
@@ -179,89 +154,57 @@ const AttendanceLog = ({
 
   return (
     <>
-      <div
+      
-        className="dataTables_length text-start py-2 d-flex justify-content-between"
+        <div
-        id="DataTables_Table_0_length"
+          className="dataTables_length text-start py-2 d-flex justify-content-between"
-      >
+          id="DataTables_Table_0_length"
-        <div className="d-flex align-items-center my-0 ">
+        >
-          <DateRangePicker
+          <div className="col-md-3 my-0 ">
-            onRangeChange={setDateRange}
+            <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
-            defaultStartDate={yesterday}
+          </div>
-          />
+          <div className="col-md-2 m-0 text-end">
-          <div className="form-check form-switch text-start m-0 ms-5">
+            <i
-            <input
+              className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
-              type="checkbox"
+                }`}
-              className="form-check-input"
+              title="Refresh"
-              role="switch"
+              onClick={() => setIsRefreshing(true)}
-              id="inactiveEmployeesCheckbox"
-              checked={showOnlyCheckout}
-              onChange={(e) => setshowOnlyCheckout(e.target.checked)}
             />
-            <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-        <div className="col-md-2 m-0 text-end">
+        <div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
-          <i
+          {data && data.length > 0 && (
-            className={`bx bx-refresh cursor-pointer fs-4 ${
+            <table className="table mb-0">
-              loading || isRefreshing ? "spin" : ""
+              <thead>
-            }`}
-            title="Refresh"
-            onClick={() => setIsRefreshing(true)}
-          />
-        </div>
-      </div>
-      <div
-        className="table-responsive text-nowrap"
-        style={{ minHeight: "250px" }}
-      >
-        {data && data.length > 0 && (
-          <table className="table mb-0">
-            <thead>
-              <tr>
-                <th className="border-top-1" colSpan={2}>
-                  Name
-                </th>
-                <th className="border-top-1">Date</th>
-                <th>
-                  <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
-                  Check-In
-                </th>
-                <th>
-                  <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
-                </th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {(loading || isRefreshing) && (
                 <tr>
-                  <td colSpan={6}>Loading...</td>
+                  <th className="border-top-1" colSpan={2}>
+                    Name
+                  </th>
+                  <th className="border-top-1">Date</th>
+                  <th>
+                    <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
+                  </th>
+                  <th>
+                    <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
+                  </th>
+                  <th>Action</th>
                 </tr>
-              )}
+              </thead>
-              {!loading &&
+              <tbody>
-                !isRefreshing &&
+                {(loading || isRefreshing) && (
-                paginatedAttendances.reduce((acc, attendance, index, arr) => {
+                  <tr>
-                  const currentDate = moment(
+                    <td colSpan={6}>Loading...</td>
-                    attendance.checkInTime || attendance.checkOutTime
+                  </tr>
-                  ).format("YYYY-MM-DD");
+                )}
+                {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
+                  const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
                   const previousAttendance = arr[index - 1];
-                  const previousDate = previousAttendance
+                  const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
-                    ? moment(
-                        previousAttendance.checkInTime ||
-                          previousAttendance.checkOutTime
-                      ).format("YYYY-MM-DD")
-                    : null;
 
                   if (!previousDate || currentDate !== previousDate) {
                     acc.push(
-                      <tr
+                      <tr key={`header-${currentDate}`} className="table-row-header">
-                        key={`header-${currentDate}`}
-                        className="table-row-header"
-                      >
                         <td colSpan={6} className="text-start">
-                          <strong>
+                          <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
-                            {moment(currentDate).format("DD-MM-YYYY")}
-                          </strong>
                         </td>
                       </tr>
                     );
@@ -275,7 +218,10 @@ const AttendanceLog = ({
                             lastName={attendance.lastName}
                           />
                           <div className="d-flex flex-column">
-                            <a href="#" className="text-heading text-truncate">
+                            <a
+                              href="#"
+                              className="text-heading text-truncate"
+                            >
                               <span className="fw-normal">
                                 {attendance.firstName} {attendance.lastName}
                               </span>
@@ -284,15 +230,11 @@ const AttendanceLog = ({
                         </div>
                       </td>
                       <td>
-                        {moment(
+                        {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
-                          attendance.checkInTime || attendance.checkOutTime
-                        ).format("DD-MMM-YYYY")}
                       </td>
                       <td>{convertShortTime(attendance.checkInTime)}</td>
                       <td>
-                        {attendance.checkOutTime
+                        {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
-                          ? convertShortTime(attendance.checkOutTime)
-                          : "--"}
                       </td>
                       <td className="text-center">
                         <RenderAttendanceStatus
@@ -306,55 +248,40 @@ const AttendanceLog = ({
                   );
                   return acc;
                 }, [])}
-            </tbody>
+              </tbody>
-          </table>
+            </table>
-        )}
+
-        {!loading && !isRefreshing && data.length === 0 && (
+
-          <span>No employee logs</span>
+          )}
-        )}
+          {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
-        {error && !loading && !isRefreshing && (
+          {error && !loading && !isRefreshing && (
-          <tr>
+            <tr>
-            <td colSpan={6}>{error}</td>
+              <td colSpan={6}>{error}</td>
-          </tr>
+            </tr>
-        )}
+          )}
-      </div>
+        </div>
       {!loading && !isRefreshing && processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
-              <button
+              <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
-                className="page-link btn-xs"
-                onClick={() => paginate(currentPage - 1)}
-              >
                 &laquo;
               </button>
             </li>
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
-              (pageNumber) => (
+              <li
-                <li
+                key={pageNumber}
-                  key={pageNumber}
+                className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
-                  className={`page-item ${
-                    currentPage === pageNumber ? "active" : ""
-                  }`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => paginate(pageNumber)}
-                  >
-                    {pageNumber}
-                  </button>
-                </li>
-              )
-            )}
-            <li
-              className={`page-item ${
-                currentPage === totalPages ? "disabled" : ""
-              }`}
-            >
-              <button
-                className="page-link"
-                onClick={() => paginate(currentPage + 1)}
               >
+                <button className="page-link" onClick={() => paginate(pageNumber)}>
+                  {pageNumber}
+                </button>
+              </li>
+            ))}
+            <li
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
+            >
+              <button className="page-link" onClick={() => paginate(currentPage + 1)}>
                 &raquo;
               </button>
             </li>
@@ -365,4 +292,4 @@ const AttendanceLog = ({
   );
 };
 
-export default AttendanceLog;
+export default AttendanceLog;

src/components/Activities/InfraPlanning.jsx

@@ -28,10 +28,10 @@ const InfraPlanning = () =>
   const {projects_Details, loading: project_deatilsLoader, error: project_error,refetch} = useProjectDetails( selectedProject )
   const reloadedData = useSelector( ( store ) => store.localVariables.reload )
  
-  // useEffect( () =>
+  useEffect( () =>
-  // {
+  {
-  //   dispatch(setProjectId(projects[0]?.id))
+    dispatch(setProjectId(projects[0]?.id))
-  // }, [ projects ] )
+  }, [ projects ] )
   
    useEffect( () =>
    {

src/components/Activities/Regularization.jsx

@@ -22,7 +22,7 @@ const Regularization = ({ handleRequest }) => {
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA?.localeCompare(nameB);
+    return nameA.localeCompare(nameB);
   };
 
   const handler = useCallback(

src/components/Activities/ReportTaskComments.jsx

@@ -8,7 +8,6 @@ import showToast from "../../services/toastService";
 import Avatar from "../common/Avatar";
 import { getBgClassFromHash } from "../../utils/projectStatus";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
-import ImagePreview from "../common/ImagePreview";
 
 const schema = z.object({
   comment: z.string().min(1, "Comment cannot be empty"),
@@ -41,9 +40,7 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
   useEffect(() => {
     const taskList = getCachedData("taskList");
     if (taskList && taskList.data && commentsData?.id) {
-      const currentTask = taskList.data.find(
+      const currentTask = taskList.data.find(task => task.id === commentsData.id);
-        (task) => task.id === commentsData.id
-      );
       if (currentTask && currentTask.comments) {
         setComment(currentTask.comments);
       } else {
@@ -102,183 +99,157 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
       showToast("Successfully Sent", "success");
     } catch (error) {
       setloading(false);
-      showToast(
+      showToast(error.response.data?.message || "Something went wrong", "error");
-        error.response.data?.message || "Something went wrong",
-        "error"
-      );
     }
   };
+
   return (
-    <div className="p-1">
+    <div
-      <div className="modal-body p-sm-4 p-0">
+      className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
-        <h5 className=" text-center mb-2">Activity Summary</h5>
+      role="document"
+    >
+      <div className="modal-content">
+        <div className="modal-body p-sm-4 p-0">
+          <button
+            type="button"
+            className="btn-close"
+            onClick={closeModal}
+            aria-label="Close"
+          ></button>
+          <h5 className=" text-center mb-2">
+            Activity Summary
+          </h5>
 
-        <p className="fw-bold my-2 text-start">
+          <p className="small-text text-start my-2">
-          Location :
+            {commentsData?.workItem?.workArea?.floor?.building?.description}
-          <span className="fw-normal ms-2 text-start">
+          </p>
-            {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
-            <i className="bx bx-chevron-right"></i>{" "}
-            {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
-            <i className="bx bx-chevron-right"></i>
-            {`${commentsData?.workItem?.workArea?.areaName}`}
-            <i className="bx bx-chevron-right"></i>
-            {` ${commentsData?.workItem?.activityMaster?.activityName}`}
-          </span>
-        </p>
 
-        <p className="fw-bold my-2 text-start">
+          <p className="fw-bold my-2 text-start">
-          Assigned By :
+            Assigned By :
-          <span className=" ms-2">
+            <span className=" ms-2">
-            {commentsData?.assignedBy?.firstName +
+              {commentsData?.assignedBy?.firstName +
-              " " +
+                " " +
-              commentsData?.assignedBy?.lastName}
+                commentsData?.assignedBy?.lastName}
-          </span>{" "}
+            </span>{" "}
-        </p>
+          </p>
 
-        <p className="fw-bold my-2 text-start">
+          <p className="fw-bold my-2 text-start">
-          Reported By :
+            Reported By :
-          <span className=" ms-2">
+            <span className=" ms-2"> -
-            {" "}
+              {/* {commentsData?.assignedBy?.firstName +
-            -
-            {/* {commentsData?.assignedBy?.firstName +
                 " " +
                 commentsData?.assignedBy?.lastName} */}
-          </span>{" "}
+            </span>{" "}
-        </p>
+          </p>
 
-        <p className="fw-bold my-2 text-start">
+          <p className="fw-bold my-2 text-start">
-          Planned Work: {commentsData?.plannedTask}{" "}
+            Location :
-          {commentsData?.workItem?.activityMaster?.unitOfMeasurement}
+            <span className="fw-normal ms-2 text-start">
-        </p>
+              {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
-        {commentsData?.reportedDate != null && (
+              <i className="bx bx-chevron-right"></i>{" "}
+              {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
+              <i className="bx bx-chevron-right"></i>
+              {`${commentsData?.workItem?.workArea?.areaName}`}
+              <i className="bx bx-chevron-right"></i>
+              {` ${commentsData?.workItem?.activityMaster?.activityName}`}
+            </span>
+          </p>
+          <p className="fw-bold my-2 text-start">
+            Planned Work: {commentsData?.plannedTask}{" "}            
+              {
+                commentsData?.workItem?.activityMaster
+                  ?.unitOfMeasurement
+              }            
+          </p>
           <p className="fw-bold my-2 text-start">
             {" "}
-            Completed Work : {commentsData?.completedTask}{" "}
+            Completed Work : {commentsData?.completedTask}{" "}           
-            {commentsData?.workItem?.activityMaster?.unitOfMeasurement}
+              {
+                commentsData?.workItem?.activityMaster
+                  ?.unitOfMeasurement
+              }            
           </p>
-        )}
+          <div className="d-flex align-items-center flex-wrap">
-        {!commentsData?.reportedDate && (
+            <p className="fw-bold text-start m-0 me-1">Team :</p>
-          <p className="fw-bold my-2 text-start"> Completed Work : &nbsp;-</p>
+            <div className="d-flex flex-wrap align-items-center gap-2">
-        )}
+              {commentsData?.teamMembers?.map((member, idx) => (
-        <div className="d-flex align-items-center flex-wrap">
+                <span key={idx} className="d-flex align-items-center">
-          <p className="fw-bold text-start m-0 me-1">Team :</p>
+                  <Avatar
-          <div className="d-flex flex-wrap align-items-center gap-2">
+                    firstName={member?.firstName}
-            {commentsData?.teamMembers?.map((member, idx) => (
+                    lastName={member?.lastName}
-              <span key={idx} className="d-flex align-items-center">
+                    size="xs"
-                <Avatar
+                  />
-                  firstName={member?.firstName}
+                  {member?.firstName + " " + member?.lastName}
-                  lastName={member?.lastName}
+                </span>
-                  size="xs"
+              ))}
-                />
+            </div>
-                {member?.firstName + " " + member?.lastName}
-              </span>
-            ))}
           </div>
-        </div>
-        <div className="fw-bold my-2 text-start d-flex">
-          <span>Note:</span>
-          <div
-            className="fw-normal ms-2"
-            dangerouslySetInnerHTML={{ __html: commentsData?.description }}
-          />
-        </div>
 
-        {commentsData?.reportedPreSignedUrls?.length > 0 && (
+          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
-          <div className=" text-start">
+            <label className="fw-bold text-start my-1">Add comment :</label>
-            <p className="fw-bold m-0">Attachment</p>
+            <textarea
-            <ImagePreview
+              {...register("comment")}
-              IsReported={true}
+              className="form-control"
-              images={commentsData?.reportedPreSignedUrls}
+              id="exampleFormControlTextarea1"
+              placeholder="Enter comment"
             />
-          </div>
+            {errors.comment && (
-        )}
+              <div className="danger-text">{errors.comment.message}</div>
-        <form onSubmit={handleSubmit(onSubmit)} className="text-start">
+            )}
-          <label className="fw-bold text-start my-1">Add comment :</label>
+            <div className="text-end my-1">
-          <textarea
+              <button
-            {...register("comment")}
+                type="button"
-            className="form-control"
+                className="btn btn-sm btn-secondary"
-            id="exampleFormControlTextarea1"
+                onClick={closeModal}
-            placeholder="Enter comment"
+                data-bs-dismiss="modal"
-          />
+              >
-          {errors.comment && (
+                Close
-            <div className="danger-text">{errors.comment.message}</div>
+              </button>
-          )}
+              <button type="submit" className="btn btn-sm btn-primary ms-2" disabled={loading}>
-          <div className="text-end my-1">
+                {loading ? "Sending..." : "Comment"}
-            <button
+              </button>
-              type="button"
+            </div>
-              className="btn btn-sm btn-secondary"
+          </form>
-              onClick={closeModal}
-              data-bs-dismiss="modal"
-            >
-              Close
-            </button>
-            <button
-              type="submit"
-              className="btn btn-sm btn-primary ms-2"
-              disabled={loading}
-            >
-              {loading ? "Sending..." : "Comment"}
-            </button>
-          </div>
-        </form>
 
-        <ul
+          <ul
-          className="list-group px-0 mx-0 overflow-auto border-0"
+            className="list-group px-0 mx-0 overflow-auto border-0"
-          ref={containerRef}
+            ref={containerRef}
-        >
+          >
-          {comments &&
+            {comments &&
-            comments
+              comments
-              ?.slice()
+                ?.slice()
-              .reverse()
+                .reverse()
-              .map((data, idx) => {
+                .map((data, idx) => {
-                const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
+                  const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
-                return (
+                  return (
-                  <li
+                    <li
-                    className={`list-group-item list-group-item-action border-none my-1 p-1`}
+                      className={`list-group-item list-group-item-action border-none my-1 p-1`}
-                    key={idx}
+                      key={idx}
-                  >
-                    <div
-                      className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
                     >
-                      <div className="avatar avatar-xs me-1">
-                        <span
-                          className={`avatar-initial rounded-circle bg-label-primary`}
-                        >
-                          {`${data?.employee?.firstName?.slice(
-                            0,
-                            1
-                          )} ${data?.employee?.lastName?.slice(0, 1)}`}
-                        </span>
-                      </div>
-
                       <div
-                        className={`d-flex align-items-center justify-content-start`}
+                        className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
                       >
-                        <p className={`mb-0 text-muted me-2`}>{fullName}</p>
+                        <div className="avatar avatar-xs me-1">
-                        <p
+                          <span
-                          className={`text-secondary m-0`}
+                            className={`avatar-initial rounded-circle bg-label-primary`}
-                          style={{ fontSize: "10px" }}
+                          >
-                        >
+                            {`${data?.employee?.firstName?.slice(0, 1)} ${data?.employee?.lastName?.slice(0, 1)}`}
-                          {moment.utc(data?.commentDate).local().fromNow()}
+                          </span>
-                        </p>
+                        </div>
+
+                        <div className={`d-flex align-items-center justify-content-start`}>
+                          <p className={`mb-0 text-muted me-2`}>{fullName}</p>
+                          <p className={`text-secondary m-0`} style={{ fontSize: "10px" }}>
+                            {moment.utc(data?.commentDate).local().fromNow()}
+                          </p>
+                        </div>
                       </div>
-                    </div>
+                      <p className={`ms-6 text-start mb-0 text-body`}>{data?.comment}</p>
-                    <p className={`ms-6 text-start mb-0 text-body`}>
+                    </li>
-                      {data?.comment}
+                  );
-                    </p>
+                })}
-                    {data?.preSignedUrls?.length > 0 && (
+          </ul>
-                      <div className="ps-6 text-start">
+        </div>
-                        <small className="">Attachment</small>
-                        <ImagePreview
-                          images={data?.preSignedUrls}
-                          IsReported={true}
-                        />
-                      </div>
-                    )}
-                  </li>
-                );
-              })}
-        </ul>
       </div>
     </div>
   );

src/components/Dashboard/ProjectProgressChart.jsx

@@ -2,48 +2,36 @@ import React, { useState } from "react";
 import LineChart from "../Charts/LineChart";
 import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_Data } from "../../hooks/useDashboard_Data";
-import { useSelector } from "react-redux";
+import {useSelector} from "react-redux";
 
-const ProjectProgressChart = () => {
+const ProjectProgressChart = () =>
-  const selectedProject = useSelector(
+{
-    (store) => store.localVariables.projectId
+  const selectedProject = useSelector((store) => store.localVariables.projectId);
-  );
   const { projects } = useProjects();
-  const [range, setRange] = useState("15D");
+  // const [selectedProjectId, setSelectedProjectId] = useState("all");
-  const [showAllEmployees, setShowAllEmployees] = useState(false);
+  const [range, setRange] = useState("1W");
 
   const getDaysFromRange = (range) => {
     switch (range) {
-      case "1D":
+      case "1D": return 1;
-        return 1;
+      case "1W": return 7;
-      case "1W":
+      case "15D": return 15;
-        return 7;
+      case "1M": return 30;
-      case "15D":
+      case "3M": return 90;
-        return 15;
+      case "1Y": return 365;
-      case "1M":
+      case "5Y": return 1825;
-        return 30;
+      default: return 7;
-      case "3M":
-        return 90;
-      case "1Y":
-        return 365;
-      case "5Y":
-        return 1825;
-      default:
-        return 7;
     }
   };
 
   const days = getDaysFromRange(range);
   const today = new Date();
-  const FromDate = today.toLocaleDateString("en-CA");
+  const FromDate = today.toLocaleDateString('en-CA');
-
-  const projectId =
-    showAllEmployees || !selectedProject?.trim() ? null : selectedProject;
 
   const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
     days,
     FromDate,
-    projectId,
+     projectId:  selectedProject  === " "  ? "all" : selectedProject//  selectedProjectId === "all" ? null : selectedProjectId,
   });
 
   const sortedDashboardData = [...dashboard_data].sort(
@@ -62,69 +50,61 @@ const ProjectProgressChart = () => {
   ];
 
   const lineChartCategories = sortedDashboardData.map((d) =>
-    new Date(d.date).toLocaleDateString("en-US", {
+    new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })
-      month: "short",
-      day: "numeric",
-    })
   );
   const lineChartCategoriesDates = sortedDashboardData.map((d) =>
-    new Date(d.date).toLocaleDateString("en-US", {
+    new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-    })
   );
 
-  const selectedProjectData = projects?.find((p) => p.id === selectedProject);
-  const selectedProjectName = selectedProjectData?.shortName?.trim()
-    ? selectedProjectData.shortName
-    : selectedProjectData?.name;
-
   return (
     <div className="card h-100">
       <div className="card-header">
-        <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
+        {/* Row 1: Title + Project Selector */}
-          {/* Left: Title */}
+        <div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
-          <div className="card-title text-start">
+          <div className="card-title mb-0 text-start">
             <h5 className="mb-1">Project Progress</h5>
             <p className="card-subtitle">Progress Overview by Project</p>
           </div>
 
-          {/* Right: Checkbox and Project Name */}
+          {/* <div className="btn-group">
-          <div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
+            <button
-            <div className="form-check form-switch mb-1 d-flex align-items-center">
+              className="btn btn-outline-primary btn-sm dropdown-toggle"
-              <input
+              type="button"
-                className="form-check-input"
+              data-bs-toggle="dropdown"
-                type="checkbox"
+              aria-expanded="false"
-                role="switch"
+            >
-                id="showAllEmployees"
+              {selectedProjectId === "all"
-                checked={showAllEmployees}
+                ? "All Projects"
-                onChange={(e) => setShowAllEmployees(e.target.checked)}
+                : projects?.find((p) => p.id === selectedProjectId)?.name || "Select Project"}
-              />
+            </button>
-              <label
+
-                className="form-check-label ms-2"
+            <ul className="dropdown-menu">
-                htmlFor="showAllEmployees"
+              <li>
-              >
+                <button className="dropdown-item" onClick={() => setSelectedProjectId("all")}>
-                All Projects
+                  All Projects
-              </label>
+                </button>
-            </div>
+              </li>
-            {!showAllEmployees && selectedProjectName && (
+              {projects?.map((project) => (
-              <p className="text-muted mb-0 small">
+                <li key={project.id}>
-                <span className="card-subtitle">{selectedProjectName}</span>
+                  <button
-              </p>
+                    className="dropdown-item"
-            )}
+                    onClick={() => setSelectedProjectId(project.id)}
-          </div>
+                  >
+                    {project.name}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div> */}
         </div>
 
         {/* Row 2: Time Range Buttons */}
-        <div className="d-flex flex-wrap mt-2">
+        <div className="d-flex flex-wrap  mt-2">
           {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
             <button
               key={key}
               className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
-                range === key
+                range === key ? " border-bottom border-primary text-primary" : "text-muted"
-                  ? "border-bottom border-primary text-primary"
-                  : "text-muted"
               }`}
               style={{ cursor: "pointer", transition: "all 0.2s ease" }}
               onClick={() => setRange(key)}
@@ -134,8 +114,7 @@ const ProjectProgressChart = () => {
           ))}
         </div>
       </div>
-
+      <div className="card-body ">
-      <div className="card-body">
         <LineChart
           seriesData={lineChartSeries}
           categories={lineChartCategories}

src/components/Employee/ManageEmployee.jsx

@@ -10,11 +10,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
 import { useEmployeeProfile } from "../../hooks/useEmployees";
-import {
+import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager";
-  cacheData,
-  clearCacheKey,
-  getCachedData,
-} from "../../slices/apiDataManager";
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
@@ -181,6 +177,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
         clearCacheKey("allEmployeeList");
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
+        
 
         setLoading(false);
         reset();
@@ -241,7 +238,10 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                 {employee ? "Update Employee" : "Create Employee"}
               </h6>
 
-              <span className="cursor-pointer fs-6" onClick={() => onClosed()}>
+              <span
+                className="cursor-pointer fs-6"
+                onClick={() => onClosed()}
+              >
                 <i className="bx bx-x"></i>
               </span>
             </div>
@@ -509,13 +509,11 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         <option disabled value="">
                           Select Role
                         </option>
-                        {[...job_role]
+                        {job_role?.map((item) => (
-                          .sort((a, b) => a?.name?.localeCompare(b.name))
+                          <option value={item?.id} key={item.id}>
-                          .map((item) => (
+                            {item?.name}{" "}
-                            <option value={item?.id} key={item.id}>
+                          </option>
-                              {item?.name}{" "}
+                        ))}
-                            </option>
-                          ))}
                       </select>
                     </div>
                     {errors.jobRoleId && (

src/components/Layout/Header.jsx

@@ -177,32 +177,17 @@ const Header = () => {
                   </button>
 
                   {projectNames?.length > 1 && (
-                    <ul
+                    <ul className="dropdown-menu">
-                      className="dropdown-menu"
+                      {projectNames?.map((project) => (
-                      style={{ overflow: "auto", maxHeight: "300px" }}
+                        <li key={project?.id}>
-                    >
+                          <button
-                      {[...projectNames]
+                            className="dropdown-item"
-                        .sort((a, b) => a.name.localeCompare(b.name))
+                            onClick={() => dispatch(setProjectId(project?.id))}
-                        .map((project) => (
+                          >
-                          <li key={project?.id}>
+                            {project?.name}
-                            <button
+                          </button>
-                              className="dropdown-item"
+                        </li>
-                              onClick={() =>
+                      ))}
-                                dispatch(setProjectId(project?.id))
-                              }
-                            >
-                              {project?.name}{" "}
-                              {project?.shortName ? (
-                                <span className="text-primary fw-semibold">
-                                  {" "}
-                                  ({project?.shortName})
-                                </span>
-                              ) : (
-                                ""
-                              )}
-                            </button>
-                          </li>
-                        ))}
                     </ul>
                   )}
                 </div>
@@ -215,7 +200,7 @@ const Header = () => {
           <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
             <a
               className="nav-link dropdown-toggle hide-arrow"
-
+              href="#;"
               data-bs-toggle="dropdown"
               data-bs-auto-close="true"
               aria-expanded="false"
@@ -324,7 +309,7 @@ const Header = () => {
             </div>
           </li>
 
-          {/* <li className="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
+          <li className="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
             <a
               className="nav-link dropdown-toggle hide-arrow cursor-pointer"
               data-bs-toggle="dropdown"
@@ -618,7 +603,20 @@ const Header = () => {
                     </div>
                   </li>
                 </ul>
-  
+                {/* <div className="ps__rail-x" style="left: 0px; bottom: 0px;">
+                  <div
+                    className="ps__thumb-x"
+                    tabindex="0"
+                    style="left: 0px; width: 0px;"
+                  ></div>
+                </div>
+                <div className="ps__rail-y" style="top: 0px; right: 0px;">
+                  <div
+                    className="ps__thumb-y"
+                    tabindex="0"
+                    style="top: 0px; height: 0px;"
+                  ></div>
+                </div> */}
               </li>
               <li className="border-top">
                 <div className="d-grid p-4">
@@ -630,7 +628,7 @@ const Header = () => {
                 </div>
               </li>
             </ul>
-          </li> */}
+          </li>
           <li className="nav-item navbar-dropdown dropdown-user dropdown">
             <a
               aria-label="dropdown profile avatar"
@@ -680,7 +678,7 @@ const Header = () => {
                   <span className="align-middle">My Profile</span>
                 </a>
               </li>
-              <li onClick={handleProfilePage}>
+              <li>
                 <a
                   aria-label="go to setting "
                   className="dropdown-item cusor-pointer"
@@ -689,7 +687,7 @@ const Header = () => {
                   <span className="align-middle">Settings</span>
                 </a>
               </li>
-              {/* <li>
+              <li>
                 <a
                   aria-label="go to billing "
                   className="dropdown-item cusor-pointer"
@@ -704,7 +702,7 @@ const Header = () => {
                     </span>
                   </span>
                 </a>
-              </li> */}
+              </li>
               <li onClick={openChangePassword}>
                 {" "}
                 {/* Use the function from the context */}

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -273,7 +273,7 @@ const EditActivityModal = ({
                     activities
                       .slice()
                       .sort((a, b) =>
-                        (a.activityName || "")?.localeCompare(
+                        (a.activityName || "").localeCompare(
                           b.activityName || ""
                         )
                       )
@@ -312,7 +312,7 @@ const EditActivityModal = ({
                     categories
                       .slice()
                       .sort((a, b) =>
-                        (a.name || "")?.localeCompare(
+                        (a.name || "").localeCompare(
                           b.name || ""
                         )
                       )

src/components/Project/Infrastructure/FloorModel.jsx

@@ -140,7 +140,7 @@ const FloorModel = ({
                     buildings
                       .filter((building) => building?.name)
                       .sort((a, b) =>
-                        (a.name || "")?.localeCompare(b.name || "")
+                        (a.name || "").localeCompare(b.name || "")
                       )
                       .map((building) => (
                         <option key={building.id} value={building.id}>
@@ -172,7 +172,7 @@ const FloorModel = ({
                         [...selectedBuilding.floors]
                           .filter((floor) => floor?.floorName)
                           .sort((a, b) =>
-                            (a.floorName || "")?.localeCompare(
+                            (a.floorName || "").localeCompare(
                               b.floorName || ""
                             )
                           )

src/components/Project/Infrastructure/TaskModel.jsx

@@ -159,7 +159,7 @@ const TaskModel = ({
       const newCategories = categories?.slice()?.sort((a, b) => {
         const nameA = a?.name || "";
         const nameB = b?.name || "";
-        return nameA?.localeCompare(nameB);
+        return nameA.localeCompare(nameB);
       });
       setCategoryData(newCategories);
       setSelectedCategory(newCategories[0])
@@ -230,7 +230,7 @@ const TaskModel = ({
                         (floor) =>
                           floor?.floorName && Array.isArray(floor.workAreas)
                       )
-                      ?.sort((a, b) => a.floorName?.localeCompare(b.floorName))
+                      ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
                       ?.map((floor) => (
                         <option key={floor.id} value={floor.id}>
                           {floor.floorName} - ({floor.workAreas.length} Work
@@ -263,7 +263,7 @@ const TaskModel = ({
                     <option value="0">Select Work Area</option>
                     {selectedFloor.workAreas
                       ?.filter((workArea) => workArea?.areaName)
-                      ?.sort((a, b) => a.areaName?.localeCompare(b.areaName))
+                      ?.sort((a, b) => a.areaName.localeCompare(b.areaName))
                       ?.map((workArea) => (
                         <option key={workArea.id} value={workArea.id}>
                           {workArea.areaName}
@@ -299,7 +299,7 @@ const TaskModel = ({
                         ?.sort((a, b) => {
                           const nameA = a?.activityName || "";
                           const nameB = b?.activityName || "";
-                          return nameA?.localeCompare(nameB);
+                          return nameA.localeCompare(nameB);
                         })
                         ?.map((activity) => (
                           <option key={activity.id} value={activity.id}>

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -197,7 +197,7 @@ const WorkAreaModel = ({
                       ?.sort((a, b) => {
                         const nameA = a.floorName || "";
                         const nameB = b.floorName || "";
-                        return nameA?.localeCompare(nameB);
+                        return nameA.localeCompare(nameB);
                       })
                       ?.map((floor) => (
                         <option key={floor.id} value={floor.id}>
@@ -231,7 +231,7 @@ const WorkAreaModel = ({
                         ?.sort((a, b) => {
                           const nameA = a.areaName || "";
                           const nameB = b.areaName || "";
-                          return nameA?.localeCompare(nameB);
+                          return nameA.localeCompare(nameB);
                         })
                         ?.map((workArea) => (
                           <option key={workArea.id} value={workArea.id}>

src/components/common/ImagePreview.jsx

@@ -1,66 +0,0 @@
-import React, { useState } from "react";
-import "./ImagePreviewstyle.css";
-import GlobalModel from "./GlobalModel";
-
-const ImagePreview = ({ images = [], IsReported = false }) => {
-  const [selectedImage, setSelectedImage] = useState(null);
-
-  const handleOpen = (imgSrc) => {
-    setSelectedImage(imgSrc);
-  };
-
-  const handleClose = () => {
-    setSelectedImage(null);
-  };
-
-  return (
-    <>
-      {IsReported ? (
-        <div className="d-flex flex-wrap gap-2">
-          {images.map((img, index) => (
-            <div
-              key={index}
-              className="img-container position-relative"
-              onClick={() => handleOpen(img)}
-            >
-              <img src={img} alt={`thumb-${index}`} className="img-thumbnail" />
-
-              <div className="eye-overlay d-flex justify-content-center align-items-center">
-                <i className="fa-solid fa-eye fs-6"></i>
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div className="d-flex flex-wrap gap-2">
-          {images.map((img, index) => (
-            <div key={index} className="" onClick={() => handleOpen(img)}>
-              {/* <img src={img} alt={`thumb-${ index }`} className="img-thumbnail" /> */}
-              <i className="fa-regular fa-image fs-3 cursor-pointer"></i>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {selectedImage && (
-        <GlobalModel
-          isOpen={selectedImage}
-          size="md"
-          dialogClass="modal-dialog-centered"
-          closeModal={() => setSelectedImage(null)}
-        >
-          <div className="mt-3 img-preview" >
-            <img
-              src={selectedImage}
-              alt="Previe Image"
-              className="w-100"
-             
-            />
-          </div>
-        </GlobalModel>
-      )}
-    </>
-  );
-};
-
-export default ImagePreview;

src/components/common/ImagePreviewstyle.css

@@ -1,56 +0,0 @@
-.img-container {
-  width: 70px;          /* or whatever size you want */
-  height: 30px;
-  position: relative;    /* to contain the absolute overlay */
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.img-container img.img-thumbnail {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.eye-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0,0,0,0.4);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none; 
-  color: white;
-  font-size: 1.5rem;
-  user-select: none;
-}
-
-/* center icon */
-.eye-overlay i {
-  pointer-events: none;
-}
-
-/* fade in on hover */
-.img-container:hover .eye-overlay {
-  opacity: 1;
-  pointer-events: auto; /* enable pointer events on hover */
-}
-.iconImage{
- font-size: 30px;
-}
-
-.img-preview {
-  width: 100%;
-  text-align: center;
-}
-
-.img-preview img {
-  max-width: 100%;
-  max-height: 80vh;
-  object-fit: contain;
-  display: block;
-  margin: 0 auto;
-}

src/hooks/useAttendance.js

@@ -5,7 +5,7 @@ import AttendanceRepository from "../repositories/AttendanceRepository";
 export const useAttendace =(projectId)=>{
 
   const [attendance, setAttendance] = useState([]);
-  const[loading,setLoading] = useState(true)
+  const[loading,setLoading] = useState(false)
   const [error, setError] = useState(null); 
 
    const fetchData =  () => {
@@ -16,8 +16,7 @@ export const useAttendace =(projectId)=>{
          AttendanceRepository.getAttendance(projectId)
            .then((response) => {
              setAttendance(response.data);
-             cacheData( "Attendance", {data: response.data, projectId} )
+             cacheData("Attendance", { data: response.data, projectId })
-             setLoading(false)
            })
            .catch((error) => {
             setLoading(false)

src/hooks/useEmployees.js

@@ -143,8 +143,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
   const [error, setError] = useState(null);
 
   const fetchData = async (showInactive) => {
-    if ( projectId )
+    if (projectId) {
-    {
       const Employees_cache = getCachedData("employeeListByProject");
       if (!Employees_cache || Employees_cache.projectId !== projectId) {
         setLoading(true);
@@ -167,11 +166,18 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
         setEmployees(Employees_cache.data);
         setLoading(false);
       }
-    } else
+    } else {
-    {
       const cacheKey = showInactive
         ? "allInactiveEmployeeList"
         : "allEmployeeList";
+      const employeesCache = getCachedData(cacheKey);
+
+      if (employeesCache) {
+        setEmployees(employeesCache.data);
+        setLoading(false);
+      } else {
+        setLoading(true);
+        setError(null);
 
         try {
           const response = await EmployeeRepository.getAllEmployeeList(
@@ -184,7 +190,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
           setError("Failed to fetch data.");
           setLoading(false);
         }
-      
+      }
     }
   };
 

src/hooks/useProjects.js

@@ -19,7 +19,7 @@ export const useProjects = () => {
     const filterProjects = (projectsList) => {
       return projectsList
         .filter((proj) => projectIds.includes(String(proj.id)))
-        .sort((a, b) => a?.name?.localeCompare(b.name));
+        .sort((a, b) => a.name.localeCompare(b.name));
     };
 
     const projects_cache = getCachedData("projectslist");

src/pages/Activities/AttendancePage.jsx

@@ -9,7 +9,7 @@ import AttendanceLog from "../../components/Activities/AttendcesLogs";
 import Attendance from "../../components/Activities/Attendance";
 import AttendanceModel from "../../components/Activities/AttendanceModel";
 import showToast from "../../services/toastService";
-// import { useProjects } from "../../hooks/useProjects";
+import { useProjects } from "../../hooks/useProjects";
 import Regularization from "../../components/Activities/Regularization";
 import { useAttendace } from "../../hooks/useAttendance";
 import { useDispatch, useSelector } from "react-redux";
@@ -22,7 +22,7 @@ import eventBus from "../../services/eventBus";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
-  const [ShowPending, setShowPending] = useState(false);
+  const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
   const loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const { projects, loading: projectLoading } = useProjects();
@@ -122,11 +122,11 @@ const AttendancePage = () => {
     setAttendances(attendance);
   }, [attendance]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (selectedProject === 1 || selectedProject === undefined) {
+    if (selectedProject === 1 || selectedProject === undefined) {
-  //     dispatch(setProjectId(loginUser?.projects[0]));
+      dispatch(setProjectId(loginUser?.projects[0]));
-  //   }
+    }
-  // }, [selectedProject, loginUser?.projects]);
+  }, [selectedProject, loginUser?.projects]);
 
   // Filter attendance data based on the toggle
   // const filteredAttendance = showOnlyCheckout
@@ -134,8 +134,8 @@ const AttendancePage = () => {
   //     (att) => att?.checkOutTime !== null && att?.checkInTime !== null
   //   )
   //   : attendances;
-  const filteredAttendance = ShowPending
+  const filteredAttendance = showOnlyCheckout
-    ? attendances?.filter((att) => att?.checkInTime !== null && att?.checkOutTime === null)
+    ? attendances?.filter((att) => att?.checkOutTime === null)
     : attendances;
 
   useEffect(() => {
@@ -242,23 +242,21 @@ const AttendancePage = () => {
             </li>
           </ul>
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
-          
+            {projectLoading && <span>Loading..</span>}
+            {!projectLoading && !attendances && <span>Not Found</span>}
 
             {activeTab === "all" && (
               <>
-               
+                {!projectLoading && filteredAttendance?.length === 0 && (
+                  <p>No Employee assigned yet.</p>
+                )}
                 <div className="tab-pane fade show active py-0">
                   <Attendance
                     attendance={filteredAttendance}
                     handleModalData={handleModalData}
                     getRole={getRole}
-                    setshowOnlyCheckout={setShowPending}
-                    showOnlyCheckout={ShowPending}
                   />
                 </div>
-                 {!attLoading && filteredAttendance?.length === 0 && (
-                  <p> {ShowPending ? "No Pending Available" : "No Employee assigned yet."} </p>
-                )}
               </>
             )}
 
@@ -267,8 +265,7 @@ const AttendancePage = () => {
                 <AttendanceLog
                   handleModalData={handleModalData}
                   projectId={selectedProject}
-                  setshowOnlyCheckout={setShowPending}
+                  showOnlyCheckout={showOnlyCheckout}
-                  showOnlyCheckout={ShowPending}
                 />
               </div>
             )}
@@ -278,9 +275,6 @@ const AttendancePage = () => {
                 <Regularization handleRequest={handleSubmit} />
               </div>
             )}
-
-              {attLoading && <span>Loading..</span>}
-            {!attLoading && !attendances && <span>Not Found</span>}
           </div>
         </div>
       </div>

src/pages/Activities/DailyTask.jsx

@@ -10,7 +10,6 @@ import DateRangePicker from "../../components/common/DateRangePicker";
 import { useSearchParams } from "react-router-dom";
 import moment from "moment";
 import FilterIcon from "../../components/common/FilterIcon"; // Import the FilterIcon component
-import GlobalModel from "../../components/common/GlobalModel";
 
 const DailyTask = () => {
   const [searchParams] = useSearchParams();
@@ -171,14 +170,19 @@ const DailyTask = () => {
        
       </div>
 
-      {isModalOpenComment && (
+      <div
-        <GlobalModel isOpen={isModalOpenComment} size="lg" closeModal={()=>setIsModalOpenComment(false)}>
+        className={`modal fade ${isModalOpenComment ? "show d-block" : ""}`}
-           <ReportTaskComments
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: isModalOpenComment ? "block" : "none" }}
+        aria-hidden={!isModalOpenComment}
+      >
+        <ReportTaskComments
           commentsData={comments}
           closeModal={closeCommentModal}
         />
-        </GlobalModel>
+   
-      )}
+      </div>
 
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb

src/pages/Directory/Directory.jsx

@@ -181,7 +181,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         (c.bucketIds || []).some((id) => selectedBucketIds.includes(id));
 
       return matchesSearch && matchesCategory && matchesBucket;
-    }).sort((a, b) => a?.name?.localeCompare(b.name));
+    }).sort((a, b) => a.name.localeCompare(b.name));
   }, [
     ContactList,
     searchText,

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -42,7 +42,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
-    return nameA?.localeCompare(nameB);
+    return nameA.localeCompare(nameB);
   };
 
   const group1 = data

src/pages/employee/EmployeeList.jsx

@@ -9,7 +9,7 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { useProjects } from "../../hooks/useProjects";
 import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
-import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
+import { MANAGE_EMPLOYEES } from "../../utils/constants";
 import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import SuspendEmp from "../../components/Employee/SuspendEmp";
@@ -29,9 +29,10 @@ const EmployeeList = () => {
   const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
   const { projects, loading: projectLoading } = useProjects();
   const [showInactive, setShowInactive] = useState(false);
-  const [showAllEmployees, setShowAllEmployees] = useState(false); 
+  const [showAllEmployees, setShowAllEmployees] = useState(false); // New state for "All Employee"
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
 
+  // Modify the hook to conditionally pass selectedProject or null based on showAllEmployees
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
   const [projectsList, setProjectsList] = useState(projects || []);
@@ -39,7 +40,7 @@ const EmployeeList = () => {
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
+  const [itemsPerPage] = useState(15);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
@@ -60,16 +61,7 @@ const EmployeeList = () => {
 
     const results = employeeList.filter((item) => {
       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-      const email = item.email ? item.email.toLowerCase() : "";
+      return fullName.includes(value);
-      const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
-      const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; // Get jobRole and convert to lowercase
-
-      return (
-        fullName.includes(value) ||
-        email.includes(value) ||
-        phoneNumber.includes(value) ||
-        jobRole.includes(value) // Include jobRole in the search
-      );
     });
 
     setFilteredData(results);
@@ -85,7 +77,7 @@ const EmployeeList = () => {
           }`.toLowerCase();
         const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
           }`.toLowerCase();
-        return nameA?.localeCompare(nameB);
+        return nameA.localeCompare(nameB);
       });
 
       setEmployeeList(sorted);
@@ -188,11 +180,12 @@ const EmployeeList = () => {
     recallEmployeeData(e.target.checked);
   };
 
+  // New handler for "All Employee" toggle
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
-    setShowInactive(false)
+    setShowAllEmployees(isChecked);
-    setShowAllEmployees( isChecked );
+    // If "All Employees" is checked, we don't want to filter by project,
-
+    // so we pass null for selected project. Otherwise, use the currently selected project.
     recallEmployeeData(showInactive, isChecked ? null : selectedProject);
   };
 
@@ -210,6 +203,7 @@ const EmployeeList = () => {
   const handleProjectSelection = (e) => {
     const newProjectId = e.target.value;
     setSelectedProject(newProjectId);
+    // If a specific project is selected, uncheck "All Employees"
     if (newProjectId) {
       setShowAllEmployees(false);
     }
@@ -285,108 +279,127 @@ const EmployeeList = () => {
                 className="dataTables_wrapper dt-bootstrap5 no-footer"
                 style={{ width: "98%" }}
               >
-                <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
+                <div className="row  mb-2  ">
-                  {/* Switches: All Employees + Inactive */}
+                  <div className="col-md-3 col-sm-6 ">
-                  <div className="d-flex flex-wrap align-items-center gap-3">
+                    <div className="form-check text-start">
-                    {/* All Employees Switch */}
-                    <div className="form-check form-switch text-start">
                       <input
                         type="checkbox"
                         className="form-check-input"
-                        role="switch"
                         id="allEmployeesCheckbox"
                         checked={showAllEmployees}
                         onChange={handleAllEmployeesToggle}
                       />
-                      <label className="form-check-label ms-0" htmlFor="allEmployeesCheckbox">
+                      <label className="form-check-label" htmlFor="allEmployeesCheckbox">
                         All Employees
                       </label>
                     </div>
-
+                  </div>
-                    {/* Show Inactive Employees Switch */}
+                  <div className="col-md-9 col-sm-6">
-                    {showAllEmployees && (
+                    <div className="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-sm-end justify-content-between gap-2 flex-md-row flex-sm-column mb-3 mb-md-0 mt-1 mt-md-0 gap-md-4">
-                      <div className="form-check form-switch text-start">
+                      <div
-                        <input
+                        id="DataTables_Table_0_filter"
-                          type="checkbox"
+                        className="dataTables_filter"
-                          className="form-check-input"
+                      >
-                          role="switch"
+                        <label>
-                          id="inactiveEmployeesCheckbox"
+                          <input
-                          checked={showInactive}
+                            type="search"
-                          onChange={handleToggle}
+                            value={searchText}
-                        />
+                            onChange={handleSearch}
-                        <label className="form-check-label ms-0" htmlFor="inactiveEmployeesCheckbox">
+                            className="form-control form-control-sm"
-                          Show Inactive Employees
+                            placeholder="Search User"
+                            aria-controls="DataTables_Table_0"
+                          ></input>
                         </label>
                       </div>
-                    )}
+                      <div className="dt-buttons btn-group flex-wrap">
-
+                        {" "}
-                  </div>
+                        <div className=" d-flex justify-contend-end">
-
+                          <button
-                  {/* Right side: Search + Export + Add Employee */}
+                            aria-label="Click me"
-                  <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
+                            className="btn btn-sm  btn-label-secondary me-4  dropdown-toggle "
-                    {/* Search */}
+                            type="button"
-                    <div className="dataTables_filter">
+                            data-bs-toggle="dropdown"
-                      <label className="mb-0">
+                            aria-expanded="false"
-                        <input
+                          >
-                          type="search"
+                            <i className="bx bx-export me-2 bx-sm"></i>Export
-                          value={searchText}
+                          </button>
-                          onChange={handleSearch}
+                          <ul className="dropdown-menu">
-                          className="form-control form-control-sm"
+                            <li>
-                          placeholder="Search User"
+                              <a
-                          aria-controls="DataTables_Table_0"
+                                className="dropdown-item"
-                        />
+                                href="#"
-                      </label>
+                                onClick={() => handleExport("print")}
+                              >
+                                <i className="bx bx-printer me-1"></i> Print
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                className="dropdown-item"
+                                href="#"
+                                onClick={() => handleExport("csv")}
+                              >
+                                <i className="bx bx-file me-1"></i> CSV
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                className="dropdown-item"
+                                href="#"
+                                onClick={() => handleExport("excel")}
+                              >
+                                <i className="bx bxs-file-export me-1"></i>{" "}
+                                Excel
+                              </a>
+                            </li>
+                            <li>
+                              <a
+                                className="dropdown-item"
+                                href="#"
+                                onClick={() => handleExport("pdf")}
+                              >
+                                <i className="bx bxs-file-pdf me-1"></i> PDF
+                              </a>
+                            </li>
+                          </ul>
+                          <button
+                            className={`btn btn-sm add-new btn-primary ${!Manage_Employee && "d-none"
+                              }`}
+                            tabIndex="0"
+                            type="button"
+                            onClick={() => {
+                              handleEmployeeModel(null);
+                            }}
+                          >
+                            <span>
+                              <i className="bx bx-plus-circle me-2"></i>
+                              <span className="d-none d-md-inline-block">
+                                Add New Employee
+                              </span>
+                            </span>
+                          </button>{" "}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="d-flex justify-content-end mb-2">
+                  {/* Show Inactive Employees Checkbox */}
+                  <div className={`${showAllEmployees ? '' : selectedProject ? 'd-none' : ''}`}>
+                    <div className="form-check">
+                      <input
+                        type="checkbox"
+                        className="form-check-input"
+                        id="inactiveEmployeesCheckbox"
+                        checked={showInactive}
+                        onChange={handleToggle}
+                      />
+                      <label className="form-check-label" htmlFor="inactiveEmployeesCheckbox">
+                        Show Inactive Employees
+                      </label>
                     </div>
-
-                    {/* Export Dropdown */}
-                    <div className="dropdown">
-                      <button
-                        aria-label="Click me"
-                        className="btn btn-sm btn-label-secondary dropdown-toggle"
-                        type="button"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                      >
-                        <i className="bx bx-export me-2 bx-sm"></i>Export
-                      </button>
-                      <ul className="dropdown-menu">
-                        <li>
-                          <a className="dropdown-item" href="#" onClick={() => handleExport("print")}>
-                            <i className="bx bx-printer me-1"></i> Print
-                          </a>
-                        </li>
-                        <li>
-                          <a className="dropdown-item" href="#" onClick={() => handleExport("csv")}>
-                            <i className="bx bx-file me-1"></i> CSV
-                          </a>
-                        </li>
-                        <li>
-                          <a className="dropdown-item" href="#" onClick={() => handleExport("excel")}>
-                            <i className="bx bxs-file-export me-1"></i> Excel
-                          </a>
-                        </li>
-                        <li>
-                          <a className="dropdown-item" href="#" onClick={() => handleExport("pdf")}>
-                            <i className="bx bxs-file-pdf me-1"></i> PDF
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-
-                    {/* Add Employee */}
-                    {Manage_Employee && (
-                      <button
-                        className="btn btn-sm btn-primary"
-                        type="button"
-                        onClick={() => handleEmployeeModel(null)}
-                      >
-                        <i className="bx bx-plus-circle me-2"></i>
-                        <span className="d-none d-md-inline-block">Add New Employee</span>
-                      </button>
-                    )}
                   </div>
                 </div>
-
 
                 <table
                   className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
@@ -559,7 +572,7 @@ const EmployeeList = () => {
                           </td>
 
                           <td className=" d-none  d-md-table-cell">
-                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
+                            {moment(item.joiningDate).format("DD-MMM-YYYY")}
                           </td>
                           <td>
                             {showInactive ? (

src/pages/master/MasterTable.jsx

@@ -34,7 +34,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
     if (!sortKey) return 0;
     const aValue = a[sortKey] || "";
     const bValue = b[sortKey] || "";
-    return aValue?.localeCompare(bValue);
+    return aValue.localeCompare(bValue);
   });
 
   // Pagination logic

src/pages/project/ProjectList.jsx

@@ -52,7 +52,7 @@ const ProjectList = () => {
         .filter((statusId) => grouped[statusId])
         .flatMap((statusId) =>
           grouped[statusId].sort((a, b) =>
-            a.name.toLowerCase()?.localeCompare(b.name.toLowerCase())
+            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
           )
         );
       setProjectList(sortedGrouped);