hariprasaths
/
commissioner_review_1_may2025
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Database - AWS Connection
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 Commits
1 Branch
0 Tags
2.2 MiB
Tree: ec0fe53a13
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ec0fe53a13'
${ noResults }
commissioner_review_1_may2025/src/main/resources/templates/modules/attendance-dashboard.html

824 lines
39 KiB
Raw Normal View History

added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance dashbaord updated
8 months ago
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
chnages added in attendance service and attendance-report page
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard Region wise Percentage Added
8 months ago
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
chnages added in attendance service and attendance-report page
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
chnages added in attendance service and attendance-report page
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
Attendance dashbaord updated
8 months ago
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Attendance Dashboard Region wise Percentage Added
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard controller and service updated
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard Region wise Percentage Added
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
Attendance Dashboard controller and service updated
8 months ago
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
Attendance Dashboard controller and service updated
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Park Attendance Dashboard Updated code
8 months ago
​
​
Attendance Dashboard controller and service updated
8 months ago
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
Park Attendance Dashboard Updated code
8 months ago
​
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Park Attendance Dashboard Updated code
8 months ago
​
Attendance Dashboard controller and service updated
8 months ago
Park Attendance Dashboard Updated code
8 months ago
​
​
​
​
​
​
​
Attendance Dashboard controller and service updated
8 months ago
Park Attendance Dashboard Updated code
8 months ago
​
​
​
​
Attendance Dashboard controller and service updated
8 months ago
Park Attendance Dashboard Updated code
8 months ago
​
​
​
​
​
Attendance Dashboard controller and service updated
8 months ago
Park Attendance Dashboard Updated code
8 months ago
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
chnages added in attendance service and attendance-report page
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
chnages added in attendance service and attendance-report page
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard controller and service updated
8 months ago
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
chnages added in attendance service and attendance-report page
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
chnages added in attendance service and attendance-report page
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
Attendance Dashboard - Not Marked issue resolved.
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
Attendance Dashboard controller and service updated
8 months ago
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
Attendance Dashboard controller and service updated
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Not Marked issue resolved.
8 months ago
Attendance Dashboard controller and service updated
8 months ago
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Park Attendance Dashboard Updated code
8 months ago
Attendance Dashboard Region wise Percentage Added
8 months ago
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
Park Attendance Dashboard Updated code
8 months ago
​
Attendance Dashboard controller and service updated
8 months ago
Park Attendance Dashboard Updated code
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard controller and service updated
8 months ago
Park Attendance Dashboard Updated code
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
Attendance Dashboard Region wise Percentage Added
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance dashbaord updated
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
Attendance dashbaord updated
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
Attendance dashbaord updated
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Park Attendance Dashboard Updated code
8 months ago
​
​
​
​
​
Attendance Dashboard controller and service updated
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance dashbaord updated
8 months ago
​
​
​
Park Attendance Dashboard Updated code
8 months ago
Attendance Dashboard controller and service updated
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
Attendance dashbaord updated
8 months ago
​
​
​
​
​
Park Attendance Dashboard Updated code
8 months ago
Attendance dashbaord updated
8 months ago
​
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
Attendance dashbaord updated
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
Attendance Dashboard controller and service updated
8 months ago
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
chnages added in attendance service and attendance-report page
8 months ago
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
Attendance Dashboard controller and service updated
8 months ago
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
​
​
​
Attendance Dashboard Region wise Percentage Added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
Park Attendance Dashboard Updated code
8 months ago
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
Park Attendance Dashboard Updated code
8 months ago
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
​
​
​
​
Attendance Dashboard - Facial Registered and Not Registerd count added.
8 months ago
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
​
​
​
​
Attendance dashbaord updated
8 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
added greencommittee controller,service and attendance controller ,service and html pages
8 months ago
Attendance Dashboard - Park wise summary added
8 months ago
​
  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Attendance Dashboard</title>
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" crossorigin="anonymous"></script>
  10. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  12. <style>
  13. .spinner-container {
  14. display: flex;
  15. justify-content: center;
  16. align-items: center;
  17. min-height: 200px;
  18. }
  20. .spinner-border {
  21. width: 3rem;
  22. height: 3rem;
  23. color: #007bff;
  24. }
  26. .zone-summary-row {
  27. display: grid;
  28. grid-template-columns: 1fr;
  29. gap: 20px;
  30. }
  32. @media (max-width: 768px) {
  33. .zone-summary-row {
  34. grid-template-columns: 1fr;
  35. }
  36. }
  38. .zone-summary-card {
  39. border: 1px solid #ddd;
  40. border-radius: 4px;
  41. padding: 15px;
  42. background-color: #f9f9f9;
  43. }
  45. .disabled-count {
  46. color: #6c757d;
  47. cursor: default;
  48. text-decoration: none;
  49. display: inline-block;
  50. padding: 0 4px;
  51. }
  52. </style>
  53. </head>
  55. <body class="p-3">
  56. <div class="container">
  57. <h1 class="mb-4">Attendance Dashboard</h1>
  59. <div class="row mb-3">
  60. <div class="col-md-3">
  61. <label class="form-label">From</label>
  62. <input id="fromDate" type="date" class="form-control" />
  63. </div>
  64. <div class="col-md-3">
  65. <label class="form-label">To</label>
  66. <input id="toDate" type="date" class="form-control" />
  67. </div>
  68. <div class="col-md-6 d-flex align-items-end">
  69. <div>
  70. <button id="loadSummaryBtn" class="btn btn-secondary">Load</button>
  71. </div>
  72. </div>
  73. </div>
  75. <h4>Abstract Counts</h4>
  76. <div id="abstractCounts" class="mb-4"></div>
  78. <h4>Zone Wise Attendance %</h4>
  79. <div id="zoneWisePercentage" class="mb-4"></div>
  81. <h4>Zone Summary</h4>
  82. <div class="zone-summary-row">
  83. <div class="zone-summary-card">
  84. <div class="d-flex justify-content-between align-items-center mb-2">
  85. <h5>Park</h5>
  86. <button class="btn btn-sm btn-primary"
  87. onclick="downloadExcelFromTable(document.getElementById('zoneSummaryPark'), 'park_summary.xlsx')">
  88. <i class="bi bi-download"></i> Download Excel
  89. </button>
  90. </div>
  91. <div id="zoneSummaryPark"></div>
  92. </div>
  93. <!-- NULM zone summary card commented out
  94. <div class="zone-summary-card">
  95. <div class="d-flex justify-content-between align-items-center mb-2">
  96. <h5>NULM</h5>
  97. <button class="btn btn-sm btn-primary"
  98. onclick="downloadExcelFromTable(document.getElementById('zoneSummaryNulm'), 'nulm_summary.xlsx')">
  99. <i class="bi bi-download"></i> Download Excel
  100. </button>
  101. </div>
  102. <div id="zoneSummaryNulm"></div>
  103. </div>
  104. -->
  105. </div>
  106. </div>
  108. <script>
  110. function showImageModal(imageSrc) {
  111. document.getElementById("previewImage").src = imageSrc;
  112. var modal = new bootstrap.Modal(document.getElementById('imagePreviewModal'));
  113. modal.show();
  114. }
  116. (function () {
  117. const apiBase = '/commissionerreview/api/attendanceController';
  119. function pad(n) { return n < 10 ? '0' + n : n; }
  121. // convert Date -> yyyy-mm-dd for input[type=date]
  122. function toIsoYyyyMmDd(date) {
  123. return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate());
  124. }
  126. // convert input value (either yyyy-mm-dd or dd-mm-yyyy) -> dd-mm-yyyy for API
  127. function toApiDdMmYyyy(val) {
  128. if (!val) return val;
  129. // if already in dd-mm-yyyy (contains two '-') and first part length 2
  130. const parts = val.split('-');
  131. if (parts.length === 3) {
  132. if (parts[0].length === 4) {
  133. // yyyy-mm-dd -> dd-mm-yyyy
  134. return pad(parseInt(parts[2], 10)) + '-' + pad(parseInt(parts[1], 10)) + '-' + parts[0];
  135. } else {
  136. // assume already dd-mm-yyyy
  137. return val;
  138. }
  139. }
  140. return val;
  141. }
  143. function setDefaults() {
  144. const today = new Date();
  145. const iso = toIsoYyyyMmDd(today);
  146. document.getElementById('fromDate').value = iso;
  147. document.getElementById('toDate').value = iso;
  148. }
  150. function setDateLimits() {
  151. const from = document.getElementById('fromDate');
  152. const to = document.getElementById('toDate');
  153. const todayIso = toIsoYyyyMmDd(new Date());
  154. from.max = todayIso;
  155. to.max = todayIso;
  156. if (from.value) to.min = from.value;
  158. from.addEventListener('change', () => {
  159. const fv = from.value;
  160. if (fv) {
  161. to.min = fv;
  162. if (to.value && to.value < fv) to.value = fv;
  163. } else {
  164. to.min = '';
  165. }
  166. });
  168. to.addEventListener('change', () => {
  169. if (from.value && to.value && to.value < from.value) {
  170. to.value = from.value;
  171. }
  172. });
  173. }
  175. async function loadAbstractCounts() {
  176. const target = document.getElementById('abstractCounts');
  177. target.innerHTML = createLoader();
  178. try {
  179. const res = await fetch(apiBase + '/abstractCounts');
  180. const data = await res.json();
  181. if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
  182. let html = '<div class="row">';
  183. data.forEach(item => {
  184. const facialRegistered = item.facialRegistered || 0;
  185. const facialNotRegistered = item.facialNotRegistered || 0;
  186. const totalCount = item.totalCount || 0;
  187. const facialRegPct = totalCount > 0 ? ((facialRegistered / totalCount) * 100).toFixed(2) : '0.00';
  188. html += `<div class="col-md-3"><div class="card p-3 mb-2">
  189. <strong>${item.emp_type}</strong>
  190. <div class="mt-2">
  191. <div class="small">Total: <strong>${totalCount}</strong></div>
  192. <div class="small">Facial Registered: <strong>${facialRegistered}</strong></div>
  193. <div class="small">Facial Not Registered: <strong>${facialNotRegistered}</strong></div>
  194. <div class="small">Facial Registered %: <strong>${facialRegPct}%</strong></div>
  195. <div class="small">Present %: <strong><span id="presentPercent">—</span></strong></div>
  196. </div>
  197. </div></div>`;
  198. });
  199. html += '</div>';
  200. target.innerHTML = html;
  201. } catch (e) { target.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`; }
  202. }
  204. async function loadZoneWisePercentage() {
  205. const target = document.getElementById('zoneWisePercentage');
  206. target.innerHTML = createLoader();
  207. try {
  208. const rawFrom = document.getElementById('fromDate').value;
  209. const rawTo = document.getElementById('toDate').value;
  210. const fromDate = toApiDdMmYyyy(rawFrom);
  211. const toDate = toApiDdMmYyyy(rawTo);
  212. const res = await fetch(`${apiBase}/zoneWisePercentage?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`);
  213. const data = await res.json();
  214. if (!Array.isArray(data) || data.length === 0) {
  215. target.innerHTML = '<div class="alert alert-info">No zone percentage data available</div>';
  216. return;
  217. }
  218. let html = '<div class="row">';
  219. data.forEach(item => {
  220. const zoneName = item.ZoneName || 'Unknown Zone';
  221. const facialPct = item.facialPercentage != null ? item.facialPercentage : 0;
  222. const presentPct = item.presentPercentage != null ? item.presentPercentage : 0;
  223. html += `<div class="col-md-4"><div class="card p-3 mb-2 text-center">
  224. <strong>${zoneName}</strong>
  225. <div class="row mt-2">
  226. <div class="col-6">
  227. <div style="font-size: 1.3rem; font-weight: bold;">
  228. ${facialPct}%
  229. </div>
  230. <div class="small text-muted">Facial Registered %</div>
  231. </div>
  232. <div class="col-6">
  233. <div style="font-size: 1.3rem; font-weight: bold;">
  234. ${presentPct}%
  235. </div>
  236. <div class="small text-muted">Present %</div>
  237. </div>
  238. </div>
  239. </div></div>`;
  240. });
  241. html += '</div>';
  242. target.innerHTML = html;
  243. } catch (e) {
  244. target.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  245. }
  246. }
  248. function createLoader() {
  249. return '<div class="spinner-container"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
  250. }
  252. function downloadExcelFromTable(tableElement, fileName) {
  253. if (typeof XLSX === 'undefined') {
  254. alert('Excel library is not loaded. Please refresh the page and try again.');
  255. console.error('XLSX library failed to load from CDN');
  256. return;
  257. }
  258. if (!tableElement) {
  259. alert('Table not found');
  260. return;
  261. }
  262. const table = tableElement.querySelector('table');
  263. if (!table) {
  264. alert('No table to download');
  265. return;
  266. }
  267. const workbook = XLSX.utils.table_to_book(table);
  268. XLSX.writeFile(workbook, fileName);
  269. }
  271. // Expose to global scope for onclick handlers
  272. window.downloadExcelFromTable = downloadExcelFromTable;
  274. function renderTable(target, data, empType) {
  275. if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
  276. if (data.length === 0) { target.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
  277. const rows = data.slice().sort((a, b) => String(a.zone || '').localeCompare(String(b.zone || ''), undefined, { numeric: true }));
  278. // 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">Supervisor</th><th class="text-center">Present</th><th class="text-center">OD</th><th class="text-center">Leave</th><th class="text-center">Not Marked</th></tr></thead><tbody>';
  279. 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><th class="text-center">Not Marked</th></tr></thead><tbody>';
  280. rows.forEach(r => {
  281. const zone = r.zone;
  282. const total = Number(r.TotalCount) || 0;
  283. const facialRegistered = Number(r.facialRegistered) || 0;
  284. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  285. const present = Number(r.AttendanceMarked) || 0;
  286. const od = Number(r.ODCount) || 0;
  287. const leave = Number(r.LeaveCount) || 0;
  288. const notMarked = Math.max(0, total - present - od - leave - facialNotRegistered);
  289. // const supervisor = Number(r.SupervisorCount) || 0;
  291. html += `<tr><td>${zone || '-'}</td>`;
  292. html += `<td class="text-center">${total}</td>`;
  293. html += `<td class="text-center">${facialRegistered}</td>`;
  294. html += `<td class="text-center">` + (facialNotRegistered > 0
  295. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="notregistered">${facialNotRegistered}</a>`
  296. : `<span class="disabled-count">${facialNotRegistered}</span>`) + `</td>`;
  297. // html += `<td class="text-center">` + (supervisor > 0
  298. // ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="supervisor">${supervisor}</a>`
  299. // : `<span class="disabled-count">${supervisor}</span>`) + `</td>`;
  300. html += `<td class="text-center">` + (present > 0
  301. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="present">${present}</a>`
  302. : `<span class="disabled-count">${present}</span>`) + `</td>`;
  303. html += `<td class="text-center">` + (od > 0
  304. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="od">${od}</a>`
  305. : `<span class="disabled-count">${od}</span>`) + `</td>`;
  306. html += `<td class="text-center">` + (leave > 0
  307. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="leave">${leave}</a>`
  308. : `<span class="disabled-count">${leave}</span>`) + `</td>`;
  309. html += `<td class="text-center">` + (notMarked > 0
  310. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="notmarked">${notMarked}</a>`
  311. : `<span class="disabled-count">${notMarked}</span>`) + `</td>`;
  312. html += '</tr>';
  313. });
  315. // Compute grand totals
  316. let grandTotal = 0, grandSupervisor = 0, grandFacialReg = 0, grandFacialNotReg = 0, grandPresent = 0, grandOd = 0, grandLeave = 0, grandNotMarked = 0;
  317. rows.forEach(r => {
  318. const total = Number(r.TotalCount) || 0;
  319. const facialRegistered = Number(r.facialRegistered) || 0;
  320. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  321. const present = Number(r.AttendanceMarked) || 0;
  322. const od = Number(r.ODCount) || 0;
  323. const leave = Number(r.LeaveCount) || 0;
  324. grandTotal += total;
  325. // grandSupervisor += (Number(r.SupervisorCount) || 0);
  326. grandFacialReg += facialRegistered;
  327. grandFacialNotReg += facialNotRegistered;
  328. grandPresent += present;
  329. grandOd += od;
  330. grandLeave += leave;
  331. grandNotMarked += Math.max(0, total - present - od - leave - facialNotRegistered);
  332. });
  333. html += '</tbody><tfoot><tr style="font-weight:bold; background-color:#e9ecef;">';
  334. html += '<td>Total</td>';
  335. html += `<td class="text-center">${grandTotal}</td>`;
  336. html += `<td class="text-center">${grandFacialReg}</td>`;
  337. html += `<td class="text-center">${grandFacialNotReg}</td>`;
  338. // html += `<td class="text-center">${grandSupervisor}</td>`;
  339. html += `<td class="text-center">${grandPresent}</td>`;
  340. html += `<td class="text-center">${grandOd}</td>`;
  341. html += `<td class="text-center">${grandLeave}</td>`;
  342. html += `<td class="text-center">${grandNotMarked}</td>`;
  343. html += '</tr></tfoot></table>';
  344. target.innerHTML = html;
  345. }
  347. async function loadZoneSummary() {
  348. const rawFrom = document.getElementById('fromDate').value;
  349. const rawTo = document.getElementById('toDate').value;
  350. const fromDate = toApiDdMmYyyy(rawFrom);
  351. const toDate = toApiDdMmYyyy(rawTo);
  352. const parkTarget = document.getElementById('zoneSummaryPark');
  353. // const nulmTarget = document.getElementById('zoneSummaryNulm'); // NULM commented out
  355. // Show loaders
  356. parkTarget.innerHTML = createLoader();
  357. // nulmTarget.innerHTML = createLoader(); // NULM commented out
  359. try {
  360. // Load Park independently
  361. fetch(`${apiBase}/zoneSummaryPark?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
  362. .then(res => {
  363. if (!res.ok) {
  364. console.error('Park zoneSummary error', res.status);
  365. parkTarget.innerHTML = `<div class="alert alert-danger">Error loading Park summary (${res.status})</div>`;
  366. return Promise.reject(new Error('Park fetch failed'));
  367. }
  368. return res.json();
  369. })
  370. .then(parkData => {
  371. console.log('Park data loaded:', parkData);
  372. renderTable(parkTarget, parkData, 'Park');
  373. // Compute Present % (Present + OD) / Total
  374. if (Array.isArray(parkData) && parkData.length > 0) {
  375. let totalAll = 0, presentOdAll = 0;
  376. parkData.forEach(r => {
  377. totalAll += (Number(r.TotalCount) || 0);
  378. presentOdAll += (Number(r.AttendanceMarked) || 0) + (Number(r.ODCount) || 0);
  379. });
  380. const pct = totalAll > 0 ? ((presentOdAll / totalAll) * 100).toFixed(1) : '0.0';
  381. const el = document.getElementById('presentPercent');
  382. if (el) el.textContent = pct + '%';
  383. }
  384. })
  385. .catch(e => {
  386. console.error('Park error:', e);
  387. parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
  388. });
  390. // NULM loading commented out
  391. // fetch(`${apiBase}/zoneSummaryNULM?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
  392. // .then(res => {
  393. // if (!res.ok) {
  394. // console.error('NULM zoneSummary error', res.status);
  395. // nulmTarget.innerHTML = `<div class="alert alert-danger">Error loading NULM summary (${res.status})</div>`;
  396. // return Promise.reject(new Error('NULM fetch failed'));
  397. // }
  398. // return res.json();
  399. // })
  400. // .then(nulmData => {
  401. // console.log('NULM data loaded:', nulmData);
  402. // renderTable(nulmTarget, nulmData, 'NULM');
  403. // })
  404. // .catch(e => {
  405. // console.error('NULM error:', e);
  406. // nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
  407. // });
  408. } catch (e) {
  409. parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  410. // nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`; // NULM commented out
  411. }
  412. }
  414. async function loadParkWiseSummary(zone, category) {
  415. if (!zone) {
  416. alert('Please select a zone first');
  417. return;
  418. }
  419. const modalEl = document.getElementById('parkWiseSummaryModal');
  420. const modalBody = document.getElementById('parkWiseSummaryModalBody');
  421. const modalTitle = document.getElementById('parkWiseSummaryModalLabel');
  422. modalTitle.innerText = `Park-wise Summary — Zone ${zone} — ${(category || 'All').toUpperCase()}`;
  423. modalBody.innerHTML = createLoader();
  424. new bootstrap.Modal(modalEl).show();
  425. try {
  426. const rawFrom = document.getElementById('fromDate').value;
  427. const rawTo = document.getElementById('toDate').value;
  428. const fromDate = toApiDdMmYyyy(rawFrom);
  429. const toDate = toApiDdMmYyyy(rawTo);
  430. const url = `${apiBase}/parkWiseSummary?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}&zone=${encodeURIComponent(zone)}`;
  431. const res = await fetch(url);
  432. if (!res.ok) {
  433. modalBody.innerHTML = `<div class="alert alert-danger">Error loading park-wise summary (${res.status})</div>`;
  434. return;
  435. }
  436. const data = await res.json();
  437. if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
  438. if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No park-wise records</div>'; return; }
  440. let html = '<div class="table-responsive"><table class="table table-sm table-striped"><thead><tr>';
  441. html += '<th style="display:none;">Park ID</th><th>Park Name</th><th>Supervisor Name</th><th>Supervisor Mobile</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><th class="text-center">Not Marked</th>';
  442. html += '</tr></thead><tbody>';
  443. data.forEach(r => {
  444. const parkId = r.park_id || '';
  445. const park = r.park_name || '';
  446. const parkDisplay = park === '' ? (parkId || 'Unknown') : park;
  447. const supervisorName = r.supervisor_name || '-';
  448. const supervisorMobile = r.supervisor_mobile || '-';
  449. const total = Number(r.TotalCount) || 0;
  450. const facialRegistered = Number(r.facialRegistered) || 0;
  451. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  452. const present = Number(r.AttendanceMarked) || 0;
  453. const od = Number(r.ODCount) || 0;
  454. const leave = Number(r.LeaveCount) || 0;
  455. const notMarked = Math.max(0, total - present - od - leave - facialNotRegistered);
  456. html += '<tr>';
  457. html += `<td style="display:none;">${parkId}</td>`;
  458. html += `<td>${parkDisplay}</td>`;
  459. html += `<td>${supervisorName}</td>`;
  460. html += `<td>${supervisorMobile}</td>`;
  461. html += `<td class="text-center">${total}</td>`;
  462. html += `<td class="text-center">${facialRegistered}</td>`;
  463. // html += `<td class="text-center">${facialNotRegistered}</td>`;
  464. html += `<td class="text-center">` + (facialNotRegistered > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-parkid="${parkId}" data-parkname="${parkDisplay}" data-category="notregistered">${facialNotRegistered}</a>` : `<span class="disabled-count">${facialNotRegistered}</span>`) + `</td>`;
  465. html += `<td class="text-center">` + (present > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-parkid="${parkId}" data-parkname="${parkDisplay}" data-category="present">${present}</a>` : `<span class="disabled-count">${present}</span>`) + `</td>`;
  466. html += `<td class="text-center">` + (od > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-parkid="${parkId}" data-parkname="${parkDisplay}" data-category="od">${od}</a>` : `<span class="disabled-count">${od}</span>`) + `</td>`;
  467. html += `<td class="text-center">` + (leave > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-parkid="${parkId}" data-parkname="${parkDisplay}" data-category="leave">${leave}</a>` : `<span class="disabled-count">${leave}</span>`) + `</td>`;
  468. html += `<td class="text-center">` + (notMarked > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-parkid="${parkId}" data-parkname="${parkDisplay}" data-category="notmarked">${notMarked}</a>` : `<span class="disabled-count">${notMarked}</span>`) + `</td>`;
  469. html += '</tr>';
  470. });
  472. // Compute grand totals for park-wise summary
  473. let grandTotal = 0, grandSupervisor = 0, grandFacialReg = 0, grandFacialNotReg = 0, grandPresent = 0, grandOd = 0, grandLeave = 0, grandNotMarked = 0;
  474. data.forEach(r => {
  475. const total = Number(r.TotalCount) || 0;
  476. const facialRegistered = Number(r.facialRegistered) || 0;
  477. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  478. const present = Number(r.AttendanceMarked) || 0;
  479. const od = Number(r.ODCount) || 0;
  480. const leave = Number(r.LeaveCount) || 0;
  481. grandTotal += total;
  482. grandFacialReg += facialRegistered;
  483. grandFacialNotReg += facialNotRegistered;
  484. grandPresent += present;
  485. grandOd += od;
  486. grandLeave += leave;
  487. grandNotMarked += Math.max(0, total - present - od - leave - facialNotRegistered);
  488. });
  489. html += '</tbody><tfoot><tr style="font-weight:bold; background-color:#e9ecef;">';
  490. html += '<td>Total</td>';
  491. html += '<td></td>';
  492. html += '<td></td>';
  493. html += `<td class="text-center">${grandTotal}</td>`;
  494. html += `<td class="text-center">${grandFacialReg}</td>`;
  495. html += `<td class="text-center">${grandFacialNotReg}</td>`;
  496. html += `<td class="text-center">${grandPresent}</td>`;
  497. html += `<td class="text-center">${grandOd}</td>`;
  498. html += `<td class="text-center">${grandLeave}</td>`;
  499. html += `<td class="text-center">${grandNotMarked}</td>`;
  500. html += '</tr></tfoot></table></div>';
  501. modalBody.innerHTML = html;
  502. } catch (e) {
  503. modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  504. }
  505. }
  507. async function loadParkDetails(zone, type) {
  508. const modalEl = document.getElementById('detailModal');
  509. const modalBody = document.getElementById('detailModalBody');
  510. const modalTitle = document.getElementById('detailModalLabel');
  511. modalTitle.innerText = `Parks — Zone ${zone} — ${type}`;
  512. modalBody.innerHTML = createLoader();
  513. new bootstrap.Modal(modalEl).show();
  514. try {
  515. const url = `/commissionerreview/api/parks/getParkDataByZone?zone=${encodeURIComponent(zone)}&type=${encodeURIComponent(type)}`;
  516. const res = await fetch(url);
  517. if (!res.ok) {
  518. modalBody.innerHTML = `<div class="alert alert-danger">Error ${res.status}</div>`;
  519. return;
  520. }
  521. const data = await res.json();
  522. if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
  523. if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
  525. // Build table from keys of first row
  526. const cols = Object.keys(data[0]);
  527. let html = '<div class="table-responsive"><table class="table table-sm table-bordered"><thead><tr><th>S.No</th>';
  528. cols.forEach(c => html += `<th>${c.replace(/_/g, ' ')}</th>`);
  529. html += '</tr></thead><tbody>';
  530. data.forEach((row, idx) => {
  531. html += '<tr>';
  532. html += `<td>${idx + 1}</td>`;
  533. cols.forEach(c => html += `<td>${row[c] != null ? row[c] : '-'}</td>`);
  534. html += '</tr>';
  535. });
  536. html += '</tbody></table></div>';
  537. modalBody.innerHTML = html;
  538. } catch (e) {
  539. modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  540. }
  541. }
  543. // loadDetailed may be called with explicit empType/category/zone (when clicking a zone count)
  544. async function loadDetailed(empType, category, zoneVal, parkId, parkName) {
  545. // show details in modal
  546. const rawFrom = document.getElementById('fromDate').value;
  547. const rawTo = document.getElementById('toDate').value;
  548. const fromDate = toApiDdMmYyyy(rawFrom);
  549. const toDate = toApiDdMmYyyy(rawTo);
  550. const modalEl = document.getElementById('detailModal');
  551. const modalBody = document.getElementById('detailModalBody');
  552. const modalTitle = document.getElementById('detailModalLabel');
  553. if (!empType || !category || !zoneVal) {
  554. modalTitle.innerText = 'Details';
  555. modalBody.innerHTML = '<div class="text-warning">Missing parameters. Click a count to view details.</div>';
  556. new bootstrap.Modal(modalEl).show();
  557. return;
  558. }
  560. let titleSuffix = parkName ? ` — ${parkName} - ${parkId}` : '';
  561. modalTitle.innerText = `${empType} — Zone ${zoneVal}${titleSuffix} — ${category.toUpperCase()} (${rawFrom} → ${rawTo})`;
  562. modalBody.innerHTML = createLoader();
  563. // Show modal immediately with loader
  564. new bootstrap.Modal(modalEl).show();
  566. try {
  567. let url = `${apiBase}/detailed?empType=${encodeURIComponent(empType)}&category=${encodeURIComponent(category)}&fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`;
  568. url += `&zone=${encodeURIComponent(zoneVal)}`;
  569. if (parkId) {
  570. url += `&parkId=${encodeURIComponent(parkId)}`;
  571. }
  572. const res = await fetch(url);
  573. if (!res.ok) {
  574. const text = await res.text().catch(() => '');
  575. modalBody.innerHTML = `<div class="alert alert-danger">Error ${res.status}: ${text}</div>`;
  576. return;
  577. }
  578. const data = await res.json();
  579. if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
  580. if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
  582. // Define columns to display based on category
  583. let displayColumns = [];
  584. const catLower = (category || 'present').toLowerCase();
  586. if (catLower === 'present') {
  587. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
  588. if (empType === 'Park') displayColumns.push('park_name');
  589. displayColumns.push('intime', 'inphoto', 'outtime', 'outphoto');
  590. } else if (catLower === 'leave') {
  591. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
  592. if (empType === 'Park') displayColumns.push('park_name');
  593. displayColumns.push('leavedatetime', 'leaveby');
  594. } else if (catLower === 'od') {
  595. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
  596. if (empType === 'Park') displayColumns.push('park_name');
  597. displayColumns.push('odtime', 'odby');
  598. } else if (catLower === 'notmarked') {
  599. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'image'];
  600. // if (empType === 'Park') displayColumns.push('park_name');
  601. } else if (catLower === 'notregistered') {
  602. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno'];
  603. // if (empType === 'Park') displayColumns.push('park_name');
  604. } else if (catLower === 'supervisor') {
  605. displayColumns = ['supervisor_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno'];
  606. } else {
  607. displayColumns = Object.keys(data[0]);
  608. }
  610. // Filter data to include only displayColumns, handle case-insensitive matching
  611. const filteredData = data.map(row => {
  612. const filtered = {};
  613. displayColumns.forEach(col => {
  614. // Try exact match first, then case-insensitive
  615. const key = Object.keys(row).find(k => k === col || k.toLowerCase() === col.toLowerCase());
  616. if (key) {
  617. filtered[col] = row[key];
  618. }
  619. });
  620. return filtered;
  621. });
  623. function prettyName(key) {
  624. const map = {
  625. enrollment_id: 'Enrollment ID',
  626. name: 'Name',
  627. designation: 'Designation',
  628. department: 'Department',
  629. park_name: 'Park Name',
  630. intime: 'In Time',
  631. inphoto: 'In Photo',
  632. outtime: 'Out Time',
  633. outphoto: 'Out Photo',
  634. leavedatetime: 'Leave DateTime',
  635. leaveby: 'Leave By',
  636. odtime: 'OD DateTime',
  637. odby: 'OD By',
  638. incharge_name: 'Incharge Name',
  639. incharge_phoneno: 'Incharge Contact',
  640. appversion: 'App Version',
  641. apptype: 'App Type',
  642. location: 'Location',
  643. image: 'Image',
  644. supervisor_id: 'Supervisor ID',
  645. };
  646. if (map[key]) return map[key];
  647. return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
  648. }
  650. let html = '<div class="table-responsive"><table class="table table-sm table-bordered"><thead><tr>';
  651. // add serial number header
  652. html += '<th>S.No</th>';
  653. displayColumns.forEach(k => {
  654. html += `<th>${prettyName(k)}</th>`;
  655. });
  656. html += '</tr></thead><tbody>';
  657. filteredData.forEach((row, idx) => {
  658. html += '<tr>';
  659. // serial number cell
  660. html += `<td>${idx + 1}</td>`;
  661. displayColumns.forEach(k => {
  662. const val = row[k];
  663. // Handle photo columns - show as thumbnail if it's an image
  664. // if ((k === 'inphoto' || k === 'outphoto') && val) {
  665. // 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>`;
  666. // } else {
  667. // html += `<td>${val != null ? val : '-'}</td>`;
  668. // }
  670. if ((k === 'inphoto' || k === 'outphoto' || k === 'image') && val) {
  671. html += `<td>
  672. <img src="${val}" alt="photo"
  673. style="max-width: 100px; max-height: 100px; cursor: pointer;"
  674. onclick="showImageModal('${val}')">
  675. </td>`;
  676. } else {
  677. html += `<td>${val != null ? val : '-'}</td>`;
  678. }
  679. });
  680. html += '</tr>';
  681. });
  682. html += '</tbody></table></div>';
  683. modalBody.innerHTML = html;
  684. } catch (e) {
  685. modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  686. }
  687. }
  691. document.addEventListener('DOMContentLoaded', () => {
  692. setDefaults();
  693. document.getElementById('loadSummaryBtn').addEventListener('click', () => {
  694. const rawFrom = document.getElementById('fromDate').value;
  695. const rawTo = document.getElementById('toDate').value;
  696. if (rawFrom && rawTo && rawTo < rawFrom) {
  697. alert('To date must be the same as or later than From date');
  698. return;
  699. }
  700. loadAbstractCounts(); loadZoneWisePercentage(); loadZoneSummary();
  701. });
  702. // delegate clicks: zone links -> park-wise summary, zone counts -> detailed, park counts -> park-details
  703. document.addEventListener('click', (ev) => {
  704. const zoneLink = ev.target.closest && ev.target.closest('.zone-link');
  705. if (zoneLink) {
  706. ev.preventDefault();
  707. const zone = zoneLink.getAttribute('data-zone');
  708. loadParkWiseSummary(zone);
  709. return;
  710. }
  712. const zoneAnchor = ev.target.closest && ev.target.closest('.zone-count');
  713. if (zoneAnchor) {
  714. ev.preventDefault();
  715. const zone = zoneAnchor.getAttribute('data-zone');
  716. const empType = zoneAnchor.getAttribute('data-emptype');
  717. const category = zoneAnchor.getAttribute('data-category');
  718. // Supervisor: show employee details directly (no park-wise drill-down)
  719. if (category === 'supervisor') {
  720. loadDetailed(empType, category, zone);
  721. } else if (empType === 'Park') {
  722. loadParkWiseSummary(zone, category);
  723. }
  724. // NULM branch commented out
  725. // else {
  726. // loadDetailed(empType, category, zone);
  727. // }
  728. return;
  729. }
  731. const parkAnchor = ev.target.closest && ev.target.closest('.park-count');
  732. if (parkAnchor) {
  733. ev.preventDefault();
  734. const zone = parkAnchor.getAttribute('data-zone');
  735. const type = parkAnchor.getAttribute('data-type');
  736. loadParkDetails(zone, type);
  737. return;
  738. }
  740. const parkEmployeeAnchor = ev.target.closest && ev.target.closest('.park-employee-count');
  741. if (parkEmployeeAnchor) {
  742. ev.preventDefault();
  743. const zone = parkEmployeeAnchor.getAttribute('data-zone');
  744. const parkId = parkEmployeeAnchor.getAttribute('data-parkid');
  745. const parkName = parkEmployeeAnchor.getAttribute('data-parkname');
  746. const category = parkEmployeeAnchor.getAttribute('data-category');
  747. loadDetailed('Park', category, zone, parkId, parkName);
  748. return;
  749. }
  750. });
  751. // set date constraints and load initial
  752. setDateLimits();
  753. // load initial
  754. loadAbstractCounts();
  755. loadZoneWisePercentage();
  756. loadZoneSummary();
  757. });
  759. })();
  760. </script>
  761. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  762. <!-- Park-wise Summary Modal -->
  763. <div class="modal fade" id="parkWiseSummaryModal" tabindex="-1" aria-labelledby="parkWiseSummaryModalLabel"
  764. aria-hidden="true">
  765. <!-- <div class="modal-dialog modal-lg modal-dialog-scrollable"> -->
  766. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  767. <div class="modal-content">
  768. <div class="modal-header">
  769. <h5 class="modal-title" id="parkWiseSummaryModalLabel">Park-wise Summary</h5>
  770. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  771. </div>
  772. <div class="modal-body" id="parkWiseSummaryModalBody">
  773. Loading...
  774. </div>
  775. <div class="modal-footer">
  776. <button type="button" class="btn btn-primary"
  777. onclick="downloadExcelFromTable(document.getElementById('parkWiseSummaryModal'), 'park_wise_summary.xlsx')">
  778. <i class="bi bi-download"></i> Download Excel
  779. </button>
  780. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  781. </div>
  782. </div>
  783. </div>
  784. </div>
  786. <!-- Detail modal -->
  787. <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
  788. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  789. <!-- <div class="modal-dialog modal-fullscreen modal-dialog-scrollable"> -->
  790. <div class="modal-content">
  791. <div class="modal-header">
  792. <h5 class="modal-title" id="detailModalLabel">Details</h5>
  793. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  794. </div>
  795. <div class="modal-body" id="detailModalBody">
  796. Loading...
  797. </div>
  798. <div class="modal-footer">
  799. <button type="button" class="btn btn-primary"
  800. onclick="downloadExcelFromTable(document.getElementById('detailModal'), 'employee_details.xlsx')">
  801. <i class="bi bi-download"></i> Download Excel
  802. </button>
  803. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  804. </div>
  805. </div>
  806. </div>
  807. </div>
  809. <!-- Image Preview Modal -->
  810. <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
  811. <div class="modal-dialog modal-dialog-centered modal-lg">
  812. <div class="modal-content">
  813. <div class="modal-header">
  814. <h5 class="modal-title">Photo Preview</h5>
  815. <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  816. </div>
  817. <div class="modal-body text-center">
  818. <img id="previewImage" src="" class="img-fluid" style="max-height: 500px;">
  819. </div>
  820. </div>
  821. </div>
  822. </div>
  823. </body>
  825. </html>