From 780731a031cab44693da7d2eb48dd8ed9f202e24 Mon Sep 17 00:00:00 2001
From: kanimozhi <kani04.km@gmail.com>
Date: Tue, 10 Feb 2026 11:51:20 +0530
Subject: [PATCH] Attendance Dashboard - Park wise summary added

---
 .../controller/AttendanceController.java      |  17 +-
 .../service/AttendanceService.java            |  46 +-
 .../modules/attendance-dashboard.html         | 725 +++++++++++-------
 3 files changed, 491 insertions(+), 297 deletions(-)

diff --git a/src/main/java/com/gcc/commissionerreview/controller/AttendanceController.java b/src/main/java/com/gcc/commissionerreview/controller/AttendanceController.java
index 65db546..1e0afd4 100644
--- a/src/main/java/com/gcc/commissionerreview/controller/AttendanceController.java
+++ b/src/main/java/com/gcc/commissionerreview/controller/AttendanceController.java
@@ -53,19 +53,30 @@ public class AttendanceController {
         return result;
     }
 
+    @GetMapping("/parkWiseSummary")
+    public List<Map<String, Object>> getParkWiseSummary(
+            @RequestParam(name = "fromDate", required = false) String fromDate,
+            @RequestParam(name = "toDate", required = false) String toDate,
+            @RequestParam(name = "zone", required = false) Integer zone) {
+        List<Map<String, Object>> result = attendanceService.getParkWiseSummary(fromDate, toDate, zone);
+        System.out.println("Park Wise Summary Result: " + result);  
+        return result;
+    }
+
     @GetMapping("/detailed")
     public List<Map<String, Object>> getDetailed(@RequestParam(name = "empType") String empType,
             @RequestParam(name = "category") String category,
             @RequestParam(name = "fromDate", required = false) String fromDate,
             @RequestParam(name = "toDate", required = false) String toDate,
-            @RequestParam(name = "zone", required = false) Integer zone) {
+            @RequestParam(name = "zone", required = false) Integer zone,
+            @RequestParam(name = "parkName", required = false) String parkName) {
 
-                List<Map<String, Object>> result = attendanceService.getDetailedList(empType, category, fromDate, toDate, zone);
+                List<Map<String, Object>> result = attendanceService.getDetailedList(empType, category, fromDate, toDate, zone, parkName);
                 System.out.println("Detailed Result: " + result);
 
                 return result;
 
-        // return attendanceService.getDetailedList(empType, category, fromDate, toDate, zone);
+        // return attendanceService.getDetailedList(empType, category, fromDate, toDate, zone, parkName);
     }
     
 }
diff --git a/src/main/java/com/gcc/commissionerreview/service/AttendanceService.java b/src/main/java/com/gcc/commissionerreview/service/AttendanceService.java
index bee275c..9dd6cd0 100644
--- a/src/main/java/com/gcc/commissionerreview/service/AttendanceService.java
+++ b/src/main/java/com/gcc/commissionerreview/service/AttendanceService.java
@@ -50,7 +50,6 @@ public class AttendanceService {
             toDate = LocalDate.parse(toDateStr, INPUT_FORMAT);
         }
 
-        // Convert to datetime range (start of fromDate to end of toDate)
         String fromDateTime = fromDate + " 00:00:00";
         String toDateTime = toDate + " 23:59:59";
 
@@ -68,7 +67,7 @@ public class AttendanceService {
         return jdbcTemplate.queryForList(sql, new Object[] { fromDateTime, toDateTime, fromDateTime, toDateTime, fromDateTime, toDateTime, empType });
     }
 
