admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 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 { 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;