From d48c6fd7e36c8f291cc30de7cbae373c5ec86908 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 6 May 2025 23:13:55 +0530
Subject: [PATCH] added activity icons, location coulms. if click on location
 it move on google map

---
 src/components/Activities/AttendLogs.jsx | 167 ++++++++++++++++-------
 1 file changed, 121 insertions(+), 46 deletions(-)

diff --git a/src/components/Activities/AttendLogs.jsx b/src/components/Activities/AttendLogs.jsx
index 85424943..ec64f5d1 100644
--- a/src/components/Activities/AttendLogs.jsx
+++ b/src/components/Activities/AttendLogs.jsx
@@ -1,80 +1,155 @@
-import React, { useEffect, useState } from 'react'
-import { useEmployeeAttendacesLog } from '../../hooks/useAttendance';
-import { convertShortTime } from '../../utils/dateUtils';
-
+import React, { useEffect, useState } from "react";
+import { useEmployeeAttendacesLog } from "../../hooks/useAttendance";
+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:
-          return "Requested"
+      case 2:
+        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:
-          return "Deleted"
+      case 3:
+        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:
-          return "OUT"
+      case 4:
+        return (
+          <i
+            className="bx bx-left-arrow-circle text-danger "
+            data-bs-toggle="tooltip"
+            data-bs-offset="0,8"
+            data-bs-placement="top"
+            data-bs-custom-class="tooltip"
+            title="Check-Out"
+          ></i>
+        );
+
         break;
-        case 5:
-          return "Regularized"
-          break;
-    
+      case 5:
+        return (
+          <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>}
-      { logs && logs.length > 0 && (
-        <>
-        <div className="d-flex justify-content-start align-items-center gap-2 my-1">
-        <div className="align-item-center">
-          <p className="p-0 m-0">Date : {logs[0].activityTime.slice(0,10)} </p>
-        </div>
+      <div className="text-start">
+        {logs && !loading && (
+          <p>
+            Attendance for{" "}
+            {logs[0]?.employee?.firstName + " " + logs[0]?.employee?.lastName}{" "}
+            on {logs[0]?.activityTime.slice(0, 10)}{" "}
+          </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">
-        <thead>
-          <tr>
-                <th style={{width: '15%'}}>Time</th>
-                <th style={{ width: '20%' }}>Activity</th>
-            <th style={{ width: '20%' }}>Date</th>
-            <th style={{ width: '45%' }}>Description</th>
-          </tr>
-        </thead>
-        <tbody>
+          <table className="table table-sm mb-0">
+            <thead>
+              <tr>
+                <th style={{ width: "20%" }}>Date</th>
+                <th style={{ width: "15%" }}>Time</th>
+                <th style={{ width: "20%" }}>Activity</th>
+                <th style={{ width: "20%" }}>Location</th>
+                <th style={{ width: "45%" }}>Description</th>
+              </tr>
+            </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;
-
-