-    public List<Map<String, Object>> getDetailedList(String empType, String category, String fromDateStr, String toDateStr, Integer zone) {
+    public List<Map<String, Object>> getDetailedList(String empType, String category, String fromDateStr, String toDateStr, Integer zone, String parkName) {
         LocalDate fromDate;
         LocalDate toDate;
 
@@ -84,11 +83,9 @@ public class AttendanceService {
             toDate = LocalDate.parse(toDateStr, INPUT_FORMAT);
         }
 
-        // Convert to datetime range
         String fromDateTime = fromDate + " 00:00:00";
         String toDateTime = toDate + " 23:59:59";
 
-        // determine which datetime column to filter/order by
         String dateColumn;
         String filterDateColumn;
         switch (category == null ? "present" : category.toLowerCase()) {
@@ -105,7 +102,6 @@ public class AttendanceService {
                 filterDateColumn = "att.indatetime";
         }
 
-        // Base query - simplified and optimized
         String sql = "SELECT et.enrollment_id, et.name, et.designation, et.department, et.incharge_name, et.incharge_phoneno, et.emp_id, et.park_name, "
             + "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, "
@@ -127,10 +123,48 @@ public class AttendanceService {
             params.add(zone);
         }
 
+        if (parkName != null && !parkName.isEmpty()) {
+            sql += " and et.park_name = ? ";
+            params.add(parkName);
+        }
+
         sql += " order by " + dateColumn + " desc ";
 
-        System.out.println("EmpType: " + empType + ", Category: " + category + ", From: " + fromDateTime + ", To: " + toDateTime + ", Zone: " + zone);
+        System.out.println("EmpType: " + empType + ", Category: " + category + ", From: " + fromDateTime + ", To: " + toDateTime + ", Zone: " + zone + ", ParkName: " + parkName);
         return jdbcTemplate.queryForList(sql, params.toArray());
     }
+
+    public List<Map<String, Object>> getParkWiseSummary(String fromDateStr, String toDateStr, Integer zone) {
+        LocalDate fromDate;
+        LocalDate toDate;
+
+        if (fromDateStr == null || fromDateStr.trim().isEmpty()) {
+            fromDate = LocalDate.now();
+        } else {
+            fromDate = LocalDate.parse(fromDateStr, INPUT_FORMAT);
+        }
+
+        if (toDateStr == null || toDateStr.trim().isEmpty()) {
+            toDate = LocalDate.now();
+        } else {
+            toDate = LocalDate.parse(toDateStr, INPUT_FORMAT);
+        }
+        
+        String fromDateTime = fromDate + " 00:00:00";
+        String toDateTime = toDate + " 23:59:59";
+
+        System.out.println("Zone: " + zone + ", From: " + fromDateTime + ", To: " + toDateTime);
+
+        String sql = "SELECT et.park_name, count(distinct et.enrollment_id) as TotalCount, "
+                + "count(distinct case when att.indatetime >= ? and att.indatetime <= ? then att.enrollment_id end) as AttendanceMarked, "
+                + "count(distinct case when att.oddatetime >= ? and att.oddatetime <= ? then att.enrollment_id end) as ODCount, "
+                + "count(distinct case when att.leavedatetime >= ? and att.leavedatetime <= ? then att.enrollment_id end) as LeaveCount "
+                + "FROM enrollment_table et "
+                + "left join attendance att on et.enrollment_id = att.enrollment_id "
+                + "where et.isactive =1 and et.isdelete = 0 and et.emp_type = 'Park' and et.zone !=0 and et.zone = ? and et.park_name != '' "
+                + "group by et.park_name order by et.park_name";
+
+        return jdbcTemplate.queryForList(sql, new Object[] { fromDateTime, toDateTime, fromDateTime, toDateTime, fromDateTime, toDateTime, zone });
+    }
 }
 
diff --git a/src/main/resources/templates/modules/attendance-dashboard.html b/src/main/resources/templates/modules/attendance-dashboard.html
index 5c3463b..5a05560 100644
--- a/src/main/resources/templates/modules/attendance-dashboard.html
+++ b/src/main/resources/templates/modules/attendance-dashboard.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,27 +13,32 @@
       align-items: center;
       min-height: 200px;
     }
+
     .spinner-border {
       width: 3rem;
       height: 3rem;
       color: #007bff;
     }
+
     .zone-summary-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
     }
+
     @media (max-width: 768px) {
       .zone-summary-row {
         grid-template-columns: 1fr;
       }
     }
+
     .zone-summary-card {
       border: 1px solid #ddd;
       border-radius: 4px;
       padding: 15px;
       background-color: #f9f9f9;
     }
+
     .disabled-count {
       color: #6c757d;
       cursor: default;
@@ -42,6 +48,7 @@
     }
   </style>
 </head>
+
 <body class="p-3">
   <div class="container">
     <h1 class="mb-4">Attendance Dashboard</h1>
@@ -80,319 +87,460 @@
   </div>
 
   <script>
