diff --git a/pgr/useridwisereport/zonewise.html b/pgr/useridwisereport/zonewise.html
index 2f6249f..7b3c082 100644
--- a/pgr/useridwisereport/zonewise.html
+++ b/pgr/useridwisereport/zonewise.html
@@ -1,214 +1,156 @@
 <!DOCTYPE html>
-<html lang="en" dir="">
-<html xmlns:th="http://www.thymeleaf.org">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
 <head th:replace="~{fragments/modules/base/head :: head}"></head>
-    <body>
-        <!--[if lt IE 8]>
-            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-        <![endif]-->
+<body>
+	<div class="wrapper">
+		<!-- header top menu Start -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+		<!-- header top menu end -->
+
+		<div class="page-wrap">
+			<!--=============== Left Menu side Start ================-->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+			<!--=============== Left side End ================-->
+			<div class="main-content">
+				<div class="container-fluid">
+					<div class="page-header">
+						<div class="row align-items-end">
+							<div class="col-lg-6">
+								<div class="page-header-title">
+									<i class="fas fa-receipt bg-blue"></i>
+									<div class="d-inline">
+										<h5>PGR COMPLAINT Zone Wise</h5>
+										<span>PGR COMPLAINT Zone Wise Reports list module</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-6">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item">PGR Complaints</li>
+										<li class="breadcrumb-item">User ID Wise Reports</li>
+										<li class="breadcrumb-item active" aria-current="page">Zone
+											Wise</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
 
-        <div class="wrapper">
-			<!-- header top menu Start -->
-			 <header th:replace="~{fragments/modules/base/header :: header}"></header>
-			<!-- header top menu end -->
+					<hr>
+					<div class="row">
+						<div class="col-md-12">
+							<div class="card">
 
-            <div class="page-wrap">
-				<!--=============== Left Menu side Start ================-->
-				<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
-				<!--=============== Left side End ================-->
-                <div class="main-content">
-                    <div class="container-fluid">
-                        <div class="page-header">
-                            <div class="row align-items-end">
-                                <div class="col-lg-6">
-                                    <div class="page-header-title">
-                                        <i class="fas fa-receipt bg-blue"></i>
-                                        <div class="d-inline">
-                                            <h5>PGR COMPLAINT Zone Wise</h5>
-                                            <span>PGR COMPLAINT Zone Wise Reports list module</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-lg-6">
-                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
-                                        <ol class="breadcrumb">
-                                            <li class="breadcrumb-item">
-                                                <a href="/index"><i class="ik ik-home"></i></a>
-                                            </li>
-                                            <li class="breadcrumb-item">PGR Complaints</li>
-                                            <li class="breadcrumb-item">User ID Wise Reports</li>
-                                            <li class="breadcrumb-item active" aria-current="page">Zone Wise</li>
-                                        </ol>
-                                    </nav>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <hr>
-                        <div class="row">
-                            <div class="col-md-12">
-                                <div class="card">
-                                    
-                                    <div class="card-block">
-                                          <!-- <form class =""  action="" onsubmit="getReport()">
-        <div class="row">
-        
-        <div class="col">
-	     <label for="fromDate" class="">From Date</label>
-	     <input type="date" class="form-control" id="fromDate" name="sFrDate" data-date-format="dd/mm/yy" required>
-	    </div>
-	    
-	    <div class="col">
-	     <label for="toDate" class="">To Date</label>
-	     <input type="date" class="form-control" id="toDate" name="sToDate" data-date-format="dd/mm/yy" required>
-	    </div>
+								<div class="card-block">
 
-        <div class="col">
-           <br>
-           <button type="submit" class="btn btn-sm btn-primary btn-lg float-right">search</button>
-	    </div>
-	    </div>
-        </form>    -->                  
-                                            
-       
-                                    <form class="" action="" onsubmit="getReport()">
+									<form class="" action="" onsubmit="getReport()">
 										<div class="row">
 
