added activity icons, location coulms. if click on location it move on google map

Reviewed-on: #67

src/components/Activities/AttendLogs.jsx

@@ -1,80 +1,155 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
-import { useEmployeeAttendacesLog } from '../../hooks/useAttendance';
+import { useEmployeeAttendacesLog } from "../../hooks/useAttendance";
-import { convertShortTime } from '../../utils/dateUtils';
+import { convertShortTime } from "../../utils/dateUtils";
-
+import { useNavigate } from "react-router-dom";
 
 const AttendLogs = ({ Id }) => {
-  
+  const { logs, loading } = useEmployeeAttendacesLog(Id);
-  const {logs, loading} = useEmployeeAttendacesLog( Id )
+  const navigate = useNavigate();
 
-  const whichActivityPerform = ( actvity ) =>
+  const whichActivityPerform = (actvity) => {
-  {
     switch (actvity) {
       case 1:
-        return "IN"
+        return (
+          <i
+            className="bx bx-right-arrow-circle text-success"
+            data-bs-toggle="tooltip"
+            data-bs-offset="0,8"
+            data-bs-placement="top"
+            data-bs-custom-class="tooltip"
+            title="Check-In"
+          ></i>
+        );
         break;
-        case 2:
+      case 2:
-          return "Requested"
+        return (
+          <i
+            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"
+          ></i>
+        );
         break;
-        case 3:
+      case 3:
-          return "Deleted"
+        return (
+          <i
+            className="bx bx-x-circle text-danger"
+            data-bs-toggle="tooltip"
+            data-bs-offset="0,8"
+            data-bs-placement="top"
+            data-bs-custom-class="tooltip"
+            title="Request Rejected"
+          ></i>
+        );
         break;
-        case 4:
+      case 4:
-          return "OUT"
+        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:
+      case 5:
-          return "Regularized"
+        return (
-          break;
+          <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>
+        );
+        break;
+
       default:
         break;
     }
-  }
+  };
-
+  const LocationLink = (lat, lng) => {
+    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"]')
+    );
+    tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
+  }, []);
   return (
     <div className="table-responsive">
-    {loading && <p>Loading..</p>}
+      <div className="text-start">
-      { logs && logs.length > 0 && (
+        {logs && !loading && (
-        <>
+          <p>
-        <div className="d-flex justify-content-start align-items-center gap-2 my-1">
+            Attendance for{" "}
-        <div className="align-item-center">
+            {logs[0]?.employee?.firstName + " " + logs[0]?.employee?.lastName}{" "}
-          <p className="p-0 m-0">Date : {logs[0].activityTime.slice(0,10)} </p>
+            on {logs[0]?.activityTime.slice(0, 10)}{" "}
-        </div>
+          </p>
+        )}
       </div>
+      {loading && <p>Loading..</p>}
+      {logs && logs.length > 0 && (
+        <>
+          <div className="d-flex justify-content-start align-items-center gap-2 my-1">
+            <div className="align-item-center"></div>
+          </div>
 
-      <table className="table table-sm mb-0">
+          <table className="table table-sm mb-0">
-        <thead>
+            <thead>
-          <tr>
+              <tr>
-                <th style={{width: '15%'}}>Time</th>
+                <th style={{ width: "20%" }}>Date</th>
-                <th style={{ width: '20%' }}>Activity</th>
+                <th style={{ width: "15%" }}>Time</th>
-            <th style={{ width: '20%' }}>Date</th>
+                <th style={{ width: "20%" }}>Activity</th>
-            <th style={{ width: '45%' }}>Description</th>
+                <th style={{ width: "20%" }}>Location</th>
-          </tr>
+                <th style={{ width: "45%" }}>Description</th>
-        </thead>
+              </tr>
-        <tbody>
+            </thead>
+            <tbody>
               {logs
                 .slice()
                 .sort((a, b) => b.id - a.id)
                 .map((log, index) => (
                   <tr key={index}>
-                    <td>{convertShortTime( log.activityTime )}</td>
-                    <td>{whichActivityPerform(log.activity)}</td>
                     <td>{log.activityTime.slice(0, 10)}</td>
+                    <td>{convertShortTime(log.activityTime)}</td>
+                    <td>{whichActivityPerform(log.activity)}</td>
+                    <td>
+                      {log?.latitude != 0 ? (
+                        <i
+                          class="bx bx-location-plus text-warning  cursor-pointer"
+                          data-bs-toggle="tooltip"
+                          data-bs-offset="0,8"
+                          data-bs-placement="top"
+                          data-bs-custom-class="tooltip"
+                          title="Location"
+                          onClick={() =>
+                            LocationLink(log?.latitude, log?.longitude)
+                          }
+                        ></i>
+                      ) : (
+                        "--"
+                      )}
+                    </td>
                     <td className="text-wrap" colSpan={3}>
                       {log?.comment}
                     </td>
                   </tr>
                 ))}
             </tbody>
-      </table>
+          </table>
         </>
-      )
+      )}
-    }
-
     </div>
   );
 };
 
 export default AttendLogs;
