Attendance dashbaord updated

src/main/java/com/gcc/commissionerreview/service/AttendanceService.java

@@ -120,6 +120,7 @@ public class AttendanceService {
         }
 
         String sql = "SELECT et.enrollment_id, et.name, et.designation, et.department, et.incharge_name, et.incharge_phoneno, et.emp_id, et.park_name, "
+            + "ifnull(att.appversion,'') as appversion, ifnull(att.apptype,'')as apptype, ifnull(att.location,'') as location,  "
             + "DATE_FORMAT(att.indatetime, '%d-%m-%Y %h:%i %p') as intime, att.inphoto as inphoto, att.inby, "
             + "DATE_FORMAT(att.outdatetime, '%d-%m-%Y %h:%i %p') as outtime, att.outphoto as outphoto, att.outby, "
             + "DATE_FORMAT(att.oddatetime, '%d-%m-%Y %h:%i %p') as odtime, att.odby, et.zone, "

src/main/resources/templates/modules/attendance-dashboard.html

@@ -7,6 +7,8 @@
   <title>Attendance Dashboard</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
   <style>
     .spinner-container {
       display: flex;
@@ -96,10 +98,16 @@
         <div id="zoneSummaryNulm"></div>
       </div>
     </div>
-
   </div>
 
   <script>
+
+    function showImageModal(imageSrc) {
+      document.getElementById("previewImage").src = imageSrc;
+      var modal = new bootstrap.Modal(document.getElementById('imagePreviewModal'));
+      modal.show();
+    }
+
     (function () {
       const apiBase = '/commissionerreview/api/attendanceController';
 
@@ -433,15 +441,15 @@
           const catLower = (category || 'present').toLowerCase();
 
           if (catLower === 'present') {
-            displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
+            displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
             if (empType === 'Park') displayColumns.push('park_name');
             displayColumns.push('intime', 'inphoto', 'outtime', 'outphoto');
           } else if (catLower === 'leave') {
-            displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
+            displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
             if (empType === 'Park') displayColumns.push('park_name');
             displayColumns.push('leavedatetime', 'leaveby');
           } else if (catLower === 'od') {
-            displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
+            displayColumns = ['enrollment_id', 'name', 'designation', 'department', 'incharge_name', 'incharge_phoneno', 'App Version', 'App Type', 'Location'];
             if (empType === 'Park') displayColumns.push('park_name');
             displayColumns.push('odtime', 'odby');
           } else {
@@ -476,6 +484,11 @@
               leaveby: 'Leave By',
               odtime: 'OD DateTime',
               odby: 'OD By',
+              incharge_name: 'Incharge Name',
+              incharge_phoneno: 'Incharge Contact',
+              appversion: 'App Version',
+              apptype: 'App Type',
+              location: 'Location'
             };
             if (map[key]) return map[key];
             return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
@@ -495,8 +508,18 @@
             displayColumns.forEach(k => {
               const val = row[k];
               // Handle photo columns - show as thumbnail if it's an image
+              // if ((k === 'inphoto' || k === 'outphoto') && val) {
+              //   html += `<td><img src="${val}" alt="photo" style="max-width: 100px; max-height: 100px; cursor: pointer;" onclick="this.style.maxWidth='500px'; this.style.maxHeight='500px';"></td>`;
+              // } else {
+              //   html += `<td>${val != null ? val : '-'}</td>`;
+              // }
+
               if ((k === 'inphoto' || k === 'outphoto') && val) {
-                html += `<td><img src="${val}" alt="photo" style="max-width: 100px; max-height: 100px; cursor: pointer;" onclick="this.style.maxWidth='500px'; this.style.maxHeight='500px';"></td>`;
+                html += `<td>
+                <img src="${val}" alt="photo"
+                     style="max-width: 100px; max-height: 100px; cursor: pointer;"
+                     onclick="showImageModal('${val}')">
+             </td>`;
               } else {
                 html += `<td>${val != null ? val : '-'}</td>`;
               }
@@ -510,6 +533,8 @@
         }
       }
 
+
+
       document.addEventListener('DOMContentLoaded', () => {
         setDefaults();
         document.getElementById('loadSummaryBtn').addEventListener('click', () => {
@@ -619,6 +644,21 @@
       </div>
     </div>
   </div>
+
+  <!-- Image Preview Modal -->
+  <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Photo Preview</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body text-center">
+          <img id="previewImage" src="" class="img-fluid" style="max-height: 500px;">
+        </div>
+      </div>
+    </div>
+  </div>
 </body>
 
 </html>