-  (function () {
-  const apiBase = '/commissionerreview/api/attendanceController';
-
-  function pad(n) { return n < 10 ? '0' + n : n; }
-
-  // convert Date -> yyyy-mm-dd for input[type=date]
-  function toIsoYyyyMmDd(date) {
-    return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate());
-  }
-
-  // convert input value (either yyyy-mm-dd or dd-mm-yyyy) -> dd-mm-yyyy for API
-  function toApiDdMmYyyy(val) {
-    if (!val) return val;
-    // if already in dd-mm-yyyy (contains two '-') and first part length 2
-    const parts = val.split('-');
-    if (parts.length === 3) {
-      if (parts[0].length === 4) {
-        // yyyy-mm-dd -> dd-mm-yyyy
-        return pad(parseInt(parts[2], 10)) + '-' + pad(parseInt(parts[1], 10)) + '-' + parts[0];
-      } else {
-        // assume already dd-mm-yyyy
-        return val;
+    (function () {
+      const apiBase = '/commissionerreview/api/attendanceController';
+
+      function pad(n) { return n < 10 ? '0' + n : n; }
+
+      // convert Date -> yyyy-mm-dd for input[type=date]
+      function toIsoYyyyMmDd(date) {
+        return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate());
       }
-    }
-    return val;
-  }
-
-  function setDefaults() {
-    const today = new Date();
-    const iso = toIsoYyyyMmDd(today);
-    document.getElementById('fromDate').value = iso;
-    document.getElementById('toDate').value = iso;
-  }
-
-  function setDateLimits() {
-    const from = document.getElementById('fromDate');
-    const to = document.getElementById('toDate');
-    const todayIso = toIsoYyyyMmDd(new Date());
-    from.max = todayIso;
-    to.max = todayIso;
-    if (from.value) to.min = from.value;
-
-    from.addEventListener('change', () => {
-      const fv = from.value;
-      if (fv) {
-        to.min = fv;
-        if (to.value && to.value < fv) to.value = fv;
-      } else {
-        to.min = '';
+
+      // convert input value (either yyyy-mm-dd or dd-mm-yyyy) -> dd-mm-yyyy for API
+      function toApiDdMmYyyy(val) {
+        if (!val) return val;
+        // if already in dd-mm-yyyy (contains two '-') and first part length 2
+        const parts = val.split('-');
+        if (parts.length === 3) {
+          if (parts[0].length === 4) {
+            // yyyy-mm-dd -> dd-mm-yyyy
+            return pad(parseInt(parts[2], 10)) + '-' + pad(parseInt(parts[1], 10)) + '-' + parts[0];
+          } else {
+            // assume already dd-mm-yyyy
+            return val;
+          }
+        }
+        return val;
       }
-    });
 
-    to.addEventListener('change', () => {
-      if (from.value && to.value && to.value < from.value) {
-        to.value = from.value;
+      function setDefaults() {
+        const today = new Date();
+        const iso = toIsoYyyyMmDd(today);
+        document.getElementById('fromDate').value = iso;
+        document.getElementById('toDate').value = iso;
       }
-    });
-  }
-
-  async function loadAbstractCounts() {
-    const target = document.getElementById('abstractCounts');
-    target.innerHTML = createLoader();
-    try {
-      const res = await fetch(apiBase + '/abstractCounts');
-      const data = await res.json();
-      if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
-      let html = '<div class="row">';
-      data.forEach(item => {
-        html += `<div class="col-md-3"><div class="card p-2 mb-2"><strong>${item.emp_type}</strong><div>${item.totalCount}</div></div></div>`;
-      });
-      html += '</div>';
-      target.innerHTML = html;
-    } catch (e) { target.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`; }
-  }
-
-  function createLoader() {
-    return '<div class="spinner-container"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
-  }
-
-  function renderTable(target, data, empType) {
-    if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
-    if (data.length === 0) { target.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
-    const rows = data.slice().sort((a,b) => String(a.zone||'').localeCompare(String(b.zone||''), undefined, {numeric: true}));
-    let html = '<table class="table table-sm table-striped"><thead><tr><th>Zone</th><th>Total</th><th>Present</th><th>OD</th><th>Leave</th></tr></thead><tbody>';
-    rows.forEach(r => {
-      const zone = r.zone;
-      const total = Number(r.TotalCount) || 0;
-      const present = Number(r.AttendanceMarked) || 0;
-      const od = Number(r.ODCount) || 0;
-      const leave = Number(r.LeaveCount) || 0;
-
-      html += `<tr><td>${zone}</td>`;
-      html += `<td>${total}</td>`;
-      html += `<td>` + (present > 0
-        ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="present">${present}</a>`
-        : `<span class="disabled-count">${present}</span>`) + `</td>`;
-      html += `<td>` + (od > 0
-        ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="od">${od}</a>`
-        : `<span class="disabled-count">${od}</span>`) + `</td>`;
-      html += `<td>` + (leave > 0
-        ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="leave">${leave}</a>`
-        : `<span class="disabled-count">${leave}</span>`) + `</td>`;
-      html += '</tr>';
-    });
-    html += '</tbody></table>';
-    target.innerHTML = html;
-  }
-
-  async function loadZoneSummary() {
-    const rawFrom = document.getElementById('fromDate').value;
-    const rawTo = document.getElementById('toDate').value;
-    const fromDate = toApiDdMmYyyy(rawFrom);
-    const toDate = toApiDdMmYyyy(rawTo);
-    const parkTarget = document.getElementById('zoneSummaryPark');
-    const nulmTarget = document.getElementById('zoneSummaryNulm');
-    
-    // Show loaders
-    parkTarget.innerHTML = createLoader();
-    nulmTarget.innerHTML = createLoader();
-    
-    try {
-      // Load Park independently
-      fetch(`${apiBase}/zoneSummaryPark?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
-        .then(res => {
-          if (!res.ok) {
-            console.error('Park zoneSummary error', res.status);
-            parkTarget.innerHTML = `<div class="alert alert-danger">Error loading Park summary (${res.status})</div>`;
-            return Promise.reject(new Error('Park fetch failed'));
+
+      function setDateLimits() {
+        const from = document.getElementById('fromDate');
+        const to = document.getElementById('toDate');
+        const todayIso = toIsoYyyyMmDd(new Date());
+        from.max = todayIso;
+        to.max = todayIso;
+        if (from.value) to.min = from.value;
+
+        from.addEventListener('change', () => {
+          const fv = from.value;
+          if (fv) {
+            to.min = fv;
+            if (to.value && to.value < fv) to.value = fv;
+          } else {
+            to.min = '';
           }
-          return res.json();
-        })
-        .then(parkData => {
-          console.log('Park data loaded:', parkData);
-          renderTable(parkTarget, parkData, 'Park');
-        })
-        .catch(e => {
-          console.error('Park error:', e);
-          parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
         });
 
-      // Load NULM independently
-      fetch(`${apiBase}/zoneSummaryNULM?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
-        .then(res => {
-          if (!res.ok) {
-            console.error('NULM zoneSummary error', res.status);
-            nulmTarget.innerHTML = `<div class="alert alert-danger">Error loading NULM summary (${res.status})</div>`;
-            return Promise.reject(new Error('NULM fetch failed'));
+        to.addEventListener('change', () => {
+          if (from.value && to.value && to.value < from.value) {
+            to.value = from.value;
           }
-          return res.json();
-        })
-        .then(nulmData => {
-          console.log('NULM data loaded:', nulmData);
-          renderTable(nulmTarget, nulmData, 'NULM');
-        })
-        .catch(e => {
-          console.error('NULM error:', e);
-          nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
         });
-    } catch (e) { 
-      parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`; 
-      nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`; 
-    }
-  }
-
-  // loadDetailed may be called with explicit empType/category/zone (when clicking a zone count)
-  async function loadDetailed(empType, category, zoneVal) {
-    // show details in modal
-    const rawFrom = document.getElementById('fromDate').value;
-    const rawTo = document.getElementById('toDate').value;
-    const fromDate = toApiDdMmYyyy(rawFrom);
-    const toDate = toApiDdMmYyyy(rawTo);
-    const modalEl = document.getElementById('detailModal');
-    const modalBody = document.getElementById('detailModalBody');
-    const modalTitle = document.getElementById('detailModalLabel');
-    if (!empType || !category || !zoneVal) {
-      modalTitle.innerText = 'Details';
-      modalBody.innerHTML = '<div class="text-warning">Missing parameters. Click a count to view details.</div>';
-      new bootstrap.Modal(modalEl).show();
-      return;
-    }
+      }
 
-    modalTitle.innerText = `${empType} — Zone ${zoneVal} — ${category.toUpperCase()} (${rawFrom} → ${rawTo})`;
-    modalBody.innerHTML = createLoader();
-    // Show modal immediately with loader
-    new bootstrap.Modal(modalEl).show();
-    
-    try {
-      let url = `${apiBase}/detailed?empType=${encodeURIComponent(empType)}&category=${encodeURIComponent(category)}&fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`;
-      url += `&zone=${encodeURIComponent(zoneVal)}`;
-      const res = await fetch(url);
-      if (!res.ok) {
-        const text = await res.text().catch(() => '');
-        modalBody.innerHTML = `<div class="alert alert-danger">Error ${res.status}: ${text}</div>`;
-        return;
+      async function loadAbstractCounts() {
+        const target = document.getElementById('abstractCounts');
+        target.innerHTML = createLoader();
+        try {
+          const res = await fetch(apiBase + '/abstractCounts');
+          const data = await res.json();
+          if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
+          let html = '<div class="row">';
+          data.forEach(item => {
+            html += `<div class="col-md-3"><div class="card p-2 mb-2"><strong>${item.emp_type}</strong><div>${item.totalCount}</div></div></div>`;
+          });
+          html += '</div>';
+          target.innerHTML = html;
+        } catch (e) { target.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`; }
       }
-      const data = await res.json();
-      if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
-      if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
-      
-      // Define columns to display based on category
-      let displayColumns = [];
-      const catLower = (category || 'present').toLowerCase();
-      
-      if (catLower === 'present') {
-        displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
-        if (empType === 'Park') displayColumns.push('park_name');
-        displayColumns.push('intime', 'inphoto', 'outtime', 'outphoto');
-      } else if (catLower === 'leave') {
-        displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
-        if (empType === 'Park') displayColumns.push('park_name');
-        displayColumns.push('leavedatetime', 'leaveby');
-      } else if (catLower === 'od') {
-        displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
-        if (empType === 'Park') displayColumns.push('park_name');
-        displayColumns.push('odtime', 'odby');
-      } else {
-        displayColumns = Object.keys(data[0]);
+
+      function createLoader() {
+        return '<div class="spinner-container"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
       }
-      
-      // Filter data to include only displayColumns, handle case-insensitive matching
-      const filteredData = data.map(row => {
-        const filtered = {};
-        displayColumns.forEach(col => {
-          // Try exact match first, then case-insensitive
-          const key = Object.keys(row).find(k => k === col || k.toLowerCase() === col.toLowerCase());
-          if (key) {
-            filtered[col] = row[key];
-          }
+
+      function renderTable(target, data, empType) {
+        if (!Array.isArray(data)) { target.innerText = JSON.stringify(data); return; }
+        if (data.length === 0) { target.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
+        const rows = data.slice().sort((a, b) => String(a.zone || '').localeCompare(String(b.zone || ''), undefined, { numeric: true }));
+        let html = '<table class="table table-sm table-striped"><thead><tr><th>Zone</th><th>Total</th><th>Present</th><th>OD</th><th>Leave</th></tr></thead><tbody>';
+        rows.forEach(r => {
+          const zone = r.zone;
+          const total = Number(r.TotalCount) || 0;
+          const present = Number(r.AttendanceMarked) || 0;
+          const od = Number(r.ODCount) || 0;
+          const leave = Number(r.LeaveCount) || 0;
+
+          html += `<tr><td>${zone || '-'}</td>`;
+          html += `<td>${total}</td>`;
+          html += `<td>` + (present > 0
+            ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="present">${present}</a>`
+            : `<span class="disabled-count">${present}</span>`) + `</td>`;
+          html += `<td>` + (od > 0
+            ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="od">${od}</a>`
+            : `<span class="disabled-count">${od}</span>`) + `</td>`;
+          html += `<td>` + (leave > 0
+            ? `<a href="#" class="zone-count" data-zone="${zone}" data-emptype="${empType}" data-category="leave">${leave}</a>`
+            : `<span class="disabled-count">${leave}</span>`) + `</td>`;
+          html += '</tr>';
         });
-        return filtered;
-      });
-      
-      function prettyName(key) {
-        const map = {
-          enrollment_id: 'Enrollment ID',
-          name: 'Name',
-          designation: 'Designation',
-          department: 'Department',
-          park_name: 'Park Name',
-          intime: 'In Time',
-          inphoto: 'In Photo',
-          outtime: 'Out Time',
-          outphoto: 'Out Photo',
-          leavedatetime: 'Leave DateTime',
-          leaveby: 'Leave By',
-          odtime: 'OD DateTime',
-          odby: 'OD By',
-        };
-        if (map[key]) return map[key];
-        return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        html += '</tbody></table>';
+        target.innerHTML = html;
       }
 
-      let html = '<div class="table-responsive"><table class="table table-sm table-bordered"><thead><tr>';
-      // add serial number header
-      html += '<th>S.No</th>';
-      displayColumns.forEach(k => {
-        html += `<th>${prettyName(k)}</th>`;
-      });
-      html += '</tr></thead><tbody>';
-      filteredData.forEach((row, idx) => {
-        html += '<tr>';
-        // serial number cell
-        html += `<td>${idx + 1}</td>`;
-        displayColumns.forEach(k => {
-          const val = row[k];
-          // Handle photo columns - show as thumbnail if it's an image
-          if ((k === 'inphoto' || k === 'outphoto') && val) {
-            html += `<td><img src="${val}" alt="photo" style="max-width: 100px; max-height: 100px; cursor: pointer;" onclick="this.style.maxWidth='500px'; this.style.maxHeight='500px';"></td>`;
-          } else {
-            html += `<td>${val != null ? val : '-'}</td>`;
+      async function loadZoneSummary() {
+        const rawFrom = document.getElementById('fromDate').value;
+        const rawTo = document.getElementById('toDate').value;
+        const fromDate = toApiDdMmYyyy(rawFrom);
+        const toDate = toApiDdMmYyyy(rawTo);
+        const parkTarget = document.getElementById('zoneSummaryPark');
+        const nulmTarget = document.getElementById('zoneSummaryNulm');
+
+        // Show loaders
+        parkTarget.innerHTML = createLoader();
+        nulmTarget.innerHTML = createLoader();
+
+        try {
+          // Load Park independently
+          fetch(`${apiBase}/zoneSummaryPark?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
+            .then(res => {
+              if (!res.ok) {
+                console.error('Park zoneSummary error', res.status);
+                parkTarget.innerHTML = `<div class="alert alert-danger">Error loading Park summary (${res.status})</div>`;
+                return Promise.reject(new Error('Park fetch failed'));
+              }
+              return res.json();
+            })
+            .then(parkData => {
+              console.log('Park data loaded:', parkData);
+              renderTable(parkTarget, parkData, 'Park');
+            })
+            .catch(e => {
+              console.error('Park error:', e);
+              parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
+            });
+
+          // Load NULM independently
+          fetch(`${apiBase}/zoneSummaryNULM?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`)
+            .then(res => {
+              if (!res.ok) {
+                console.error('NULM zoneSummary error', res.status);
+                nulmTarget.innerHTML = `<div class="alert alert-danger">Error loading NULM summary (${res.status})</div>`;
+                return Promise.reject(new Error('NULM fetch failed'));
+              }
+              return res.json();
+            })
+            .then(nulmData => {
+              console.log('NULM data loaded:', nulmData);
+              renderTable(nulmTarget, nulmData, 'NULM');
+            })
+            .catch(e => {
+              console.error('NULM error:', e);
+              nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e.message}</div>`;
+            });
+        } catch (e) {
+          parkTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
+          nulmTarget.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
+        }
+      }
+
+      async function loadParkWiseSummary(zone, category) {
+        if (!zone) {
+          alert('Please select a zone first');
+          return;
+        }
+        const modalEl = document.getElementById('parkWiseSummaryModal');
+        const modalBody = document.getElementById('parkWiseSummaryModalBody');
+        const modalTitle = document.getElementById('parkWiseSummaryModalLabel');
+        modalTitle.innerText = `Park-wise Summary — Zone ${zone} — ${(category || 'All').toUpperCase()}`;
+        modalBody.innerHTML = createLoader();
+        new bootstrap.Modal(modalEl).show();
+        try {
+          const rawFrom = document.getElementById('fromDate').value;
+          const rawTo = document.getElementById('toDate').value;
+          const fromDate = toApiDdMmYyyy(rawFrom);
+          const toDate = toApiDdMmYyyy(rawTo);
+          const url = `${apiBase}/parkWiseSummary?fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}&zone=${encodeURIComponent(zone)}`;
+          const res = await fetch(url);
+          if (!res.ok) {
+            modalBody.innerHTML = `<div class="alert alert-danger">Error loading park-wise summary (${res.status})</div>`;
+            return;
           }
+          const data = await res.json();
+          if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
+          if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No park-wise records</div>'; return; }
+
+          let html = '<div class="table-responsive"><table class="table table-sm table-striped"><thead><tr>';
+          html += '<th>Park Name</th><th>Total</th><th>Present</th><th>OD</th><th>Leave</th>';
+          html += '</tr></thead><tbody>';
+          data.forEach(r => {
+            const park = r.park_name || '-';
+            const total = Number(r.TotalCount) || 0;
+            const present = Number(r.AttendanceMarked) || 0;
+            const od = Number(r.ODCount) || 0;
+            const leave = Number(r.LeaveCount) || 0;
+            html += '<tr>';
+            html += `<td>${park}</td>`;
+            html += `<td>${total}</td>`;
+            html += `<td>` + (present > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-park="${park}" data-category="present">${present}</a>` : `<span class="disabled-count">${present}</span>`) + `</td>`;
+            html += `<td>` + (od > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-park="${park}" data-category="od">${od}</a>` : `<span class="disabled-count">${od}</span>`) + `</td>`;
+            html += `<td>` + (leave > 0 ? `<a href="#" class="park-employee-count" data-zone="${zone}" data-park="${park}" data-category="leave">${leave}</a>` : `<span class="disabled-count">${leave}</span>`) + `</td>`;
+            html += '</tr>';
+          });
+          html += '</tbody></table></div>';
+          modalBody.innerHTML = html;
+        } catch (e) {
+          modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
+        }
+      }
+
+  async function loadParkDetails(zone, type) {
+      const modalEl = document.getElementById('detailModal');
+      const modalBody = document.getElementById('detailModalBody');
+      const modalTitle = document.getElementById('detailModalLabel');
+      modalTitle.innerText = `Parks — Zone ${zone} — ${type}`;
+      modalBody.innerHTML = createLoader();
+      new bootstrap.Modal(modalEl).show();
+      try {
+        const url = `/commissionerreview/api/parks/getParkDataByZone?zone=${encodeURIComponent(zone)}&type=${encodeURIComponent(type)}`;
+        const res = await fetch(url);
+        if (!res.ok) {
+          modalBody.innerHTML = `<div class="alert alert-danger">Error ${res.status}</div>`;
+          return;
+        }
+        const data = await res.json();
+        if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
+        if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
+
+        // Build table from keys of first row
+        const cols = Object.keys(data[0]);
+        let html = '<div class="table-responsive"><table class="table table-sm table-bordered"><thead><tr><th>S.No</th>';
+        cols.forEach(c => html += `<th>${c.replace(/_/g, ' ')}</th>`);
+        html += '</tr></thead><tbody>';
+        data.forEach((row, idx) => {
+          html += '<tr>';
+          html += `<td>${idx + 1}</td>`;
+          cols.forEach(c => html += `<td>${row[c] != null ? row[c] : '-'}</td>`);
+          html += '</tr>';
         });
-        html += '</tr>';
-      });
-      html += '</tbody></table></div>';
-      modalBody.innerHTML = html;
-    } catch (e) {
-      modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
+        html += '</tbody></table></div>';
+        modalBody.innerHTML = html;
+      } catch (e) {
+        modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
+      }
     }
-  }
 
-  document.addEventListener('DOMContentLoaded', () => {
-    setDefaults();
-    document.getElementById('loadSummaryBtn').addEventListener('click', () => {
+    // loadDetailed may be called with explicit empType/category/zone (when clicking a zone count)
+    async function loadDetailed(empType, category, zoneVal, parkName) {
+      // show details in modal
       const rawFrom = document.getElementById('fromDate').value;
       const rawTo = document.getElementById('toDate').value;
-      if (rawFrom && rawTo && rawTo < rawFrom) {
-        alert('To date must be the same as or later than From date');
+      const fromDate = toApiDdMmYyyy(rawFrom);
+      const toDate = toApiDdMmYyyy(rawTo);
+      const modalEl = document.getElementById('detailModal');
+      const modalBody = document.getElementById('detailModalBody');
+      const modalTitle = document.getElementById('detailModalLabel');
+      if (!empType || !category || !zoneVal) {
+        modalTitle.innerText = 'Details';
+        modalBody.innerHTML = '<div class="text-warning">Missing parameters. Click a count to view details.</div>';
+        new bootstrap.Modal(modalEl).show();
         return;
       }
-      loadAbstractCounts(); loadZoneSummary();
-    });
-    // delegate clicks on zone counts to load detailed view
-    document.addEventListener('click', (ev) => {
-      const a = ev.target.closest && ev.target.closest('.zone-count');
-      if (!a) return;
-      ev.preventDefault();
-      const zone = a.getAttribute('data-zone');
-      const empType = a.getAttribute('data-emptype');
-      const category = a.getAttribute('data-category');
-      // call detailed loader with explicit params
-      loadDetailed(empType, category, zone);
+
+      let titleSuffix = parkName ? ` — Park ${parkName}` : '';
+      modalTitle.innerText = `${empType} — Zone ${zoneVal}${titleSuffix} — ${category.toUpperCase()} (${rawFrom} → ${rawTo})`;
+      modalBody.innerHTML = createLoader();
+      // Show modal immediately with loader
+      new bootstrap.Modal(modalEl).show();
+
+      try {
+        let url = `${apiBase}/detailed?empType=${encodeURIComponent(empType)}&category=${encodeURIComponent(category)}&fromDate=${encodeURIComponent(fromDate)}&toDate=${encodeURIComponent(toDate)}`;
+        url += `&zone=${encodeURIComponent(zoneVal)}`;
+        if (parkName) {
+          url += `&parkName=${encodeURIComponent(parkName)}`;
+        }
+        const res = await fetch(url);
+        if (!res.ok) {
+          const text = await res.text().catch(() => '');
+          modalBody.innerHTML = `<div class="alert alert-danger">Error ${res.status}: ${text}</div>`;
+          return;
+        }
+        const data = await res.json();
+        if (!Array.isArray(data)) { modalBody.innerText = JSON.stringify(data); return; }
+        if (data.length === 0) { modalBody.innerHTML = '<div class="alert alert-info">No records</div>'; return; }
+
+        // Define columns to display based on category
+        let displayColumns = [];
+        const catLower = (category || 'present').toLowerCase();
+
+        if (catLower === 'present') {
+          displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
+          if (empType === 'Park') displayColumns.push('park_name');
+          displayColumns.push('intime', 'inphoto', 'outtime', 'outphoto');
+        } else if (catLower === 'leave') {
+          displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
+          if (empType === 'Park') displayColumns.push('park_name');
+          displayColumns.push('leavedatetime', 'leaveby');
+        } else if (catLower === 'od') {
+          displayColumns = ['enrollment_id', 'name', 'designation', 'department'];
+          if (empType === 'Park') displayColumns.push('park_name');
+          displayColumns.push('odtime', 'odby');
+        } else {
+          displayColumns = Object.keys(data[0]);
+        }
+
+        // Filter data to include only displayColumns, handle case-insensitive matching
+        const filteredData = data.map(row => {
+          const filtered = {};
+          displayColumns.forEach(col => {
+            // Try exact match first, then case-insensitive
+            const key = Object.keys(row).find(k => k === col || k.toLowerCase() === col.toLowerCase());
+            if (key) {
+              filtered[col] = row[key];
+            }
+          });
+          return filtered;
+        });
+
+        function prettyName(key) {
+          const map = {
+            enrollment_id: 'Enrollment ID',
+            name: 'Name',
+            designation: 'Designation',
+            department: 'Department',
+            park_name: 'Park Name',
+            intime: 'In Time',
+            inphoto: 'In Photo',
+            outtime: 'Out Time',
+            outphoto: 'Out Photo',
+            leavedatetime: 'Leave DateTime',
+            leaveby: 'Leave By',
+            odtime: 'OD DateTime',
+            odby: 'OD By',
+          };
+          if (map[key]) return map[key];
+          return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        }
+
+        let html = '<div class="table-responsive"><table class="table table-sm table-bordered"><thead><tr>';
+        // add serial number header
+        html += '<th>S.No</th>';
+        displayColumns.forEach(k => {
+          html += `<th>${prettyName(k)}</th>`;
+        });
+        html += '</tr></thead><tbody>';
+        filteredData.forEach((row, idx) => {
+          html += '<tr>';
+          // serial number cell
+          html += `<td>${idx + 1}</td>`;
+          displayColumns.forEach(k => {
+            const val = row[k];
+            // Handle photo columns - show as thumbnail if it's an image
+            if ((k === 'inphoto' || k === 'outphoto') && val) {
+              html += `<td><img src="${val}" alt="photo" style="max-width: 100px; max-height: 100px; cursor: pointer;" onclick="this.style.maxWidth='500px'; this.style.maxHeight='500px';"></td>`;
+            } else {
+              html += `<td>${val != null ? val : '-'}</td>`;
+            }
+          });
+          html += '</tr>';
+        });
+        html += '</tbody></table></div>';
+        modalBody.innerHTML = html;
+      } catch (e) {
+        modalBody.innerHTML = `<div class="alert alert-danger">Error: ${e}</div>`;
+      }
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      setDefaults();
+      document.getElementById('loadSummaryBtn').addEventListener('click', () => {
+        const rawFrom = document.getElementById('fromDate').value;
+        const rawTo = document.getElementById('toDate').value;
+        if (rawFrom && rawTo && rawTo < rawFrom) {
+          alert('To date must be the same as or later than From date');
+          return;
+        }
+        loadAbstractCounts(); loadZoneSummary();
+      });
+      // delegate clicks: zone links -> park-wise summary, zone counts -> detailed, park counts -> park-details
+      document.addEventListener('click', (ev) => {
+        const zoneLink = ev.target.closest && ev.target.closest('.zone-link');
+        if (zoneLink) {
+          ev.preventDefault();
+          const zone = zoneLink.getAttribute('data-zone');
+          loadParkWiseSummary(zone);
+          return;
+        }
+
+        const zoneAnchor = ev.target.closest && ev.target.closest('.zone-count');
+        if (zoneAnchor) {
+          ev.preventDefault();
+          const zone = zoneAnchor.getAttribute('data-zone');
+          const empType = zoneAnchor.getAttribute('data-emptype');
+          const category = zoneAnchor.getAttribute('data-category');
+          // For Park: show park-wise summary; For NULM: show employee details directly
+          if (empType === 'Park') {
+            loadParkWiseSummary(zone, category);
+          } else {
+            loadDetailed(empType, category, zone);
+          }
+          return;
+        }
+
+        const parkAnchor = ev.target.closest && ev.target.closest('.park-count');
+        if (parkAnchor) {
+          ev.preventDefault();
+          const zone = parkAnchor.getAttribute('data-zone');
+          const type = parkAnchor.getAttribute('data-type');
+          loadParkDetails(zone, type);
+          return;
+        }
+
+        const parkEmployeeAnchor = ev.target.closest && ev.target.closest('.park-employee-count');
+        if (parkEmployeeAnchor) {
+          ev.preventDefault();
+          const zone = parkEmployeeAnchor.getAttribute('data-zone');
+          const park = parkEmployeeAnchor.getAttribute('data-park');
+          const category = parkEmployeeAnchor.getAttribute('data-category');
+          loadDetailed('Park', category, zone, park);
+          return;
+        }
+      });
+      // set date constraints and load initial
+      setDateLimits();
+      // load initial
+      loadAbstractCounts();
+      loadZoneSummary();
     });
-    // set date constraints and load initial
-    setDateLimits();
-    // load initial
-    loadAbstractCounts();
-    loadZoneSummary();
-  });
-
-  })();
+
+  }) ();
   </script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- Park-wise Summary Modal -->
+  <div class="modal fade" id="parkWiseSummaryModal" tabindex="-1" aria-labelledby="parkWiseSummaryModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="parkWiseSummaryModalLabel">Park-wise Summary</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body" id="parkWiseSummaryModalBody">
+          Loading...
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Detail modal -->
   <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-xl modal-dialog-scrollable">
@@ -411,4 +559,5 @@
     </div>
   </div>
 </body>
-</html>
+
+</html>
\ No newline at end of file