-											<div class="col-md-6">
-												<label for="fromDate" class="">From Date</label> 
-												<input type="date" class="form-control" id="fromDate"
-													name="sFrDate" th:value="${sFrDate}" data-date-format="dd/mm/yy" required>
+											<div class="col-md-3">
+												<label for="fromDate" class="">From Date</label> <input
+													type="date" class="form-control" id="fromDate"
+													name="sFrDate" th:value="${sFrDate}"
+													data-date-format="dd/mm/yy" required>
 											</div>
 
 
 
-											<div class="col-md-6">
-												<label for="toDate" class="">To Date</label> <input 
-													type="date" class="form-control" id="toDate" name="sToDate" th:value="${sToDate}"
-													data-date-format="dd/mm/yy" required>
+											<div class="col-md-3">
+												<label for="toDate" class="">To Date</label> <input
+													type="date" class="form-control" id="toDate" name="sToDate"
+													th:value="${sToDate}" data-date-format="dd/mm/yy" required>
 											</div>
+
+											<div class="col-md-3">
+
+												<label for="DepartmentDropdown">Select Department:</label> <select
+													class="form-control" name="DEPT_NAME" id="zone">
+													<option value='0' th:selected="${DEPT_NAME == 0}">----
+														All ----</option>
+													<option th:each="complaintdepartment : ${complaintdept}"
+														th:value="${complaintdepartment.name}"
+														th:text="${complaintdepartment.name}"
+														th:selected="${DEPT_NAME == complaintdepartment.name}"></option>
+												</select>
+
 											</div>
-											
-											<div class="col-md-12">
-							    <label for="deptName">Select Department:</label>  <select 
-								class="form-control text-center" name="DEPT_NAME" id="zone">
-								<option value="0">All Zone</option>
-								<option value="NA-THIRUVOTTIYUR"
-									th:selected="${DEPT_NAME=='NA-THIRUVOTTIYUR'}">NA-THIRUVOTTIYUR</option>
-								<option value="NB-MANALI"
-									th:selected="${DEPT_NAME=='NB-MANALI'}">NB-MANALI</option>
-								<option value="NC-MADHAVARAM"
-									th:selected="${DEPT_NAME=='NC-MADHAVARAM'}">NC-MADHAVARAM</option>
-								<option value="ND-TONDIARPET"
-									th:selected="${DEPT_NAME=='ND-TONDIARPET'}">ND-TONDIARPET</option>
-								<option value="NE-ROYAPURAM"
-									th:selected="${DEPT_NAME=='NE-ROYAPURAM'}">NE-ROYAPURAM</option>
-								<option value="NF-THIRU-VI-KA NAGAR"
-									th:selected="${DEPT_NAME=='NF-THIRU-VI-KA NAGAR'}">NF-THIRU-VI-KA
-									NAGAR</option>
-								<option value="NG-AMBATTUR"
-									th:selected="${DEPT_NAME=='NG-AMBATTUR'}">NG-AMBATTUR</option>
-								<option value="NH-ANNA NAGAR"
-									th:selected="${DEPT_NAME=='NH-ANNA NAGAR'}">NH-ANNA
-									NAGAR</option>
-								<option value="NJ-TEYNAMPET"
-									th:selected="${DEPT_NAME=='NJ-TEYNAMPET'}">NJ-TEYNAMPET</option>
-								<option value="NK-KODAMBAKKAM"
-									th:selected="${DEPT_NAME=='NK-KODAMBAKKAM'}">NK-KODAMBAKKAM</option>
-								<option value="NL-VALASARAVAKKAM"
-									th:selected="${DEPT_NAME=='NL-VALASARAVAKKAM'}">NL-VALASARAVAKKAM</option>
-								<option value="NM-ALANDUR"
-									th:selected="${DEPT_NAME=='NM-ALANDUR'}">NM-ALANDUR</option>
-								<option value="NN-ADYAR" th:selected="${DEPT_NAME=='NN-ADYAR'}">NN-ADYAR</option>
-								<option value="NP-PERUNGUDI"
-									th:selected="${DEPT_NAME=='NP-PERUNGUDI'}">NP-PERUNGUDI</option>
-								<option value="NQ-SHOZHINGANALLUR"
-									th:selected="${DEPT_NAME=='NQ-SHOZHINGANALLUR'}">NQ-SHOZHINGANALLUR</option>	
-								<option value="S-Chief Engineer Office (SWD, BRR, SP)"
-									th:selected="${DEPT_NAME=='S-Chief Engineer Office (SWD, BRR, SP)'}">S-Chief
-									Engineer Office (SWD, BRR, SP)</option>
-								<option value="SP-SPECIAL PROJECTS"
-									th:selected="${DEPT_NAME=='SP-SPECIAL PROJECTS'}">SP-SPECIAL
-									PROJECTS</option>		
-							</select>
-							</div>
-											<div class="col-md-6" style="display: flex; justify-content: space-between; align-items: center; margin-top:11px;">
-											<button type="submit" class=" btn  btn-sm btn-primary btn-l">search</button>
+
+											<div class="col-md-3"
+												style="display: flex; justify-content: space-between; align-items: center; margin-top: 25px;">
+												<button type="submit" style="width: 100%; height: auto;"
+													class=" btn  btn-sm btn-primary btn-l">search</button>
 											</div>
