@ -1,5 +1,6 @@
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
@ -12,27 +13,32 @@
align-items: center;
min-height: 200px;
}
.spinner-border {
width: 3rem;
height: 3rem;
color: #007bff;
}
.zone-summary-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.zone-summary-row {
grid-template-columns: 1fr;
}
}
.zone-summary-card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
background-color: #f9f9f9;
}
.disabled-count {
color: #6c757d;
cursor: default;
@ -42,6 +48,7 @@
}
< / style >
< / head >
< body class = "p-3" >
< div class = "container" >
< h1 class = "mb-4" > Attendance Dashboard< / h1 >
@ -80,319 +87,460 @@
< / div >
< script >
(function () {
const apiBase = '/commissionerreview/api/attendanceController';
function pad(n) { return n < 10 ? ' 0 ' + n : n ; }
// convert Date -> yyyy-mm-dd for input[type=date]
function toIsoYyyyMmDd(date) {
return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate());
}
// convert input value (either yyyy-mm-dd or dd-mm-yyyy) -> dd-mm-yyyy for API
function toApiDdMmYyyy(val) {
if (!val) return val;
// if already in dd-mm-yyyy (contains two '-') and first part length 2
const parts = val.split('-');
if (parts.length === 3) {
if (parts[0].length === 4) {
// yyyy-mm-dd -> dd-mm-yyyy
return pad(parseInt(parts[2], 10)) + '-' + pad(parseInt(parts[1], 10)) + '-' + parts[0];
} else {
// assume already dd-mm-yyyy
return val;
(function () {
const apiBase = '/commissionerreview/api/attendanceController';
function pad(n) { return n < 10 ? ' 0 ' + n : n ; }
// convert Date -> yyyy-mm-dd for input[type=date]
function toIsoYyyyMmDd(date) {
return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate());
}
}
return val;
}
function setDefaults() {
const today = new Date();
const iso = toIsoYyyyMmDd(today);
document.getElementById('fromDate').value = iso;
document.getElementById('toDate').value = iso;
}
function setDateLimits() {
const from = document.getElementById('fromDate');
const to = document.getElementById('toDate');
const todayIso = toIsoYyyyMmDd(new Date());
from.max = todayIso;
to.max = todayIso;
if (from.value) to.min = from.value;
from.addEventListener('change', () => {
const fv = from.value;
if (fv) {
to.min = fv;
if (to.value & & to.value < fv ) to . value = fv;
} else {
to.min = '';
// convert input value (either yyyy-mm-dd or dd-mm-yyyy) -> dd-mm-yyyy for API
function toApiDdMmYyyy(val) {
if (!val) return val;
// if already in dd-mm-yyyy (contains two '-') and first part length 2
const parts = val.split('-');
if (parts.length === 3) {
if (parts[0].length === 4) {
// yyyy-mm-dd -> dd-mm-yyyy
return pad(parseInt(parts[2], 10)) + '-' + pad(parseInt(parts[1], 10)) + '-' + parts[0];
} else {
// assume already dd-mm-yyyy
return val;
}
}
return val;
}
});
to.addEventListener('change', () => {
if (from.value & & to.value & & to.value < from.value ) {
to.value = from.value;
function setDefaults() {
const today = new Date();
const iso = toIsoYyyyMmDd(today);
document.getElementById('fromDate').value = iso;
document.getElementById('toDate').value = iso;
}
});
}
async function loadAbstractCounts() {
const target = document.getElementById('abstractCounts');
target.innerHTML = createLoader();
try {
const res = await fetch(apiBase + '/abstractCounts');
const data = await res.json();
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 > `;
});
html += '< / div > ';
target.innerHTML = html;
} catch (e) { target.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `; }
}
function createLoader() {
return '< div class = "spinner-container" > < div class = "spinner-border" role = "status" > < span class = "visually-hidden" > Loading...< / span > < / div > < / div > ';
}
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 > ';
rows.forEach(r => {
const zone = r.zone;
const total = Number(r.TotalCount) || 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
? `< 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
? `< 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
? `< 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 > ';
});
html += '< / tbody > < / table > ';
target.innerHTML = html;
}
async function loadZoneSummary() {
const rawFrom = document.getElementById('fromDate').value;
const rawTo = document.getElementById('toDate').value;
const fromDate = toApiDdMmYyyy(rawFrom);
const toDate = toApiDdMmYyyy(rawTo);
const parkTarget = document.getElementById('zoneSummaryPark');
const nulmTarget = document.getElementById('zoneSummaryNulm');
// Show loaders
parkTarget.innerHTML = createLoader();
nulmTarget.innerHTML = createLoader();
try {
// Load Park independently
fetch(`${apiBase}/zoneSummaryPark?fromDate=${encodeURIComponent(fromDate)}& toDate=${encodeURIComponent(toDate)}`)
.then(res => {
if (!res.ok) {
console.error('Park zoneSummary error', res.status);
parkTarget.innerHTML = `< div class = "alert alert-danger" > Error loading Park summary (${res.status})< / div > `;
return Promise.reject(new Error('Park fetch failed'));
function setDateLimits() {
const from = document.getElementById('fromDate');
const to = document.getElementById('toDate');
const todayIso = toIsoYyyyMmDd(new Date());
from.max = todayIso;
to.max = todayIso;
if (from.value) to.min = from.value;
from.addEventListener('change', () => {
const fv = from.value;
if (fv) {
to.min = fv;
if (to.value & & to.value < fv ) to . value = fv;
} else {
to.min = '';
}
return res.json();
})
.then(parkData => {
console.log('Park data loaded:', parkData);
renderTable(parkTarget, parkData, 'Park');
})
.catch(e => {
console.error('Park error:', e);
parkTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e.message}< / div > `;
});
// Load NULM independently
fetch(`${apiBase}/zoneSummaryNULM?fromDate=${encodeURIComponent(fromDate)}& toDate=${encodeURIComponent(toDate)}`)
.then(res => {
if (!res.ok) {
console.error('NULM zoneSummary error', res.status);
nulmTarget.innerHTML = `< div class = "alert alert-danger" > Error loading NULM summary (${res.status})< / div > `;
return Promise.reject(new Error('NULM fetch failed'));
to.addEventListener('change', () => {
if (from.value & & to.value & & to.value < from.value ) {
to.value = from.value;
}
return res.json();
})
.then(nulmData => {
console.log('NULM data loaded:', nulmData);
renderTable(nulmTarget, nulmData, 'NULM');
})
.catch(e => {
console.error('NULM error:', e);
nulmTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e.message}< / div > `;
});
} catch (e) {
parkTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
nulmTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
}
}
// loadDetailed may be called with explicit empType/category/zone (when clicking a zone count)
async function loadDetailed(empType, category, zoneVal) {
// show details in modal
const rawFrom = document.getElementById('fromDate').value;
const rawTo = document.getElementById('toDate').value;
const fromDate = toApiDdMmYyyy(rawFrom);
const toDate = toApiDdMmYyyy(rawTo);
const modalEl = document.getElementById('detailModal');
const modalBody = document.getElementById('detailModalBody');
const modalTitle = document.getElementById('detailModalLabel');
if (!empType || !category || !zoneVal) {
modalTitle.innerText = 'Details';
modalBody.innerHTML = '< div class = "text-warning" > Missing parameters. Click a count to view details.< / div > ';
new bootstrap.Modal(modalEl).show();
return;
}
}
modalTitle.innerText = `${empType} — Zone ${zoneVal} — ${category.toUpperCase()} (${rawFrom} → ${rawTo})`;
modalBody.innerHTML = createLoader();
// Show modal immediately with loader
new bootstrap.Modal(modalEl).show();
try {
let url = `${apiBase}/detailed?empType=${encodeURIComponent(empType)}&category=${encodeURIComponent(category)}&fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`;
url += `&zone=${encodeURIComponent(zoneVal)}`;
const res = await fetch(url);
if (!res.ok) {
const text = await res.text().catch(() => '');
modalBody.innerHTML = `< div class = "alert alert-danger" > Error ${res.status}: ${text}< / div > `;
return;
async function loadAbstractCounts() {
const target = document.getElementById('abstractCounts');
target.innerHTML = createLoader();
try {
const res = await fetch(apiBase + '/abstractCounts');
const data = await res.json();
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 > `;
});
html += '< / div > ';
target.innerHTML = html;
} catch (e) { target.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `; }
}
const data = await res.json();
if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
if (data.length === 0) { modalBody.innerHTML = '< div class = "alert alert-info" > No records< / div > '; return; }
// Define columns to display based on category
let displayColumns = [];
const catLower = (category || 'present').toLowerCase();
if (catLower === 'present') {
displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
if (empType === 'Park') displayColumns.push('park_name');
displayColumns.push('intime', 'inphoto', 'outtime', 'outphoto');
} else if (catLower === 'leave') {
displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
if (empType === 'Park') displayColumns.push('park_name');
displayColumns.push('leavedatetime', 'leaveby');
} else if (catLower === 'od') {
displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
if (empType === 'Park') displayColumns.push('park_name');
displayColumns.push('odtime', 'odby');
} else {
displayColumns = Object.keys(data[0]);
function createLoader() {
return '< div class = "spinner-container" > < div class = "spinner-border" role = "status" > < span class = "visually-hidden" > Loading...< / span > < / div > < / div > ';
}
// Filter data to include only displayColumns, handle case-insensitive matching
const filteredData = data.map(row => {
const filtered = {};
displayColumns.forEach(col => {
// Try exact match first, then case-insensitive
const key = Object.keys(row).find(k => k === col || k.toLowerCase() === col.toLowerCase());
if (key) {
filtered[col] = row[key];
}
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 > ';
rows.forEach(r => {
const zone = r.zone;
const total = Number(r.TotalCount) || 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
? `< 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
? `< 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
? `< 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 > ';
});
return filtered;
});
function prettyName(key) {
const map = {
enrollment_id: 'Enrollment ID',
name: 'Name',
designation: 'Designation',
department: 'Department',
park_name: 'Park Name',
intime: 'In Time',
inphoto: 'In Photo',
outtime: 'Out Time',
outphoto: 'Out Photo',
leavedatetime: 'Leave DateTime',
leaveby: 'Leave By',
odtime: 'OD DateTime',
odby: 'OD By',
};
if (map[key]) return map[key];
return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
html += '< / tbody > < / table > ';
target.innerHTML = html;
}
let html = '< div class = "table-responsive" > < table class = "table table-sm table-bordered" > < thead > < tr > ';
// add serial number header
html += '< th > S.No< / th > ';
displayColumns.forEach(k => {
html += `< th > ${prettyName(k)}< / th > `;
});
html += '< / tr > < / thead > < tbody > ';
filteredData.forEach((row, idx) => {
html += '< tr > ';
// serial number cell
html += `< td > ${idx + 1}< / td > `;
displayColumns.forEach(k => {
const val = row[k];
// Handle photo columns - show as thumbnail if it's an image
if ((k === 'inphoto' || k === 'outphoto') & & val) {
html += `< td > < img src = "${val}" alt = "photo" style = "max-width: 100px; max-height: 100px; cursor: pointer;" onclick = "this.style.maxWidth='500px'; this.style.maxHeight='500px';" > < / td > `;
} else {
html += `< td > ${val != null ? val : '-'}< / td > `;
async function loadZoneSummary() {
const rawFrom = document.getElementById('fromDate').value;
const rawTo = document.getElementById('toDate').value;
const fromDate = toApiDdMmYyyy(rawFrom);
const toDate = toApiDdMmYyyy(rawTo);
const parkTarget = document.getElementById('zoneSummaryPark');
const nulmTarget = document.getElementById('zoneSummaryNulm');
// Show loaders
parkTarget.innerHTML = createLoader();
nulmTarget.innerHTML = createLoader();
try {
// Load Park independently
fetch(`${apiBase}/zoneSummaryPark?fromDate=${encodeURIComponent(fromDate)}& toDate=${encodeURIComponent(toDate)}`)
.then(res => {
if (!res.ok) {
console.error('Park zoneSummary error', res.status);
parkTarget.innerHTML = `< div class = "alert alert-danger" > Error loading Park summary (${res.status})< / div > `;
return Promise.reject(new Error('Park fetch failed'));
}
return res.json();
})
.then(parkData => {
console.log('Park data loaded:', parkData);
renderTable(parkTarget, parkData, 'Park');
})
.catch(e => {
console.error('Park error:', e);
parkTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e.message}< / div > `;
});
// Load NULM independently
fetch(`${apiBase}/zoneSummaryNULM?fromDate=${encodeURIComponent(fromDate)}& toDate=${encodeURIComponent(toDate)}`)
.then(res => {
if (!res.ok) {
console.error('NULM zoneSummary error', res.status);
nulmTarget.innerHTML = `< div class = "alert alert-danger" > Error loading NULM summary (${res.status})< / div > `;
return Promise.reject(new Error('NULM fetch failed'));
}
return res.json();
})
.then(nulmData => {
console.log('NULM data loaded:', nulmData);
renderTable(nulmTarget, nulmData, 'NULM');
})
.catch(e => {
console.error('NULM error:', e);
nulmTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e.message}< / div > `;
});
} catch (e) {
parkTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
nulmTarget.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
}
}
async function loadParkWiseSummary(zone, category) {
if (!zone) {
alert('Please select a zone first');
return;
}
const modalEl = document.getElementById('parkWiseSummaryModal');
const modalBody = document.getElementById('parkWiseSummaryModalBody');
const modalTitle = document.getElementById('parkWiseSummaryModalLabel');
modalTitle.innerText = `Park-wise Summary — Zone ${zone} — ${(category || 'All').toUpperCase()}`;
modalBody.innerHTML = createLoader();
new bootstrap.Modal(modalEl).show();
try {
const rawFrom = document.getElementById('fromDate').value;
const rawTo = document.getElementById('toDate').value;
const fromDate = toApiDdMmYyyy(rawFrom);
const toDate = toApiDdMmYyyy(rawTo);
const url = `${apiBase}/parkWiseSummary?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}&zone=${encodeURIComponent(zone)}`;
const res = await fetch(url);
if (!res.ok) {
modalBody.innerHTML = `< div class = "alert alert-danger" > Error loading park-wise summary (${res.status})< / div > `;
return;
}
const data = await res.json();
if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
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 += '< / tr > < / thead > < tbody > ';
data.forEach(r => {
const park = r.park_name || '-';
const total = Number(r.TotalCount) || 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 += '< / tr > ';
});
html += '< / tbody > < / table > < / div > ';
modalBody.innerHTML = html;
} catch (e) {
modalBody.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
}
}
async function loadParkDetails(zone, type) {
const modalEl = document.getElementById('detailModal');
const modalBody = document.getElementById('detailModalBody');
const modalTitle = document.getElementById('detailModalLabel');
modalTitle.innerText = `Parks — Zone ${zone} — ${type}`;
modalBody.innerHTML = createLoader();
new bootstrap.Modal(modalEl).show();
try {
const url = `/commissionerreview/api/parks/getParkDataByZone?zone=${encodeURIComponent(zone)}&type=${encodeURIComponent(type)}`;
const res = await fetch(url);
if (!res.ok) {
modalBody.innerHTML = `< div class = "alert alert-danger" > Error ${res.status}< / div > `;
return;
}
const data = await res.json();
if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
if (data.length === 0) { modalBody.innerHTML = '< div class = "alert alert-info" > No records< / div > '; return; }
// Build table from keys of first row
const cols = Object.keys(data[0]);
let html = '< div class = "table-responsive" > < table class = "table table-sm table-bordered" > < thead > < tr > < th > S.No< / th > ';
cols.forEach(c => html += `< th > ${c.replace(/_/g, ' ')}< / th > `);
html += '< / tr > < / thead > < tbody > ';
data.forEach((row, idx) => {
html += '< tr > ';
html += `< td > ${idx + 1}< / td > `;
cols.forEach(c => html += `< td > ${row[c] != null ? row[c] : '-'}< / td > `);
html += '< / tr > ';
});
html += '< / tr > ';
});
html += '< / tbody > < / table > < / div > ';
modalBody.innerHTML = html;
} catch (e) {
modalBody.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
html += '< / tbody > < / table > < / div > ';
modalBody.innerHTML = html;
} catch (e) {
modalBody.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
}
}
}
document.addEventListener('DOMContentLoaded', () => {
setDefaults();
document.getElementById('loadSummaryBtn').addEventListener('click', () => {
// loadDetailed may be called with explicit empType/category/zone (when clicking a zone count)
async function loadDetailed(empType, category, zoneVal, parkName) {
// show details in modal
const rawFrom = document.getElementById('fromDate').value;
const rawTo = document.getElementById('toDate').value;
if (rawFrom & & rawTo & & rawTo < rawFrom ) {
alert('To date must be the same as or later than From date');
const fromDate = toApiDdMmYyyy(rawFrom);
const toDate = toApiDdMmYyyy(rawTo);
const modalEl = document.getElementById('detailModal');
const modalBody = document.getElementById('detailModalBody');
const modalTitle = document.getElementById('detailModalLabel');
if (!empType || !category || !zoneVal) {
modalTitle.innerText = 'Details';
modalBody.innerHTML = '< div class = "text-warning" > Missing parameters. Click a count to view details.< / div > ';
new bootstrap.Modal(modalEl).show();
return;
}
loadAbstractCounts(); loadZoneSummary();
});
// delegate clicks on zone counts to load detailed view
document.addEventListener('click', (ev) => {
const a = ev.target.closest & & ev.target.closest('.zone-count');
if (!a) return;
ev.preventDefault();
const zone = a.getAttribute('data-zone');
const empType = a.getAttribute('data-emptype');
const category = a.getAttribute('data-category');
// call detailed loader with explicit params
loadDetailed(empType, category, zone);
let titleSuffix = parkName ? ` — Park ${parkName}` : '';
modalTitle.innerText = `${empType} — Zone ${zoneVal}${titleSuffix} — ${category.toUpperCase()} (${rawFrom} → ${rawTo})`;
modalBody.innerHTML = createLoader();
// Show modal immediately with loader
new bootstrap.Modal(modalEl).show();
try {
let url = `${apiBase}/detailed?empType=${encodeURIComponent(empType)}&category=${encodeURIComponent(category)}&fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`;
url += `&zone=${encodeURIComponent(zoneVal)}`;
if (parkName) {
url += `&parkName=${encodeURIComponent(parkName)}`;
}
const res = await fetch(url);
if (!res.ok) {
const text = await res.text().catch(() => '');
modalBody.innerHTML = `< div class = "alert alert-danger" > Error ${res.status}: ${text}< / div > `;
return;
}
const data = await res.json();
if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
if (data.length === 0) { modalBody.innerHTML = '< div class = "alert alert-info" > No records< / div > '; return; }
// Define columns to display based on category
let displayColumns = [];
const catLower = (category || 'present').toLowerCase();
if (catLower === 'present') {
displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
if (empType === 'Park') displayColumns.push('park_name');
displayColumns.push('intime', 'inphoto', 'outtime', 'outphoto');
} else if (catLower === 'leave') {
displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
if (empType === 'Park') displayColumns.push('park_name');
displayColumns.push('leavedatetime', 'leaveby');
} else if (catLower === 'od') {
displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
if (empType === 'Park') displayColumns.push('park_name');
displayColumns.push('odtime', 'odby');
} else {
displayColumns = Object.keys(data[0]);
}
// Filter data to include only displayColumns, handle case-insensitive matching
const filteredData = data.map(row => {
const filtered = {};
displayColumns.forEach(col => {
// Try exact match first, then case-insensitive
const key = Object.keys(row).find(k => k === col || k.toLowerCase() === col.toLowerCase());
if (key) {
filtered[col] = row[key];
}
});
return filtered;
});
function prettyName(key) {
const map = {
enrollment_id: 'Enrollment ID',
name: 'Name',
designation: 'Designation',
department: 'Department',
park_name: 'Park Name',
intime: 'In Time',
inphoto: 'In Photo',
outtime: 'Out Time',
outphoto: 'Out Photo',
leavedatetime: 'Leave DateTime',
leaveby: 'Leave By',
odtime: 'OD DateTime',
odby: 'OD By',
};
if (map[key]) return map[key];
return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
}
let html = '< div class = "table-responsive" > < table class = "table table-sm table-bordered" > < thead > < tr > ';
// add serial number header
html += '< th > S.No< / th > ';
displayColumns.forEach(k => {
html += `< th > ${prettyName(k)}< / th > `;
});
html += '< / tr > < / thead > < tbody > ';
filteredData.forEach((row, idx) => {
html += '< tr > ';
// serial number cell
html += `< td > ${idx + 1}< / td > `;
displayColumns.forEach(k => {
const val = row[k];
// Handle photo columns - show as thumbnail if it's an image
if ((k === 'inphoto' || k === 'outphoto') & & val) {
html += `< td > < img src = "${val}" alt = "photo" style = "max-width: 100px; max-height: 100px; cursor: pointer;" onclick = "this.style.maxWidth='500px'; this.style.maxHeight='500px';" > < / td > `;
} else {
html += `< td > ${val != null ? val : '-'}< / td > `;
}
});
html += '< / tr > ';
});
html += '< / tbody > < / table > < / div > ';
modalBody.innerHTML = html;
} catch (e) {
modalBody.innerHTML = `< div class = "alert alert-danger" > Error: ${e}< / div > `;
}
}
document.addEventListener('DOMContentLoaded', () => {
setDefaults();
document.getElementById('loadSummaryBtn').addEventListener('click', () => {
const rawFrom = document.getElementById('fromDate').value;
const rawTo = document.getElementById('toDate').value;
if (rawFrom & & rawTo & & rawTo < rawFrom ) {
alert('To date must be the same as or later than From date');
return;
}
loadAbstractCounts(); loadZoneSummary();
});
// delegate clicks: zone links -> park-wise summary, zone counts -> detailed, park counts -> park-details
document.addEventListener('click', (ev) => {
const zoneLink = ev.target.closest & & ev.target.closest('.zone-link');
if (zoneLink) {
ev.preventDefault();
const zone = zoneLink.getAttribute('data-zone');
loadParkWiseSummary(zone);
return;
}
const zoneAnchor = ev.target.closest & & ev.target.closest('.zone-count');
if (zoneAnchor) {
ev.preventDefault();
const zone = zoneAnchor.getAttribute('data-zone');
const empType = zoneAnchor.getAttribute('data-emptype');
const category = zoneAnchor.getAttribute('data-category');
// For Park: show park-wise summary; For NULM: show employee details directly
if (empType === 'Park') {
loadParkWiseSummary(zone, category);
} else {
loadDetailed(empType, category, zone);
}
return;
}
const parkAnchor = ev.target.closest & & ev.target.closest('.park-count');
if (parkAnchor) {
ev.preventDefault();
const zone = parkAnchor.getAttribute('data-zone');
const type = parkAnchor.getAttribute('data-type');
loadParkDetails(zone, type);
return;
}
const parkEmployeeAnchor = ev.target.closest & & ev.target.closest('.park-employee-count');
if (parkEmployeeAnchor) {
ev.preventDefault();
const zone = parkEmployeeAnchor.getAttribute('data-zone');
const park = parkEmployeeAnchor.getAttribute('data-park');
const category = parkEmployeeAnchor.getAttribute('data-category');
loadDetailed('Park', category, zone, park);
return;
}
});
// set date constraints and load initial
setDateLimits();
// load initial
loadAbstractCounts();
loadZoneSummary();
});
// set date constraints and load initial
setDateLimits();
// load initial
loadAbstractCounts();
loadZoneSummary();
});
})();
}) ();
< / 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-dialog modal-lg modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "parkWiseSummaryModalLabel" > Park-wise Summary< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" id = "parkWiseSummaryModalBody" >
Loading...
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Close< / button >
< / div >
< / div >
< / div >
< / div >
<!-- Detail modal -->
< div class = "modal fade" id = "detailModal" tabindex = "-1" aria-labelledby = "detailModalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-xl modal-dialog-scrollable" >
@ -411,4 +559,5 @@
< / div >
< / div >
< / body >
< / html >
< / html >
