@ -6,6 +6,7 @@
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Attendance Dashboard< / title >
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "stylesheet" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" crossorigin = "anonymous" > < / script >
< style >
.spinner-container {
display: flex;
@ -75,11 +76,23 @@
< h4 > Zone Summary< / h4 >
< div class = "zone-summary-row" >
< div class = "zone-summary-card" >
< div class = "d-flex justify-content-between align-items-center mb-2" >
< h5 > Park< / h5 >
< button class = "btn btn-sm btn-primary"
onclick="downloadExcelFromTable(document.getElementById('zoneSummaryPark'), 'park_summary.xlsx')">
< i class = "bi bi-download" > < / i > Download Excel
< / button >
< / div >
< div id = "zoneSummaryPark" > < / div >
< / div >
< div class = "zone-summary-card" >
< div class = "d-flex justify-content-between align-items-center mb-2" >
< h5 > NULM< / h5 >
< button class = "btn btn-sm btn-primary"
onclick="downloadExcelFromTable(document.getElementById('zoneSummaryNulm'), 'nulm_summary.xlsx')">
< i class = "bi bi-download" > < / i > Download Excel
< / button >
< / div >
< div id = "zoneSummaryNulm" > < / div >
< / div >
< / div >
@ -155,7 +168,16 @@
if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
let html = '< div class = "row" > ';
data.forEach(item => {
html += `< div class = "col-md-3" > < div class = "card p-2 mb-2" > < strong > ${item.emp_type}< / strong > < div > ${item.totalCount}< / div > < / div > < / div > `;
const facialRegistered = item.facialRegistered || 0;
const facialNotRegistered = item.facialNotRegistered || 0;
html += `< div class = "col-md-3" > < div class = "card p-3 mb-2" >
< strong > ${item.emp_type}< / strong >
< div class = "mt-2" >
< div class = "small" > Total: < strong > ${item.totalCount}< / strong > < / div >
< div class = "small" > Facial Registered: < strong > ${facialRegistered}< / strong > < / div >
< div class = "small" > Facial Not Registered: < strong > ${facialNotRegistered}< / strong > < / div >
< / div >
< / div > < / div > `;
});
html += '< / div > ';
target.innerHTML = html;
@ -166,27 +188,53 @@
return '< div class = "spinner-container" > < div class = "spinner-border" role = "status" > < span class = "visually-hidden" > Loading...< / span > < / div > < / div > ';
}
function downloadExcelFromTable(tableElement, fileName) {
if (typeof XLSX === 'undefined') {
alert('Excel library is not loaded. Please refresh the page and try again.');
console.error('XLSX library failed to load from CDN');
return;
}
if (!tableElement) {
alert('Table not found');
return;
}
const table = tableElement.querySelector('table');
if (!table) {
alert('No table to download');
return;
}
const workbook = XLSX.utils.table_to_book(table);
XLSX.writeFile(workbook, fileName);
}
// Expose to global scope for onclick handlers
window.downloadExcelFromTable = downloadExcelFromTable;
function renderTable(target, data, empType) {
if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
if (data.length === 0) { target.innerHTML = '< div class = "alert alert-info" > No records< / div > '; return; }
const rows = data.slice().sort((a, b) => String(a.zone || '').localeCompare(String(b.zone || ''), undefined, { numeric: true }));
let html = '< table class = "table table-sm table-striped" > < thead > < tr > < th > Zone< / th > < th > Total< / th > < th > Present< / th > < th > OD< / th > < th > Leave< / th > < / tr > < / thead > < tbody > ';
let html = '< table class = "table table-sm table-striped" > < thead > < tr > < th > Zone< / th > < th class = "text-center" > Total< / th > < th class = "text-center" > Facial Registered< / th > < th class = "text-center" > Facial Not Registered< / th > < th class = "text-center" > Present< / th > < th class = "text-center" > OD< / th > < th class = "text-center" > Leave< / th > < / tr > < / thead > < tbody > ';
rows.forEach(r => {
const zone = r.zone;
const total = Number(r.TotalCount) || 0;
const facialRegistered = Number(r.facialRegistered) || 0;
const facialNotRegistered = Number(r.facialNotRegistered) || 0;
const present = Number(r.AttendanceMarked) || 0;
const od = Number(r.ODCount) || 0;
const leave = Number(r.LeaveCount) || 0;
html += `< tr > < td > ${zone || '-'}< / td > `;
html += `< td > ${total}< / td > `;
html += `< td > ` + (present > 0
html += `< td class = "text-center" > ${total}< / td > `;
html += `< td class = "text-center" > ${facialRegistered}< / td > `;
html += `< td class = "text-center" > ${facialNotRegistered}< / td > `;
html += `< td class = "text-center" > ` + (present > 0
? `< a href = "#" class = "zone-count" data-zone = "${zone}" data-emptype = "${empType}" data-category = "present" > ${present}< / a > `
: `< span class = "disabled-count" > ${present}< / span > `) + `< / td > `;
html += `< td > ` + (od > 0
html += `< td class = "text-center" > ` + (od > 0
? `< a href = "#" class = "zone-count" data-zone = "${zone}" data-emptype = "${empType}" data-category = "od" > ${od}< / a > `
: `< span class = "disabled-count" > ${od}< / span > `) + `< / td > `;
html += `< td > ` + (leave > 0
html += `< td class = "text-center" > ` + (leave > 0
? `< a href = "#" class = "zone-count" data-zone = "${zone}" data-emptype = "${empType}" data-category = "leave" > ${leave}< / a > `
: `< span class = "disabled-count" > ${leave}< / span > `) + `< / td > `;
html += '< / tr > ';
@ -278,20 +326,24 @@
if (data.length === 0) { modalBody.innerHTML = '< div class = "alert alert-info" > No park-wise records< / div > '; return; }
let html = '< div class = "table-responsive" > < table class = "table table-sm table-striped" > < thead > < tr > ';
html += '< th > Park Name< / th > < th > Total< / th > < th > Present< / th > < th > OD< / th > < th > Leave< / th > ';
html += '< th > Park Name< / th > < th class = "text-center" > Total< / th > < th class = "text-center" > Facial Registered< / th > < th class = "text-center" > Facial Not Registered< / th > < th class = "text-center" > Present< / th > < th class = "text-center" > OD< / th > < th class = "text-center" > Leave< / th > ';
html += '< / tr > < / thead > < tbody > ';
data.forEach(r => {
const park = r.park_name || '-';
const total = Number(r.TotalCount) || 0;
const facialRegistered = Number(r.facialRegistered) || 0;
const facialNotRegistered = Number(r.facialNotRegistered) || 0;
const present = Number(r.AttendanceMarked) || 0;
const od = Number(r.ODCount) || 0;
const leave = Number(r.LeaveCount) || 0;
html += '< tr > ';
html += `< td > ${park}< / td > `;
html += `< td > ${total}< / td > `;
html += `< td > ` + (present > 0 ? `< a href = "#" class = "park-employee-count" data-zone = "${zone}" data-park = "${park}" data-category = "present" > ${present}< / a > ` : `< span class = "disabled-count" > ${present}< / span > `) + `< / td > `;
html += `< td > ` + (od > 0 ? `< a href = "#" class = "park-employee-count" data-zone = "${zone}" data-park = "${park}" data-category = "od" > ${od}< / a > ` : `< span class = "disabled-count" > ${od}< / span > `) + `< / td > `;
html += `< td > ` + (leave > 0 ? `< a href = "#" class = "park-employee-count" data-zone = "${zone}" data-park = "${park}" data-category = "leave" > ${leave}< / a > ` : `< span class = "disabled-count" > ${leave}< / span > `) + `< / td > `;
html += `< td class = "text-center" > ${total}< / td > `;
html += `< td class = "text-center" > ${facialRegistered}< / td > `;
html += `< td class = "text-center" > ${facialNotRegistered}< / td > `;
html += `< td class = "text-center" > ` + (present > 0 ? `< a href = "#" class = "park-employee-count" data-zone = "${zone}" data-park = "${park}" data-category = "present" > ${present}< / a > ` : `< span class = "disabled-count" > ${present}< / span > `) + `< / td > `;
html += `< td class = "text-center" > ` + (od > 0 ? `< a href = "#" class = "park-employee-count" data-zone = "${zone}" data-park = "${park}" data-category = "od" > ${od}< / a > ` : `< span class = "disabled-count" > ${od}< / span > `) + `< / td > `;
html += `< td class = "text-center" > ` + (leave > 0 ? `< a href = "#" class = "park-employee-count" data-zone = "${zone}" data-park = "${park}" data-category = "leave" > ${leave}< / a > ` : `< span class = "disabled-count" > ${leave}< / span > `) + `< / td > `;
html += '< / tr > ';
});
html += '< / tbody > < / table > < / div > ';
@ -524,7 +576,8 @@
< / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" > < / script >
<!-- Park - wise Summary Modal -->
< div class = "modal fade" id = "parkWiseSummaryModal" tabindex = "-1" aria-labelledby = "parkWiseSummaryModalLabel" aria-hidden = "true" >
< div class = "modal fade" id = "parkWiseSummaryModal" tabindex = "-1" aria-labelledby = "parkWiseSummaryModalLabel"
aria-hidden="true">
< div class = "modal-dialog modal-lg modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
@ -535,6 +588,10 @@
Loading...
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-primary"
onclick="downloadExcelFromTable(document.getElementById('parkWiseSummaryModal'), 'park_wise_summary.xlsx')">
< i class = "bi bi-download" > < / i > Download Excel
< / button >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Close< / button >
< / div >
< / div >
@ -553,6 +610,10 @@
Loading...
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-primary"
onclick="downloadExcelFromTable(document.getElementById('detailModal'), 'employee_details.xlsx')">
< i class = "bi bi-download" > < / i > Download Excel
< / button >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Close< / button >
< / div >
< / div >