-                                   
+
+										</div>
 									</form>
-									<br>
-									<br>
-                                    
-                                        <div>
-											<table id="assetDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
-                                                <thead class="thead-dark">
-	                                                <tr role="row">
-														<th class="text-center no-sort" width="1%">S.No</th>
-														<th class="text-center" width="10%">Department</th>
-						                                <th class="text-center" width="10%">User  Name</th>
-						                                <th class="text-center" width="10%">Mobile Number</th>
-						                                <th class="text-center" width="10%">Nos</th>			                               
-													</tr>
-                                                </theadclass="thead-dark">
-                                                <tbody>
-	                                                <tr th:each="zonewise, i : ${zonewiselist}" class="zonewisereportlist">
-						                                <td th:text="${i.count}">0</td>
-														<td class="text-center" th:text="${zonewise.DEPT_NAME}"></td>
-						                                <td class="text-center" th:text="${zonewise.USER_NAME}"></td>
-						                                <td th:text="${zonewise.MOBILENO}"></td>
+									<br> <br>
 
-													 <td><a
-th:href="@{'/pgr/zonecomplaintlist/?Deptid=' + ${zonewise.DEPTID} + '&PgrUserID=' + ${zonewise.IDUSER} + '&nos=' + ${zonewise.NOS} + '&sFrDate=' + ${#strings.replace(sFrDate, '/', '%2F')} + '&sToDate=' + ${#strings.replace(sToDate, '/', '%2F')}}"
-														
-														
-														target="_self" th:text="${zonewise.NOS}"
-														style="color: blue; text-decoration: underline;cursor:default;"> View
-															details </a></td> 
-<!--  th:href="@{'/pgr/zonecomplaintlist/?Deptid=' + ${zonewise.DEPTID} + '&PgrUserID=' + ${zonewise.IDUSER} + '&nos=' + ${zonewise.NOS}}"-->
-													<!--  <td>
-                <a th:href="@{'/pgr/zonecomplaintlist/' + ${zonewise.NOS} + '?iPenReOpen=' + ${iPenReOpen} + '&Complainttype=' + ${sComplaintType} + '&RptID=' + ${rptId} + '&Deptid=' + ${deptId} + '&ZoneAge=' + ${zoneAge} + '&FrDate=' + ${fromDate} + '&ToDate=' + ${toDate}+ '&PgrUserID=' + ${pgruserid}}"
-                    target="_self" th:text="${zonewise.NOS}" style="color: blue; text-decoration: underline;">
-                    View details
-                </a>
-            </td>  -->
+									<div>
+										<table id="assetDatatable"
+											class="table table-striped table-bordered table-hover dataTable"
+											role="grid" width="100%">
+											<thead class="thead-dark">
+												<tr role="row">
+													<th class="text-center no-sort" width="1%">S.No</th>
+													<th class="text-center" width="10%">Department</th>
+													<th class="text-center" width="10%">User Name</th>
+													<th class="text-center" width="10%">Mobile Number</th>
+													<th class="text-center" width="10%">Nos</th>
+												</tr>
+											</thead class="thead-dark">
+											<tbody>
+												<tr th:each="zonewise, i : ${zonewiselist}"
+													class="zonewisereportlist">
+													<td th:text="${i.count}">0</td>
+													<td class="text-center" th:text="${zonewise.DEPT_NAME}"></td>
+													<td class="text-center" th:text="${zonewise.USER_NAME}"></td>
+													<td class="text-center" th:text="${zonewise.MOBILENO}"></td>
 
