admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-06 23:13:55 +05:30
parent 9802746267
commit d48c6fd7e3
1 changed files with 121 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/components/Activities/AttendLogs.jsx
View File

@ -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 AttendLogs = ({ Id }) => {
const { logs, loading } = useEmployeeAttendacesLog(Id);
const {logs, loading} = useEmployeeAttendacesLog( Id ) const navigate = useNavigate();
const whichActivityPerform = ( actvity ) => const whichActivityPerform = (actvity) => {
{
switch (actvity) { switch (actvity) {
case 1: 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; 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; 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; 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; 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: default:
break; 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 ( return (
<div className="table-responsive"> <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> </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 {logs
.slice() .slice()
.sort((a, b) => b.id - a.id) .sort((a, b) => b.id - a.id)
.map((log, index) => ( .map((log, index) => (
<tr key={index}> <tr key={index}>
<td>{convertShortTime( log.activityTime )}</td>
<td>{whichActivityPerform(log.activity)}</td>
<td>{log.activityTime.slice(0, 10)}</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}> <td className="text-wrap" colSpan={3}>
{log?.comment} {log?.comment}
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</> </>
) )}
}
</div> </div>
); );
}; };
export default AttendLogs; export default AttendLogs;