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.
43 Commits
1 Branch
0 Tags
2.2 MiB
Tree: a6d2374058
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'a6d2374058'
${ noResults }
commissioner_review_1_may2025/src/main/resources/templates/modules/attendance-dashboard.html

879 lines
42 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
​
Park Attendance Dashboard updated
7 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
​
changes added in attendance service and attendance dashboard page
8 months ago
Attendance Dashboard controller and service updated
8 months ago
changes added in attendance service and attendance dashboard page
8 months ago
Attendance Dashboard controller and service updated
8 months ago
​
changes added in attendance service and attendance dashboard page
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
​
​
​
Park Attendance Dashboard updated
7 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Park Attendance Dashboard updated
7 months ago
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
Park Attendance Dashboard updated
7 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
​
​
Park Attendance Dashboard updated
7 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Attendance Dashboard - Park wise summary added
8 months ago
​
Park Attendance Dashboard Updated code
8 months ago
Park Attendance Dashboard updated
7 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
​
​
​
​
Park Attendance Dashboard updated
7 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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Park Attendance Dashboard updated
7 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
​
Park Attendance Dashboard updated
7 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
​
​
​
​
​
Park Attendance Dashboard updated
7 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 > 0
  293. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="total">${total}</a>`
  294. : `<span class="disabled-count">${total}</span>`) + `</td>`;
  295. html += `<td class="text-center">${facialRegistered}</td>`;
  296. html += `<td class="text-center">` + (facialNotRegistered > 0
  297. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="notregistered">${facialNotRegistered}</a>`
  298. : `<span class="disabled-count">${facialNotRegistered}</span>`) + `</td>`;
  299. // html += `<td class="text-center">` + (supervisor > 0
  300. // ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="supervisor">${supervisor}</a>`
  301. // : `<span class="disabled-count">${supervisor}</span>`) + `</td>`;
  302. html += `<td class="text-center">` + (present > 0
  303. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="present">${present}</a>`
  304. : `<span class="disabled-count">${present}</span>`) + `</td>`;
  305. html += `<td class="text-center">` + (od > 0
  306. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="od">${od}</a>`
  307. : `<span class="disabled-count">${od}</span>`) + `</td>`;
  308. html += `<td class="text-center">` + (leave > 0
  309. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="leave">${leave}</a>`
  310. : `<span class="disabled-count">${leave}</span>`) + `</td>`;
  311. html += `<td class="text-center">` + (notMarked > 0
  312. ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="notmarked">${notMarked}</a>`
  313. : `<span class="disabled-count">${notMarked}</span>`) + `</td>`;
  314. html += '</tr>';
  315. });
  317. // Compute grand totals
  318. let grandTotal = 0, grandSupervisor = 0, grandFacialReg = 0, grandFacialNotReg = 0, grandPresent = 0, grandOd = 0, grandLeave = 0, grandNotMarked = 0;
  319. rows.forEach(r => {
  320. const total = Number(r.TotalCount) || 0;
  321. const facialRegistered = Number(r.facialRegistered) || 0;
  322. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  323. const present = Number(r.AttendanceMarked) || 0;
  324. const od = Number(r.ODCount) || 0;
  325. const leave = Number(r.LeaveCount) || 0;
  326. grandTotal += total;
  327. // grandSupervisor += (Number(r.SupervisorCount) || 0);
  328. grandFacialReg += facialRegistered;
  329. grandFacialNotReg += facialNotRegistered;
  330. grandPresent += present;
  331. grandOd += od;
  332. grandLeave += leave;
  333. grandNotMarked += Math.max(0, total - present - od - leave - facialNotRegistered);
  334. });
  335. html += '</tbody><tfoot><tr style="font-weight:bold; background-color:#e9ecef;">';
  336. html += '<td>Total</td>';
  337. html += `<td class="text-center">${grandTotal}</td>`;
  338. html += `<td class="text-center">${grandFacialReg}</td>`;
  339. html += `<td class="text-center">${grandFacialNotReg}</td>`;
  340. // html += `<td class="text-center">${grandSupervisor}</td>`;
  341. html += `<td class="text-center">${grandPresent}</td>`;
  342. html += `<td class="text-center">${grandOd}</td>`;
  343. html += `<td class="text-center">${grandLeave}</td>`;
  344. html += `<td class="text-center">${grandNotMarked}</td>`;
  345. html += '</tr></tfoot></table>';
  346. target.innerHTML = html;
  347. }
  349. async function loadZoneSummary() {
  350. const rawFrom = document.getElementById('fromDate').value;
  351. const rawTo = document.getElementById('toDate').value;
  352. const fromDate = toApiDdMmYyyy(rawFrom);
  353. const toDate = toApiDdMmYyyy(rawTo);
  354. const parkTarget = document.getElementById('zoneSummaryPark');
  355. // const nulmTarget = document.getElementById('zoneSummaryNulm'); // NULM commented out
  357. // Show loaders
  358. parkTarget.innerHTML = createLoader();
  359. // nulmTarget.innerHTML = createLoader(); // NULM commented out
  361. try {
  362. // Load Park independently
  363. fetch(`${apiBase}/zoneSummaryPark?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
  364. .then(res => {
  365. if (!res.ok) {
  366. console.error('Park zoneSummary error', res.status);
  367. parkTarget.innerHTML = `<div class="alert alert-danger">Error loading Park summary (${res.status})</div>`;
  368. return Promise.reject(new Error('Park fetch failed'));
  369. }
  370. return res.json();
  371. })
  372. .then(parkData => {
  373. console.log('Park data loaded:', parkData);
  374. renderTable(parkTarget, parkData, 'Park');
  375. // Compute Present % (Present + OD) / Total
  376. if (Array.isArray(parkData) && parkData.length > 0) {
  377. let facialRegisteredAll = 0, presentOdAll = 0;
  378. parkData.forEach(r => {
  379. facialRegisteredAll += (Number(r.facialRegistered) || 0);
  380. presentOdAll += (Number(r.AttendanceMarked) || 0) + (Number(r.ODCount) || 0);
  381. });
  382. const pct = facialRegisteredAll > 0 ? ((presentOdAll / facialRegisteredAll) * 100).toFixed(1) : '0.0';
  383. const el = document.getElementById('presentPercent');
  384. if (el) el.textContent = pct + '%';
  385. }
  386. })
  387. .catch(e => {
  388. console.error('Park error:', e);
  389. parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
  390. });
  392. // NULM loading commented out
  393. // fetch(`${apiBase}/zoneSummaryNULM?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
  394. // .then(res => {
  395. // if (!res.ok) {
  396. // console.error('NULM zoneSummary error', res.status);
  397. // nulmTarget.innerHTML = `<div class="alert alert-danger">Error loading NULM summary (${res.status})</div>`;
  398. // return Promise.reject(new Error('NULM fetch failed'));
  399. // }
  400. // return res.json();
  401. // })
  402. // .then(nulmData => {
  403. // console.log('NULM data loaded:', nulmData);
  404. // renderTable(nulmTarget, nulmData, 'NULM');
  405. // })
  406. // .catch(e => {
  407. // console.error('NULM error:', e);
  408. // nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
  409. // });
  410. } catch (e) {
  411. parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  412. // nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`; // NULM commented out
  413. }
  414. }
  416. async function loadParkWiseSummary(zone, category) {
  417. if (!zone) {
  418. alert('Please select a zone first');
  419. return;
  420. }
  421. const modalEl = document.getElementById('parkWiseSummaryModal');
  422. const modalBody = document.getElementById('parkWiseSummaryModalBody');
  423. const modalTitle = document.getElementById('parkWiseSummaryModalLabel');
  424. modalTitle.innerText = `Park-wise Summary — Zone ${zone} — ${(category || 'All').toUpperCase()}`;
  425. modalBody.innerHTML = createLoader();
  426. new bootstrap.Modal(modalEl).show();
  427. try {
  428. const rawFrom = document.getElementById('fromDate').value;
  429. const rawTo = document.getElementById('toDate').value;
  430. const fromDate = toApiDdMmYyyy(rawFrom);
  431. const toDate = toApiDdMmYyyy(rawTo);
  432. const url = `${apiBase}/parkWiseSummary?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}&zone=${encodeURIComponent(zone)}`;
  433. const res = await fetch(url);
  434. if (!res.ok) {
  435. modalBody.innerHTML = `<div class="alert alert-danger">Error loading park-wise summary (${res.status})</div>`;
  436. return;
  437. }
  438. const data = await res.json();
  439. if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
  440. if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No park-wise records</div>'; return; }
  442. // Filter parks: when a category is selected, only show parks with count > 0 for that category
  443. const catLower = (category || '').toLowerCase();
  444. const displayData = !catLower ? data : data.filter(r => {
  445. const total = Number(r.TotalCount) || 0;
  446. const present = Number(r.AttendanceMarked) || 0;
  447. const od = Number(r.ODCount) || 0;
  448. const leave = Number(r.LeaveCount) || 0;
  449. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  450. const notMarked = Math.max(0, total - present - od - leave - facialNotRegistered);
  451. if (catLower === 'total') return total > 0;
  452. if (catLower === 'present') return present > 0;
  453. if (catLower === 'od') return od > 0;
  454. if (catLower === 'leave') return leave > 0;
  455. if (catLower === 'notmarked') return notMarked > 0;
  456. if (catLower === 'notregistered') return facialNotRegistered > 0;
  457. return true;
  458. });
  460. if (displayData.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No parks with ' + (category || '').toUpperCase() + ' count</div>'; return; }
  462. const showAll = !catLower;
  464. let html = '<div class="table-responsive"><table class="table table-sm table-striped"><thead><tr>';
  465. html += '<th style="display:none;">Park ID</th><th>Park Name</th><th>Supervisor Name</th><th>Supervisor Mobile</th>';
  466. if (showAll) {
  467. html += '<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>';
  468. } else {
  469. const categoryLabel = { present: 'Present', od: 'OD', leave: 'Leave', notmarked: 'Not Marked', notregistered: 'Facial Not Registered' };
  470. html += `<th class="text-center">${categoryLabel[catLower] || category}</th>`;
  471. }
  472. html += '</tr></thead><tbody>';
  473. displayData.forEach(r => {
  474. const parkId = r.park_id || '';
  475. const park = r.park_name || '';
  476. const parkDisplay = park === '' ? (parkId || 'Unknown') : park;
  477. const supervisorName = r.supervisor_name || '-';
  478. const supervisorMobile = r.supervisor_mobile || '-';
  479. const total = Number(r.TotalCount) || 0;
  480. const facialRegistered = Number(r.facialRegistered) || 0;
  481. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  482. const present = Number(r.AttendanceMarked) || 0;
  483. const od = Number(r.ODCount) || 0;
  484. const leave = Number(r.LeaveCount) || 0;
  485. const notMarked = Math.max(0, total - present - od - leave - facialNotRegistered);
  486. html += '<tr>';
  487. html += `<td style="display:none;">${parkId}</td>`;
  488. html += `<td>${parkDisplay}</td>`;
  489. html += `<td>${supervisorName}</td>`;
  490. html += `<td>${supervisorMobile}</td>`;
  491. if (showAll) {
  492. html += `<td class="text-center">${total}</td>`;
  493. html += `<td class="text-center">${facialRegistered}</td>`;
  494. 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>`;
  495. 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>`;
  496. 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>`;
  497. 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>`;
  498. 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>`;
  499. } else {
  500. // Show only the selected category column
  501. let catValue = 0;
  502. if (catLower === 'present') catValue = present;
  503. else if (catLower === 'od') catValue = od;
  504. else if (catLower === 'leave') catValue = leave;
  505. else if (catLower === 'notmarked') catValue = notMarked;
  506. else if (catLower === 'notregistered') catValue = facialNotRegistered;
  507. html += `<td class="text-center">` + (catValue > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-parkid="${parkId}" data-parkname="${parkDisplay}" data-category="${catLower}">${catValue}</a>` : `<span class="disabled-count">${catValue}</span>`) + `</td>`;
  508. }
  509. html += '</tr>';
  510. });
  512. // Compute grand totals from ALL data to match zone summary (no count mismatch)
  513. let grandTotal = 0, grandFacialReg = 0, grandFacialNotReg = 0, grandPresent = 0, grandOd = 0, grandLeave = 0, grandNotMarked = 0;
  514. data.forEach(r => {
  515. const total = Number(r.TotalCount) || 0;
  516. const facialRegistered = Number(r.facialRegistered) || 0;
  517. const facialNotRegistered = Number(r.facialNotRegistered) || 0;
  518. const present = Number(r.AttendanceMarked) || 0;
  519. const od = Number(r.ODCount) || 0;
  520. const leave = Number(r.LeaveCount) || 0;
  521. grandTotal += total;
  522. grandFacialReg += facialRegistered;
  523. grandFacialNotReg += facialNotRegistered;
  524. grandPresent += present;
  525. grandOd += od;
  526. grandLeave += leave;
  527. grandNotMarked += Math.max(0, total - present - od - leave - facialNotRegistered);
  528. });
  529. html += '</tbody><tfoot><tr style="font-weight:bold; background-color:#e9ecef;">';
  530. html += '<td>Total</td>';
  531. html += '<td></td>';
  532. html += '<td></td>';
  533. if (showAll) {
  534. html += `<td class="text-center">${grandTotal}</td>`;
  535. html += `<td class="text-center">${grandFacialReg}</td>`;
  536. html += `<td class="text-center">${grandFacialNotReg}</td>`;
  537. html += `<td class="text-center">${grandPresent}</td>`;
  538. html += `<td class="text-center">${grandOd}</td>`;
  539. html += `<td class="text-center">${grandLeave}</td>`;
  540. html += `<td class="text-center">${grandNotMarked}</td>`;
  541. } else {
  542. let grandCatValue = 0;
  543. if (catLower === 'present') grandCatValue = grandPresent;
  544. else if (catLower === 'od') grandCatValue = grandOd;
  545. else if (catLower === 'leave') grandCatValue = grandLeave;
  546. else if (catLower === 'notmarked') grandCatValue = grandNotMarked;
  547. else if (catLower === 'notregistered') grandCatValue = grandFacialNotReg;
  548. html += `<td class="text-center">${grandCatValue}</td>`;
  549. }
  550. html += '</tr></tfoot></table></div>';
  551. modalBody.innerHTML = html;
  552. } catch (e) {
  553. modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  554. }
  555. }
  557. async function loadParkDetails(zone, type) {
  558. const modalEl = document.getElementById('detailModal');
  559. const modalBody = document.getElementById('detailModalBody');
  560. const modalTitle = document.getElementById('detailModalLabel');
  561. modalTitle.innerText = `Parks — Zone ${zone} — ${type}`;
  562. modalBody.innerHTML = createLoader();
  563. new bootstrap.Modal(modalEl).show();
  564. try {
  565. const url = `/commissionerreview/api/parks/getParkDataByZone?zone=${encodeURIComponent(zone)}&type=${encodeURIComponent(type)}`;
  566. const res = await fetch(url);
  567. if (!res.ok) {
  568. modalBody.innerHTML = `<div class="alert alert-danger">Error ${res.status}</div>`;
  569. return;
  570. }
  571. const data = await res.json();
  572. if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
  573. if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
  575. // Build table from keys of first row
  576. const cols = Object.keys(data[0]);
  577. let html = '<div class="table-responsive"><table class="table table-sm table-bordered"><thead><tr><th>S.No</th>';
  578. cols.forEach(c => html += `<th>${c.replace(/_/g, ' ')}</th>`);
  579. html += '</tr></thead><tbody>';
  580. data.forEach((row, idx) => {
  581. html += '<tr>';
  582. html += `<td>${idx + 1}</td>`;
  583. cols.forEach(c => html += `<td>${row[c] != null ? row[c] : '-'}</td>`);
  584. html += '</tr>';
  585. });
  586. html += '</tbody></table></div>';
  587. modalBody.innerHTML = html;
  588. } catch (e) {
  589. modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  590. }
  591. }
  593. // loadDetailed may be called with explicit empType/category/zone (when clicking a zone count)
  594. async function loadDetailed(empType, category, zoneVal, parkId, parkName) {
  595. // show details in modal
  596. const rawFrom = document.getElementById('fromDate').value;
  597. const rawTo = document.getElementById('toDate').value;
  598. const fromDate = toApiDdMmYyyy(rawFrom);
  599. const toDate = toApiDdMmYyyy(rawTo);
  600. const modalEl = document.getElementById('detailModal');
  601. const modalBody = document.getElementById('detailModalBody');
  602. const modalTitle = document.getElementById('detailModalLabel');
  603. if (!empType || !category || !zoneVal) {
  604. modalTitle.innerText = 'Details';
  605. modalBody.innerHTML = '<div class="text-warning">Missing parameters. Click a count to view details.</div>';
  606. new bootstrap.Modal(modalEl).show();
  607. return;
  608. }
  610. let titleSuffix = parkName ? ` — ${parkName} - ${parkId}` : '';
  611. modalTitle.innerText = `${empType} — Zone ${zoneVal}${titleSuffix} — ${category.toUpperCase()} (${rawFrom} → ${rawTo})`;
  612. modalBody.innerHTML = createLoader();
  613. // Show modal immediately with loader
  614. new bootstrap.Modal(modalEl).show();
  616. try {
  617. let url = `${apiBase}/detailed?empType=${encodeURIComponent(empType)}&category=${encodeURIComponent(category)}&fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`;
  618. url += `&zone=${encodeURIComponent(zoneVal)}`;
  619. if (parkId) {
  620. url += `&parkId=${encodeURIComponent(parkId)}`;
  621. }
  622. const res = await fetch(url);
  623. if (!res.ok) {
  624. const text = await res.text().catch(() => '');
  625. modalBody.innerHTML = `<div class="alert alert-danger">Error ${res.status}: ${text}</div>`;
  626. return;
  627. }
  628. const data = await res.json();
  629. if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
  630. if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
  632. // Define columns to display based on category
  633. let displayColumns = [];
  634. const catLower = (category || 'present').toLowerCase();
  636. if (catLower === 'total') {
  637. displayColumns = ['park_name', 'supervisor_name', 'supervisor_mobile', 'enrollment_id', 'name', 'emp_mobile'];
  638. } else if (catLower === 'present') {
  639. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
  640. if (empType === 'Park') displayColumns.push('park_name');
  641. displayColumns.push('intime', 'inphoto', 'outtime', 'outphoto');
  642. } else if (catLower === 'leave') {
  643. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
  644. if (empType === 'Park') displayColumns.push('park_name');
  645. displayColumns.push('leavedatetime', 'leaveby');
  646. } else if (catLower === 'od') {
  647. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
  648. if (empType === 'Park') displayColumns.push('park_name');
  649. displayColumns.push('odtime', 'odby');
  650. } else if (catLower === 'notmarked') {
  651. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'image'];
  652. // if (empType === 'Park') displayColumns.push('park_name');
  653. } else if (catLower === 'notregistered') {
  654. displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno'];
  655. // if (empType === 'Park') displayColumns.push('park_name');
  656. } else if (catLower === 'supervisor') {
  657. displayColumns = ['supervisor_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno'];
  658. } else {
  659. displayColumns = Object.keys(data[0]);
  660. }
  662. // Filter data to include only displayColumns, handle case-insensitive matching
  663. const filteredData = data.map(row => {
  664. const filtered = {};
  665. displayColumns.forEach(col => {
  666. // Try exact match first, then case-insensitive
  667. const key = Object.keys(row).find(k => k === col || k.toLowerCase() === col.toLowerCase());
  668. if (key) {
  669. filtered[col] = row[key];
  670. }
  671. });
  672. return filtered;
  673. });
  675. function prettyName(key) {
  676. const map = {
  677. enrollment_id: 'Enrollment ID',
  678. name: 'Name',
  679. designation: 'Designation',
  680. department: 'Department',
  681. park_name: 'Park Name',
  682. intime: 'In Time',
  683. inphoto: 'In Photo',
  684. outtime: 'Out Time',
  685. outphoto: 'Out Photo',
  686. leavedatetime: 'Leave DateTime',
  687. leaveby: 'Leave By',
  688. odtime: 'OD DateTime',
  689. odby: 'OD By',
  690. incharge_name: 'Incharge Name',
  691. incharge_phoneno: 'Incharge Contact',
  692. appversion: 'App Version',
  693. apptype: 'App Type',
  694. location: 'Location',
  695. image: 'Image',
  696. supervisor_id: 'Supervisor ID',
  697. supervisor_name: 'Supervisor Name',
  698. supervisor_mobile: 'Supervisor Mobile',
  699. emp_mobile: 'Employee Mobile',
  700. };
  701. if (map[key]) return map[key];
  702. return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
  703. }
  705. let html = '<div class="table-responsive"><table class="table table-sm table-bordered"><thead><tr>';
  706. // add serial number header
  707. html += '<th>S.No</th>';
  708. displayColumns.forEach(k => {
  709. html += `<th>${prettyName(k)}</th>`;
  710. });
  711. html += '</tr></thead><tbody>';
  712. filteredData.forEach((row, idx) => {
  713. html += '<tr>';
  714. // serial number cell
  715. html += `<td>${idx + 1}</td>`;
  716. displayColumns.forEach(k => {
  717. const val = row[k];
  718. // Handle photo columns - show as thumbnail if it's an image
  719. // if ((k === 'inphoto' || k === 'outphoto') && val) {
  720. // 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>`;
  721. // } else {
  722. // html += `<td>${val != null ? val : '-'}</td>`;
  723. // }
  725. if ((k === 'inphoto' || k === 'outphoto' || k === 'image') && val) {
  726. html += `<td>
  727. <img src="${val}" alt="photo"
  728. style="max-width: 100px; max-height: 100px; cursor: pointer;"
  729. onclick="showImageModal('${val}')">
  730. </td>`;
  731. } else {
  732. html += `<td>${val != null ? val : '-'}</td>`;
  733. }
  734. });
  735. html += '</tr>';
  736. });
  737. html += '</tbody></table></div>';
  738. modalBody.innerHTML = html;
  739. } catch (e) {
  740. modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
  741. }
  742. }
  746. document.addEventListener('DOMContentLoaded', () => {
  747. setDefaults();
  748. document.getElementById('loadSummaryBtn').addEventListener('click', () => {
  749. const rawFrom = document.getElementById('fromDate').value;
  750. const rawTo = document.getElementById('toDate').value;
  751. if (rawFrom && rawTo && rawTo < rawFrom) {
  752. alert('To date must be the same as or later than From date');
  753. return;
  754. }
  755. loadAbstractCounts(); loadZoneWisePercentage(); loadZoneSummary();
  756. });
  757. // delegate clicks: zone links -> park-wise summary, zone counts -> detailed, park counts -> park-details
  758. document.addEventListener('click', (ev) => {
  759. const zoneLink = ev.target.closest && ev.target.closest('.zone-link');
  760. if (zoneLink) {
  761. ev.preventDefault();
  762. const zone = zoneLink.getAttribute('data-zone');
  763. loadParkWiseSummary(zone);
  764. return;
  765. }
  767. const zoneAnchor = ev.target.closest && ev.target.closest('.zone-count');
  768. if (zoneAnchor) {
  769. ev.preventDefault();
  770. const zone = zoneAnchor.getAttribute('data-zone');
  771. const empType = zoneAnchor.getAttribute('data-emptype');
  772. const category = zoneAnchor.getAttribute('data-category');
  773. // Supervisor & Total: show employee details directly (no park-wise drill-down)
  774. if (category === 'supervisor' || category === 'total') {
  775. loadDetailed(empType, category, zone);
  776. } else if (empType === 'Park') {
  777. loadParkWiseSummary(zone, category);
  778. }
  779. // NULM branch commented out
  780. // else {
  781. // loadDetailed(empType, category, zone);
  782. // }
  783. return;
  784. }
  786. const parkAnchor = ev.target.closest && ev.target.closest('.park-count');
  787. if (parkAnchor) {
  788. ev.preventDefault();
  789. const zone = parkAnchor.getAttribute('data-zone');
  790. const type = parkAnchor.getAttribute('data-type');
  791. loadParkDetails(zone, type);
  792. return;
  793. }
  795. const parkEmployeeAnchor = ev.target.closest && ev.target.closest('.park-employee-count');
  796. if (parkEmployeeAnchor) {
  797. ev.preventDefault();
  798. const zone = parkEmployeeAnchor.getAttribute('data-zone');
  799. const parkId = parkEmployeeAnchor.getAttribute('data-parkid');
  800. const parkName = parkEmployeeAnchor.getAttribute('data-parkname');
  801. const category = parkEmployeeAnchor.getAttribute('data-category');
  802. loadDetailed('Park', category, zone, parkId, parkName);
  803. return;
  804. }
  805. });
  806. // set date constraints and load initial
  807. setDateLimits();
  808. // load initial
  809. loadAbstractCounts();
  810. loadZoneWisePercentage();
  811. loadZoneSummary();
  812. });
  814. })();
  815. </script>
  816. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  817. <!-- Park-wise Summary Modal -->
  818. <div class="modal fade" id="parkWiseSummaryModal" tabindex="-1" aria-labelledby="parkWiseSummaryModalLabel"
  819. aria-hidden="true">
  820. <!-- <div class="modal-dialog modal-lg modal-dialog-scrollable"> -->
  821. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  822. <div class="modal-content">
  823. <div class="modal-header">
  824. <h5 class="modal-title" id="parkWiseSummaryModalLabel">Park-wise Summary</h5>
  825. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  826. </div>
  827. <div class="modal-body" id="parkWiseSummaryModalBody">
  828. Loading...
  829. </div>
  830. <div class="modal-footer">
  831. <button type="button" class="btn btn-primary"
  832. onclick="downloadExcelFromTable(document.getElementById('parkWiseSummaryModal'), 'park_wise_summary.xlsx')">
  833. <i class="bi bi-download"></i> Download Excel
  834. </button>
  835. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  836. </div>
  837. </div>
  838. </div>
  839. </div>
  841. <!-- Detail modal -->
  842. <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
  843. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  844. <!-- <div class="modal-dialog modal-fullscreen modal-dialog-scrollable"> -->
  845. <div class="modal-content">
  846. <div class="modal-header">
  847. <h5 class="modal-title" id="detailModalLabel">Details</h5>
  848. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  849. </div>
  850. <div class="modal-body" id="detailModalBody">
  851. Loading...
  852. </div>
  853. <div class="modal-footer">
  854. <button type="button" class="btn btn-primary"
  855. onclick="downloadExcelFromTable(document.getElementById('detailModal'), 'employee_details.xlsx')">
  856. <i class="bi bi-download"></i> Download Excel
  857. </button>
  858. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  859. </div>
  860. </div>
  861. </div>
  862. </div>
  864. <!-- Image Preview Modal -->
  865. <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
  866. <div class="modal-dialog modal-dialog-centered modal-lg">
  867. <div class="modal-content">
  868. <div class="modal-header">
  869. <h5 class="modal-title">Photo Preview</h5>
  870. <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  871. </div>
  872. <div class="modal-body text-center">
  873. <img id="previewImage" src="" class="img-fluid" style="max-height: 500px;">
  874. </div>
  875. </div>
  876. </div>
  877. </div>
  878. </body>
  880. </html>