-													<!-- <td>
-                                                        <a th:href="@{'/pgr/zonecomplaintlist/' + ${zonewise.NOS}}" target="_self" th:text="${zonewise.NOS}" style="color: blue; text-decoration: underline;">View details</a>
-                                                        </td> -->
-														
-						                            </tr>
-                                                 </tbody>
-                                                <tfoot class="thead-dark">
-	                                                <tr>
-														<th class="text-center">S.No</th>
-														<th class="text-center">Department</th>
-						                                <th class="text-center">User Name</th>
-						                                <th class="text-center">Mobile Number</th>
-						                                 <th class="text-center">Nos</th>
-													</tr>
-                                                </tfoot>
-                                            </table>
-                                        </div>
-                                      
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                    </div>
-                </div>
 
-                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
-            </div>
-        </div>
-		
-		
-        
-        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
-       
-        <script th:replace="~{fragments/modules/base/script :: script}"></script>
-        <script>
+
+													<td style="text-align: center;"><a
+														th:href="@{'/pgr/zonecomplaintlist/?Deptid=' + ${zonewise.DEPTID} + '&PgrUserID=' + ${zonewise.IDUSER} + '&nos=' + ${zonewise.NOS} + '&sFrDate=' + ${#strings.replace(sFrDate, '/', '%2F')} + '&sToDate=' + ${#strings.replace(sToDate, '/', '%2F')}}"
+														style="text-align: center; color: blue; text-decoration: underline; cursor: default;"
+														target="_blank" th:text="${zonewise.NOS}">
+															View details </a></td>
+
+
+												</tr>
+											</tbody>
+											<tfoot class="thead-dark">
+												<tr>
+													<th class="text-center">S.No</th>
+													<th class="text-center">Department</th>
+													<th class="text-center">User Name</th>
+													<th class="text-center">Mobile Number</th>
+													<th class="text-center">Nos</th>
+												</tr>
+											</tfoot>
+										</table>
+									</div>
+
+								</div>
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script>
 			$(document).ready(function() {
 				
 				// DataTables buttons configuration
@@ -288,12 +230,33 @@ th:href="@{'/pgr/zonecomplaintlist/?Deptid=' + ${zonewise.DEPTID} + '&PgrUserID=
 		}
 			
 			 function getReport(){
-				alert("wait for response..")
+				alert("wait for response to load data...")
 				let sFrDate = document.getElementById("fromDate").value;
 				let sToDate = document.getElementById("toDate").value;
 				let DEPT_NAME  = document.getElementById("zone")
 				window.location.href='/zonewise?sFrDate='+sFrDate+'&sToDate='+sToDate+'&DEPT_NAME='+DEPT_NAME;
 			} 
+			 
+			 //Departments Dropdowns
+			 
+			    $(document).ready(function () {
+			        $.ajax({
+			            url: '/pgr/useridwisereport/zonewise', // Change this URL to your endpoint
+			            type: 'GET',
+			            success: function (data) {
+			                var dropdown = $('#DepartmentDropdown')
+			                $.each(data, function (index, complaintdepartment) {
+			                    dropdown.append($('<option></option>').attr('value', complaintdepartment.id).text(complaintdepartment.name));
+			                });
+			            },
+			            error: function () {
+			                alert('Error loading departments.');
+			            }
+			        });
+			    });
+
+			 
+			 
 		</script>
-    </body>
+</body>
 </html>