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 ( + + ); break; - case 2: - return "Requested" + case 2: + return ( + + ); break; - case 3: - return "Deleted" + case 3: + return ( + + ); break; - case 4: - return "OUT" + case 4: + return ( + + ); + break; - case 5: - return "Regularized" - break; - + case 5: + return ( + + ); + 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 (
- {loading &&

Loading..

} - { logs && logs.length > 0 && ( - <> -
-
-

Date : {logs[0].activityTime.slice(0,10)}

-
+
+ {logs && !loading && ( +

+ Attendance for{" "} + {logs[0]?.employee?.firstName + " " + logs[0]?.employee?.lastName}{" "} + on {logs[0]?.activityTime.slice(0, 10)}{" "} +

+ )}
+ {loading &&

Loading..

} + {logs && logs.length > 0 && ( + <> +
+
+
- - - - - - - - - - +
TimeActivityDateDescription
+ + + + + + + + + + {logs .slice() .sort((a, b) => b.id - a.id) .map((log, index) => ( - - + + + ))} -
DateTimeActivityLocationDescription
{convertShortTime( log.activityTime )}{whichActivityPerform(log.activity)} {log.activityTime.slice(0, 10)}{convertShortTime(log.activityTime)}{whichActivityPerform(log.activity)} + {log?.latitude != 0 ? ( + + LocationLink(log?.latitude, log?.longitude) + } + > + ) : ( + "--" + )} + {log?.comment}
+ - ) - } - + )}
); }; export default AttendLogs; - - diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index fd6e0779..a62b4e7c 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/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 )} + />
- {data && data.length > 0 ? ( + {(data && data.length > 0 ) && ( @@ -107,14 +109,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => { {loading && } - {error && } - {data && data.length === 0 && ( - - - - )} - - {currentItems?.map((attendance, index) => ( + {currentItems?.map( ( attendance, index ) => ( - + - ))} + ) )}
Loading...{error}
No Data Found
@@ -133,12 +128,12 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
{" "} - {moment(attendance.checkInTime).format("DD-MMM-YYYY")} + {moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )} {convertShortTime(attendance.checkInTime)}{convertShortTime( attendance.checkInTime )} {attendance.checkOutTime - ? convertShortTime(attendance.checkOutTime) + ? convertShortTime( attendance.checkOutTime ) : "--"} @@ -150,12 +145,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => { />
- ) : ( + ) } + {(!loading && data.length === 0) && No employee logs - )} + } + {error && {error}}
{!loading && ( - )} + )} ); }; diff --git a/src/components/Employee/EmployeeNav.jsx b/src/components/Employee/EmployeeNav.jsx index 9e239682..f9c12961 100644 --- a/src/components/Employee/EmployeeNav.jsx +++ b/src/components/Employee/EmployeeNav.jsx @@ -5,6 +5,21 @@ const EmployeeNav = ({ onPillClick, activePill }) => {