-
-

src/components/Activities/AttendcesLogs.jsx

@@ -65,7 +65,8 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
         })
       );
     }
-  }, [dateRange, projectId, isRefreshing]);
+  }, [ dateRange, projectId, isRefreshing ] );
+  
   
   return (
     <>
@@ -82,12 +83,13 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
               loading ? "spin":"" 
             }`}
             title="Refresh"
-            onClick={()=>setIsRefreshing(!isRefreshing)}
+            onClick={() => setIsRefreshing( !isRefreshing )}
+            
           />
         </div>
       </div>
       <div className="table-responsive text-nowrap">
-        {data && data.length > 0 ? (
+        {(data && data.length > 0 ) && (
           <table className="table mb-0">
             <thead>
               <tr>
@@ -107,14 +109,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
             </thead>
             <tbody>
               {loading && <td colSpan={5}>Loading...</td>}
-              {error && <td colSpan={5}>{error}</td>}
+              {currentItems?.map( ( attendance, index ) => (
-              {data && data.length === 0 && (
-                <tr>
-                  <td colSpan={5}>No Data Found</td>
-                </tr>
-              )}
-
-              {currentItems?.map((attendance, index) => (
                 <tr key={index}>
                   <td colSpan={2}>
                     <div className="d-flex justify-content-start align-items-center">
@@ -133,12 +128,12 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
                   </td>
                   <td>
                     {" "}
-                    {moment(attendance.checkInTime).format("DD-MMM-YYYY")}
+                    {moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
                   </td>
-                  <td>{convertShortTime(attendance.checkInTime)}</td>
+                  <td>{convertShortTime( attendance.checkInTime )}</td>
                   <td>
                     {attendance.checkOutTime
-                      ? convertShortTime(attendance.checkOutTime)
+                      ? convertShortTime( attendance.checkOutTime )
                       : "--"}
                   </td>
                   <td className="text-center">
@@ -150,12 +145,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
                     />
                   </td>
                 </tr>
-              ))}
+              ) )}
             </tbody>
           </table>
-        ) : (
+        ) }
+        {(!loading && data.length === 0) &&
           <span>No employee logs</span>
-        )}
+        }
+       {error && <td colSpan={5}>{error}</td>}           
       </div>
       {!loading && (
               <nav aria-label="Page ">
@@ -201,7 +198,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
                   </li>
                 </ul>
               </nav>
-            )}
+      )}
     </>
   );
 };

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -141,7 +141,9 @@ const EditActivityModal = ({
             data: newProject,
           });
           resetForm();
-          dispatch(refreshData(true));
+          dispatch( refreshData( true ) );
+          showToast("Activity Updated Successfully","success")
+
           onClose();
         }
       })

src/hooks/useEmployees.js

@@ -16,7 +16,8 @@ export const useAllEmployees = () => {
         setLoading(true);
         const response = await EmployeeRepository.getAllEmployeeList();
         cacheData("AllEmployees", response.data);
-        setEmployeeList(response.data);
+        setEmployeeList( response.data );
+        setLoading(false);
       } else {
         setEmployeeList(EmployeeList_cached);
         setLoading(false);

src/pages/Activities/AttendancePage.jsx

@@ -93,12 +93,14 @@ const AttendancePage = () => {
   }, [modelConfig, isCreateModalOpen]);
   useEffect(() => {
     setAttendances(attendance);
-  }, [attendance]);
+  }, [ attendance ] );
-useEffect(()=>{
+  
-  if(selectedProject == 1){
+
-    dispatch(setProjectId(loginUser?.projects[0]))
+  useEffect(() => {
-  }
+    if (selectedProject === 1 || selectedProject === undefined ) {
-},[selectedProject,loginUser?.projects])
+      dispatch(setProjectId(loginUser?.projects[0]));
+    }
+  }, [selectedProject, loginUser?.projects]);
   return (
     <>
       {isCreateModalOpen && modelConfig && (
@@ -158,7 +160,6 @@ useEffect(()=>{
                   </select>
                 </label>
               )}
-            
             </div>
           </ul>
           <ul className="nav nav-tabs" role="tablist">
@@ -203,13 +204,18 @@ useEffect(()=>{
             {!projectLoading && !attendances && <span>Not Found</span>}
 
             {activeTab === "all" && (
-              <div className="tab-pane fade show active py-0">
+              <>
-                <Attendance
+                {!projectLoading && attendances.length === 0 && (
-                  attendance={attendances}
+                  <p>No Employee assigned yet.</p>
-                  handleModalData={handleModalData}
+                )}
-                  getRole={getRole}
+                <div className="tab-pane fade show active py-0">
-                />
+                  <Attendance
-              </div>
+                    attendance={attendances}
+                    handleModalData={handleModalData}
+                    getRole={getRole}
+                  />
+                </div>
+              </>
             )}
 
             {activeTab === "logs" && (

src/pages/Activities/DailyTask.jsx

@@ -32,9 +32,7 @@ const DailyTask = () => {
   // Sync projectId (either from URL or pick first accessible one)
   useEffect(() => {
     if (!project_lodaing && projects.length > 0 && !initialized) {
-      if (projectId) {
+     if (selectedProject === 1 || selectedProject === undefined) {
-        dispatch(setProjectId(projectId));
-      } else if (!selectedProject) {
         dispatch(setProjectId(projects[0].id));
       }
 
@@ -77,7 +75,6 @@ const DailyTask = () => {
     selectTask(task);
     openModal();
   };
-
   return (
     <>
       <div
@@ -160,21 +157,26 @@ const DailyTask = () => {
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
-                  {TaskLists?.length === 0 && !task_loading && (
-                    <tr>
-                      <td colSpan={7} className="text-center">
-                        No Task Found
-                      </td>
-                    </tr>
-                  )}
 
-                  {task_loading && (
+                {task_loading && (
                     <tr>
                       <td colSpan={7} className="text-center">
                         <p>Loading..</p>
                       </td>
                     </tr>
                   )}
+                  {project_lodaing &&  <tr>
+                      <td colSpan={7} className="text-center">
+                        Loading...
+                      </td>
+                    </tr>}
+                  {TaskLists?.length === 0 && !task_loading && !project_lodaing &&(
+                    <tr>
+                      <td colSpan={7} className="text-center">
+                        No Task Found
+                      </td>
+                    </tr>
+                  )}
 
                   {TaskLists.map((task, index) => {
                     return (

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -84,7 +84,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
         })
       );
     }
-  }, [dateRange, employee]);
+  }, [dateRange, employee,isRefreshing]);
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -132,14 +132,20 @@ const AttendancesEmployeeRecords = ({ employee }) => {
             <i
               className={`bx bx-refresh cursor-pointer fs-4 ${
                 loading ? "spin" : ""
-              }`}
+                }`}
+              data-toggle="tooltip" 
               title="Refresh"
               onClick={() => setIsRefreshing(!isRefreshing)}
             />
           </div>
         </div>
         <div className="table-responsive text-nowrap">
-          {data && data.length > 0 ? (
+        {(!loading && data.length === 0) &&
+             <span>No employee logs</span>
+          }
+          {error && <div className="text-center">{error }</div>}
+          {(loading && !data ) && <div className="text-center">Loading...</div>}
+          {(data && data.length > 0 ) && (
             <table className="table mb-0">
               <thead>
                 <tr>
@@ -159,15 +165,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                 </tr>
               </thead>
               <tbody>
-                {loading && <td colSpan={5}>Loading...</td>}
+                {currentItems?.map( ( attendance, index ) => (
-                {error && <td colSpan={5}>{error}</td>}
-                {data && data.length === 0 && (
-                  <tr>
-                    <td colSpan={5}>No Data Found</td>
-                  </tr>
-                )}
-
-                {currentItems?.map((attendance, index) => (
                   <tr key={index}>
                     <td colSpan={2}>
                       <div className="d-flex justify-content-start align-items-center">
@@ -186,12 +184,12 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                     </td>
                     <td>
                       {" "}
-                      {moment(attendance.checkInTime).format("DD-MMM-YYYY")}
+                      {moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
                     </td>
-                    <td>{convertShortTime(attendance.checkInTime)}</td>
+                    <td>{convertShortTime( attendance.checkInTime )}</td>
                     <td>
                       {attendance.checkOutTime
-                        ? convertShortTime(attendance.checkOutTime)
+                        ? convertShortTime( attendance.checkOutTime )
                         : "--"}
                     </td>
 
@@ -202,20 +200,18 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                         tabIndex="0"
                         aria-controls="DataTables_Table_0"
                         data-bs-toggle="modal"
-                        onClick={() => openModal(attendance.id)}
+                        onClick={() => openModal( attendance.id )}
                       >
                         View
                       </button>
                     </td>
                   </tr>
-                ))}
+                ) )}
               </tbody>
             </table>
-          ) : (
+          ) } 
-            <span>No employee logs</span>
-          )}
         </div>
-        {!loading && (
+        {(!loading && data.length  > 5) && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li

src/pages/master/MasterTable.jsx

@@ -143,7 +143,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
       )}
 
       {/* Pagination */}
-      {!loading && (
+      {!loading && safeData.length  > 20 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>